I’m a huge fan of cooking shows such as MasterChef and My Kitchen Rules and one of the expressions they use when judging dishes is that people eat with their eyes. What they mean is that the presentation is the first thing people see which creates an impression even before they’ve tasted the food. This analogy is much the same in the world of eLearning, as people can be turned off just by the look of an eLearning module or LMS interface.
The User Interface or UI refers to both the look-and-feel and functionality of the eLearning module or LMS menu. This means that your colour palate, navigation, images, icons and layout are all contribute to the overall UI. A well-designed website is easy to use and requires no instruction thereby minimising the amount of extraneous cognitive load on users. The same should apply to digital learning because if people are frustrated due to a lack of intuitiveness, it will take away from the objectives of the piece. The UI is not just making the screen looking pretty, it’s a tool to guide people through the learning experience.
Here’s some tips for improved UI design:
1. Make the Navigation Clear
Make sure it’s obvious what people need to do next. How to they move forward? If they need to click on all objects before moving ahead, let them know otherwise they may think there’s a problem if the module won’t advance. Also, remove any items that are not needed. One of my pet peeves is when I see a previous button on the first slide of a module. If something isn’t needed or doesn’t do anything remove it!
2. Make it Familiar
Many people who complete eLearning modules use the internet at work and home so are used to certain elements that are used in website design such as a ‘X’ used to close a window or blue, underline text for a hyperlink. Use these same standards in your eLearning as people are already familiar with them.
3. Consistency is Key
My colleague Matt Blackstock has written some great posts about making your visual design C.R.A.P. otherwise known as using Contrast, Repetition, Alignment and Proximity. Applying these principles will also improve you UI design. Some examples of consistency include keeping navigation elements in the same place across your module and making clickable objects (such as buttons) the same style, so one colour if the button is active and another colour if it’s inactive or been clicked on.
4. Don’t forget Mobile
If your eLearning will be viewed or your LMS accessed via mobile devices, it changes things when it comes to UI. Screens are smaller, and interactions are performed using fingers so keep the design free from too many elements and make sure all items can be operated via mobile devices.
5. Test, Test and Test
It’s always good practice to test your work both as you build it and at the end to ensure everything works the way you intended. When testing, you should always do the opposite or try a different way than you intended and see if everything still works. If you can, organise a pilot group of testers watch them as they use your module. Don’t forget to test in different browsers and devices too.
One final point is that it’s best to apply good UI design during the build phase as it is much easier than trying to go back re-design at the end.
What are your tips for good UI design?