How to design a great mobile User Experience (UX)
Designing a great User Experience (UX) for a digital device is ultimately about ensuring your design is intuitive, and deciding between trade-offs. Here, I dive into some principles for designing for mobile apps and websites in particular, where good UX is even more critical due to the smaller screen size.
Some principles may sound like common sense, but it is surprising just how often these are broken.
Summary of Main Trade Offs in Mobile UX Design
Simplicity vs flexibility
You can be minimal and simple to use, or you can have lots of options for the power user. But how can you offer the best of both worlds? See the Progressive Disclosure principle below.
Security vs convenience
Do you keep a user always logged into their account for convenience, at the expense of security? Or perhaps you force a user to enter additional information (e.g. card CVC or 3DSecure information) in order to securely make a payment. Fortunately, recent advances in biometrics (e.g. Apple’s Face ID) on mobile devices have made it easier to be both secure and convenient.
However, you can still see this trade-off in play on Public Transport, for example. When the User Experience must be reliable and extremely fast, and security is not such a big priority due to the low cost of a fare, convenience wins out and a user can use Contactless Payment without biometric verification in order to “tap in” quickly every time.
Scrollable vs sticky
When there is inevitably more content than screen size to fit it on, you’ll need some kind of scrollable page. However, it is also useful for the user to have quick onscreen access to prominent actions — and that’s where these can “stick” i.e. always in the same position on the screen, regardless of any scrolling. Getting the right proportions of scrollable vs sticky UI is important.
Sticky tops, sticky bottoms. Sticky UI is sometimes (but not always) suitable for prominent next actions, top-level navigation (e.g. navigation tabs) or calls-to-action (like a BUY button). But it should be used sparingly.
If everything is scrollable, you can bury important actions off-screen. If too much is sticky, not enough screen real estate is left for a user to properly interact with scrollable content. Avoid the common “letterboxing” problem, with large sticky headers (e.g. a large app navigational header) and footers (e.g. tabs) and only a narrow scrollable page in between.
Half Sticky. You can also make UI sticky only when it’s likely to be needed, for example showing sticky buttons to provide more options when a user signals their intent to move away from a page by scrolling up again.
Some UX Principles
Progressive Disclosure
You can be easy with minimal options, or you can offer flexibility with options galore. But how do you offer both? Progressive disclosure!
Reduce “cognitive load” on users by keeping the number of options on display limited by default, but offer a route to expand to more options.
A related principle to avoid presenting too many options is to pre-select or show the user’s most likely choices — e.g. most popular options, repeated actions, recent searches, recently viewed, most likely next actions are presented first, but also give the user a chance to opt out.
Affordances
A simple UX law — for instant familiarity, make things look and behave like their physical equivalent!
A good example of this is Apple’s Wallet, which contains what looks like arranged physical cards and documents. There is obviously good continuity with how we used to use physical cards and tickets.
Immediately, it’s intuitive to the user what information is kept here, that cards and tickets can be “pulled out” to use, or can be re-shuffled like papers.
Another common example is sliders, e.g. a slider to apply varying degrees of effects (brightness, contrast, etc) on an Instagram picture. This mimics a physical slider in the analog world.
Hick’s Law (Small number of options)
Allow users to make quick decisions by keeping the number of available options small. See “Progressive Disclosure” above for how to do that. This could apply for example to an actions panel or a menu.
It can often be faster and easier for the user if one complex procedure (e.g. checkout) is split up into a series of simple screens. Traditionally, websites would often try and fit all options onto one page (because each page takes time to load, and each page load is associated with some user drop-off), but this isn’t an issue if you remove load time between these screens.
Jakob’s Law (Use familiar patterns)
Make it easy for users by sticking to familiar UI design patterns they’ll have commonly used before. For example, app top-level navigation is important for users to understand immediately and therefore should not innovate too much. On iOS apps, this is most often a tab bar along the bottom. On Android apps, it is commonly a navigation (side) drawer or tabs along the bottom. On a website, it is often the site header with site top-level links along the top.
Doherty Threshold (Stay responsive)
The magic number is 0.4 seconds. Keep system feedback below this number to let the user keep their flow. Research shows that anything above this threshold causes the user to feel frustrated and disrupted.
On mobile, the user will often be on a slower connection and it may inevitably take > 0.4s to respond. So one way to hack this UX principle is through the use of “skeleton UI”.
This means showing the next step or screen immediately, in a “skeleton” format, in order to allow the user to begin orienting themselves whilst the content loads. Consequently, their perception is a faster loading time.
You may have seen this on Facebook’s news feed.
False edges and false bottoms
Avoid “false edges” and “false bottoms” at the boundaries of the mobile screen by always indicating when there is more scrollable content off-screen, such as in a carousel of movies.
This is commonly done by always showing part of a unit of content hanging off the edge. In this Netflix example, the right edge intentionally always shows only part of the next movie.
You can also use:
- A gradient fade to prevent an abrupt edge
- An animated gesture hint (e.g. jiggle content to show that it’s scrollable)
- Or perhaps simply an indicator such as an arrow or page dots
Educating Users
The ideal design is self-explanatory, but sometimes there is a need for some additional guidance to the user. This should be used only when necessary, and very sparingly.
Consider using:
- A few pages of user onboarding on first visit/install. This can be used to educate users on the main features or benefits of the service, choosing some initial settings, showing what’s new in this version, or how services such as push, location services or tracking will be used.
- Tooltips/tutorial which highlight a part of the UI briefly, with accompanying usage instructions. This should be shown only once, and most often for specialist technical tools with custom interactions, like a photo editing app. Do not cover up what is simply bad design with an explanatory annotation!
- Gesture hints. Generally, users hate having to read text or instructions. So don’t tell them — show them. Great for gesture actions — quickly and unobtrusively demonstrate how to use the feature.
- Explanatory text. e.g. the Uber example above, “Choose a trip or swipe up for more”.
Summary
I’ve only touched upon a few of the key principles of UX that to me stand out as important on mobile in particular. For more on this very interesting topic, check out the plentiful expert resources out there, such as https://lawsofux.com.
It is important to note that, in the end, the best way to validate what works and what doesn’t on a particular website, app or service is to test it with real users.
This is the most fundamental UX principle of all.
