Everyone is using their mobile devices all the time. Designers have the constant challenge of designing for their users and how they use their devices while maintaining the integrity of the content and accessibility of the app or website that is being interacted with. In order to make it a great experience, the designer needs to know the devices they are designing for, the principal uses and how the user likes to interact with them. There are a lot of factors, some are complicated and some are as simple as knowing the size of the average thumb.
WHO ARE YOUR USERS?
Different demographics use products differently and this may affect how they hold their mobile device and on top of that, there are six different ways users hold a smartphone.
HOW WILL IT BE USED?
Most apps while they are doing other things. They are being “mobile” and walking the turtle, watching Netflix, working out, eating soup. Where your people use the device is affects how they use it. A running app has a different way of being used than does a banking app.
Because of the way users view and touch their screens, the most important content should be in the center with the other key navigation controls at the bottom, though in larger devices like tablets, this will change a bit. Important navigational elements need to move to the sides of the screen.
Designers need to display the right content and the right amount of content at the appropriate time and they should avoid giving users all the content at once.
BEHOLD THE NOBLE THUMB
Thumbs haven’t received this much attention since the hitch-hiking craze of the 1970s. With our keyboards, we keep those thumbs around merely to hit the space bar, but with so much of our “computing” being done on smaller screens, designers have had to give the thumb a lot more attention.
Creating an interface that is thumb-friendly and that allows the user to cradle their phone in their preferred manner is a constant challenge for developers. Fingers come in different sizes, users have different ways of holding their phones and some have been so inconsiderate as to be left-hand dominate.
But the thumb is key, precisely because so many users are holding their phones in one hand, using four fingers to safely grasp it and relying on their magical opposable thumb to tap and scroll on the screen. The home button is at the bottom middle for a reason. If all the “action” on your phone interface happened in the upper left corner, no right-handed person would be able to comfortably reach it.
There is an arc that our thumbs make that sweeps from the bottom left to the (near) top right and ideally, all of the important parts of the app will be reachable within the boundaries of that arc. The phone interface must be designed for the natural flow of the “thumb zone.”
THE THUMB ZONE
For any website or app, the designer needs to figure out where to place the navigational triggers and hooks.
If the app has a long list of links, then they should use a full-screen overlay menu. This type of menu affords space to organize the list, social buttons and other useful content. The pattern scales well between both desktop and mobile devices, and the menu provides an opportunity to place all the clickable elements within the thumb zone.
If the app does not have a long list of links, then a “sticky” menu might be the answer. A sticky menu attaches to either the top or bottom of the screen and provides a home for many links.
For large websites, mixing menus might work well. Mixing menus can get complex, so it’s best to prioritize menu links based on their importance in the app. Sticky menus are great for commonly visited links, whereas full-screen and drawer menus come in handy for important but less visited links.
In addition to keeping important navigation items within the thumb zone, placing links outside of the friendly zone is acceptable. The rule is to keep frequently used links in the easy-to-reach zone and to keep infrequently used links in the harder-to-reach zone.
Mobile devices and languages will change, but as long as there are touchscreens, the thumb zone will remain a critical part of design. A responsive web design will make the user experience better by placing elements within the easy reach of thumbs.
Small touch targets can lead to errors and when small touch targets are near each other, users can accidentally initiate unintended actions. Imagine if “launch nuclear warhead” is too close to “launch funny cat video.”
Apparently, the average width of the adult index finger converts to 45 to 57 pixels. A touch target of this size allows the user’s finger to fit inside the target and the edges of the target are visible when tapped.
A small target slows users down because they have to pay extra attention to hit the target accurately. A finger-sized target gives users enough room to hit it without having to worry about accuracy. The thumb being bigger than the average finger requires a 72-pixel target.
Finger-sized targets are much easier to apply on a tablet than a mobile device because there is more screen space available. They can be used liberally without the fear of taking up too much space and improve tablet usability instantly.
However, mobile devices are where users have the most trouble hitting touch targets. And that’s where finger-sized targets are needed the most. The challenge for designers is to figure out how to make the most of finger-sized targets on the mobile screen. This might require using fewer touch targets than they normally would. This has the advantage of forcing designers to keep their navigation simple and minimal.
Finger-friendly design is the new design standard for mobile websites to follow everywhere. By following some usability principles, designers can make the experience more pleasant and enjoyable for users, no matter the device they are using.
Getting your mobile app or website comfortable to use on a mobile device is absolutely critical to gaining acceptance and consistent use. Users might not consciously know why they aren’t enjoying the experience, but their fingers will tell the tale and they’ll soon find finger-friendlier pastures to stroll across.