Subscribe

Your email:

More from Allen Interactions:

UpcomingWebinar
5myths(2)

 ZEBRAZAPPS

CS&DM(2)

WhitePapers(2)

Connect with Us!

Facebookdescribe the imagedescribe the image

e-Learning Leadership Blog

Current Articles | RSS Feed RSS Feed

The Importance of Successful e-Learning Interface Design

  
  
  

Ethan Edwardsby Ethan Edwards, chief instructional strategist

Designing and developing effective e-learning requires the seamless integration of so many elements:  content access, effective communication, human learning and cognition, graphical representation of information, to name a few.  The interface (often simplistically viewed as the way a piece looks and what options are provided) is the critical element that brings all these things together.

Too often, the interface design is viewed as optional, as something that you can do to make a lesson look pretty. It goes much deeper than that. The interface is the central tool you have to lead the user through the learning experience.  To make this point clear, I’ll use a well-worn example that Allen Interactions created a number of years ago for Union Bank of California, which is available for you to explore in the demos section of our website. The first image is the central interaction in which the user is to identify the element lacking on a check that makes it non-negotiable.  There is much in the interface that creates meaning, that requires useful actions, that builds memorable context.

UnionBank

Here’s the same interaction, with only the interface changed.  All the other elements (content, questioning, etc.) are the same.  Without the interface (the contextual graphics, the realistic gestures incorporated into the interface, the heightening of the experiential aspects over the testing aspects, etc.) this simple yet powerful interaction loses almost all of its value—value created by a completely integrated design of interface and interactivity and content.

UnionBank2

It seems like too many designers only think about interface as either a neutral shell providing navigation and basic controls that exists completely separate from any details of the actual lesson (in the shape of pre-existing inviolable templates and question formats) or as nice-to-have but completely superficial decorative treatment (e.g., speech bubbles are prettier if they have rounded corners, etc.)

describe the image

This is a very complex topic, and one that deserves more attention than most of us devote to it, to our own detriment.  I’m happy to add my voice, though, to the recent announcements about the recent publication of a new book in Michael Allen’s e-Learning Library:  Successful e-Learning Interface: Making Learning Technology Polite, Effective, and Fun. In it, Michael creates a strikingly powerful model of learner interface design (contrasted with user interface design) and integrates it fully into the Context-Challenge-Activity-Feedback model of instructional interactivity.

I encourage you to check it out if you are serious about thinking of ways to improve the effectiveness of your e-learning.  You can even download a free chapter here to sample it before getting the full version.

 

free-chapter-download

Comments

Thank you Ethan for announcing this new book from Allen's library. I think I have all the books from this library so I'll buy this new one. 
 
The topic of interface is fascinating, however I think you didn't use the best example from your demos. (sorry, I like to argue everywhere). I don't find meaningful the difference of identifying the element not meeting negotiability requirements in each interface: I know that a bank employee has to do it when having a check in his hands, and that makes the experience of the first interface more adequate. However, I think that when you have to make the effort to relate a name or a concept with something wrong in the object (check) the learning experience could be more effective. I would make the learner to click on the concept and this would highlight the correspondent area of the check. 
 
Well, I have to recognize that perhaps the first interface would be more motivating to the learner but what I think is that the learning experience is not different enough to impact the effectiveness of learning, (at least from the way I see it). 
 
Maybe someone see more meaningful features in the interfaces of the example that I'm not seeing. This would be a good way to analyze deeply the topic of interface. 
 
Thanks Ethan for the Chapter.
Posted @ Thursday, July 28, 2011 2:57 PM by Carlos Serrano
I agree with you Ethan. What a difference it makes having the environment right there in front of you. It is so much more meaningful. 
Helena
Posted @ Thursday, July 28, 2011 9:17 PM by Helena Froyton
Thanks for the careful response, Carlos. There are certainly many perspectives by which to assess an interface, but I do think the first learner interface is significantly better than the second. The behavior that is the desired result of this interaction is for bank tellers to be able to visually inspect checks and recognize any that are non-negotiable. Given the static nature of screenshots, it’s hard to see the full sequence; I did not show the question that preceded the interaction illustrated here. Before identifying the missing element, the student must first judge whether the document is negotiable or not, and THEN identify the element that does not meet the standard for negotiability by identifying it on a pretty accurate representation of a check. 
 
One could make the case that the second version is actually a better user interface—especially if it is known that users are already familiar with the task of clicking letters to give answers to multiple-choice questions. But that format gives relatively little information to the designer/lesson/instruction to assist in giving feedback or assisting in the learning process. First of all, the learner interface really provides no way to distinguish random guessing from thoughtful responses. It is possible for the learner to get the correct answer without paying ANY attention whatsoever to the content or desired objective, and there’s absolutely no way for the lesson to distinguish a random response from a thoughtful response. Also, becoming facile at clicking a, b, c, or d has no pay-off in the real world; it only is valuable in exerting less effort in online training modules. 
 
The bigger problem with the second interface is that by listing the six specific requirements of negotiability, the interface has removed a vital aspect of what the learner has to master from the equation. A successful teller needs to be able to recall the six negotiability requirements at 100% mastery. The second question format only tests recognition. In the first interface, because there are literally hundreds of possible elements on the check that the user could click on (in the second example, there are only 6), the learner must first recall in his own mind what the reasonable answers are, and then choose the correct one from among those. That’s a really significant step that is lost in the second version. Almost all performance activities are Recall tasks, yet most questioning interfaces in e-learning restrict learner activity to Recognition tasks. 
 
I wanted to use this example of the importance of learner interface specifically because it isn’t fancy. The graphical design interface is about aesthetics and clarity of presentation; the user interface is about unimpeded access to controls and options for carrying out actions within the lesson. Both of these pursuits are really central to e-learning design, but they must be combined with the instructional design to come up with a learner interface design that guarantees that the learner is engaged, as best as can be, in critical thinking and active mental engagement. 
Posted @ Monday, August 01, 2011 11:12 AM by Ethan Edwards
Obviously the interface design is far superior in the first example. The questionis how much better. If 100 people were to go through the two examples and 90% of the people correctly identified the answer and the first example cost $1000 and the second cost $50 and the first example took a week of time to develop and the second took 2 hours, then you have to become somewhat critical of the battles you choose to fight. 
 
 
 
That being said, my group invested a significant amount of time and capital to develop an interface and player that can hopefully be used over and over. 
 
 
 
I know Michael Allen's 'Zebra' project is the latest attempt to design a true rapid development authoring tool so I am hopeful that this is the thing we have been waiting for.
Posted @ Tuesday, August 02, 2011 7:20 AM by Jason Gottlieb
FYI, Michael Allen will be discussing his book next Tuesday, August 9, 10:30am Pacific Time. This is part of The eLearning Guild's monthly Thought Leaders Webinar Series. The webinar (and the recording we will post after the live event) is free to all paid eLearning Guild members. For more information and to register, see http://bit.ly/nrb6xV.
Posted @ Thursday, August 04, 2011 10:08 AM by Chris Benz
thanks for the information sharing about the successful elearning interface. This information is more helpful for me to differentiate the examples given.
Posted @ Tuesday, August 09, 2011 5:07 AM by Saritha
In my experience, it is the interface, whether the term is applied to e-learning or even in context customer experience, that largely accounts for the learnability of a service or product. Interfaces are more than desktop interactions at this point in time.
Posted @ Thursday, August 18, 2011 9:49 PM by Larry Irons
Comments have been closed for this article.