5 tips for creating great mobile app user interfaces

Parham Aarabi teaches a graduate course on Advanced Mobile User Interfaces and is the CEO of ModiFace.

When conceptualizing your mobile app’s user interface, there are a few things that you should keep in mind. Some of the basic things such as clarity of interface, consistency from one view to the next, and making sure that tapping on any button or UI element provides feedback to the user are fairly straightforward and are generally, though not universally, followed by most app designers.

There are a few things, however, that are often ignored which can equally impact the user experience.  Below are some of these often-ignored UI design elements:

1 – Expert vs. novice users – the tale of two audiences

Often, we think of our app users as a ubiquitous set of users with similar intentions and expertise.  However, there are often several distinct user groups with different intentions and levels of expertise.

Novice users, for example, tend to move slower throughout the application, are prone to making more touch errors, and are more uncertain about the functionality of each button. Expert users, on the other hand, tend to have the app elements memorized and move quickly and with intent throughout the app.

When creating your app’s user interface, you want to make it efficient enough for your expert users while being informative and simple enough for novice users.

2 – Ideal button size

This is a fairly obvious issue.

Button sizes are generally limited by the size of our fingers, and so if they are too small, users will be unable to touch them accurately.  Button widths below 1cm are harder (and slower) to touch.  Aside from the minimum size, there are some benefits to non-uniform button sizes (they give an indication to novice users as to which button is more important).

As a general rule of thumb, the size of a button should be proportional to the square root of the likelihood that an expert user would need to select it (there are more scientific reasons behind the size-proportional-to-root-probability rule, but that is a discussion for a different day).

3 – UI location

Usually, application UI elements are either placed at the bottom of the app (most common) or at the top.

However, the way most users hold their phone is by using their thumb as the primary finger for touching buttons. If the user is right-handed, the thumb will more easily reach the region at the bottom right of the screen (or, for left-handed users, the bottom left).  Reaching the top screen corner that is opposite to the thumb is much more difficult, and more intrusive with the application flow since the user has to reach over the screen.

Generally, it is best to keep the primary application buttons at the bottom of the screen, and ideally, to place the more important and often used buttons at the bottom-right corner of the screen.

4 – Accounting for motion

The location of buttons is not the only consideration related to how we hold our mobile devices.

We also need to keep in mind that the thumb generally has a specific flow direction.  For example, for a right-handed person, circular flows with a pivot point at the bottom right of the screen are much easier than linear flows (flowing out radially).

So if you have a user interface control that requires motion (i.e. a slider, a selection list, etc.), keep in mind how a user is holding the phone and that certain motions are generally more natural for the user.

5 – How much is too much

Some applications tend to pack quite a few buttons into each of the application views.

Now, even if the buttons are of a decent size so that a user can click on them, there is another issue that app designers should be aware of.  The more buttons presented to the user at one time, the more difficult it is for the user to choose one of them (this is especially true for novice users).  It is interesting to note that as an analogy, a touch screen device can be thought of as a communication channel where the goal is to minimize the entropy of the interface (i.e. require the least information from the users for each touch selection).

Generally, most user-friendly apps tend to have an interface entropy under 3.5 bits (the maximum entropy for an interface is approximately 5.5 bits on an iPhone 5, accounting for average finger size and screen size).  What this essentially means is that you should keep the total number of touchable UI elements to less than 10 per view.

There is a lot more involved in creating great mobile user interfaces.  But hopefully you will find some of the above suggestions of benefit.

Parham Aarabi is an Associate Professor of Electrical and Computer Engineering at the University of Toronto, where he teaches a graduate course on Advanced Mobile User Interfaces and directs the Mobile Applications Lab.  He received his Ph.D. in Electrical Engineering from Stanford University, and was twice selected as a Canada Research Chair.  He has been the recipient of MIT’s TR35 “Top Young Innovator” award and the IEEE Mac Van Valkenburg Award.  He is also the founder and CEO of ModiFace Inc., the leading provider of virtual face simulation and virtual try-on technology.

photo credit: Alexandre Van de Sande via photopin cc