User Interface Design For eLearning
The computer user interface is that nebulous space where humans interact with the machine. Many people find this space frustrating because it’s easy to get lost or because the system doesn’t work as expected.
As designers and developers, we can make sure our audiences have smooth interactions with our courses. After all, good user interface design is an essential part of eLearning. It can influence a user’s perception of an entire learning event. So here are some basic rules for user interface design from the audience’s perspective.
“I don’t want to think about the user interface.”
Make the user interface transparent to your audience. It shouldn’t be noticed. It shouldn’t be something people have to learn or decipher. If everything is clean and clear, then learners can get on with the task of learning and not have to think about how to interact. As Jakob Neilson, usability expert states,
“Users don’t care about design for its own sake; they just want to get things done and get out. Normal people don’t love sitting at their computers. They’d rather watch football, walk the dog — just about anything else. Using a computer probably rates above taking out the trash, though.”
“I always want to know what to do next.”
Include instructions on every screen. If there are options, explain all of them clearly. If the design is non-linear and exploratory, let the audience know what problem they need to solve. Let them know they should be exploring. Whatever it is, your audience should not sit and wonder what to do next.
Writing concise and clear screen instructions is a difficult task. After writing and revising several times, run your instructions by grouchy people to see if they complain about them. One more thing. Go revise those instructions one more time.
The overly-simplified example below shows how you can strive to make your screen instructions ever more clear. The text on the left is unnecessarily long and mentions Next, which is not labeled. The shorter instructions on the right probably suffice and we avoid potential confusion about what to click to continue.
“I want the program to act like I think it should.”
Everyone who is familiar with computer applications holds a mental model of how different types of software work. In eLearning, we can get quite creative with these models. Perhaps the user interface is a smart phone or a DVD player or a store front or an elevator panel. Or perhaps it’s a plain vanilla Previous and Next type of system. Whether your course uses a metaphor or a generic approach, follow logical and obvious conventions. Think about how audience members will expect the system to work and then make sure it does.
In the example below, the user interface is an elevator panel. Learners choose a floor on the panel, ride up to the selected floor and partake in learning activities on each floor. As they climb higher in the building, the activities become more advanced. The elevator panel on the left doesn’t correspond to a typical mental model of how an elevator works. When the user realizes that going up to a higher floor is represented as going down, it causes cognitive dissonance. When we stick to conventions, as shown in the example on the right, we’re modeling the way most people think.
“I don’t want to wonder what an icon means.”
When using icons for menu options and buttons, support the icons with text. Because there is no standard icon set in the world of eLearning, our audiences have seen numerous and diverse icons for “Menu” “Lesson” “Glossary” and such. Speed up the recognition process by adding text beneath the icon. If there really is no room for text (and this is hard to believe), then display the text in a tool tip—you know, the text that shows up when the mouse hovers over a button.
In the example below, the icon on the left could mean Notes, Resources, Menu or something else. By adding text to the icon, as shown on the right, we help the user quickly identify the icon’s purpose and reduce unnecessary mental processing.
User interface design is a complex and deep subject. This is just the tip of the iceberg. Please share with us your user interface rules of thumb.
Related Article:
Writing Microcopy: Tips and Pointers
Considerations for Screen Design
Useful and interesting! A few examples would’ve made it great!
[Reply]
Connie Malamed Reply:
October 26th, 2009 at 7:31 am
I added examples!
[Reply]
Very Interesting article.
Do you have any E-learning course examples that display the use of W3C conformations for the disabled?
I am looking for some courses that display the use of aids for the near sighted and hard of hearing.
Very difficult to find.
cheers
[Reply]
Darren,
That is an excellent question and now I will put that on my list of topics to discuss. User interface design for people with impairments is a huge and important issue. We know it as 508 Compliance and it is a mandatory requirement for many government and institutional technology products. There are certain obvious UI enhancements you can make, such as ensuring the audio script is accessible as text by clicking a button (for the hearing impaired) and by using voice-overs to present content (for the visually impaired). I know that Articulate Presenter comes with a “Notes” button which I change to “Transcript.” Of course, this is just the tip of the iceburg. Hopefully, the resources below will help you.
Please see if the resources on this page help: 508 RESOURCES.
Also, there is 508 Universe Training.
[Reply]
This is great and useful blog which teach us about computer user interface design. Thanks for sharing good post. Awesome!!!
[Reply]