User interfaces are the the window through which e-learning occurs. User interfaces can be minimal with simple navigation buttons and  (fig. 1-1)  or they can be a metaphor (fig. 1-2) or virtual environment. Some have characters that guide you through the training and provide feedback and instructions (fig.1-3). Some interfaces incorporate sound to enhance instruction and provide feedback. The audience, type of learning objective, and the level of learner proficiency all factor into the type of interface that should be used. 

Figure 1-1 Minimal Interface with simple icon navigation and text menus.

Figure 1-2 Metaphorical Interface.

Figure 1-3 Interface with a character instructor.

     A minimalist interface offers less distractions and focuses on the content rather than on the interface itself. Drawn or pictorial icons are easier to understand than abstract icons and produce less cognitive load (Kunnath et al, 2007). Minimalist interfaces are excellent for more advanced learners because it allows learners to focus on the content.

     Metaphorical interfaces are excellent for tutorials and near transfer of skills. They can be used to display the learning objective in the proper context or environment. Concrete tutorials and demonstrations can benefit from this type of interface while abstract concept and far transfer knowledge may be impeded by the metaphorical interface.

     A younger audience may find an interface with a virtual character for an instructor more appealing, while adults may find characters to be tiresome like Microsoft Office’s Clippy. Clippy became a mockery and has become an internet meme filled with resentment http://www.time.com/time/specials/packages/article/0,28804,1991915_1991909_1991755,00.html. Characters and virtual avatars should be used with caution. They can backfire and become a point of ridicule.

     In most cases, extraneous user interface elements should be left out because everything on the user encounters on the screen is a cognitive load on the learner. Graphical elements should be more than just decorative. (Clark & Mayer, 2011) They need to contribute to learning or be a necessary functional element in the interface. 

     Interfaces design can impact the level of learner engagement and satisfaction (Metros, Hedberg, 2002). Aesthetically pleasing design and quality images lend authority and interest to the content and materials being presented. Graphics, icons and the font family used impact the learners engagement and satisfaction. Comic Sans font may be acceptable for a child’s interface, but would be ridiculed in a corporate environment.

Here is a clip from Helvetica the documentary. It explains how a font can impact our perception of the message just like the tone of our voice can shape the meaning of words.

     User experience is the usability of the user interface and the interaction with the instructional materials themselves. How learners interact with the training can have an effect on the amount of information retained and it is important to involve learners early on in the development cycle of the instructional design process. Evidence suggests that usability testing improves the quality and effectiveness of elearning (Crowther et al, 2004).

     Allowing the user to control the pace of the training and breaking up the content into smaller pieces increases user satisfaction (Clark & Mayer, 2011). Personalization is one way to improve user experience and usability. Treehouse (http://teamtreehouse.com/)  is an online school that teaches web design. They offer the same content multiple ways in order to accommodate individual goals and learning styles. They have also game-ified the training to include points and badges that motivate learners.

Projects allow learners to learn by completing a project.

Learning Adventures are goal oriented depending on what you are trying to accomplish.

Deep Dives allow learners to master specific technologies or skills.

Game-ification motivates learners to complete modules to earn points and badges.

     Effective user interfaces and usability impact the effectiveness of elearning modules. Instructional designers and technologists need to consider aesthetics and functionality as well as the content being delivered. The learner does not separate the user experience from content and design. In some cases, learners provide their own equipment. This makes it difficult to know ahead of time what browser, operating system or screen resolution the learner will have.

     Mobile learning is now gaining popularity as smartphones and tablets are becoming increasingly popular. This means that touch interfaces must be addressed along with screen size and text legibility. It also means that new features can be leveraged such as location awareness, accelerometers and cameras. New designs have to be flexible and standards based so that the most devices possible can provide a satisfactory learning experience. 

Bibliography

Clark, R. , Mayer, R. (2011). E-Learning and the Science of Instruction: Proven
     Guidelines for Consumers and Designers of Multimedia Learning. San Francisco,
     CA: Pfeiffer.

Crowther, M. S., Keller, C. C., & Waddoups, G. L. (2004). Improving the quality and
     effectiveness of computer-mediated instruction through usability evaluations.
     British Journal of Educational Technology, 35(3), 289–303. doi:10.1111/j.0007-
     1013.2004.00390.x

Kunnath, M. , Cornell, R. , Kysilka, M. , & Witta, L. (2007). An experimental research
     study on the effect of pictorial icons on a user-learner’s performance. Computers
     in Human Behavior, 23(3), 1454-1480.

Metros, S. E., & Hedberg, J. G. (2002). MORE THAN JUST A PRETTY (INTER)
     FACE: The Role of the Graphical User Interface in Engaging eLearners. Quarterly
     Review of Distance Education, 3(2), 191.

Videos:

Helvetica Documentary Clip-Neville Brody & Rick Poyner. Swissdot. December 15,      2006. http://www.youtube.com/watch?v=X3YDAtcsKmg.

Multi-device e-learning using Walkgrove's Adaptive Interface Design Technology. WalkgroveLearning.      February 26, 2013. http://www.youtube.com/watch?v=X6psr6kvawo.