A user interface (UI) is the point of interactivity between the user and the product – like the touch screen on your mobile phone. While User experience design deals with how someone progresses through an online course, for example, it is UI designers that create the interactivity, look, and feel. User interface problems detract from this experience.
It’s all about making sure that the UI of a product is as intuitive as possible, and that means carefully considering each and every visual, interactive element the user might encounter. A UI designer will think about imagery, icons and buttons, typography, color, spacing, and responsive design.
For e-learning, if the UI is poorly designed or unintuitive, learners can get frustrated and ultimately quit using your platform and enrolling in your courses.
Below, we’ve listed a couple of the problems users normally experience with e-learning UIs so that you can avoid them in the future.
This is quite a simple idea. Your audience shouldn’t have difficulty navigating around your platform or course, or get lost moving from lesson to lesson.
Everything needs to be clear, concise, and work as expected. When a user is getting stuck into a course, the last thing they want to think about is how the UI works. How do I open this file? How do I play this video? How do I progress with the content? These are some of the questions you don’t want your users asking themselves and spending time on.
Jacob Neilson, a usability researcher remarked:
“Users don’t care about design for its own sake; they just want to get things done and get out…
“When people are visiting websites or using applications, they don’t spend their time analysing or admiring the design. They focus their attention on the task, the content, and their own data or documents.
“Thus, people love a design when they know the features and can immediately locate the ones they need. That is, they love a familiar design.”
Missing or unclear instructions
If your UI is intuitive, the need for instructions is not as great. But if we consider learners who are new to e-learning, having instructional videos or text at the start of a course, or somewhere accessible on your platform, is a must. If your course is non-linear, for example, explain this to the user in the opening lesson. Show them how to navigate through the content, step by step.
Something interesting to note: In literature there is a concept called “The Death of the Author”, which argues against incorporating a writer’s intent and background into a piece of writing. Basically, the writer and the content are unrelated.
When we write instructions, for example, we create them with the mindset of someone who knows what to do. Often instructions can be less obvious to users who are experiencing the UI for the first time and who didn’t create it.
All instructions need to be simple and understood by all your learners, not just you. One of the best ways to ensure this is to have other people, even users from your targeted demographic, go over the instructions first and then make revisions.
One tip to always follow is to keep instructions short and unexaggerated where possible, like the example below.
One way to avoid confusing interfaces in your courses or LMS is the correct use of icons. In the same breath as instructions, you might know what the icon stands for, but it could be less obvious to your learners.
Let’s take the hamburger menu for example. According to New Zealand web developer James Foster, the icon isn’t as clear as some designers think. He studied the interaction of users with the button over many months and found three ways to improve the hamburger menu – but this can be true for any ambiguous icon.
- Labelling the icon: Adding a the word “menu” underneath the three lines increased the button’s use by 7.2%
- Emphasising it as a button: Putting the hamburger inside a box, so it looks like a button, increased use by 22.4%.
- Replacing with text: Switching the lines for the word “menu” resulted in 20% more clicks.
Given the lack of set icons for e-learning, it is not uncommon to see many different icons throughout an e-learning platform and its courses. We often use icons for menus, files, downloads, and expanding a window, among many others. If a commonly used icon like the hamburger menu still causes problems, then we should be very weary about lesser known iconography.
Have a look at the image below. Which icon do you think best represents a menu to someone who has no idea what the hamburger icon is?
Affordances. If this the first time you’ve heard about this term, don’t worry, it is quite easy to understand. Basically affordances are aspects of an object which dictate to users what actions they can take.
In e-learning for example, buttons can, and should be designed to look like they can be clicked or interacted with. It should be obvious that dials can be turned and sliders can be dragged. All of this should be known to the user without them considering it.
A common error designers make is mistaking an affordance for a feature; it is not. A feature may rely on an affordance to function, however. Affordances help determine how an object can be used, whereas a feature can change how the object is perceived.
Think of a door that has “Pull” displayed on it as a sign. This isn’t an affordance; the door handle is. The sign makes up for poor design. The door should be designed in a way that makes knowing whether you can push or pull obvious.
Back to e-learning. An affordance for a button or dial can be designing it as a 3D object, differentiating it with colour, giving it a strong border, or adding a shadow that highlights it as something you can interact with. See the examples below.
Deviating from expectations
For people that are familiar with websites and computer software, they have developed an understanding of how certain things should work. A button should perform an action or reveal a new piece of content; an example of a computer, if used in a course, should function as a computer does.
Course creators and designers can get very creative in their designs and themes, however, that doesn’t mean the course or platform shouldn’t follow what the ‘real world’ deems logical conventions.
Take the progress bar below as an example. The most common mental image of a how progress bar works is that it fills up from left to right. If your progress bar instead goes from right to left, it will be confusing for learners as it doesn’t follow popular conventions.
There are many decisions UI designers need to consider when creating an e-learning platform or course – and it can often be overwhelming to avoid user interface problems. One thing you should always remember to do is consider the design element from someone’s point of view who may not even know what a button is or what it looks like.