Open access

Narration Board as a Design Tool for Visualising Design Concepts for Interface Designers

Written By

Chui Yin Wong and Chee Weng Khong

Published: December 1st, 2009

DOI: 10.5772/7716

Chapter metrics overview

2,997 Chapter Downloads

View Full Metrics


1. Introduction

In recent years, user studies have been highly advocated by human-computer interaction (HCI) researchers and practitioners to elicit user requirements for future products and services. In doing so, it is imperative for HCI and design communities to delve into user problems, and gain in-depth understanding of users’ behaviour. To translate the data gathered from user studies throughout the design process, scenarios are usually presented as text-based descriptions that depict personas within social contexts. However, scenarios that are depicted in text form have limited communicative values. Text-based scenarios pose problems to the design team as they find it complicated to grasp the gist of ideas and share a common ground across a multi-disciplinary team. A scenario described in text is limited to the fluency and vocabulary of the author, and the subsequent interpretation by its readers.

Having a coherent design vision across a multi-disciplinary team is crucial to streamline the design process. Usually, a multi-disciplinary team is comprised of various backgrounds, such as a project manager, interface designers, graphic artists, human factors specialists, user researchers, technical writers, software developers, engineers and marketing personnel. Moreover, text-based scenarios may not be well comprehended to achieve the high-level product conceptualisation process required for the design team.

To conceptualise user scenarios into visual and textual presentation, the narration board is a powerful design tool to help translate user observation studies into a storytelling format. It also helps to communicate design values and ideas among the design team via visualising user scenarios in its proper context during the early design stages. Hence, an interface designer plays an imperative role in conceptualising ideas and presenting a shared goal in a visualised form, rather than a limited text-based description. As a result, the objectives of this chapter are twofold. The first section discusses the rationale and the context of narration boards. We will highlight how a narration board is a useful design tool to conceptualise and visualise user scenarios for future design concepts in a multi-disciplinary design team. Secondly, this chapter attempts to examine the effectiveness of the narration board by quantifying its narrative components in relation to the attributes of the final design concepts. This is important as we later exhibit the values of the narration board towards communication and sharing of ideas, design principles, and intended lifestyles.


2. Role of Narration or Storytelling

2.1. Rationale of Narration

According to the National Storytelling Network, storytelling is defined as an ancient art form and a valuable form of human expression. Storytelling or narration is used interchangeably in this text, which delineates a story that is created in a constructive form (written, spoken, poetry, prose, images, song, theatre or dance) describing a sequence of fictional or non-fictional events. It is an interactive art of using words and actions to reveal the elements and images of a story while encouraging the listener’s imagination (National Storytelling Network, n.d.). Basically, storytelling is perceived as an acceptable channel to share similar beliefs and thoughts among a community. In general, stories are easily remembered by society rather than design principles, facts and figures.

There are several reasons why stories are good communication catalysts for a multi-disciplinary design team [Erickson, 1995; Specialist Library Knowledge Management; National Storytelling Network, Society for Storytelling]:

  • Stories communicate ideas holistically, conveying rich yet clear messages. Thus, they are an excellent way of communicating intricate ideas and concepts in an easy-to-understand format. Therefore, stories allow people to convey tacit knowledge that might otherwise be difficult to articulate.

  • Stories are easily remembered by people because they are circulated with human passion and emotions. Storytelling looks at objects and events from human perspective, making it easier for people to relate to them.

  • Stories aid in team-building as it becomes a communication tool to share similar user-activities events and information that help in constructing vision. It eases the communication flow by nurturing a sense of community and help to build relationships, especially in a multi-disciplinary design team.

  • Storytelling provides the context in which knowledge arises as well as the knowledge itself, and hence it can increase the likelihood of accurate and meaningful transfer of knowledge.

  • Storytelling is interactive. Storytelling involves a two-way interaction between a storyteller and one or more listeners. The responses of the listeners influence the telling of the story. In fact, storytelling emerges from the interaction and cooperative, coordinated efforts of teller and audience. It is known that different culture and situation creates different expectations for the exact roles of storytellers and listeners, who speak how often and when, for instance, that create different forms of interaction. The interactive nature of storytelling partially accounts for its immediacy and impact, where it directly connect to the teller and audience.

  • Storytelling presents a story. Storytelling involves the presentation of a story in a narrative form. Stories from a specific culture can be used to provide an insight into that culture. Thus, storytelling develops awareness of historical and global cultures, the need for inter-generational exchange and its rewards. Thus, a storyteller can widen the range of people’s emotional, cultural and moral responses.

  • Storytelling is universal. Stories and storytelling are universal aspects of human communication that connect people through time and across cultures. It works for all age groups from children to adults.

