How to Up Your UX Best Practices for Mobile Apps - pt2
One central guideline for a designer is to have a clear understanding of the medium, the way users will interact with our design. It can be a television, a computer, a book, or any number of things: design is everywhere. A mobile phone is not just a small computer; it has its own unique features and limitations; understanding them is the key to delivering a great user experience.
Most Users Hold the Phone with Just One Hand: So Should We Design for One Hand?
An interesting study about how people hold their smartphone while using it (you can find it here) revealed that most users employ only one finger. That was probably easy to guess, but it is interesting to note that more than half of them use just one hand, while the rest is comfortable with the aid of the other hand also for a better grasp, therefore keeping the device in a sort of “cradled” position. There’s also a small, but still considerable percentage of “two-handed” users, although they seldom use the phone in landscape mode.
The first thing that may pop up in the head is that we should design an interface with the most important controls placed within thumb’s reach. That’s certainly a point, if we keep in consideration that mobile screen sizes are still on the enlargement trend: it’s pretty easy to reach all of the screen’s areas with our thumb on an iPhone 4, but on an iPhone 7 Plus most of them need to use the other hand too. An application with its core features all managed just by the thumb, while employing only one hand, is surely a killer one. This must not be an obsession though: users change the way they hold the phone frequently, depending on the task they are currently undertaking. But there’s one thing that we can be sure of: an application in which the most frequently used controls are in the top-bar and in the bottom-bar as well, will be hard to use, especially on devices with a large screen.
Follow Color Guidelines: They Are Quick and Simple
There are well established color guidelines for websites and they are effective, strengthened and refined over many years on the World Wide Web. They apply to mobile apps as well but you must be aware of a substantial difference: mobile UIs are simpler, smaller and more focused.
Color increases its importance in mobile interfaces, becoming a major engagement factor, and following some simple guidelines can make our app more successful.
- Main call-to-action buttons should obviously stand out but they don’t necessarily have to be red or orange: these colors often indicate a denial and are usually associated with “delete” or “cancel” buttons.
- Shades of color create a hierarchy with the palest tints defining the least important elements.
- Monochrome color schemes can be appealing and successful, but don’t forget to add a contrasting color for the most important call-to-actions.
- There are some colors commonly associated with some industry fields and, although they are not written in stone, users feel more comfortable in those schemes.
- If you think that a low contrast text might be elegant, consider that when users are outdoors, in bright light, it will probably be unreadable.Â
Fingers Come in All Sizes and Shapes
Apple guidelines for iOs says that a button should be at least 44 px, but a study says that the average finger size is a bit more (45-57 px); Google and Microsoft suggest even smaller touch areas. It would not be that wrong if we said that most buttons in mobile apps are much smaller than a standard finger and so, not easy to press. But wait, what about people with big fingers? They will have much more trouble of course, but making our buttons 80 pixels wide may not be the most practical solution since most mobile phones still have a viewport no wider than 320 px: we have to find a compromise. Avoiding small and poorly designed buttons that are hard to press is always a valid recommendation, but we need to pay special attention to placing two small buttons too near to each other. A user with a finger bigger than average may press the wrong button – it’s not nice to choose “subscribe” instead of “cancel”, right?
One Screen, One Task
The web is full of forms and filling them has never been a pleasure for users. Trying to improve the form filling experience, designers have implemented multi-steps forms, since focusing on one task at a time is less stressing and annoying. This principle makes sense also when designing a mobile app: one screen for one major action. Following this guideline helps us to make the UI design clearer (we have fewer elements on the screen), easier to use (less actions means less complications) and even easier to produce.
Feedback and Micro-Interactions Are One of the Best Ways to Care for Your Visitors
Mobile apps have lots of controls and interactions; can you imagine having absolutely no feedback for any of them? Probably you would have a feeling of being lost, not knowing what to do. Pressing a button should trigger a brief “pushed” state, dragging an element should highlight it and, possibly, make it dimmer so it stands out from the others, switching a control may trigger a confirmation sound …. We could go on and on with this list; micro-interactions and feedback encourage users to keep interacting with an application and they are very popular in well-crafted apps. Checkmarks next to filled inputs, confirmations sounds and progress bars are small but nifty tricks to assure users that they’re on the right track and encourage them to proceed further.
Our journey inside mobile interfaces has come to an end for now; it does not pretend to cover all the aspects of mobile UX Design, but just to foster the habit of carefully considering the medium which you are designing for. Some hints may seem almost obvious but you will be surprised to see how many of these guidelines are overlooked, even by well-known services.
