Tech Talk Archives

Designing effective online tours

April Weiss spoke to us earlier this year on designing effective online tours. April uses the term iTour to mean an animated tour that guides a person through a software application while describing how it can be used. Flash, Captivate, and Robodemo are some of the tools used to create iTours.

April described the approach to her PhD research project, starting with her first iTour project at RMIT. She demonstrated a few of her iTours while outlining the 11 design principles, which are just one of the outcomes of her research.

===
1. Aim for clarity, conciseness and minimalist approach
The iTour and the elements used in it should be clear: easy to see/hear and easy to understand. It should be small and focussed on the task. The approach should be to keep the iTour even more concise than a technical writing piece.
April cautioned against describing computer functions instead of real user tasks. The minimalist approach also includes not stating the obvious and only presenting the most important information.

2. Ensure the iTour is understandable, helpful and approachable
Text, graphics and even navigation controls should be easy to understand. The user must be able to get the information they require as easily as possible.
If we are following a standard for the iTour, such as using navigation controls influenced by Windows Media Player, we should make sure we follow the standard completely and stay consistent. During the usability tests conducted by April at RMIT, she discovered that the users had problems with the Stop button because it looked too much like the Stop & Restart button in Windows Media Player. The audience was worried that the animation would restart and that they would lose their spot if they selected it.

The iTour should be easy to look at and listen to. Care should be taken with the tone (and accent) of voice used for the narration; the target audience should be comfortable with it. For example, Australian audiences may prefer an Australian accent over an American accent.

3. Provide sufficient navigational control and information
Users should be able to control how and when the iTour plays or stops. An Exit key is vital. So is an indication of the length of the iTour and the user's progress through it. Ideally, there should be controls to increase the volume and the magnification to cater for users who have difficulty hearing or seeing the iTour.
Users should be able to step forward and backward through the tour with ease. If there are choices that the user is asked to make at different points, there should also be a default path through the tour.

4. iTour - chunked, well organised and consistent
April's research has shown that the content should ideally be chunked: product information should be chunked into 1 to 2 minute blocks, procedures into smaller portions or steps, and so on. Consistency is important within each animation and from one animation to the other.

5. Visual interface - easy to see, speed right, smooth
The design of the interface should be simple and appropriate for the audience. The size of objects and the legibility of text are other factors to consider. The iTour should run at the right speed. For example, the cursor should not move too slowly or too quickly across the screen. April provided example timings for these.
All transitions and animations should be smooth so as to not distract the user.

6. Aural interface - easy to listen to, user can relate
Sounds such as the voice-over and mouse-click sounds should be clear, easy to understand and consistent. There should be text to support the narration.

7. Consider accessibility first, not last
Building in redundancy makes iTours more accessible. We should use captions and text alternatives in addition to the narration and voice-over. We should also consider using ALT tags to describe functionality and not just interface labels. The design of the interface should not use just colour to distinguish between widgets.
Users should also have control over the iTour. They should be able to control the speed of the tour and be able to zoom into screens. April did note that the zoom capability was not available on third-party products used to create iTours when she was preparing her PhD.

8. The demonstration should show the user the software
The iTour should demonstrate exactly what the user has to do to complete the task. Care should be taken to match the version of the software that the user will have. All explanations should use terms that are consistent with the actual software interface.

9. Components should be well-integrated
There should be consistency in how the iTour elements are combined. For example, each step of the procedure should be explained and then demonstrated clearly. For example, April advises that each step of the instructions should be seen in a text-box (and heard if there is a voice-over); this should then be followed by the animated demonstration, in which the cursor or highlighting is used to show the areas of interest. These are analogous to the formatting we use in technical writing: actions are listed as numbered steps, each of which is followed by a sentence explaining the result of the action.

10.The result should be searchable
Users should be able to easily locate and retrieve easily the information they require. The addition of metadata will make searching easier. Interface controls such as slider bars let the user move through the animation easily. April looks forward to a time when iTour searching improves so it will be easy to search the content for particular information rather than having to view the iTour from start to finish.

11. Ensure the iTour is error free and not frustrating
Finally, the iTour should be tested and reviewed to ensure that there are no errors. All text and sound files should be edited, all links and interactive elements tested. Usability tests will indicate the final quality of the iTour as perceived by real users and should be conducted at strategic points throughout the development.
===

April ended the talk by recapping the design principles and acknowledging the works that she had been influenced by while formulating them. April's talk was interesting and informative. Many of us have to create iTours as part of our work and the design principles are a useful standard to check our work against.