5 ways a bad user interface (UI) can derail your elearning
Placing the learner at the centre of the learning design process is essential when creating relevant and engaging online training.
One aspect that’s often overlooked in the creation of an elearning course is the user interface (UI).
Your car’s tyres are the most important part of the vehicle. After all, they are the only parts that actually touch the road.
It’s the same with UI.
The principle of identifying the point of contact as the most important part of a system is valuable in many areas including elearning.
The one point where your learner actually interacts with the elearning is through the user interface of your course.
The content needs to be well designed, but if the learner can’t get to page 5 because the next key blends into the background then your course will fail.
Problems bad UI causes
A bad user interface can derail the whole learning experience faster than anything else. Nothing can render whole sections of your course useless so quickly.
1: Time
Making the time for elearning is one of the biggest barriers for many staff. The time they do have should be spent learning rather than hunting for the item they need on the screen.
2: Disengagement
Fighting to get through a module is not a good feeling. If the experience is less than smooth it’s a barrier to engagement for your staff.
3: Fear of change
An inconsistent UI will force staff to learn a new approach each time they take more elearning. Unnecessary change puts many people off and slows everyone down.
4: Lower completion
If simply navigating to the end of a module is hard work there will be many more people dropping out before completing. Even small UI decisions can make a big difference to the completion rate.
5: Increased support
A bad UI increases the number of calls and emails to the support team dramatically. Time spent designing and testing a UI will be paid back many times in fewer support hours.
Good UI
It’s easy to say “avoid bad UI”, but what can you do practically to make sure your users are getting the best UI experience?
We’re taking a broad overview of some of the most relevant aspects of UI design that you can use as a quick check list for your next elearning project.
A lot of the UI information available online is focused on web design and luckily much of it can be applied to elearning. It’s especially relevant if you’re working with a platform that can produce web-style content such as HTML5 technology.
One of the big benefits of online content is the ability to easily test different approaches to the same issue. This means we can lend some scientific research to reinforce the following guidelines.
Keep it clear and simple
Allow learners to find their own way around, avoid confusing or complicated designs in your interface.
Watch out for things like icons with no labels – you might know what the icon means but it won’t be obvious to everyone taking the course. The common ‘hamburger’ menu icon is a good example.
"When you hide something in the hamburger menu, you make it less discoverable by your users." - Alex Tyagulsky
You can increase use of a menu by 20% by simply replacing the three lines with the word ‘menu’. It’s not unusual to see more ambiguous icons in elearning courses, so this dramatic difference when using a relatively widespread icon highlights the benefits of clarity.
If it’s not obvious to all your learners exactly what an icon does, it’s going to cause one or more of the issues above.
Be consistent
Not just consistent with your own elearning interface, but also with the operating system that your learners will be using.
If everyone taking the training is going to be using a Windows 8 PC and the Chrome browser, they are going to be used to the way things are laid out. If you follow these principles you have given your learner a shortcut to navigating your elearning.
Google go as far as providing design principles for android developers which are useful for designing elearning for any device. One of their pieces of advice is:
“If it looks the same, it should act the same”
In this example the small triangle in each of these cases opens a drop down list for you to select from. If you know your staff will be accessing learning on an android phone or tablet then they will expect this behaviour if they see this symbol in your elearning.
These are called standard patterns and there are many different examples that you can take advantage of when designing elearning to make completing it a more user friendly experience.
By being consistent within your own courses you are helping a learner build familiarity with the training. This makes it easier to introduce new modules and ensure people get more efficient, the more training they take.
Testing
Research by Zeebox revealed that a bar of textual menu items, although they might not look as clean, were more effective than a burger-style slide out menu.
They used A/B testing to confirm this, giving some of their users the burger icon menu and some the textual on-screen menu while monitoring their behaviour.
With the ability to manage courses through an LMS this type of testing becomes possible for your training. Delivering the best experience for your staff reduces costs and time away from their work while boosting engagement and performance.
By creating a simple, consistent interface backed up with real figures from testing, you can build strong foundations for the rest of your elearning.
This post will give you a checklist for next time you’re reviewing a training course that will help avoid the issues we’ve identified and prevent wasted time and money.
We’re able to create a style guide that is tailored to the learning needs of your staff. If you’d like to talk to us about how to create better user interfaces get in touch.