Humanised forms

The simple web form has been reinvented to become more conversational, engaging and immersive: in short, more human.

Progressive disclosure, a popular design technique, is key to this evolution. It aims to reduce the complexity of web design by displaying and requesting only vital information from users.

The selection of information is based on careful research to help designers reduce clutter and think carefully about how to avoid confusing the end user.

Seemingly minor design changes can have an enormous impact on conversion rates. In an example from LukeW, using A/B testing, users’ reluctance to enter their mobile number was responsible for a 37% drop-off rate, even though this information was not required. Interestingly, conversions doubled when ‘(optional)’ was included next to the mobile input field.

Luke has also revealed how results could be amplified further using ‘Mad Libs’ style forms. These use a narrative format leaving blank input fields: ‘I want my user name to be_____, and my password should be ___­­__’.

TypeForm similarly aspires to create forms that engage users more. It does this by creating forms that adapt to the usability of any device, also providing developers with the ability to add pictures, backgrounds, change fonts, and enable users to express their answers in more engaging ways (e.g. with hearts or thumbs up instead of stars for ratings).

The resulting experience draws users into answering more questions and being more likely to give honest answers.  

Life beyond the hamburger

Hamburger menus have become one of the standard design methods used to create an effective, streamlined navigation system.

The name is a playful reference to the three dash icon used to activate the full menu to the left- or right- on desktops, tablets and smartphones.

Only the hamburger icon is constantly visible in the website header, making more screen real estate available for the logo, search bar and content. Consequently, this technique has become particularly popular in mobile app development.

The hamburger menu is used to streamline Target’s ‘Awesome Shop’, with all options hidden until the user taps.

However, recent research indicates the hamburger could be responsible for decreasing engagement on larger sites, as it places navigation options out of reach, both physically and mentally, following the old ‘out of sight, out of mind’ adage.

This has sparked an ongoing design experiment, exploring life beyond the hamburger.

Larger ecommerce stores are testing the multi-level push menu approach. These mimic the native interface on Xbox consoles, or Android’s Evernote app. Their push menu is capable of containing nested sub-menus, invaluable for websites with a high amount of content.

A quick look at HMV’s website shows the multi-level push menu in action: it helps to free up precious space towards the top, left, and right of the page usually reserved for traditional menus.

As with the hamburger, it’s best to think carefully about this type of interface and test its usability with real users before committing to it.

HMV’s multi-level push menu (to the right of the screen) in action.

Another exciting solution has already been adopted in Facebook’s and Twitter’s native apps. The tab bar avoids hiding key navigation functions, by spreading a row of constantly visible buttons, either at the top or bottom of the screen (see the tabs at the bottom of the Twitter interface in the image below).

Ironically, the tab bar is closer to traditional style menus than the hamburger, but it can be combined with the hamburger and also used to push notifications to the user. A/B tests have shown that, in comparison with the hamburger, the tab bar achieves a 56% higher average weekly frequency of use.

Twitter’s tab bar (at the bottom of the screen) prevents key features of the app from being hidden. 

Live, context-driven communication

Using Web Real Time Communication (Web RTC) technology, websites can be transformed into voice, video and real-time chat tools, amplifying the standard ‘shopping experience’ and transforming the way users interact with businesses online.

During 2013, Google, Mozilla and Microsoft announced Web RTC integration into Chrome, Mozilla and Internet Explorer. This could give users the freedom to get in touch with businesses at the click of a button, using audio, video, or sharing data, with no need to download any additional software or plugins.

To see the tool in action, have a look at the RTC video demo with Todd Simpson, Mozilla’s CIO, and Hugh Finnian, Google Chrome’s Product Management Director.

The beauty of this technology is that it can work across different operating systems and devices, providing the device has a compatible web browser.

All the user needs to enjoy the experience of a Web RTC is a modern web browser, front-facing camera, microphone and a physical or touch keyboard to communicate in writing.

Context-based communication is a key advantage of this technology. As an example, in the context of ecommerce, WebRTC can be used to help customers who are shopping (online) for expensive or highly technical items, by bringing up a ‘live person’ (or even a personal assistant) to help them with their queries and improve their general experience. These types of interaction are also effective for customer support.

Currently, WebRTC presents a real opportunity to stand out, as there are few examples of businesses using it effectively. Amazon’s Mayday button on the Kindle Fire connected users with a customer service representative in just nine seconds on Christmas Day and has provided a free, around-the-clock service since.

This kind of service surely inspires a dedicated following for the brand and users who may be unlikely to buy from a provider without this level of support in the future.

So what are the implications of all this? 

Users are accustomed to fast, seamless and engaging journeys. They are more likely to ‘drop-out’ if your web experience is tedious, difficult to navigate or they can’t find the answers they need.

Therefore, if you haven’t invested in giving your visitors a slick user experience (UX) and the latest in interaction design you are probably losing sales.

Ecommerce providers can increase their sales by making the most of the latest technology, engaging their customers in a closer relationship, and creating an enviable reputation for customer experience.  

Do remember, when changing your interface, to test it thoroughly, conducting face to face usability research with relevant users.