2.2. Narration Board as a Communication Tool

Storytelling has been previously applied in different disciplines such as film, entertainment, education, faith and religion, heath and therapy, library, museum and heritage, knowledge management, business and organisations (Glassner, 2004; Crawford, 2004; Cox and Albert, 2003; Morris, 2003; Booth, 2001; Irving, 2004; Sawin, 2004; Schneider, 2002; Sima and Cordi, 2003; Snowden, 2002; Wacker and Silverman, 2003; Walsh, 2003). Having said this, storytelling has also been adopted in HCI and design communities in a different manner.

HCI researchers and design practitioners recognise the importance of gaining user insight from fieldwork studies. In many ways, user researchers or ethnographers conduct user studies to elicit user requirements during the early stages of the design process. This is meant to have a closer understanding of how users behave and interact with artefacts within the real environment. Such studies will highlight social activities, trends and values, which are then analysed and incorporated in the scenario-building process to depict user personas in the context of use. However, it is rather difficult to communicate user problems and translate user scenarios in its context among a multi-disciplinary design team. Thus, having a unified vision and shared value among a multi-disciplinary team is crucial in making a design project successful. User researchers and interface designers can work collaboratively to transform user stories and formulate user scenarios into visual presentation form. As a result, narration (or story) board is a powerful design tool to translate the user insight in a cross-multidisciplinary team.

At the Interface Design (ID) Department, we worked closely with Telenor Research and Innovation Asia Pacific (TRICAP) for a design project with the theme “Digital Communities” in 2006-2007. Thirty-six (36) design projects were successfully completed. During the panel judgement session, narration boards were used as one of the persuasive design tools to present user scenarios, and also to highlight possible design solutions to solve the exhibited user problems (see Figure 1 and 2). Out of the 36 design projects, five (5) best design projects were shortlisted for presentation among the TRICAP staff and management team (see Figure 3, 4 and 5). Narration boards were used as a communication tool for pitching ideas to convince the management team about the novelty of the design project’s solutions. All narration boards were illustrated with user scenarios in context.

Figure 1.

Narration board being used as a communication tool to highlight user problems and user scenarios during a design judging panel session (courtesy of ID/FCM, 2009).

Figure 2.

An Interface designer presenting user scenarios with the aid of narration boards (courtesy of ID/FCM, 2009).

Figure 3.

A team of interface designers pitching their design ideas using narration boards to the TRICAP management team (courtesy of ID/FCM, 2009).

Figure 4.

Narration boards are used to communicate the ideas across the management team during a design presentation (courtesy of ID/FCM, 2009).

Figure 5.

The audience were engaged with user stories illustrated in the narration boards (courtesy of ID/FCM, 2009).


3. Narration in the Design Context

3.1. Narration in the Design Process

Narration has been used and applied in different stages of the design process. van der Lelie (2006) described the value of storyboards in the product design process. The term “storyboard” is used instead of narration board. In each phase of the design process, the form of storyboards has its own style of exploring, developing, discussing or presenting the product-user interactions. The design process ranges from analysis, synthesis, simulation, evaluation to decision phase. The consideration of visualisation style is illustrated differently in relation to design activities, purpose/goals, and its representation form in each phase of design process (van der Lelie, 2006).

Despite that, there is a fascinating interest in exploring the context of use via ethnographic studies. There is also a noticeable lack of ability in articulating the problem-user concept, and how the information shown by the narration board can be used in the design process (Pedell and Vetere, 2005). At ID Department, we adopt a User Interface Design (UID) Process (Figure 6) across all the design projects (Wong, Khong and Thwaites, 2008). Here, we focus and discuss how narration boards are used in the interface design process at the early stages of concept design for ideation purposes instead of following through the whole UID process. Figure 7 shows the brief requirements in the conceptual design phase for interface designers.

