Experience-Enabling Design: An approach to elearning design (II) - 23 July 2006

by L. Ravi Krishnan and Venkatesh Rajamanickam

Read this article in Chinese (translated by Ying He, proofread by Christina Li).
Translated and reprinted with permission from the authors.

Table of Contents

• Introduction
• What is Experience?
• Experience and elearning Design
• The Experience Disabler – Layout Thinking
• How to Design Experiences
• 1. Embrace experience as an outcome
• 2. Narrow the gap from idea to outcome
• 3. Create a shared Language
• 4. Drive constituent parts towards a total experience
• Conclusion
• References

Editor’s notes: This is the part two of this article, – from How to Design Experiences to the end.
Read the first part of this article

HOW TO DESIGN EXPERIENCES

One may relate the above example to elearning products. Layout decisions like the course structure, navigation, media, etc., affect the experience of the product. For a learner, the ease and intuitive way of getting in, moving around and exiting are the experience factors. How do we bridge this gap between layout and experience? Four possible guidelines, which can help a designer ensure outcomes are experienced in an elearning product, are:

1. Embrace experience as an outcome
2. Create a shared language
3. Narrow the gap from idea to outcome
4. Drive constituent parts towards total experience

Figure 1: Bridging the gap between layout thinking and experience outcome

1. Embrace experience as an outcome

The first step in bridging the gap between layout and experience is the need to embrace experience as the outcome for the product. The architect in the previous example should not have seen his contribution as creating a layout. He should have seen his contribution as creating spaces that evoke desired experiences. He should have imagined how it feels to stand in different points in the building. The darkness of the cellar, the privacy of the bedroom and the entry points to lift are some of the experience considerations that should have influenced the thinking. Layout is just a convenient visual tool to communicate the specifications and is not the natural way of building spaces. If 2 dimensional plans disable experience thinking for architecture, layout grids do for pages in a book, course curriculum does for learning. This is not to undermine layout thinking. We need to acknowledge that layout is not the end but a means to attain experience outcome.

Case – Dorling Kindersley publications

Let us examine how experience considerations have made a difference and enabled a sustained credibility for a brand.

Figure 2: A page designed to evoke the wonder of bicycle

Dorling Kindersley, popularly known as ‘DK’ is a household name in children publications. DK evokes feeling of finely printed glossy visual books rich with photographs and illustrations. By themselves all of these are not impossible qualities to achieve by several others in publishing today. What is so unique about DK? DK consistently distinguishes itself in making its book an experience to the readers. There is one experience that any of DK books so consistently provide – ‘generate awe about the world around us’. The design team of DK page after page ensures the awe and wonder of the world is experienced. Such awe cannot be built by simply putting a high quality picture and some text. There is a deliberation to combine pictures and text in ways that enables readers to connect with the world by demystifying details and yet retaining the wonder. This must not be possible if designers do not embrace experience as an outcome. Let us examine one page from the book to see how various design elements induce the desired experiences in the reader.

1. “A cycle is a complex object”
   When all the parts are put in a page the complexity of the object is revealed. We like to believe that a cycle is complex and that natural expectation is fulfilled when we see ‘so many parts’ in one page.
2. “A cycle has more parts than I thought!”
   By dissecting the cycle into so many parts it kind of surprises the reader on the number of hidden parts to the few visible parts that externally one sees in a real cycle.
3. “There are parts that go with each other”
   At one level the complexity is revealed and at the same level with the proximity of parts it is made so easy to relate which parts go with which one.
4. “There are big parts and small parts”
   The comparative sizes are so subtly revealed that one can make scale comparison of any disparate components in the cycle.
5. “Now I can name the parts of a bike”
   By having the label of each part close to it the child is encouraged to learn the name while focusing on a part. There could have been numbered components with a legend at the bottom. But this would have spoilt the experience.
6. “It is like my cycle”
   The use of photographs is also a deliberate attempt to get the child see a ‘real’ cycle. Furthermore, photographs lend themselves to realism and colourfulness – both of which appeal to young children.

2. Narrow the gap from idea to outcome

