Don’t Declare a Thumb-War: Mobile UI/UX Tips
Building great software, regardless of the goal, industry, and cost, requires that the interface be slick, simple, and intuitive. Carefully designing a terrific UI flow is central to making a product that people will want to use, and more importantly - will want to share. Designing a mobile application has its own unique challenges, and with smaller screen space, precision is important. There are a few basic considerations that should be taken into account when getting started - I hope to shed some light on them.
Understand how the user is going to interact with the device. This sounds so obvious but can often be overlooked. You want to ensure that any navigation and command controls are placed on the screen in such a way that enables the user to easily interact with one hand and their thumb (as many do). Below is a basic graphical representation that maps out the good areas from the bad. (Just like a weather map, I made this with Green being good, yellow being ‘so-so’, and red being “DANGER!”)
Clearly, this map is drawn from the perspective of a single-handed interaction, which might not always be the case. However, ensuring that the application can be used easily with one hand automatically ensures it will be a breeze with two. Your users will appreciate this.
In similar consideration, when designing the interface, you should understand how easy or difficult various movements might be. While some ‘swipes’ are easily accomplished (particularly with one hand), others might be cumbersome and awkward, and thus impede the flow of the user’s interaction. The below illustrates this in a map style representation. (The color coding is the same as previous, green = good, red = dead)
This of course speaks again to incorporating the human-hand and its capabilities into your design. Put simply: make it easy for them to use! It boils down to placing your buttons correctly.
A few basic tips will carry you the rest of the way:
- Avoid cluttered screens, keep the interface to a minimum with clearly defined touch-zones for all the interface.
- Use consistent navigation themes and design, make it easy for the user to learn which buttons do what.
- Make the navigation buttons large enough to be navigable without much effort, a good ‘litmus-test’: “Can the user operate the interface while walking?”
- Always incorporate good contrast levels and consistent color schemes: visually, the application should be easy to learn, understand, and navigate. Keep in mind that the user will inevitably be using the application in sunlight. (Whatever looks good inside, boost it by at least 20%)
So don’t declare a thumb-war on your users - build an application that is easy on the hands, eyes, and brain, and you’re off to a good start. Neglect any of those three key human-elements, and it’s unlikely that you will get anywhere! Happy tapping, mobile-mavens!