10 top INTERFACE design rules for online learning

How often does online learning suffer from bad interface design, confused menus, you click and nothing happens, you get lost? Too often. Yet there's some simple rules that will avoid most problems, that are well established in interface design around consistency
Here’s some simple tips to reduce those possibilities.

1. Instinctive intuitive and invisible

Dewey, Heidegger and many since, have made the point that technologies work best when they hide themselves in things and tasks. Technology is at its best when it is invisible. This is the consistent theme in all good usability theory and practice. How do we really use online learning interfaces? We glance, scan and muddle through. We don’t read pages, we scan them, choose the first reasonable option, and because we’re lazy, we meander and look for shortcuts through content. This is important and, if excesses in design are to be avoided, it has to be understood when designing online learning. We need to apply the brakes on the excesses of text-heavy, over designed, poorly navigable online learning. The single goal of the interface designer is to make it as instinctive, intuitive and invisible as possible.

2. Unnecessary noise

Avoid unnecessary noise. In online learning this can be translated into merely illustrative graphics, wallpaper video, icons that animate, company or institutional branding on every page. Background music is even worse. Less is more. You don’t get all of this on every page of a book, so don’t do it on screen. Noise is the enemy of navigation.

3. Icons that are not icons

You click on something that looks as though it should take you somewhere. It doesn’t. It’s dead. This is a consistent fault on poor interfaces. Make it obvious that its clickable, visually or with highlighting.
4. Signposting
Make it clear what it is that you are clicking to. Fanciful but difficult to interpret icons (unless well known conventions) are a nuisance. Indeed the urge to use icons for everything is sometimes best avoided. They're fine for familiar interfaces, with established conventions for icons, such as text editing B i U and so on. But in many cases the user needs to know. They're there to learn knowledge and skills, not your interface.

5. Hierarchical menu breakdown

Navigation can easily break down when you get past the second level. The solution is persistent global navigation across the whole online learning experience, at the same position on every page with a home button and tracking. There’s nothing wrong with fixed menus. Other common errors are badly designed rollovers and poorly designed pull down menus, that disappear on you all too easily. Keep it simple and don’t hide things away from the learner. You don’t want to waste cognitive effort on navigation, when you need it for learning. On menus, be aware that people do not make rational choices.

6. Navigation v utilities v content

Make the useful distinction between navigation (moving through the course), utilities (print, search and so on) and content (presentation). It is always a payoff between ‘wide' and 'deep’ hierarchies but don’t make the learner have to work too hard or even worse, guess. Cluster or design these navigational elements so that their functions are clear i.e. don't treat navigation and utilites as a single set of icons, seprate and cluster.

7. Progress

People like to know where they stand. When reading a book, you know by feel alone, as well as the page numbers. Keep to this principle in online learning. Use some sort of indicator for progress. It may be numerical (1 of x), a percentage or graphical line that shows progress. It needn’t be too imposing, something small and subtle, even occasional.

8. Be conventional

Stick to conventions. Look and feel matter but don’t play fast and loose with design. Make things easy and consistent. Use conventions, such as standard video controls and icons. This is sound advice. Conventions are more than just objects of convenience, they are part of the grammar of interface design. Designers often refuse to use conventions as they crave creativity and innovation – this is rarely useful. Pages should also be broken up into carefully defined areas, clickable areas should be obvious.

9. Page v scrolling

Online learning has been accused of ‘page turning’. The charge has some resonance, as it has, for a long time, been stuck in the old paradigm of simple page turning. Yet many of the most popular resources on the web have scrolling pages, think Google, Wikipedia, Facebook, Twitter, Amazon… most websites. There are some good arguments for moving to the new paradigm, on the basis of being simply conventional, to scrolling structures. WildFire is a good example of an authoring tool that does exactly this.

10. Usability testing

The production of online learning involves the different roles of specialists in design teams and tensions that arise between them. The look and feel of graphics may rub up against the needs for clear communication. What can or cannot be done in coding or functionality, may affect what can be done in presentation and navigation. Client views may clash with vendor views. The solution is to objectify the debate through testing, not with the mythical average user, but with real users.

Following Nielsen. Krug and Landauer, recognize that that a few good, experienced testers and a few iterations are all you need. Forget the large-scale focus groups and massive testing, which are expensive and difficult to organize. Practical experience shows that just one, or a few testers, early on, are more effective than a large number at the end.
Another useful technique is A/B testing where, with close-call design judgements, you present both and decide from user feedback, which one to use.

Gather evidence with a camcorder and facilitator who asks questions and gives tasks, especially ‘Get it’ tasks where you probe the user for their understanding of the point of the experience, how it works and how it is organised. The point of the facilitator is to probe and ask them not only what they’re looking at but what they’re thinking. Get them to ‘voice what they’re doing, listen, keep an open mind and take lots of notes. For technical testing, content testing, proof reading and functionality testing, you may need professional services.

Conclusion

The big rule is, as always, less is more. Look at the most popular interfaces in the world - Google, Twitter, Netflix - consistent but simple. These prescriptions are even more important in online learning than in web design, as learning’s great enemy is cognitive overload and dissonance. If learners have to work hard to understand, navigate and use the interface, they have less sustained attention for retentive learning. Keep navigation simple and consistent, use de facto conventions, avoid deep hierarchies and write for the screen not the page. And don’t forget to test – a few iterations with experts.

There's more!
Top ten tips in top ten topics in online learning:

10 ways to make badass INTROs in online learning 

10 bloody good reasons for using much-maligned TEXT in online learning 

10 essential online learning WRITING TIPS in online learning 

10 stupid mistakes in design of MULTIPLE CHOICE questions

10 essential points on use of (recall not recognition) OPEN RESPONSE questions

10 rules on how to create great GRAPHICS in online learning ‪

10 sound pieces of advice on use of AUDIO in onlinelearning 

10 ways based on research to use VIDEO in online learning

10 ideas on use of much maligned TALKING HEAD videos in online learning

10 unusual ways to make SPACED PRACTICE happen in online learning