Provide instruction

Description

When providing instruction with an application, there are a couple things to consider:

  • The amount of instruction you need to convey
  • How often someone will need to reference that information

The amount of instruction you need to convey
If there is a large amount of instruction that needs to be given, there are a couple ways of achieving this. One is the fairly common use of a “Help” or “?” button. Users can click on these buttons only if and when they need help. Sometimes a button like this may even be sprinkled throughout an application next to the thing it is explaining. The benefit of this method of instruction is that it is unobtrusive to someone who is already familiar with the application and how to use it, but it is also easily accessible to someone who is unfamiliar.

Another way of communicating a large amount of instruction, such as a quick overview of how to use an application, is to have tutorial based instructions. This could be through the use of a video that plays the first time a user enters the application, or through the use of text boxes that pop up and guide the user as they use the application so that instructions are given within context. However, if a method of instruction such as this is used, it should only be used upon first visit otherwise it becomes very intrusive. There should also be a way for the user to exit the tutorial instructions if they no longer need them and return at will.

If you are trying to convey a small amount of instruction such as what an icon or button is for, a “Help” button that takes you to a different page or section or a video tutorial is not going to be necessary. In that case, a tooltip that brings up a few words of instruction would probably suffice. This method is very common and useful. It’s simple, yet informative and it is unobtrusive to someone who is familiar with the application and doesn’t need instruction.

There are times when instructions can also be written and on screen at all times. The use of this should be very limited though. You don’t want to clutter the application up with unnecessary text. An example of when to use written instructions would be something like in the image below (to the right of each input area). If there are input text fields and people need guidance and/or direction as to how things needs to be formatted and what they are needed for, those can be permanently on the screen if necessary.

Screen-shot-2012-02-22-at-2.32.46-PM-e1329939805502.png

How often someone will need to reference that information
If the instructions you are providing will need to be referenced often, first ask yourself if there is a better way to design what you are asking people to do. If the way to use something can’t easily be remembered or understood after using it once or twice, there could be a problem with the design.

If it’s not a problem with design and it’s information that may need to be referenced often, it’s best for it to be easy to get to and have small amounts of text. That type of information can be in hover over text boxes or popup text boxes. If it’s instruction that will only need to be accessed occasionally or only by some people, the “Help” section would probably be the best place for it so that it is out of way but still easy to find.

Examples
Poor usage:
Avery printing template software – Having just selected a template, there is literally no indication as to how return to pick a different one.

Screen-shot-2012-02-22-at-2.46.48-PM.png

Good usage:
First activation of the task bar seamlessly explains is purpose.

Screen-shot-2012-02-22-at-2.49.31-PM.png

Good usage:
A temporarily empty view is prime real estate for invitational instruction.

Screen-shot-2012-02-22-at-2.53.49-PM-e1329940477132.png

Good usage:
Google iphone app – Direct overlays for global interface instruction are lightweight and intuitive.

Screen-shot-2012-02-22-at-2.57.00-PM.png

Good usage:
IRUNRUN iphone app – Walkthroughs are good for custom, directed introductons to set your mind right.

Screen-shot-2012-02-22-at-2.58.24-PM.png

Related Principles
Provide next steps
Consider data comfort and expertise
Suggest related items
Contextual help