A seemingly impressive design idea can cease to be effective when implemented. This happens because translation of an idea involves narrowing ones own gap in thinking. The ‘first idea’ always leads to disastrous implementation. The ‘first idea’ always comes as an expectation from the customer. One needs to cultivate a method of detachment by distancing oneself from the idea in order to evaluate its validity. Common decisions like choice of the photograph or illustration or icons to depict an idea involve the narrowing down of an idea into executable outcomes. Experience as a need and expectation becomes the criterion that challenges such outcomes. For example, if the use of a certain photograph seemed like an obvious choice, it might not seem so, when considered experientially, and a replacement might be warranted.

Case – Use of characters in corporate presentations

Corporate presentations feel the need to add flavour by interspersing text with visuals. The visuals are mostly stylized clipart predominantly cartoonish characters. It is believed that clipart will break the monotony of content.

Figure 3: Transformation from detailed representation to effective minimalism

Though as an idea there is a merit in most of the implementations one will see the clipart sticking out. The content or the idea gets diluted with clipart grabbing the attention. In some cases the clipart are so much out of style and out of context with the tone of the presentation that it greatly undermines the value of presentation. Here is a case to demonstrate how the idea of use of characters by deliberate narrowing from the idea to outcome resulted in a powerful implementation (Ravi Krishnan L. 2001).

Parameters and thinking that went into the process of narrowing down:

1. The original idea is the first reaction to characters. With details like this one will grab a lot of unwarranted attention and debate on race, colour, sex, age, dress etc.
2. Use characters that represent both the company and the customer. A slight change of colour that can consistently identify them
3. The characters also need to be shown in more than one context if they stay meaningful throughout the presentation
4. The character needs to have just enough details to communicate without being intrusive
5. The style should enable seamless integration with multiple contexts in which it will be shown
6. The character should help get across abstract ideas
7. The characters should be flexible for scaling and manipulation without altering the style.

3. Create a shared language

A product involves several specialists pooling their expertise together. Designing experiences is possible only when there is a shared language amongst the contributors to the product. This shared language should capture the mission of the outcome in a simple language that enables everyone to link his or her contribution for the final experience of the product. Specificity helps remove ambiguity. Rather than the adjectives that tend to be very broad in their meaning and liable for multiple interpretations, the language has to be very precise to correctly orient the efforts. Designer’s role in establishing this shared language is key to get the team to shift to experience as the outcome.

Case – Use of shared language for an elearning product to train volunteers of Red Cross

The purpose of the product was to train volunteers from any part of the world on setting up of a warehouse at the disaster site. After working out the various specifications of the product the team came out with a shared language, at a glance. This directed the team to dig out patterns that at a glance stand for and incorporate them. The interface, the treatment of the content, choice of colour, style of writing, style of illustration and several other aspects worked together to generate the at a glance feel in the end (Trina Systems. 2002).

Figure 4: Content treatment to enable experience at a glance

The use of the shared language at a glance did the following for the team:

1. Made end purpose recognizable: For many team members, the end outcome might feel distanced from the activity they are performing. But each and every contribution go to build the outcome. So shared language becomes a practical way to keep the end purpose recognizable by one and all.
2. Helped contributors to self validate their contribution: Individual contributors are the best judge of how well their contribution can make or break the outcome. This language constantly goads self-validation. As it captured at the level anyone can connect each ones prior experience of at a glance helped refine their own contribution.
3. Generated self-mandated discipline: Especially in a design team there can be difficulties of resolving conflicts. In this case the complimenting of visuals and text was the biggest challenge. A little more detail or text could have disturbed the balance. The language helped to sensitively establish this balance as the contributors disciplined themselves.

4. Drive constituent parts towards total experience

Time and again in elearning products, we see brilliant experience being achieved in constituent parts, but the product experience as a whole falls short. This problem is more pronounced in team efforts where individuals in team possess different levels of skill and command varying degrees of influence over the final outcome. Each of the team members should extend or underplay their own contributions keeping the final experience in view.

Case – Visual explainers in El Pais