There are two types of narration boards being adopted, which are the Narration Board (pre-ideation) and Narration Board (post-ideation) (Wong and Khong, 2007). For the Narration Board (pre-ideation), interface designers are required to translate the results of observation studies, lifestyles, moods and market research into problem scenarios highlighting the problems or any issues that users face in the real environment. Different design aids such as mood boards, product design specifications, and product positioning are also developed in assisting designers to achieve a holistic grasp on the concept designs being developed. The interface designers will then be required to produce another Narration Board (post-ideation) to project how their concept designs will be used in future scenarios.

Figure 6.

A simplified User Interface Design Process (UID) Model diagram showing the design tools and human factors techniques applied across the design process (Wong, Khong and Thwaites, 2008).

Figure 7.

Brief Conceptual Design Phase (Wong and Khong, 2007).

In the realm of interface design, communication between designers and other team members are important for a successful design project. Narration board is a valuable design tool to the design team as it provides a common visual-based medium to share the common understanding of future design developments.

Conventionally, scenarios are illustrated in textual descriptions to portray user-interaction scenarios (Rosson and Carroll, 2002). For designers, visual-based mediums are important to assist them in ‘visualising’ and developing ideations for future design solutions. In such circumstances, scenarios described in visual forms accompanied by text explanations serve the communication purpose within the design team. Nonetheless, visual-based narrative is a valuable aid in provoking the thinking process, evoking ideations and to spur creativity to higher levels for interface designers. Van der Lelie (2006) highlighted the value of storyboards in product design process, particularly for product designers in understanding the product-user interaction in context. She mentioned that a product design storyboard is powerful means to the designer, simply because it enables the reader access to the expressed ideas on two levels:

  1. The reader can experience the visualised interactions by empathising with the user or the situation. This help(s) to establish a common ground, which supports communication within the design team about each member’s thoughts. These thoughts could be difficult to communicate in the abstract form due to individual’s different disciplines.

  2. The reader can reflect on the visualised interactions from his or her own expertise, by withdrawing the experience and looking at the unfolding event. It was highlighted that storyboard represents many of the important aspects of the contexts in visual form, and to supports analysis and elicit discussions, and inform the team members in picking up certain aspects of interaction by referring to the issues or areas of concentration in visual form.

3.2. Adoption of Narration or Storytelling into User Scenarios

As described in earlier section, storytelling has been widely adopted in different disciplines, particularly in film, animation, education, design and business. For instance, Walt Disney uses storyboards for creating motion pictures and animation characters in their film production process. In the real business world, multi-national companies like IBM’s Knowledge Socialisation Project use storytelling to share business visions within the organizations. Instructional designers may use storyboards to create learning objects for courseware design whilst developing educational systems.

In design practice, storytelling has been used by designers to share the conceptual design prototypes and design solutions across the design team. Stories and event scenarios are collected from observational fieldwork studies to share user behaviour, cultural belief, and insight to the whole design team for design strategy. Stories are concrete accounts of particular people and events, in particular situations; scenarios are often more abstract and they are scripts of events that may leave out details of history, motivation, and personality (Erickson, 1995). Despite the differences, storytelling and scenarios are intertwined and both are difficult to be distinguished as design stories or user-interaction scenarios.

In the user requirement stage, user researchers collect user stories and observational information from fieldwork studies. Observational data is then translated and analysed into various themes and consumer insights. This helps to create realistic example and build scenarios as shared stories in the design team. User profiles, characters and goals form personas in scenario-building process. Cooper (1999) first proposed the concept of persona and it has widely applied in academic and industrial practice and the concept has been integrated in various design projects. In essence, persona is an archetype person representing a user profile whereas scenarios inherently describe how a person interacts with the product in the context of use.

As mentioned in 2.1 section, stories are easily memorized by people, the medium of presenting storytelling are crucial in making the stories memorable and the shared visions are inherently comprehended within the design team. Rosson and Carroll (2002) described user-interaction scenarios are setting, actors, task goals, plans, evaluation, actions and events. However, the design scenario activities are illustrated in conventional text-based description, embedding characteristic elements of user interaction scenarios. We are particularly interested to translate user stories into narration boards to assist interface designers in conceptualising final design concepts. It is always a challenge for designers to grasp the user problems and brainstorm ideas in order to produce design solutions. Thus, next section describes how narrative scenarios are illustrated in pictorial form to conceptualise high-level of user-interaction scenarios.

3.3. Types of Narration Boards

