Users expect the best experience from your website wherever they are, PC, laptop, tablet or smart phone, taking an omnichannel approach. This does not mean your site should be the same across all devices, but it does mean your site should display well and be easy to use on all devices. It is important not only for the user but for your business as 57% of users say they won’t recommend a business with a poorly designed mobile site. So how do you avoid falling into the “poorly designed mobile site” category? You need to consider the UX (user experience) from a mobile device which is entirely different to the UX on a desktop device.
The Thumb Zone
A good place to start is the “thumb zone“, a term coined in Steven Hoober’s 2011 book “Designing Mobile Interfaces”. The “thumb zone” is the area in which it is naturally comfortable to interact with a mobile device with one or both thumbs only.
Why the thumbs?
Hoober’s research shows that 49% of people use their smartphones with one hand, relying on their thumbs to interact with their mobile device.
The importance of ergonomics
The reason why the “thumb zone” is so important is because it is very often over-looked when designing a website. If you can incorporate the ergonomic use of your website for your users, you will greatly improve the UX (user experience).
If you would like to learn more about the “thumb zone” read Samantha Ingram’s article “The Thumb Zone: Designing For Mobile Users”.
Mobile menus used to be a simple drop-down list at the top of your website, however times have changed and you can offer your users a better experience. If we consider the “thumb zone” theory, your menu shouldn’t be at the top at all if you plan on high usage.
Why move my navigational menu?
Well if you think about it, your thumbs rest most comfortably at the bottom of the mobile screen. The higher up you go, the more of a strain it is for your thumb – making the website uncomfortable to use and potentially dissuade interaction with on-page items. Using the “thumb zone” theory we should be aiming to place high usage menu navigation items at the bottom and towards the middle of our screens (to cater for left and right handed users). This doesn’t mean you can’t still place navigational items at the top of your screen, just make sure they aren’t as important as the ones you place at the bottom.
Of course this is dependent on the navigational methods used on your site. If you have a site where you can get to everywhere ‘on page’, then the main navigation at the top is fine. There’s also the consideration of ‘best practice’ versus ‘expect practice’. For example, buy buttons at the bottom of the page view is good, but the main navigation will be expected to be in the header. But, just for good measure, make sure your navigation is easy to read, is differentiated from the rest of the content and has plenty of click area for “fat fingers”.
“Fat finger” syndrome is when the target area is too small causing the user to accidentally click on the wrong target zone. Target zones can be anything from links, through to navigational items and buttons. A target zone study showed that the larger the target zone, the lower user error occurred so to avoid “fat finger” syndrome on your website, you should make sure your target zones are big enough for a thumb to land on comfortably. The average width of a thumb is 2.5cm wide, which converts to 72pixels wide, so make sure all of your buttons, navigational items and any other target zones are at least this wide wherever possible.
So far we have looked at the practicalities of your website for mobile users, but we haven’t looked at the technical issues effecting your user. Using a mobile device means your user is probably going to have issues with connectivity at some point. To try to help the user, you should lower your site’s download footprint. Likewise, some users may have slow hardware devices which often affects things such as transitions and animations on your website. If a user’s device has slow hardware is will make the animations appear “laggy” which could wreck the user experience.
In both cases, good programming is paramount. Try to use CSS instead of images for element decoration where possible, consider the load priority of scripts and styles to deliver the core page first, and serve up appropriate error messages if the user’s connection or device is too slow for your website to run.
Another area for user error is form filling. This is mostly caused by “fat finger” syndrome, but also because it is really difficult to read text in such a tiny space! So keep your form fields to a minimum.
Not only is it awkward for the user, but it is also frustrating for you when you receive erroneous data. To elevate some of the data error you may want to consider auto-complete functionality, geo-data, inline validation, and address validators for correcting user inputs as they are typed without the need to submit the page. You can also leverage the native browsers input methods by correctly defining input types (e.g. iPhone date pickers are the spin wheel thing, a phone input launches a dealing keypad rather than the typing one).
Finally, according to Google research, 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead.