Visual menus: structure with style

Course using only Next and Back buttons

We expect learners to make complex decisions on the job. Then why don’t we let them decide how to use a simple course?

Novices need structure. But how should we show it?

Research suggests that learners who are new to a topic benefit from a structured course.

We could easily provide that structure as a menu that lists the topics in the order they should be accessed. A course for novices doesn’t have to be a one-way trip through the Next-button tunnel.

What’s on the menu?

The usual menu is a text-only list or set of tabs. However, a more visual approach could say more about the course topic and structure.

Here’s the menu for a Plimoth Plantation course that helps kids unlearn myths about the American Thanksgiving. The recommended order is clear, and it’s also clear that you’re going to hear two sides of the story at one point.

Thanksgiving course menu

Here are a few other graphics that could become menus:

  • Timeline
  • Flow chart
  • Mind map
  • The product or item that the course examines
  • Head shots of people asking questions (each question links to the section that answers it)
  • Map of a building or place
  • Game board

If your course is based on a story, you could use easily-identified scenes from the story.

In all of these examples, the arrangement of the images could make the recommended path clear.

It can be easy to do

If you use PowerPoint, you should be able to build a visual menu by creating a menu slide and hyperlinking its images to other slides. If you use a PowerPoint conversion tool, check to see if this approach will survive the conversion. In Keynote, image hyperlinks export to Flash with no problems.

If you use HTML, you could use an image map to link each part of the graphic to its page. Programs for the PC and Mac make this easier.

What do you think?

What are some other graphics that could be turned into menus? Have you done this in a rapid development tool? Let us know in the comments!

Related posts

Comments

  1. Tom Kuhlmann says:

    Good post. I think that the reason most courses look like the first example is that it’s a lot easier to build a linear course that is focused on just content. I’ve been on projects where you’d sit in three weeks of meetings to pick the “right” 8 pictures to put on the splash screen. I can’t imagine having to negotiate all of the nuances of a scenario-based interaction.

    My 6 year old son will just jump on the PC and start clicking around his games until he figures them out. Adults I know will just sit there waiting for detailed instructions to tell them what to do. In fact, Brian Clark at Copyblogger just posted that a “click here” instruction on blogs has a 8% higher click through rate. My guess it’s similar with elearning.

  2. Cathy Moore says:

    Tom, thanks for you comment. I agree that any form of writing or designing by committee is gruesome and inefficient. I think it’s best to have one small team quickly produce 2 or at most 3 options for the stakeholders to select from and leave it at that. The “right” pictures will never be found.

    Another option is to set a time limit. For example, give your team only 30 minutes on iStockPhoto to find usable graphics. Whatever
    they find in that time limit will have to be good enough–and it likely won’t be any worse than the 200 other options they’d find if you gave them more time.

    My understanding of Brian’s “click here” post is that the research said it worked in a certain marketing situation–when the purpose was to motivate the readers to continue reading a post. Likewise, the direct mail letters that tell you “Please turn page” tell you that because research shows it helps in that marketing situation. People know they need to turn the page to continue reading a letter, and we don’t need to say “Please turn page” at the bottom of every page in a book.

    I think the success of the web shows that adults don’t need to be explicitly told where to click at every step in an interaction. If we make clear that the content is relevant and useful, an elearning project that uses a menu shouldn’t face any more usability issues than a basic web site.

  3. Tom Kuhlmann says:

    Normally, I’d agree…however I am always surprised at how often people struggle with basic things. I once had a client who told me that I had to change the navigation because three times in a row she clicked on the wrong thing (even though it was clearly marked and she was the only person who did that). I just sent her an email and told her not to click there:) I think that’s the difference between kids and adults. Kids will click around and explore until they find what they want. Many adults are fearful of clicking in the wrong area that they complain if everything’s not clear. I always point to places like eBay and Facebook. They don’t have great training and yet millions of people figure it out. In fact, the figuring it out is part of the learning process. Look forward to your next post.

  4. wendy phillips says:

    I always include a menu on the intro page and a nav button in the interface to return to the menu at any time. I do this because I build my courses to be multifunctional – not just for the scheduled training event but also ongoing as a reference and coaching tool. I want people to be able to come back and easily find the section they want to review, rather than having to click through to find it.

    In my case it’s simple text links because the topics are usually too numerous for a visual. With courses that form a suite (what we call a ‘toolkit’), I provide a ‘master map’ that lists all the courses and their individual pages – this is then linked into our knowledge management tool for easy reference to any topic.

    Love your posts, Cathy (and Tom!)

  5. I also noticed that in your sample you do not call the actual arrow “Next” -it is just an arrow. We have gotten client compaints that since the arrow does not say NEXT…how do you know it is a next arrow…as opposed to an arrow that is going to teleport you to Spain, or something. ARGGGGHHH…yes, I am serious. I had to change our “arrow” to have the actual “Next” text on it for a client.

  6. Rupa says:

    Thanks for this post Cathy.

    This is really very informative.

  7. James Ryan says:

    Each day we get at least dozen e-mails from people requesting their password

    I struggle to deal with this when the only function on the sign on page OTHER that the sign in function, Username, Password, Submit is a link named ‘Forgotten Your Password?’

    Must control FIST OF DEATH

Trackbacks

  1. [...] menus: structure with style – by Cathy Moore Cathy Moore has written a very interesting article on course menu and navigation design in her [...]

  2. [...] Visual menus I’m wild about Cathy Moore’s post on Visual menus: structure with style.  [...]

  3. [...] This slideshow is an attempt to help people make the best of a limiting design. Regular readers know that I’m no fan of the Next button. (Are you new here? Try Why you really want to be short or Visual menus: Structure with style). [...]

  4. [...] I wouldn’t use something as extreme as the tabloid in a course without testing it on some learners first. In fact, I’d want to have a contest and ask learners to submit headlines. (Got any headlines for another edition? And thanks to Laura Kratochvil for suggesting the teleporting Next button in her comment on Visual menus: structure with style.) [...]

Speak Your Mind

*