When users start getting to grips with your mobile app they’re going to need a little help from time-to-time. The good news is that there are standard design patterns which can be employed to reduce design time for help in mobile apps. There are also some useful guidelines that can be employed to improve the UX of help in general. Familiarizing yourself with these can make your help functionality more valuable to your users.
Author/Copyright holder: Mike Lee. Copyright terms and licence: CC BY 2.0
Users sometimes need help. Mobile apps are still new enough that not every user is familiar with conventional usage patterns and most mobile apps are likely to introduce new concepts or ideas at some point in their interaction with the user. The good news is that there are some excellent general best practices for help design and some popular design patterns that you can utilize too.
5 General Best Practices for Providing Help in Mobile Apps
The general best practices for providing help consist of a short list of 5 simple steps to aid the user:
- Help (and/or support) should be very easy for the user to find. In apps they are most likely to look to the tool/tab bar for this.
- Users should be able to access more than one form of help and/or support. This can come in the form of tutorials, self-service FAQs, click to call to speak to an agent, notifications, etc.
- Tutorials/introductions should be utilized whenever a user first interacts with an app. There should always be the ability to skip this and come back to it later.
- In app help content should be made available when functionality is added or changed and when rarely used functionality is accessed.
- Help videos can be really useful but only if the user has complete control over playback – this includes the facility to start/stop/pause, move to the section they want to view and the volume of the playback.
Author/Copyright holder: Cheon Fong Liew. Copyright terms and licence: CC BY-SA 2.0
6 Great Help Design Patterns for Mobile Apps
Catriona Cornett, a UX designer at RelateIQ, writing for Inspire UX offers 6 simple help design patterns for mobile applications.
- Single Screen Overlays
- Single Screen Summaries
A demo is generally a video or animated walkthrough of key functionality. They are best kept short and relate to a specific area of functionality. You can use more than one demo if you think the user will benefit from it.
Demos show the user the app without them having to work through a lot of screens to do so, they clearly articulate relationships between app elements and can articulate on and offline usage.
They may not be completely successful in helping the user if too much is incorporated within the demo without a clear indication of context. It’s hard to remember too much information without putting it into practice.
Author/Copyright holder: WebRatio. Copyright terms and licence: Fair Use.
Tutorials guide the user through the interface with simple explanations of interactions and UI elements.
While you don’t want to serve a mega-long tutorial to a user on the first interaction; you can use tutorials to demonstrate as much of your functionality as you want - just make sure they’re easy to find at a later date.
Single Screen Overlay
An overlay is placed over the screen and has up to 5 points of interest explained. The overlay should be easy to dismiss when the user is done with it.
Overlays can be used throughout the application where necessary. You need to keep explanations simple to ensure readability. There should always be a means to recover an overlay if it is closed by accident.
Overlays are great for explaining concepts within the context of any given interaction and can be really useful when explaining unusual or uncommon functionality.
They aren’t as good when you’re explaining highly complex functions (not enough space on screen) or processes that move from screen-to-screen.
A walkthrough takes a user through a process from start to finish; explaining and then getting the user to carry out each step along the way. This can be very useful to encourage additional use of the application or to encourage a user to try out different possibilities within an app.
The best walkthroughs are limited to a couple of key tasks within the app. They are also well introduced with the process objectives clearly explained before the walkthrough commences.
Be careful that your use of walkthroughs doesn’t “break” the user’s own journey with the product – they should be delivered “just in time” not “all the time”. Very complex tasks can be overwhelming with a walkthrough – consider splitting tasks to make them simpler to carry out.
Tips are designed to deliver a single piece of information exactly when the user needs that information. They can be used when an app first opens, when a user enters a screen or when a user completes a step in a process. They are great for introducing new functions.
There should always be a way to turn off tips. They are best used to convey simple ideas and not to replace tutorials, walkthroughs, etc.
Author/Copyright holder: AZMIND. Copyright terms and licence: CC BY 3.0
Single Screen Summaries
This is a simple overlay with a short bit of text describing the screen about to be used. It can either be closed by the user or just vanish within a few seconds (around 5 seconds). It should only be used the first time a screen is accessed and not be repeated every time a screen is used.
The main drawback to single screen summaries is their ability to get lost in the mix for the user and they cannot be recalled.
The Take Away
Providing help in mobile applications should always involve user research; what do users want to do? What can’t they do without assistance? Once you understand these issues – you can use some simple rules and patterns to develop valuable help for your users.
You can read Catriona’s original piece on help patterns and find her excellent examples of these patterns in use here - http://www.inspireux.com/2011/02/07/top-6-help-design-patterns-for-iphone-apps/
Hero Image: Author/Copyright holder: Yutaka Tsutano. Copyright terms and licence: CC BY 2.0