Several types of medium have been used to illustrate narration or storytelling in either analogue or digital format such as hand drawing, sketching, photography and video (Cheng, 2006; van der Lelie, 2006). There are some software tools developed for storytelling such as DEMAIS (Bailey, Konstan and Carlis, 2001), and Comic Book Creator™. In developing narration boards, the interface designers are required to consider the characteristics of user personas, scenarios and context of use. They are able to select any medium of communication to illustrate the narrative scenarios. Due to time and cost considerations, hand sketching, marker rendering and drawing on layout pads are the most cost-effective way. The designers then scan their narrative scenarios into digital formats, which can then be posted online for sharing purposes. Alternatively, the interface designers can transfer the photographs they have captured during their observation studies using graphical software such as Adobe Flash™, Adobe Photoshop™ or Comic Book Creator™.

Narration boards also play an important role in bridging the communication gap between the design team and other corporate departments such as top management, manufacturing department and the clients themselves. Pedell and Vetere (2005) also illustrated how picture scenarios were used to represent context in design process. Generally, there are two types of narration boards, which are Narration Board (pre-ideation) and Narration Board (post-ideation).

  1. Narration Board (pre-ideation): For top management and the clients, they usually do not have ample time to go through the detailed design levels. Hence, narration board assists in projecting the problem scenarios of the user experience, particularly at the user requirement stage. This is illustrated in the Narration Board (pre-ideation) (Figure 8). An example of the E-Hovx project depicts a scenario faced by a primary school pupil encountering danger as he is robbed on his way home from school.

  2. Narration Board (post-ideation): On the other hand, top management and clients will be able to grasp the design solutions from the illustration of how the intended users interacting with the new product design concepts or design solutions in the future scenarios as demonstrated in Narration Board (post-ideation) (Figure 9). Figure 9 shows how the concept of the E-Hovx device assisting in the scenario by producing an alarm to alert the pupil and to ward off any potential harm.

Figure 8.

An example of a Narration Board (pre-ideation) is depicting a scenario of a primary school pupil who is robbed on the way to home from school (courtesy of ID/FCM, 2009).

Figure 9.

An example of Narration Board (post-ideation) illustrating a scenario of how E-Hovx plays as a role in protecting the primary pupil from a potential robbery (courtesy of ID/FCM, 2009).


4. Evaluating Narration Board for Visualising Final Design Concept

4.1. Method

In order to evaluate how narration boards (pre-ideation) are effective design tools in assisting interface designers for generating ideations and visualizing final design concepts, an empirical study was conducted. The study examines the relation between the two variables of narration boards and final design concepts. The study considered twenty (20) different design projects developed by interface designers as test subjects (sample size N=20) at the Interface Design Department (Wong and Khong, 2007). Based on the above description, the null hypothesis (Ho) is “there is no relation between narration board and final design concept”. The alternative hypothesis (H1) is where ‘there is a positive association between the narration boards (pre-ideation) with final design concept for a design project.’

To produce a successful narration board, there are certain elements to be highlighted by the designers. Truong, Hayes and Abowd (2006) highlighted that there are five significant elements for a narration board to convey its narrative across to the design team. The five elements of Narration Board are described as follows:

  1. Level of detail: the level of detail presents in a storyboard must take into account how many objects and actors might be present in a particular frame, the level of photo-realism incorporated by the designer, and the designer’s choice to display the entire scene or only details of the interface.

  2. Inclusion of text: designers can include text either through tagline narrations for each pane or within individual frames as speech, thought bubbles, or labels and signs that would be present in the real life environment depicted in the storyboard. Alternately, designers can choose to depict the story entirely using visual elements with no text.

  3. Inclusion of people and emotions: storyboards can include renditions of human users demonstrating interactions with an interface. Designers can also use these characters to build empathy for potential users, display motivation, or convey other intangible elements, such as how the application affects the user. Alternatively, designers can also build empathy by removing people entirely and drawing the interaction as though the reader is the actor.

  4. Number of frames: the number of different panels present in a single storyboard can vary anywhere between 1 and more than 20 frames, although the majority of storyboards we collected included between 3 and 6 frames, noted by experts to be the optimal size for conveying a single feature or activity. Multiple features and activities were usually depicted in multiple storyboards.

  5. Portrayal of time: designers can explicitly indicate time passing within a storyboard or use transitions that convey changes over time, and may include indicators of a known event, festival, age, or season.