El Pais is a Spanish news website that provides reconstruction of events such as accidents and crimes. Their style of documentation, commonly known as visual explainers (Nichani. M and Rajamanickam. V, 2003) has become a genre for news depiction on the Web. A key objective of these explainers is to explain visually by giving the reader a vicarious experience of the event. This example explains the collision of two trains triggered by an automobile veering off a nearby highway. The key to recreating experience for an event like this one is to establish the role of geography, the cause, the chronological sequence, and the facts of the objects involved. All of these factors have to be communicated effectively with right amount of detail and emphasis to make sure the viewer experiences the incident as authentic as possible.

Figure 5: Well considered parts forming an effective whole

1. Presenting the geography: Establishing geography lets the viewer get the bearings on the topography of the event. The designers have chosen the top view because the key components are the highway and the tracks below. One may notice the view is closer when the first collision happens and gets wider during the second collision. Through this the difference in scale of collision is established. The viewer is able to experience the fact that a small vehicle has triggered a catastrophic collision.
2. Pointing the cause: While showing the cause the exclusive trigger that set the event is important. For instance here the vehicle that triggered the event is the only one shown. By not showing the rest one still gets the feel it is a busy highway. It would have been redundant to show movement of other vehicles. This discipline of calculated depiction comes from the emphasis on what is important.
3. Showing the sequence: The sequence in which the geography, the objects and the trigger interact over time determines the extent of the mishap. There is a specific detail in each of those components that are critical to appreciate the event. The narration needs to connect all these details precisely to make sense of these components. This visual explainer brings about in a significant way the interplay of all of these factors.
4. Communicating the facts: Experience of an event enhances with the knowledge of associated facts. Too little may lead to an incomplete experience, while too much may result in information overload. In this case, the El Pais designers have struck an optimum balance by providing limited information related to locations, locomotives, wagons, and history of train accidents.

CONCLUSION

So how does the foregoing discussion connect with the elearning context? The answer lies in the commonality of certain principles across diverse spheres of human enterprise. Layout-experience gap is not unique to elearning, as the comparisons in this article might have amply illustrated. The guidelines derived from these examples provide us a framework for experience-enabling design that helps designers to get away from layout thinking and focus on the outcome. Experience-enabling design requires questioning, reflecting and drawing on links between product and its experience.

REFERENCES

• Davis, Meredith & Dubberly, Hugh (2001). AIGA Briefing Paper on a Curriculum for Experience Design. In Heller, Steven (Ed).
• The Education of an E-Designer. Allworth Press, New York.
• DK Publishing. Ultimate Visual Dictionary (1998).
• El-Pais. Train Accident in England (2003). http://www.elpais.es/
• Isen, A. M. (1993). Positive affect in decision making. In M. Lewis & J. M. Haviland (Eds.), Handbook of Emotions (pp. 261-277). Guilford, New York.
• Nichani, M., Rajamanickam, V. Interactive Visual Explainers—A Simple Classification (2003). http://www.elearningpost.com/features/archives/002102.asp
• Ortony, A., Norman, D. A., & Revelle, W. (2003). Effective functioning: A three level model of affect, behavior, and cognition. In J. M. Fellous & M. A. Arbib (Eds.).
• Who Needs Emotions? The Brain Meets the Machine. Oxford University Press, New York.
• Ravi Krishnan L. Talent Appreciation Process—Potential to Performance—Character design (2001).Trina Systems. Elearning course on Warehouse Management – Prototype (2002).

Read the first part of this article

This paper was presented in May 2004, at the Global Conference on Excellence in Education and Training, Singapore Polytechnic.

Possible Related Articles:

• Toward a Model of Innovation
• Infographics: Being and Doing (Part II)
• Infographics: Being and Doing (Part I)
• Design for the Dream Economy
• Getting from Research to Personas: Harnessing the Power of Data
• Simplicity: The Distribution of Complexity
• Starting a Career in User Experience
• User Experience Group Development and Integration
• Tag Cloud in Chinese websites
• Early and often: How to avoid the design revision death spiral