Have you ever completed an e-learning course that was tricky or downright confusing to navigate? Maybe you didn’t know which object to click on, or you couldn’t figure out how to move forward...
Published 6 years ago
Version 1.0
Blog Post
As always Nicole, great post-- if the nav is unclear, the bad UI design is on the designer. One issue I've seen is designers using a lack of consistency. Sometimes forward is Next but then at other times it's an arrow/chevron or some shape and perhaps never in the same place twice. Yep, those courses are out there!
We address nav in our eLearning Style Guide in two dimensions, primary and secondary nav. Primary is the next button we all know and love (we generally remove the default text label PREV and NEXT by the way, everyone knows them well enough with simply < and > much like our cell phones). Secondary nav has some variety for basic guides but generally one of a few choices like chevron/ arrows (lay a hot spot over them), small circle shapes (series of "bubbles") or a rectangle shapes. Secondary nav is often used showing layers or otherwise "connected" content, then the "Next" button when moving onto some new content. It helps minimize 'death by next'.
And don't forget another basic UI principle with feedback - ie use hover states at least and usually visited too so it's clear to the learner they've take care of all interactions. Another tip? If you have some motion graphics/animation, consider automatic slide advancement for that fluid, movie-like experience. If they've been "free" of the Next button for some time, it can't hurt to animate in a text box/hint like "Click > (next) to continue" if they get lulled into NOT using Next so much!
Lastly, keep the text on those nav objects SHORT if any at all. We use no text on chevron/arrows nor circle bubbles but usually on a shape. (Can't hurt to add text to your hover state such as "Continue" or "Close", etc.) Don't overdo it like "CLICK HERE TO CONTINUE" but, rather, "CONTINUE".
We address nav in our eLearning Style Guide in two dimensions, primary and secondary nav. Primary is the next button we all know and love (we generally remove the default text label PREV and NEXT by the way, everyone knows them well enough with simply < and > much like our cell phones). Secondary nav has some variety for basic guides but generally one of a few choices like chevron/ arrows (lay a hot spot over them), small circle shapes (series of "bubbles") or a rectangle shapes. Secondary nav is often used showing layers or otherwise "connected" content, then the "Next" button when moving onto some new content. It helps minimize 'death by next'.
And don't forget another basic UI principle with feedback - ie use hover states at least and usually visited too so it's clear to the learner they've take care of all interactions. Another tip? If you have some motion graphics/animation, consider automatic slide advancement for that fluid, movie-like experience. If they've been "free" of the Next button for some time, it can't hurt to animate in a text box/hint like "Click > (next) to continue" if they get lulled into NOT using Next so much!
Lastly, keep the text on those nav objects SHORT if any at all. We use no text on chevron/arrows nor circle bubbles but usually on a shape. (Can't hurt to add text to your hover state such as "Continue" or "Close", etc.) Don't overdo it like "CLICK HERE TO CONTINUE" but, rather, "CONTINUE".