On the other hand, there are also 5 attributes that determine how usable and functional the final design concepts are deriving from the input of the narration board. These 5 attributes of generating Final Design Concept in the later conceptual design stage are:

  1. Form and functionality: shape and structure of an object; physical, functional, and performance characteristics or specifications that uniquely identify a component or device and determine its interchange-ability in a product or system. The belief is that the shape of an artefact or interface should have an intrinsic relationship to its intended function or purpose. Especially in interface design, the design of an artefact or interface is more often than not intended to achieve a purpose, task or usage.

  2. Usability (ease of use): usability is defined as the ‘effectiveness, efficiency, and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment (International Organisation for Standardization (ISO), 1998). The final design concept is examined based on how usable is the design for its targeted users to achieve the product’s goal and tasks.

  3. User-artefact illustration: the final design solution is usually illustrated in visual form either in two- or three-dimension (2D or 3D). It is essential to portray and depict how the intended user may interact with the final design concept. For this, designers adopt and apply the sketch analysis technique to illustrate user-artefact interactions. Basically, sketch analysis (Stolpmann and Roller 1993; Arnheim 1996) is a technique of applying skills and experience in sketching human forms so as to study and visualise human-device interaction. It allows designers to utilise their drawing skills in visualising body positions, form and pose especially on parts of the body that humans utilise to interact with their environment. This method elicits visual analysis and design feedback of users with the future product.

  4. Product semantics: Krippendorff and Butter (1989) defines product semantics as a systematic inquiry into how people attribute meanings to artefacts and interact with them accordingly and as a vocabulary and methodology for designing artefacts in view of the meanings they could acquire for their users and the communities of their stakeholders. Users generally understand artefacts by their interfaces, and sometimes how the artefact presents to the user may indicate its affordance. In this case, the meaning of an artefact used highlights the range of imaginable senses and actions that users can expect. Interfaces need to be designed in the way of producing ‘an intrinsically motivating interaction between human actors and their artefacts (Krippendorff and Butter, 1989; Krippendorff, 2006).’

  5. Design appeal (emotional and mood): an emotion is a mental and physiological state associated with a wide variety of feelings, thoughts, and behaviour. Scherer (2003) defined emotion as episodes of massive, synchronized recruitment of mental and somatic resources allowing to adapt to or cope with a stimulus event subjectively appraised as being highly pertinent to the needs, goals, and values of the individuals. Design appeal indicates emotions that always imply and involve a relation between the person experiencing them and a particular object whether s/he is afraid or proud of something (Desmet, 2003). The attribute of design appeal is to facilitate the relationships between the final design concepts (products) and user responses with regards to emotion or mood.

This study looks at 20 design projects (DP) developed by interface designers addressing a design theme titled i-Companion (Wong and Khong, 2007). The DPs were selected based on the inclusion of the Narration Board (pre-ideation) and final design concepts from the design process. To quantify the effectiveness of the narration board, the usability specialists justified the scores based on a 1-5 point Likert scale (1 is the least, 5 is the most applicable of applying the elements) on the elements of the narration board. The elements look at level of detail, inclusion of text, inclusion of people and emotions, number of frames, and portrayal of time. Subsequently, a final score was given on the 20 DPs respectively based on the sum of the 5 narration board elements. On the other hand, to evaluate the output of final design concepts, the final design concept scores were calculated with the total sum of the 5 attributes, that is form and functionality, usability, user-artefact illustration, product semantics, and design appeal (emotional and mood) on the 20 DPs respectively.

4.2. Results of Pre-Narration Boards and Final Design Concepts

The table below (table 1) shows the summary of the final scores of narration board and final design concepts for the 20 DPs.

Design Project (DP) Narration Board Scores (N) Final Design Concept Scores (C)
DP 1 16 13
DP 2 17 18
DP 3 12 12
DP 4 10 9
DP 5 12 7
DP 6 8 7
DP 7 19 12
DP 8 13 7
DP 9 10 10
DP 10 12 13
DP 11 18 21
DP 12 12 8
DP 13 9 5
DP 14 5 5
DP 15 12 15
DP 16 12 11
DP 17 15 15
DP 18 14 16
DP 19 17 16
DP 20 16 17

Table 1.

A summary of the final scores on Narration Board and Final Design Concepts for 20 Design Projects.

Table 2 below shows a random selection of the Narration Boards (pre-ideation) and Final Design Concept for the ‘i-Companion’ design project:

Design Projects Final Design Concepts
Design Project (DP) 1:
Design Project (DP) 5:
Design Project (DP) 11:
Design Project (DP) 15:
Design Project (DP) 17:
Design Project (DP) 18:
Design Project (DP) 20:

Table 2.

Some examples of Narration Boards (pre-ideation) and Final Design Concepts for ‘i-Companion’ Design Project (courtesy of ID/FCM, 2009).


5. Data Analysis and Discussions

To examine the association of both the variables narration board and final design concept, non-parametric Spearman’s Rho test was carried out to study the correlation coefficient for the sample size (N) of 20. The diagram below (fig.10 shows the correlation matrix of the two variables (scores of narration board and final design concept). From the diagram, there is a statistically significant positive correlation between narration board and final design concept scores (rho=0.78, df = 18, p<0.001). Thus, those with higher scores in terms of the narration board components tend to produce better final design concepts, and vice versa.

Figure 10.

Spearman’s correlation produced by Correlate for the two variables (narration board and final design concept).

In order to examine whether there is a curvilinear relationship or any outliers on a correlation, the final scores of two variables (narration board scores and final design concept scores) were reported in a scatterplot diagram (Figure 10). From the diagram, there was no evidence of a curvilinear relationship or the undue influence of outliers.

Figure 11.

A scatterplot diagram showing the relation of narration board scores and final design concept scores for 20 design projects.

Apparently, the result shows that there is statistically significant positive relation between the two variables of narration board and final design concept. In other words, the higher scores of narration board would have the tendency of producing higher scores for the final design concepts as well. This is proven true where an interface designer, who is proficient in applying his or her design skills whilst possessing high levels of creativity, will usually be articulate enough to generate better design solutions and usable final design concepts. The creation of the narration board by designers requires them to be skilful in several areas such as 2D-3D visualisation, composition (still images and video), presentation techniques (marker rendering, colouring, ), photography, compilation, and storytelling. It is really up to the individual designer to select the best method to convey the narrative. As mentioned in the earlier text, the narration can be produced in digital or analogue formats. Nevertheless, it is found that skilful designers tend to select the mediums and methods of conveying storytelling in reflection of their personal maturity in the design sense, thus seemingly creating a correlation to their final design output.

However, there are some instances such as that exhibited by DP 5 and DP 8 indicating higher scores in the narration board while achieving lower scores in the final design concept. The reason for this is mainly due to time constraints faced by the interface designers having spent too much time and effort in producing the narration board (pre-ideation) and other design tools, resulting in lesser time to formulate complete ideations at the final design stage. As good as the narration gets, designers sometimes tend to get too involved in the process and misjudge the required timeline in producing the overall final design proposals. This is the case for designers of DP5 and DP8.

DP13 and DP14 scored the lowest for Narration Board, and noticeably similar low scores for their respective final design concept scores. Although DP13 applied photography in the pre- and post-ideation Narration Boards, the storytelling largely lacks the level of detail and a very poor treatment of highlighting the problems faced by the user. The final design was poorly developed and does not highlight enough details, such as in its form, functionality, overall design appeal, usability and selection of colour, in answering the user problems displayed by the pre-ideation Narration Board. On the whole, the solution provided by the final design concept was not coherent with the design theme of i-Companion. DP14, on the other hand, provided a very poor presentation of the pre- and post-ideation Narration Boards. The designer did not attempt to provide the detail and effort in storytelling the user problems in a concise manner. In addition, the designer’s treatment on the boards was mostly using a soft pencil and colour pencils, and lacked the rigour in storytelling. In a somewhat similar fashion, the final design concept was also not well conceived and was poor in its selection of form, design appeal, selection of colour, overall visualisation, and detailing.

Two high scoring Narration Board design projects are DP7 and DP11 respectively. Although DP7 provided a storytelling more in textual form, its Narration Board communicated poorly in visual means lacking the way of projecting emotion and humanistic values into its storytelling. The designer was careful in the textual description, but it was obvious that that was still somewhat inadequate to portray the overall user problem. The final concept design output from DP7 also lacked design appeal and treatment as compared to DP11. On the other hand, DP11 provided a very rich and balanced storytelling. The level of visual detail, emotions and humanistic considerations seems to carry forward into the formulation of the final design consideration.

The general observations gathered from this study tend to imply that the more elements of the Narration Board are applied, the higher the impact and the better the design solutions will be formulated by the interface designers. For instance, the pre-ideation narration board in Figure 8 reveals that there were certain level of details applied in narration board such as richness in colour, 8 narrated frames in sequence with number order, appropriate text inclusion in dialogues, portrayal of time and location, facial expression of users in the scenarios, issues highlighted in the user-scenario context revealing user requirements for problem-solving solutions. As a result, a device called E-Hovx was produced as the final design concept to help solve the pre-scenarios as shown in Figure 9. The E-Hovx device was also produced in high resolution 3D modelling and final prototype using Rapid Prototyping machine for detailed visualization and testing purpose.


6. Conclusion

In general, narration boards provide a visual reference for interface designers in terms of illustrating user problems via scenarios and a medium to promote future user-interaction scenarios. In many ways, its approach is visually tacit. When applied in a holistic manner, narration boards are powerful visual communication aids that can provide input towards design strategies. Its use not only benefits the design team but also helps to convey ideations to top management and to clients. It is proven that designers are more panache and creative in employing mixed mediums for producing narration boards. In a nutshell, a narration board with the required components of level of detailing, inclusion of text, inclusion of people and emotions, appropriate number of frames and portrayal of time will greatly help in visualising and generating final design concepts for interface designers.

Having said this, future studies will examine the relation of each component of the narration board with the attributes of the final design concepts. The future study will also cover which components will affect and result in the most usable and effective final design concept output. Apart from this, various expert opinions from multi-disciplinary team will be gathered to examine the uptake of narration board in visualising final design solutions in practice.


7. Acknowledgements

The authors would like to express gratitude to the staff and ID students involved in the i-Companion design projects at the Interface Design Department (ID), Faculty of Creative Multimedia (FCM) at Multimedia University (MMU) Malaysia. We also wish to thank our industrial collaborator, Telenor Research and Innovation Asia Pacific (TRICAP) for supporting our design efforts as mentioned in the paper.


8. Disclaimer

The authors wish to emphasize that the names and images shown in this paper are only for training and educational purposes, and does not intentionally infringe the rights of individuals or organisations. Any company names, registered trademarks or commercial names mentioned or shown in the text solely belong to their respective owners, organisations and institutions.


  1. 1. Arhnheim R. 1996 Sketching and the psychology of design. In: Margolin, V and Buchanan, R (eds). The idea of design: a Design Issues reader, 70 74 , MIT Press, Cambridge, Mass.
  2. 2. Bailey B. Konstan J. Carlis J. 2001 DEMAIS: Designing Multimedia Applications with Interactive Storyboards. In MM01, 241 250 , Ottawa, Canada, Sept. 30- Oct 5, 2001, ACM, New York.
  3. 3. Booth E. 2001 The Everyday Work of Art: Awakening the Extraordinary in Your Daily Life,, Inc., 0-59519-380-3 NE
  4. 4. Cheng K. 2006 Storytelling Techniques Workshop. Available online at
  5. 5. Comic Book Creator. Available online at
  6. 6. Cooper A. 1999 The Inmates are running the asylum. SAMS, Indiana
  7. 7. Cox A. M. Albert D. H. 2003 The Healing Heart-Families: Storytelling to Encourage Caring and Healthy Families and The Healing Heart-Communities: Storytelling to Build Strong and Healthy Communities, New Society Publishers, 0-86571-466-5 0-86571-468-1.
  8. 8. Crawford C. 2004 Chris Crawford on interactive storytelling, New Riders Games, 0-32127-890-9
  9. 9. Desmet P. M. A. 2003 A multilayered model of product emotions. The Design Journal, 6 2 4 13
  10. 10. Erickson T. 1995 Notes on Design Practice: Stories and Prototypes as Catalysts for Communication. Available online at
  11. 11. Glassner A. 2004 Interactive Storytelling: Techniques for 21st Century Fiction, AK Peters, 1-56881-221-3
  12. 12. IBM Knowledge Socialization Project. Available online at
  13. 13. Irving J. 2004 Stories Never Ending: A Program Guide for Schools and Libraries, Libraries Unlimited, 1-56308-997-1 CT
  14. 14. International Organization for Standardization (ISO) 1998 Ergonomic requirements for office work with visual display terminals (VDTs)- Part 11: Guidance on Usability (ISO 9241-11:1998), Geneva.
  15. 15. Khong C. W. 2000 A Review of Applied Ergonomics Techniques Adopted by Product Designers. In: Lim, K.Y. et. al. (ed.): Proceedings of 4th APCHI and 6th ASEAN Ergonomics 2000 (APCHI/SEAES 2000), 317 322 , Elsevier, Singapore.
  16. 16. Krippendorff K. 2006 The Semantic Turn. CRC Press, 0-41532-220-0 Raton, Florida
  17. 17. Krippendorff K. Butter R. . Eds 1989 Product Semantics. Design issues, 5 2 83
  18. 18. Morris D. 2003 Marketing Strategy: A Storytelling Approach, University of New Haven Press, 093628529 West Haven, CT
  19. 19. National Storytelling Network (n.d.) What is storytelling? Available at (access on February 2009)
  20. 20. Pedell S. Vetere F. 2005 Visualizing use context with picture scenarios in the design process. In Proceedings of the 7th International Conference on Human-computer Interaction with mobile device & services (Mobile HCI 2005), 271 274 , Salzburg, Austria
  21. 21. Rosson M. Carroll J. 2002 Usability Engineering: Scenario-based Development of Human-computer Interaction, Morgan Kauffman Publishers, San Francisco
  22. 22. Sawin P. 2004 Listening for a Life: A Dialogic Ethnography of Bessie Eldreth through Her Songs and Stories, Utah State University Press, 087421582 Logan, UT
  23. 23. Scherer K. R. 2003 Introduction: Cognitive components of emotion. In R. J. Davidson, H. Goldsmith, K. R. Scherer (Eds.). Handbook of the Affective Sciences, 563 571 , Oxford University Press, New York and Oxford
  24. 24. Schneider W. 2002 So They Understand: Cultural Issues in Oral History, Utah State University Press, 0-87421-550-1 UT
  25. 25. Sima J. Cordi K. 2003 Raising Voices: Creating Youth Storytelling Groups and Troupes, Libraries Unlimited, 156308919 Westport, CT
  26. 26. Society for Storytelling. Using storytelling in Museums: why tell stories in museums. Available at using_storytellers_in_museums/ (access at February 2009
  27. 27. Stolpmann M. Roller D. 1993 Sketching editor for engineering design. Advances in Human Factors. Special issue on HCI: Software and Hardware from the Proceedings of the 5th International Conference Interaction, 609 614 , 8-13th August, 1993, Orlando, Florida.
  28. 28. Snowden D. 2002 Narrative Patterns: uses of story in the third age of knowledge management. Journal of Information and Knowledge Management, 1 1 1 6
  29. 29. Specialist Library Knowledge Management. Storytelling. Available at
  30. 30. Truong K. N. Hayes G. R. Abowd G. D. 2006 Storyboarding: An Empirical Determination of Best Practices and Effective Guidelines. In: Carroll, J. (ed): Proceedings of the 6th ACM conference on Designing Interactive Systems, 12 21 , ACM Press, University Park, PA, USA
  31. 31. van der Lelie C. 2006 The value of storyboards in the product design process. Personal and Ubiquitous Computing, 10 2 (Jan 2006) 159-162
  32. 32. Wacker M. B. Silverman L. L. 2003 Stories Trainers Tell: 55 Ready-to-Use Stories to Make Training Stick, Jossey-Bass, 0-78796-436-0
  33. 33. Walsh J. 2003 The Art of Storytelling: Easy Steps to Presenting an Unforgettable Story, Moody Publishers, 0-80243-306-5
  34. 34. Wong C. Y. Khong C. W. 2007 Quantifying the Narration Board for Visualising Final Design Concepts by Interface Designers, In: Julie Jacko (ed.), Proceedings of Human-computer Interaction: 12th International Conference, HCI International 2007, LNCS 4550, 1240 1249 , 978-3-54073-104-7 Beijing, China, July 22-27, Springer, Berlin, Heidelberg
  35. 35. Wong C. Y. Khong C. W. Thwaites H. 2008 Applying User Interface Design Process Model for a Mobile Community Project for the Deaf. International Journal of Interactive Mobile Technologies (iJIM), 2 4 October 2008, 30 37 , 1865-7923

Written By

Chui Yin Wong and Chee Weng Khong

Published: December 1st, 2009