Best Practices and UI Design Patterns for Help in Mobile

When users start to get to grips with your mobile app, they will need a little help from time to time. The good news is that standard design patterns can reduce design time for help in mobile apps. Here are some practical guidelines that you can use to improve the UX of help in general.

Six Great Help Design Patterns

Catriona Cornett, a UX designer at RelateIQ, writing for Inspire UX, offers six simple help design patterns for mobile applications.

• Demonstrations
• Tutorials
• Single-Screen Overlays
• Walkthroughs
• Tips
• Single-Screen Summaries

Demonstrations

A demo is generally a video or animated walkthrough of key functionalities. They are best kept short and relate to a specific area of functionality. You can use more than one demo if the user benefits from it.

Demos show the user the app without the need to work through many screens to do so; they clearly articulate relationships between app elements and can articulate on and offline usage. They should contain play controls, only be used when the app first launches, and be annotated sufficiently to allow the user to recognize their value.

They may only be entirely successful in helping the user if more is incorporated within the demo with a clear context indication. It is easier to remember too much information by putting it into practice.

Live demos, like "You try it now", can be helpful. Better yet are onboarding or starting screen experiences that nudge users to do the task to learn it. E.g., Take a Photo now, Create a contact, Test your Audio, and so on.

Tutorials

Tutorials guide the user through the interface with simple explanations of interactions and UI elements.

While you don’t want to show a very 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 are easy to find later.

Single-Screen Overlay

An overlay is placed over the screen and explains up to five points of interest. The overlay should be easily dismissed when the user is done with it.

Overlays can be used throughout the application where necessary. It would help to keep explanations simple to ensure readability. There should always be a means to recover an overlay if it is closed accidentally.

Overlays are great to explain concepts within the context of any given interaction and can be helpful when unusual or uncommon functionalities need to be explained.

They are not as good when you need to explain highly complex functions (not enough space on-screen) or processes that move from screen to screen.

Walkthrough

A walkthrough takes a user through a process from start to finish, explains, and then gets the user to carry out each step. This can be very useful to encourage further use of the application or to encourage a user to try out different possibilities within an app.

The best walkthroughs are limited to some essential tasks within the app and begin with clear objectives.

Ensure that your walkthroughs don't interrupt the user’s own journey with the product—deliver them “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.

Single-Screen Summaries

A single-screen summary is an overlay with a short bit of text that describes the current screen's purpose. The user can close it, or it can vanish within a few seconds (around five seconds). Designers recommend implementing single-screen summaries when the user accesses a screen for the first time and not showing it every time the user visits the same screen.

The main drawback to single-screen summaries is that they usually get lost in the mix, and the user cannot retrieve them once they decide to dismiss them.

Five Best Practices to Provide Help

The general best practices to provide help consist of a shortlist of five simple steps to aid the user:

1. Make help and support?easy to find. In apps, people are most likely to look to the toolbar for this. Be transparent about how to contact help. Offer a database question-answer next to a live chat or call option. Instead, many companies prioritize automated self-help options and hide the contact link.?
2. Provide?more than one form of help or support. This can come from tutorials, self-service FAQs, click-to-call to speak to an agent, notifications, etc.
3. Offer?tutorials/introductions?when a user?first interacts with an app. There should always be the ability to skip this and return to it later.
4. Show?in-app help content?when you?add/change?functionality, and when users access rarely used functionalities.
5. Help videos can be handy 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 playback’s volume.

To place the help contextually, such as in the Ticketmaster app, is a good idea. Users might have a question or issue about the transaction that just occurred.

For more visit my website Israj Khan

Follow me on Linkedin Israj Khan