6 Ways to Improve User Interface Design for E-Learning

The design of your course has a profound effect on how your learners learn from it.

How much time have you spent thinking about the design of your course? Not just the content, but the layout and the way in engages users. When you do think about it, how do you make your decisions? Are you thinking about your learners and their interaction with your course, or are you focused on the appearance?

For many educators, decisions about user interface design are a secondary consideration. They mostly want something that looks appealing, and so long as it does that, they’re happy to move on to creating and selling courses.

But a poorly-designed interface doesn’t just frustrate users—it can actually affect the way they learn. If you’ve already put a lot of thought into this, congratulations! Hopefully you can read this list and pat yourself on the back for your thoughtful design. But if you haven’t, here are a few tips to consider as you re-examine your user interface design.

1. Create a short tutorial for learners when they first log in.

How many of your learners will have taken an online course before? Even those who haven’t may not know how to use your interface. A quick walkthrough not only helps to orient them, it can save you from answering a lot of help emails.

Also consider a short tutorial every time they enter a part of your course with new functions, such as the forum, or their first quiz. Not all your users will need it, but those who do will find it a relief.

2. Is your user interface design predictable?

Most users hesitate to click on something if they don’t know what it will do next. This makes predictability is one of the most crucial aspects of a good user interface design. Put very briefly: your user interface should never be a surprise.

It seems obvious, but this mistake happens more often than you would think. Ever been scrolling through a website only for your scroll function to do something unexpected—like move you sideways, slow in speed, or “stick” to a particular frame for a few seconds? That’s called “scroll hijacking,” and it’s just one of the more common ways some designers break that crucial design rule. Avoid this mistake at all costs.

3. Make the next step obvious.

Users should never wonder “what next?” Anyone who’s studied productivity knows how a vague task with poorly-defined steps is harder to accomplish than one with logical, bite-sized tasks. Your user interface is like that, too.

When a learner gets to the end of a lesson, there should be visual indicators for what they should do next. Everything from taking a quiz to starting the next lesson should be as frictionless as possible. Even when they complete their lessons for the day, consider adding a short congratulations message to let them know they’re finished and to remind them to come back later.

4. Does your interface give clues to how users can interact with it?

One of the well-known principles of user interface design is called “affordance.” What this means is that the design itself should indicate how it can be used. For instance, a button should look like a button that can be clicked. A good user interface should give users and indication for how they are meant to interact with it. Explanations and tutorials should be your insurance policy, not your crutch.

5. Break up the monotony and improve scannability.

Too much monotony in a design can lead to reader fatigue. Vary the lengths of your sentences and paragraphs. Include headers. Even subtle blocks of text, pull quotes, and images can help break up the page.

These visual cues also make your content easier to scan, which helps with memory retention. When most users land on a page, their eyes follow an F pattern: They read the headline, then glance down the page, pausing at headers, bolded text, or other points of emphasis. Then they go back to the top and begin reading more thoroughly. This reading process helps them get a sense for what your lesson will cover before they begin, which in turn aids in the organization and retention of lesson information.

6. Learn from other e-learning interfaces.

Don’t be afraid to borrow design cues from other e-learning interfaces. Did you see something on someone else’s course that seemed to work well? Maybe it could work for you as well.

That said, beware of following something just because it’s trendy. Think about what that design feature is intended to accomplish, and whether that applies to your situation. Above all, make sure it will work for your users. If you think it will lead to confusion rather than enforce a positive learner experience, it’s better to give that feature a pass.

Challenge your assumptions.

Instructors these days are in luck: many of the themes and plugins at their disposal have been designed by people who already have a firm grasp of core user interface design principles. But it is still far too easy to fall into the trap of assuming your course will work without carefully examining it with the eyes of a learner, rather than an instructor.

Being critical of your own course design means examining it from the perspective, not just of your majority users, but of edge-case users as well. It means thinking about the learner who might never have taken an online course before, or who may have a poor internet connection that can’t support too many videos, or who might rely on a screen reader to navigate your course.

Thinking outside your own perspective is difficult but that’s why it’s so important to test your course for user experience. If you only design for one kind of user, you may satisfy the needs of 90% of your audience. But if you want to land that extra 10% of sales, a few steps toward a better user interface design will get you there.

Author

Laura is a marketing specialist with experience presenting at WordPress events in Ann Arbor and Vienna. She speaks Russian and German and holds a double MA (Hons) in History and Russian Studies from the University of Edinburgh.

4 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *