We're compiling guides for our website on how to install our software on multiple platforms (WinXP/Vista/7/8,OSX,Linux,Android,iOS). The most common implementation appears to be a series of screenshots demonstrating each step with a sentence accompanying each screenshot. Each guide (one for each platform) will have 8-15 steps.

What we can't determine is whether we should create a page with each step under the last (most traditional) where the user scrolls down the page or use a javascript carousel with a next/previous button which advances the screenshot images without having to scroll down the page.

Page speed is critical and so being able to use lazy loading is essential however I believe this is possible in both instances.

Which would be a better UX in your opinion? Are there any other patterns than we may have missed? Any advice would be greatly appreciated.

  • 1
    Not really knowing much about this particular situation, but I would suggest looking at options for including it all on one page - purely because it's an install guide for software so the user is likely to be sat at the computer running the install itself so is possible they would want to print the guide out to save from alt-tabbing between instructions and install process. You can't print out an interactive carousel.
    – JonW
    Aug 28 '13 at 10:10
  • @JonW, thats an excellent point regarding novice users wanting to print out the instructions.
    – Michelle
    Aug 28 '13 at 10:34
  • 1
    The term "Carousel" is incorrect here. What you are proposing is really a "Wizard". Please let me know if you need me to elaborate.
    – Izhaki
    Aug 28 '13 at 11:11
  • Wizards are a tern Microsoft instroduced for these things years ago. I think Apple calls them 'Assistants'
    – PhillipW
    Aug 28 '13 at 12:05
  • 1
    I was under the impression that wizard was specifically a tool that actually did something after going through the pages ('as if by magic', hence "Wizard") - the installer itself may well be a wizard, but I don't believe a set-up guide is a wizard, unless it actually performs the set-up. Correct me if I'm wrong though.
    – Kai
    Aug 28 '13 at 13:05

There are a couple of things you need to consider while designing user manual

  1. Allowing users to quickly get to where they want
  2. Allowing users to reference and compare information.

In that context, evaluate your two options of an traditional approach

  • Quick access : The traditional approach can use quick links which allow you to navigate to the section you want and you can scroll back up or reference similar links as needed. While you can also use quick links to quickly navigate to different pages, content on different pages might not allow users to navigate back to where they were quickly

  • Reference: This to me is the most important thing since people might want to quickly go back a couple of steps to determine if they did the previous step correctly or even the last three steps correctly. In a traditional layout, I can quickly scroll back up or being on the same screen even compare and see what I did. In a multi page layout I need to keep using the previous or next option to reference content

Hence you will be requiring the user to retain information in his mind about the previous state (muscle memory) while switching from state to state while in the traditional approach he can quickly get back to the state desired with scrolling.

The last and important thing I can think of is the need to print it or save it offline. With a traditional approach I just need to save it as a PDF or even print it but if I had different screens for each section, I would need to print or save each individual screen


Mervin's answer is next to complete. I would just like to add a few things.

Cons of wizards

  • Print - wizards are not easily printable.
  • Slow referencing - users may wish to see a particular step or go back a few steps. Wizards are slower than scrollable area for this.
  • Layout constraints - the space for each slide is limited.

Pros of wizards

  • Good chunking - reduce visual overload by only presenting a step at a time. You can achieve reduced, yet similar effect by proper visual design of a scrollable area (clear headlines, visual blocks, varying background colours per step).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.