Interface Design Case study - the .LRN interface

When asked to redesign the Interface for the popular open-source community and learning management system: .LRN, I encountered the joys and challenges of working with a globally open source development team. Herein I include some of the story, screenshots, and an update on the progress and current usage of the final product "Selva".


In May of 2005, I attended the Open Software Forum of the OnlineEduca conference in Madrid. There I presented a paper outlining an Accessibility evaluation of the Learning Management System .LRN and took part in a bug bash with .LRN developers who had come from far and wide for the conference. At the bug bash, we were able to work through the checkpoints, one by one, that were outlined in the evaluation, and thus, brought .LRN an inch away from Accessibility compliance, which it achieved soon after.

During the conference, interface and usability consistently emerged as concerns for everyone. In collaboration with a focus group of developers from Guatemala and MIT, we developed a plan to launch a new interface based on more user-friendly concepts and the idea of a warm and flexible environment. The concept was dubbed Selva (which means rainforest in Spanish), and I went forward to design an interface. the new Selva interface incorporated key changes to the information architecture (in the form of new tab labels and section reorganization) as well as a warmer more sophisticated aesthetic.

Advantages

• Team: The group of people involved in the development and planning of .LRN made the experience a great one and made our achievements possible. .LRN has and continues to draw from a rich pool of talent from around the world, beginning with its roots at MIT and now extending throughout the world into Europe, Australia, Asia and Latin America.
• The Event: The conference was essential in that it put a disperate group of people in the same place at the same time which catalyzed efforts and provided the momentum necessary to make a large number of changes in a short time.

Challenges

• Management: .LRN is a big system, and it's democratically run. As a very large long-standing open source project, changes and improvements rely on the collaboration and approval of a large number of people. This is less of an obstacle for developers creating or updating plug-in functionalities. This was much more of a challenge working on that which necessarily effects everything else (the interface). As a designer working in relative isolation, the difficulty in getting changes incorporated into the core and the necessary reliance on others was often an obstacle to how much could be achieved. The great frustration is when you've made this great improvement, and created the files but you just can't get it implemented. There was much that never came to life and ideas that were never fully implemented. Nevertheless, a significant number of changes did get implemented, such that the overall improvement was still great.
• Separation of form and content: The templating system allows for much flexibility but it was built before CSS and web standards were the norm. This made a new template design much trickier and meant I required developer time to implement design changes, which was hard to come by. Since then concerted efforts have been made to make the interface entirely css which should make future efforts much more effective.

Results

The resulting Selva skin was included as a default option in the .LRN installation. It was also picked up and customized by other institutions.

Designing Explanatory Graphics

Graphics can be purely decorative, emotionally evocative, informative, or as is often the case with elearning, they can be explanatory. The goal of an explanatory graphic is to help the user to understand or learn something. An explanatory graphic can be a map showing you how to get to the train station, a diagram of the digestive system, a graph showing rate of change, a weather map charting hurricane Katrina, or a very abstract visualisation of an abstract concept, like a visual representation of a photon or the semantic web. The range of possibility for explanatory graphics is endless, and they're especially important for designers of learning.



As designers, we are accustomed to relying on our intuition - the designer's instinct for sense-making and aesthetics. "It just looks right". But we also rely on the established principles of the discipline: rules for things like balance, layout, colour and placement. These are both imoprtant guides when it comes to much of the work we do, but when it comes to explanatory graphics -- images that need to teach or explain a concept that may be very complex -- these principles fall short, and can sometimes even lead us astray.

"There is a history of people doing what they think looks right. Particularly in the case of complex graphics, it's not good enough to do this intuitively" - Ric Lowe

Ric Lowe is an internationally renowned expert on explanatory graphics. He has been working for over a decade on how to better understand how people perceive and learn from graphics, and has persisted in the search for a set of principles on how to design "good" explanatory graphics. In a recent workshop at the University of Sydney, Prof. Lowe presesnted research, past and present, with insight into the coginitive theory behind how we as humans, perceive graphics, as well as a 6-stage design process to facilitate the creation of effective explanatory graphics. In this article, I summarise some of the points he made that are of particular interest to elearning graphic designers who are often faced with the task of creating effective graphics for learning.

Graphics take the stage in the new millenium

Lowe spoke of society's increasing visual orientation, influenced by new visually-oriented technology, and perhaps also by the pressures to communicate accross languages in an increasingly globalised society.

I immediately thought of the cryptic Ikea furntiure instructions: a series of line drawn heiroglyphs, roughly shaped like furnutre parts and pegs in different rotations. Totally unaided by any text explanation, and armed only with the notorious 'alan wrench' (and your best sense of DIY gusto), you attempt to take on these "internationally readable" explanatory graphics. If you're lucky, after only a few hours of sweaty guesswork (involving several rounds of dissassembling and reassembling) you are left with a recognisable peice of furnuture (and ideally, no suspicious unused peices left in the bag). Surely this is a quintessential, if unfortunate, example of explanatory graphics in a globalised world, and surely there's a better way?

Researchers like Ric Lowe and his colleague Wolfgang Schnotz, seek to find the better way. They emphasise that only by looking at how human beings process graphics, can we figure out how to better facilitate the process and how to design graphics that lead to more effective learning.

From Computer Information Processing to Human Information Processing

According to Lowe, we have reached a point in the history of graphics, in which technically, we can do just about anything. Special effects have reached unsurpassed levels of realism, and graphics can be manipulated in infinite ways in all three dimensions and over time. So now that we know what we can do with technology, what is it that we should do with technology? As Lowe emphasises, this is not a computer issue, it's a people issue. After a computer processes a graphic, it has to be processed by a person. So it's about time we learn more about the human processing.

Lowe explains that traditionally, research has focussed on the processing of text, since text and numbers have been the key authoritative players in teaching and explanation. For this reason, research into graphics processing is an open field with most things left to be discovered.

Graphics as adjuncts.

Historically, garphics have been treated as adjuncts to text. They help to illustrate something more thoroughly explained in text. Pictures are said to be worth 1,000 words, but clearly some are so ambiguous it would take 1,000 words to explain them. One question designers can be asking is "Is this picture a thing that will explain, or is it a thing that needs to be explained?" The work of Richard Mayer provides important insight into how text and graphics can work together for more effective multimedia learning. However, as the role of graphics in society shifts and graphics take on more independence in the conveyance of idaes and information, more research is required that looks at how graphics are perceived when they stand alone (or with each other). They pose whole new challenges since they don't have the benefits of a well understood symbol system like text.

"Grqaphics can only take you so far. It's no ocincidence we've ended up with an integrated text and graphics system."

Unlike text, graphics are not self-referential, nor do they have established sequencing in the way that text does. Therefore, text can often provide the links and references when used in conjunction with explanatory grpahics.

Designing explanatory graphics

A graphic can be said to have multiple functions: affective and cognitive.

The affective function of graphics is that which, in Lowe's words 'appeals to the heart'. It has to do with the emotions, where graphics are said to be motivational, impressive, engaging, etc. The coginitve funtion appeals to the head, and has to do with spporting learning, communication and understanding.

According to Lowe, these two functions are often confused in educational multimedia. Some designers believe that engagement and motivation are enough, that once you have those the rest will follow.

However, learning from a graphic does not happen automatically, just because motivation is present. There is much more in the picture.

When designing explanatory graphics we have to think about the following questions:

1. How do we help users to handle visually demanding graphics effectively?
2. How do we get users of graphics to look in the right place (direct attention) at the right time (direct exploration)?
3. How do we get users to process information more appropriately (make correct connections, more cognitive processing v. just perceptual)?
4. How do we get users to interrelate multiple layers and sources of information (eg. via overarching structures and substructures)

Purpose -> task is king
When you're thinking about designing an expolanatory graphic, one of the very first things to consider is what is this graphic for? The more complex the graphic the more critical the design is to whether the person will acheive what they need to. Explanatory graphics are always associated with a task. What is this task? What will the user need to do with the graphic or acheive with the help of the graphic. Every design decision, should be made with the task in mind.

Audience -> what do they know?
It's also essential to know who the graphic are for. How well your audience understands a graphic will depend on what they already know, about the topic at hand, as well as how familiar they are with the type of graphic used (known as 'graphic genre'). Has the user seen this type of graphic before? Does it employ symbolism that is new to them? Begnners in a domain often lack backgorund knowledge as well as genre expertise.

Graphic Genres -> type casting
There are many different types of graphic genres: realistic, explanatory, diagramatic, deocrative, etc. Disciplines have their own genres that have their own set of established symbols. A chemist will be able to understand a molecular diagram quickly and efficiently, whereas it may be meaningless to the rest of us. With modern technology, we're combining different genres more and more. A photo and a diagram might be set side by side thus instigating comparative and synthesis processing. Some educational research has already been done in the advantages of providing learners with several representations of the same thing (but that's a whole other story - see research on multiple representations).

Different genres also create diffrenet expectations about 'what will happen'. At a glance I can look at a graphic and recognize it as a comic strip, and immediately I have expectations about the kind of content it might contain. In contrast, I will expect very different content from a fine art painting, or a circuit diagram, even before I begin to look at any of the details. Things we know about genre set a framework for how we process pictures.

"Graphic processing is shaped overall by the availability of information and our ability to deal with it."

Processing -> the limitations of being human
It's also important to remember that there are constraints. I'm not talking about bandwidth limitations or file type restrictions, but human constraints. For example, perceptually speaking, you could say we are limited by "foveal vision" - our ability to only see only a very small spot in clear focus at any one time and the rest of our visual field is out of focus. Cognitively speaking, there is a strict limit on what we can process mentally at any one time (the age old 7+or-2 rule, think back to psych 101). Our working memory is limitited in capacity as well as facility. It's like a tiny little engine in which we make sense of the world. Things can come into working memory from outside (perception) or from what we already have stored on the inside (background knowledge such as genre expectations). The amount we can take in at any one time is often referred to as "cognitive load" and is a key element in Richard Mayer's research on multimedia learning. Educational psychologists are often referring to ways we can "reduce cognitive load" since you have the best chance of learning something when you can focus on it, or when you are dealing with the least amount of extraneous cognitive load. Beyond a certain point, it just won't "fit".


Processing activities

Some of the types of processing activities that people go through when they're looking at/interepreting an explanatory graphic include...

• Searching for items of information relevant to task (explanatory purpose) Searching is not so much of a huge priority in text as it is with pictures. It's much more systematic with text.
• Discriminating between various entities, between categories of information and items within those categories. So when you're designing representations, help the learner discriminate between important parts of the graphic.
  
• Configuringrelated entities to form macro structures. This is both visual and conceptual. This has to do with things you want to bring together rather than be discriminated. This should also be adied by good design of the graphic.
  
• Comparing and contrasting sets of information with respect to the task goal.
  

These are just enough examples to show that it is possible to systematically analyse what a task might require you to do in terms of perceptual and cognitive activities. When y ou're designing a graphic, find out what these activities are, then ask "how can I make these happen as efficiently as possible?" Good design of explanatory graphics facilitates efficient and effective processing of both perceptual and cognitive processes.


The Design Process -> It's all about mental models

According to Lowe, at the end of the day, it's all about mental models.
A good explanatory graphic producces a good mental model, so a designer's goal is helping the user create this mental model. Based on this tenet, he has developed a 6 stage design process for the development of effective explanatory graphics:

1. Analysis
2. Mental model characterisation
3. processing regime
4. generation & manipulation
5. Development of adjuncts
6. User testing and revision

Keeping in mind that the process is not necessarily linear and is certainly recursive, the goal is to increase the likelihood that the graphic will help the learner develop a good mental model. A mental model is a way to describe how the user has stored and integrated the information conveyed by the graphic. It's like the mental outcome of the learning. It's what will allow you to complete the task at hand (eg. building a peice of furniture, finding your way to the right building).

Crieteria for good mental model:
- It's approrpriate to the task
- It's coherent (all enttities are related together)
- It's accurate - has no wrong information in it
- It contains enough information - is sufficinetly comprehensive

All the techniques involved in the process of making good explanatory graphics will essentially be helping the user develop a good mental model.

For more information on Prof. Ric Lowe, including information on publications, you can check out Ric Lowe's web page.

Elearning Essentials Workshop - Sydney

A two-day interactive workshop exploring real-life elearning issues and practices

Date: 1 - 2 December 2005
Location: Four Seasons Hotel, Sydney

ElNet, the Elearning Network of Australasia, proudly presents our exclusive annual interactive workshop Elearning Essentials. This two-day workshop will take a small group of participants through a comprehensive series of elearning strategies and problems, using expert discussion and case studies in action, designed to give you the opportunity to be fully involved.

Elearning Essentials uniquely sets itself apart from other talk-based seminars by directly engaging the participants with practical problems and solutions. Industry experts will explore the practical uses of elearning within real organisations, giving you a genuine elearning experience and skills to bring back to your organisation.

More info and brochure at ElNet's Website

Web Accessibility Forum - Sydney

The Web Accessibility Network for Australian Universities (WANAU) will be holding a Web Accessibility Forum this October, with speakers from the Human Rights and Equal Opportunity Commission, Vision Australia and others.

Registration is free.

Find out more at the WANAU website.

When: 18th October
Where: Sydney (Australian Catholic University, North Sydney campus)

Call for papers: Audio-visual communication

Prism, a free-access, fully-refereed academic journal on public relations and communications will be publishing a special issue on visual communication. This could be a handy spot for publishing any initial research, thoughts, discoveries or case studies in the area of audio-visual design for e-learning. According to the specs, possible topics include:

• What new research approaches can be developed to account for the specificity of visual elements as opposed to textual elements?
• How can visual or audio-visual elements be integrated in learning processes?
  
• How do different researchers use visual or audio-visual elements to present social constructs in their specific fields of interest?
• How are collective identities defined, constructed and represented in visual and audio-visual media? What methodologies can we develop to make sense of this construction process?
• How do visual artefacts and methods help or hinder the representation of constructs such as cognitive interpretations, understanding, and insights? How may they report on interaction or impact on behaviour?
• How may individual and collective visual representations complement each other in, for instance, collective capacity building?
  

For more information, download the Call for Papers document at:
http://praxis.massey.ac.nz/335.html

Mayer's Principles for the design of Multimedia Learning

The following is a summary of the information, principles and research findings presented by Richard E. Mayer on the 1 Sept 2005 at the University of New South Wales in Sydney, Australia. For further information on Mayer's work, please see the references at the end of this article.

People learn better when multimedia messages are designed
in ways that are consistent with how the human mind works
and with research-based principles

Research-Based Principles for the Design of Multimedia Messages

• Multimedia principle: People learn better from words and pictures than from words alone.

Principles for managing essential processing

• Segmenting principle: People learn better when a multimedia lesson is presented in learner-paced segments rather than as a continuous unit.
• Pre-training principle: People learn better from a multimedia lesson when they know the names and characteristics of the main concepts.
• Modality principle: People learn better from animation and narration than from animation and on-screen text.

Principles for reducing extraneous processing

• Coherence principle: People learn better when extraneous words, pictures, and sounds are excluded rather than included.
• Redundancy principle: People learn better from animation and narration than from animation, narration, and on on-screen text.
• Signaling principle: People learn better when the words include cues about the organization of the presentation.
• Spatial contiguity principle: People learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen.
• Temporal contiguity principle: People learn better when corresponding words and pictures are presented simultaneously rather than successively.

Principles based on social cues

• Personalization principle: People learn better when the words are in conversational style rather than formal style.
• Voice principle: People learn better when words are spoken in a standard-accented human voice than in a machine voice or foreign-accented human voice.
• Image principle: People do not necessarily learn better from a multimedia lesson when the speaker’s image is added to the screen.

One last principle

• Individual differences principle: Design effects are stronger for low-knowledge learners than for high-knowledge learners. Design effects are stronger for high-spatial learners than for low-spatial learners.

References

Mayer, R. E. (2001). Multimedia Learning

New York: Cambridge University Press.

Clark, R. C., & Mayer, R. E. (2003). E-learning and the Science of Instruction. San Francisco: Jossey-Bass.

Mayer, R. E. (Ed.). (2005). The Cambridge Hanbook of Multimedia Learning. New York: Cambridge

University Press.

See also...

• When to use animations for learning

Richard Mayer in Sydney!

Exciting news for elearning designers in Sydney. Multimedia learning guru (and I don't use that over-used epithet lightly), Richard E. Mayer will be giving two seminars at the University of New South Wales (UNSW). Dr. Mayer has published a wealth of research-based koweldge on multimedia learning (such as his key work for designers: Multimedia Learning). Mayer's is exactly the kind of work that is directly relevant to visual and instructional designers of elearning. Much of his research deals with how different media can be used most effectively to foster learning and improve outcomes. Publications on visual design for elearning invariably site Mayer's work. A few examples of his research findings are listed below.

Generally speaking, according to some of Mayer's research, learning tends to be more successful where...

• Text and images are used together (rather than text alone)
• Related images and text are placed close together
• Animation is used with narration, rather than by itself, or if by itself, then in small chunks
• (These are just a few examples, see Mayer's work to find out more)
  

Seminar info

"The School of Education, Faculty of Arts and Social Sciences, UNSW is pleased to announce that it will be hosting the upcoming visit of Richard E. Mayer, Professor of Psychology, University of California, Santa Barbara (UCSB). Professor Mayer is a leading international researcher in education and psychology, having been ranked the most productive educational psychologist in the world for over a decade. He has published 18 books and over 250 articles covering the areas of cognition, instruction, and technology with a special focus on multimedia learning and problem solving."

Seminar 1

Topic : Constructivism, problem based learning, inquiry based learning and discovery based learning
Title : Reflections on "Should There Be a Three-Strikes Rule Against Pure Discovery Learning?"
Date : Wednesday, 31 August, 2005
Time : 5:00pm- 6:30pm
Location : Robert Webster Building, Webster B (2nd floor)
(Enter UNSW through Gate 14, Barker Street)

Seminar 2

Topic : Cognition and Multimedia Learning
Title : Multimedia Learning
Date : Thursday, 1 September, 2005
Time : 1:00pm - 2:00pm
Location : Law Room 1201, Library Stage 2 Building
(Enter through Gate 11, Botany Street)

To register:

For catering purposes, could you please indicate by email to this address if you will be attending the Wednesday (31 August, 2005) seminar:
Paul Chandler - p.chandler@unsw.edu.au

Principles of interaction design

Interaction design is one of the primary duties of any elearning designer. The design of interactivity is often shared by the instructional designer, who thinks up and describes interaction types, and the visual designer who brings them to life and adds to them. Either way, good interaction design is essential to good elearning, and is inextricably linked to the interface and multimedia design.

Bruce Tognazzini (otherwise known as TOG) of the world renowned Nielsen Norman Group has published a set of fundamental principles of interaction design. All of these are applicable to elearning, all the more so if you're creating applications or self-contained tutorials. The 16 fundamental principles are:

1. Anticipation
2. Autonomy
3. Color blindness
4. Consistency
5. Defaults
6. Efficiency of the user
7. Explorable interfaces
8. Fitt's Law
9. Human interface objects
10. Latency reduction
11. Learnability
12. Metaphors
13. Protect user's work
14. Readability
15. Track state
16. Visible navigation
    

Don't sit there trying to decode the list -- take a look at the complete explanation here:
http://www.asktog.com/basics/firstPrinciples.html