User Interface lessons applied to eLearning


eLearning and user interface?

24 months ago my company Easygenerator switched to a new target audience. Instead of professional eLearning creators (instructional designers), we now focus on people who do not have an eLearning background. As a result we now have the requirement that someone with no eLearning background should be able to use our tool and create a course or a quiz without any training. This means that the user interface (UI) of our application must be completely intuitive and self-explaining. That is not something you reach in one go, so we are constantly working on improving our UI. In the past period I learned a lot on how to organize this process. It also generated ideas that we will implement in Easygenerator and I found that a lot of the findings will apply to the development of eLearning courses as well. So I decided to capture these lessons learned in this post and apply them to eLearning development.

UI for elearning

Find your weak spots

It all starts with finding the flaws in what you have created. At Easygenerator we use a tool called Mixpanel. It does for cloud based software what Google Analytic does for web sites. We build the ideal path for a learner (called a funnel). In our case it has seven steps. It starts with signup and ends with publishing a course. Mixpanel will show us where people will drop of in this funnel so we can investigate what is wrong.

eLearning

At easygenerator we really believe in the power of the new eLearning track and trace standard XAPI. It allows us to track and trace anything. Our idea is to give information to the author based on the behavior of the learners, indicating the flaws in the course all based on XAPI data. But that is the future. You can dive into XAPI yourself or embed Google analytic into your courses. And you already will have important information in your current courses, the completion rates and the results of the learners are clear indications for the quality of your course.

User feedback

The simplest way of finding out what is wrong is gathering feedback from your users. We use a tool called Intercom for this, it allows a user to chat directly with our support desk from within the application. We register all the user feedback in a free tool called Trello. We have a Trello board for all User request and bug reports. Trello allows you to organize these so called cards in columns (for example Will not fix, To be fixed, Planned for fix and Fixed). Really simple and it works for us. You can even share these boards with your users.

eLearning

We came up with the idea to build in the facility for the learners to make notes and share them with other students and the author. This way the feedback loop will become very easy. But it is easy to start with this today. Put in a link to your email and invite learners to give feedback. Adding a few questions at the end of your course asking their opinion on the course is also a simple measure. And make sure you do register every tiny piece of feedback

User testing

The previous measures will make you aware of things that are going wrong, but you probably need more details before you are ready to make improvements. We use user testing for this. We write a short script and ask people to execute that. We use an online service for this. It is brilliant. You put your request out and people will pick up the task. They will record their session and will think out loud. This provides a wealth of information about where your problems are and what mistakes people make.

eLearning

User testing is not expensive but it might not be possible within your budget. But you can do it yourself via a Skype call; Have your tester share his screen, give him a script and ask him to talk through the process. You observe and take notes. It does cost some time, but you will get a great return on investment. You can also invite people to your office and observe them live. We actually did a hackaton. We invited a bunch of teachers with little to no computer skills, put them in a room and gave them assignments for Easygenerator in the form of  a contest. It provided a lot of fun, and a wealth of information.

Mockup

Based on the information we have gathered we knew what was ready for improvement, but that doesn’t give you the solution. Our product owner, designer and UI expert will dive in and come up with possible solutions and improvements. But you need to test this. We create mock-ups of the possible solutions and share them with users. We use a tool called Balsamiq for this. it is a free simple PDF based tool that anyone can use, including you. The feedback on these mock-ups will help us to improve them, which we will put in a second round of mock-ups. Until we get it right.

eLearning

Making mock-ups for eLearning can be done in with tools like Balsamiq, but you can of course just create a very simple first draft of your course and share that with other people. 

Staging or review

After your mock-up sessions we apply the changes to our software. We found that for big changes the mock-up process is often not sufficient. There we be still things that are not clear to a new user. Therefore we created a staging environment where we apply all the changes. We invite users and have them test drive the actual application on the staging environment. We use usertesting.com a lot in this phase. It always brings new insights and improvements or enhancements. Only when we have fixed these issues we will put the changes on our live server for all our users.

eLearning

This is also crucial for eLearning and it triggered us to create a review system inside Easygenerator. When you create a course you will publish it to share it with your learner. In Easygenerator you can make changes, but as long as you do not hit the publish button these are not shared with your learners. This means you have two versions of the course, like our staging and live environments for the application. Last week we launched our new review function. You can share your course with reviewers (they do not need a license). The course is presented as it will be presented to a normal learner, but behind each element (text field, image, video, etcetera) we have placed a comment button. They can click it and type their remarks. All these remarks are fed back to the author who can process them. It is a really cool feature, that will not only improve the quality of your courses, but also will save you a lot of time. If you want to test it out for yourself, you can. Just sign up for Easygenerator and you will get a 14 day free trial, no strings attached.

Prerequisites

In order to make all this work there are some recommendations for the organization of your project.

Have a clear goal

We learned this the hard way. We shifted to our new audience: The inexperienced eLearning author. But when we started our existing audience was made out of instructional designers. We made the mistake that we tried to please both groups and that does not work. We decided to aim strictly at people without an eLearning background and our new goal is: “A new user without any experience in eLearning must be able to create and publish a course within his first two sessions and without any training”. We build a funnel in Mixpanel to measure this and set our target at a completion rate of 25%.

Work in short sprints

You can’t create the best course alone behind your desk. Don’t be afraid to put it our there (for review or on live), but you need to be able to adapt your course based on the user feedback. Make sure you work in short sprints (periods of one or two weeks) and put these improvements out as fast as you can. A sprint is a term from agile software developing. I recently wrote another post about applying an agile development process for your eLearning development.

Mock-ups, user testing and staging

In this post I wrote about improving an existing course but I do hope that it is clear that most of it also goes for new material. Mock-ups, user testing and reviewing your curse also have value when you create a new course from scratch.

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s