Developing techniques for visualising scenarios

Transcription

1 Developing techniques for visualising scenarios Kari-Pekka Aikio, Ilari Jounila, Timo Jokela University of Oulu P.O. Box 3000, University of Oulu, Finland {kari-pekka.aikio, ilari.jounila, Abstract Scenarios are used at the early stages of a development process as a tool for determining usability requirements. However, scenarios are usually text-based descriptions and, are not effective for communicating design ideas and concepts to end users. We examined visualisation as an alternative representation technique. The goal was to come up with a visualisation technique that supports rapid iterations and promotes discussion with stakeholders, such as the end users and the designers. As a result of an iterative development process we propose a low-fidelity visualisation technique where scenarios are implemented as cartoon-like sets of slides with simple drawings such as matchstick-men. 1 Introduction Scenarios are becoming a widely used method in usability engineering and user centred design (UCD) (Rosson & Carroll, 2002). Many authors in the usability field discuss the importance of scenarios. Preece et al. (1994) state that Scenarios help designers to evaluate design ideas and help them make design decisions in actual situations. According to Nielsen (1993), Scenarios describing possible uses of envisioned future systems are also helpful for early participatory design exercises. Carroll and Rosson (2002) argue that, a scenario can say what happens in a particular situation without committing to details of precisely how things happen. Scenarios were used as a key method for determining user requirements in Nomadic Media, a European ITEA project. The scenarios were originally written as textual descriptions. The assignment of the project s UCD team was to carry out user evaluations of the scenarios, which were created by the technical teams of the project. Our task was to identify the potential problems in the scenarios from the end user point of view and to provide feedback to the writers of scenarios. Textually described scenarios proved to be problematic in communication both within the team of designers and with users. Scenarios should help stakeholders to create a shared and mutual understanding of the issues concerning the user, the product and the context from the actual end user perspective. Since text-based scenarios did not achieve this, we concluded that we needed a more efficient way for presenting the scenarios for communication. Therefore, we started to examine ways of visualising text-based scenarios. Our goal was to develop a visualisation technique that produces a presentation, which is self-contained and selfexplanatory, communicates all relevant aspects of the scenario to the readers, is interesting to read, and is a motivating experience for the user. Presentations should be easy and quick to create and modify, and be easily distributable (for example to other people of the project via ). This paper proposes a visualisation technique that adheres to the criteria described above. 2 Related work In the recent years, there has been significant advancement in the field of research that focuses on improving the early phases of the development process. In our literature review, we identified three major aspects of concern: appliance of different visualisation techniques, communication between different stakeholders and low-fidelity (lowfi) prototyping.

2 2.1 Visualisation techniques We found that there are many potential ways for presenting scenarios visually: storyboards, mock-ups, animation, video and acting. Balaguer, Lores, Junyent and Ferré (2001) have used scenarios as an envisioning design technique by using future scenarios as design tools. They have also applied various visualisation techniques in their work, such as storyboards, mock-ups and video-prototyping. Iacucci and Kuutti (2002) have used mock-ups for testing scenario prototypes. They provided simple mock-ups of a future device to the participants to help their imagination. According to Beyer and Holtzblatt (1998), storyboards show how specific tasks will be accomplished in the new world. The technique was borrowed from movie making. A storyboard captures the new procedure for accomplishing a task pictorially, like a storyboard for a film. Each frame in the storyboard captures a single scene an interaction between two people, a person and the system, a person and an artefact, or a system step. (Beyer & Holtzblatt, 1998). Kolli (1993) identifies the need for expertise when using animation and 3D-programs in creating video scenarios. Mackay, Ratzer and Janecek (2000) state that video is a powerful tool that can be used throughout the design process. They used paper storyboards to construct their video clips. According to Mountford, Buxton, Krueger, Laurel and Vertelney (1989), video can be used as a design tool to promote and visualise ideas about how computers will be used in the future. However, they also note that video can mislead people into believing that a prototype is the finished product and videos are difficult to modify. There were also many references to narratives among the papers. For example, Narrative is an important method of human communication. We tell stories to communicate, to educate and to entertain. (Steiner & Tomkins, 2004). Löwgren (2004) discusses animation as an alternative narrative technique. According to Löwgren, animated use sketching takes some time and effort to create moving-image representations, which makes them less than ideal for rapid thinking-by-sketching, and the stakeholders in the design process felt that animated use sketch conveyed the design idea more effectively than a conventional paper and slide-show presentation. We agree with the notion of Bardram, Bossen, Lykke-Olesen, Nielsen and Madsen (2002), one of the striking results of creating a prototype is that it forces the designers to address very concrete design issues before the video can be produced Communication between stakeholders Scenarios played an important role in this research. Scenarios were used as communication tools between designers and users and with other stakeholders within the project (Figure 1). Figure 1: Scenarios are used in communication between different stakeholders

3 Scenarios and their visualisations were applied in three different communication situations; focus groups, usability tests and pair-evaluations. The reason for trying different communication situations was to find out if the visualisations worked better with a group of users (focus groups) or with single users (usability tests). We also tested communication using the pair-evaluation method, which was influenced by the research of Buur and Bagger (1999). They argue that traditional usability testing restricts understanding of problems and impedes productive dialogue between designers and users on use, context and technology. In their work, they turned conventional usability testing format into a dialogue between users and designers. Basically, we wanted to see if we could also promote discussion between two users having them both evaluate the scenario using a visualisation as a visual aid. 2.3 Low-fidelity prototyping Snyder (2003) discusses the purpose of paper prototyping method and in what situations it is feasible to apply. Snyder identifies four dimensions of prototypes: breadth, depth, look and interaction. Based on these dimensions Snyder argues that different techniques are applicable in different situations. There exists the so-called low-fidelity-, mid-fidelity and high-fidelity (hi-fi) prototypes. Although paper prototyping focuses on simulating interaction between the user and the device on the interface level, it gives some clues on how to visualise scenarios in different levels of detail. Different levels of scenario visualisations can be categorised as low-fi or hi-fi. In this research, we assume that low-fi visualisations can be used in the early phases of the development process for evaluating the key contents of the scenarios. Hi-fi visualisations are better suited for validating concepts later in the process. In addition, in order to promote discussion among stakeholders early on, low-fi visualisations appear very reasonable since, according to Snyder (2003), rough prototypes encourage feedback. 3 Visualisation development process Because one of our main needs was to be able to develop visualisations quickly, we chose a storyboard-like technique (Beyer & Holtzblatt, 1998) as a starting point. Given the limited resources and the tight schedule of the project, we concluded that the use of videos or acting would be inapplicable in our case. We needed a visualisation technique using which it would be easy to create highly modifiable presentations. Our first visualisations were static photo presentations. Towards the end, they evolved into low-fi multimedia presentations. The basic tool to create our visualisations was MS-PowerPoint. The visualisation technique evolved iteratively, based on empirical findings. We used our first visualisations (using a data projector) in focus group sessions with test participants. Thereafter, we conducted a number of usability tests where we further evaluated the visualisations and developed the technique iteratively based on user feedback. In these sessions, the users followed the scenarios from computer screens. Depending on the occasion, two to four researchers attended the focus group or usability test sessions. Feedback was gathered through observations by the researchers, and through interviewing the users. As a result of several iterations, we ended up with a technique that we present in this paper. Our work in the research project was situated in the early phases of the development process including evaluating text-based scenarios at the conceptual level. The purpose of our work was to retrieve user feedback on the concepts, which were presented in written text scenarios. Scenario visualisations were developed according to the nature of evolutionary design approach. After several iterative rounds of designing, presenting, gathering feedback and evaluating, the visualisations evolved to their final stage. The initial state for our visualisation was scenarios, which are written with text in most cases. However, there are problems with text-based scenarios, as they include ambiguities and are not enjoyable to go through. Because of this, we needed to find a way to visualise them. There are many different ways to visualise scenarios in literature. Video, animation and acting are all excluded because they are time-consuming and tend to modify badly. Accordingly, we found a way to visualise with a combination of storyboards, mock-ups, drawing and photos. First, we used static photo slides but there were many problems with them. Second, we developed the matchstick-men technique.

4 3.1 Iteration 1: visualising with photos The first iteration consisted of digital photos with original scenario texts. The visualisations were implemented as storyboards where photos were used with textual augmentations. Visualisation represented the original textual content (Figure 2). Creating a photo show included searching pictures from the Internet and we found many suitable pictures for our use. Every slide included one or, at most, three pictures, which were clarified with scenario text. The slideshow visualisation included seven slides with photos and three slides with text. Communication succeeded well in this way when the scenario texts were of high level. Figure 2: Scenario visualisation using an augmented digital photo User feedback was gathered in two focus groups. The scenarios were shown on-screen and the host read the scenario and asked the participants their opinions about it. During the session, general questions were introduced to create discussion among the participants. The first focus group included six participants and the second one included five participants. Both focus groups took two hours and were audio/videotaped. User feedback supported the idea of a visual approach. Users commented: Pictures helped to get the mood of the scenario and It is better to have pictures. They create an image of the situation. When scenario texts were updated and became more detailed it was found that there is only a remote possibility of modifying them further. Searching for pictures with more details via Internet turned out to be time-consuming and arduous, even impossible, because certain scenarios required specific visual content. Besides, there was the problem of the copyright of the pictures; we would not be able to modify them. An alternative way to present photos via slides exists. There would be no problems with taking pictures ourselves but there would still be the difficulty of accessing specific locations from where the content for our visualisations could be obtained. For example, the events of the scenarios in the static photo slides were placed at the ski-slope and we did not have access to such places. If we had to go and take pictures on a remote site every time the scenario text got updated we would have spent too much time travelling from one place to another. For these reasons, we came to the conclusion that photos were unsuitable for our visualisation purposes. After this iteration, we concluded that we needed a more detailed presentation technique that would provide a tool for communication and would give us feedback that is more detailed. Modifiability of the static content of the photos was found too inconvenient for our purposes.

5 3.2 Iteration 2: matchstick-men visualisation with original scenario text Given the drawbacks of the static photo slides and their fixed content, we then looked at how to create the content simply by drawing it. The second version of visualisation was visualised using a cartoon-like storyboard approach where we presented the human characters as matchstick-men. In our matchstick-men technique, end-users are visualised as minimally as possible, as if drawn by children on a piece of paper. The MS-PowerPoint slide is the paper on which these minimalist representations of human characters are drawn, accompanied by other characters, objects and the desired context such as home, the airport or a taxi. In this iteration, the one slide included several elements such as people, devices, system, context and textboxes. Now all the original texts were added to the slides together with the drawn elements (Figure 3). The scenario visualisation slideshow consisted of six slides. Figure 3: Scenario visualisation using the first version of matchstick-men technique During the second iteration, we conducted six tests using the preliminary matchstick-men technique. The test setting was designed as a kind of usability test. The device used for presenting the visualisations was a desktop computer. The test persons used the keyboard to leaf through the visualisations slide by slide. Each of tests took one hour and tests were recorded for later interpretation. The initial response to the matchstick-men technique was very encouraging. The test users pointed out some benefits of the new technique: you re able to recall the story and the details of the scenario much better from the visualisation than the written text, it is much faster to go through than text, it is not reasonable to express the same story content using text and pictures, the more pictures you have, the more enjoyable it is to read and it is good that you haven t tried to make these stickman characters, devices and contexts too fancy. Otherwise I d probably be distracted by them. The amount of text and pictures were the main issues in the second iteration. The user feedback indicated that in order to promote visual storytelling we should reduce the amount of text we needed to increase the number of pictures. So far, the visualisations included nearly all the original scenario text. 3.3 Iteration 3: matchstick-men visualisation with reduced text For the third iteration, we decided to continue developing the matchstick-men technique. Encouraged by the user feedback, we decided to enhance the test setting by having two users evaluate the scenario at the same time. The idea was to promote discussion among the stakeholders in a test situation and to have the visualisation work as a visual aid. The test setting became known as the pair-evaluation test.

6 The primary focus of the third iteration was to test user control of the visualisation technique. Two types of matchstick-men visualisations were tested during this iteration. The first one included animated sequences and automatic transitions between the sequences. The user would look at the show without having any control. The second type was the same scenario content, with the addition of user control. This kind of slideshow consisted of 20 slides. Each of the six tests took about two hours and the tests were recorded. According to the users, they preferred having control over the slideshow since there was a chance that they might miss some important details. We concluded that users should be able to control the visual flow of the presentation. There also was a proposal to combine the animation and static content with users in control of the flow. Matchstickmen were easy and quick to create and achieved high level of modifiability. 3.4 Iteration 4: matchstick-men visualisation with low-level interaction In the fourth iteration, the focus was on the level of detail of the visualisation. We produced three different visualisations using the matchstick-men technique. The first was the visualisation with animation and user control. The second visualisation was a visually reduced version with static matchstick-men and user control. The third one was a compromise between the previous two (Figure 4); the sequencing scenario was divided into several slides and animation was used only where suitable. The last iteration of the slideshow consists of 114 slides. Every interaction event of the scenario was on its own slide. The users had the control to go through the slides at their own pace. Figure 4: Scenario visualisation using the end version of the matchstick-men technique During the fourth iteration, we conducted four pair evaluating sessions. Each of these tests took an hour and the tests were recorded. User feedback supported the idea of visualisation and the matchstick-men technique. The users commented: Matchstick-men are fun way to represent stories, It is much easier and understandable to go through the scenarios with visualisation and The compromise between animation and a visually reduced version l works. After this iteration, we concluded that the animation could not be an end in itself and it was applied only as needed. More pictures and fewer texts gave added value to the visualisation.

7 4 Matchstick-men visualisation technique The proposed matchstick-men visualisation technique supports rapid iterative prototyping and it can be used in the early phases of product development. It is intended to function as a visual aid for communication between different stakeholders (UCD-designer/UCD-designer or UCD-designer/user). Before applying the technique, it is assumed, that the creator of the visualisation should have a basic idea of what he/she wishes to visualise. The scenario could be available on paper as a written text, or it could exist only as an abstract idea. In the latter case, it would be beneficial to be able to state the content of the future visualisation very briefly using one sentence. An example of a statement could be as follows; At the airport the user buys music from an on-line music-shop using his new mobile communication device. 4.1 Visualisation steps The matchstick-men visualisation technique consists of five steps: 1. Identifying visualisation elements 2. Identifying story events 3. Visualising story events 4. Combining visualised story events into a scenario visualisation 5. Evaluating the visualisation and repeating the steps if necessary (review the visualisation and make changes) 4.2 Identifying visualisation elements Visualisation starts by analysing the content of the scenario, in order to identify all the necessary visualisation elements. Matchstick-men visualisation has five different types of visualisation elements: 1. Matchstick-men characters that represent the users, 2. Context-elements that represent the context of use, 3. Artefact-elements that represent the systems, devices and other concrete artefacts, 4. Interaction-elements that represent user-device-system interaction, 5. Information-elements (think-, speech bubbles and written text) represent scenario content in written text An example of identifying the visualisation elements is demonstrated using the sentence: At the airport the user buys music from an on-line music-shop using his new mobile communication device. This sentence, when analysed, identifies at least four aspects that are relevant for creating a visualisation: the context (airport), the user (currently unknown user), the systems involved (on-line music shop and a mobile communication device) and the interaction between the system and the device. The sentence does not imply the use of information-elements such as think balloons, but they can be used to clarify the content of the scenario if necessary. The visual elements are shown in figure 5. Figure 5: The visual elements for a snapshot

8 4.3 Identifying the story events The designer should go through the scenario, make notes of the events that point to something relevant regarding the scenario as a whole. A story event is something concrete that happens in the scenario, such as arriving at the context, operating the device, operating the system. Interaction flow between these elements could be considered as story events for visualisation. For clarification, story events can be stated using text (see Figure 6). The number of identified story events affects the amount of visualisation work. At the beginning, one should try to identify the basic events and cover the whole scenario content. 4.4 Visualising story events After identifying the story events, copy-paste the needed visualisation elements from the snapshot to the target slides. It is better to visualise one story-event / slide because the modifiability and maintainability decreases rapidly if many events are visualised in the same slide. The first slide in figure 6 gives an example of how to visualise a single story event. 4.5 Combining visualised story events into a scenario visualisation The slide content and the number of slides depend on how many essential story events the designer was able to identify. In addition, the detail of the visualisation affects the number of slides. For example, a more detailed visualisation of the interaction means more slides. The layout depends on the applied media and the intended use. If you are presenting the visualisation digitally, you could have one story event / slide. Printable visualisation can have a cartoon-like layout to save space. Figure 6 illustrates the cartoon-like layout of the story events. Figure 6: Cartoon-like layout of the story events 4.6 Evaluate the visualisation and iterate the steps if necessary After the first iteration is finished, it is recommended that the designer evaluates the visualisation with other stakeholders. Asking other stakeholders to read and give their own interpretations of the visualisation is one way of testing the visualisation. If the stakeholders interpretations of the scenario differ significantly from the designer s communicational intentions (the desired interpretation), it is a clear sign that further iterations are necessary.

9 5 Discussion and conclusions We have used scenarios as a tool for determining usability requirements in the early stages of a development process. However, scenarios are usually text-based descriptions, which are not very effective when communicating design ideas and concepts to end users. We developed a low-fi visualisation technique that supports rapid iterations and promotes discussion with stakeholders such as the end users and the designers. As a result of an iterative development process we propose a low-fi visualisation technique where scenarios are implemented as cartoon-like sets of slides with simple drawings. Our matchstick-men visualisation technique has several benefits: it can be implemented using a common tool (MS- PowerPoint), it does not require sophisticated graphical drawing skills, and it supports rapid low-fi prototyping of scenarios. Sequencing scenarios into story events and visualising them with a low-fi technique was received well. Our experiences of using clear sequencing and low-fi technique supports easy creation, high modifiability and maintainability. Visualising scenarios provided benefits to the research project. Visualisations revealed misunderstandings in the scenarios, and we were able to replace unfeasible concepts with better ones. The project team reached a more consistent mutual understanding of the requirements for the project. One should understand that the technique that we propose is by no means the ultimate visualisation technique. The technique is not fully-matured yet. The technique evolved step-by-step, and is likely to be further developed with further experiments. For example, in one of our latest attempts, we found that we had taken a step backwards rather than truly improved the technique (user feedback was not as good as with the earlier version). In addition, we were unable to verify all the scenario visualisation iterations against the suggested criteria. Further, we found our research methods challenging to implement. In our study, we used research techniques such as focus groups which is a marketing research technique, and usability testing (with individual users or pair testing), although neither of them is specifically meant for testing a visualisation technique for scenarios. It was very challenging to understand how to create appropriate user tasks and evaluation criteria for usability tests. We found that for the users of this technique, including us, some basic graphic design orientation is recommended. In short, UCD-designers with some artistic skills are more likely to adopt the technique. The tool can restrict some visual effects and it is reasonable to keep in mind that this technique is intended to be used as a low-fi prototyping technique. The designer should not try to create too elaborate visualisations at the beginning at least. This poses the challenge of visually communicating the essential aspects of the scenario. For those practitioners, who use scenarios in their work, we recommend visualising scenarios as a supportive process. Our understanding of the case scenarios improved significantly, as we visualised them. However, we feel that visualisations do not necessarily guarantee success, since so much depends on the skills of the designer to visualise scenario related issues. Instead, we suggest that visualisations help the designer to explore scenarios in detail and they provide stakeholders with a visual aid for discussion. For further research topics, we recommend gathering further empirical data on the use of scenario visualisations. Also, in our discussions the question was raised whether different stakeholders should be provided with different versions of visualisations. Should end users have a more abstract visualisation and the designers have a more detailed visualisation? The issue of artistic skills needs investigation; is special training necessary? Finally, there should be more research on the topic of identifying and validating the criteria for creating visual representations. 6 Acknowledgement We thank Nomadic Media a European ITEA project for providing an environment where the ideas of this paper were generated.

10 References Balaguer, A., Lores, J., Junyent, E. & Ferré, G. (2001). Scenario based design of augmented reality systems applied to cultural heritage. Proceedings of the PC-CHI Bardram, J., Bossen, C., Lykke-Olesen, A., Nielsen, R. & Madsen K. H. (2002). Virtual Video Prototyping of Pervasive Healthcare Systems. Symposium on Designing Interactive Systems. Proceedings of the conference on Designing interactive systems: processes, practises, methods, and techniques, pp New York: ACM Press. Beyer, H. & Holtzblatt, K. (1998). Contextual Design. San Francisco: Morgan Kaufmann Publishers, Inc. Buur, J. & Bagger, K. (1999). Replacing Usability Testing with User Dialogue. Communications of the ACM, Volume 42, Number 5 (May 1999), pp New York: ACM Press. Iacucci, G. & Kuutti, K. (2002). Everyday Life as a Stage in Creating and Performing Scenarios for Wireless Devices. Personal and Ubiquitous Computing, Volume 6, Issue 4, (September 2002), pp London: Springer-Verlag. Kolli, R. (1993). Using video scenarios to present consumer product interfaces. INTERACT 93 and CHI 93 conference companion on Human factors in computing systems, pp New York: ACM Press. Löwgren, J. (2004). Animated use sketches as design representations. Interactions, Volume 11, Issue 6, November + December 2004, pp New York: ACM Press. Mackay, W. E., Ratzer, A. V. & Janecek, P. (2000). Video artifacts for design: bridging the Gap between abstraction and detail. Symposium on Designing Interactive Systems. Proceedings of the conference on Designing interactive systems: processes, practices, methods, and techniques, pp New York: ACM Press. Mountford, S. J., Buxton, B., Krueger, M., Laurel, B & Vertelney, L. (1989). Drama and personality in user interaction design (panel). Proceedings of the SIGCHI conference on Human factors in computing systems: Wings for the mind, pp , March New York: ACM Press. Nielsen, J. (1993). Usability Engineering. San Diego: Academic Press, Inc. Preece, J. & al. (1994). Human Computer Interaction. Wokingham: Addison-Wesley. Rosson, M. B. & Carroll, J. M. (2002). Usability Engineering. Scenario-Based Development of Human-Computer Interaction. Morgan Kaufmann Publishers. Snyder, C. (2003). Paper Prototyping: the fast and easy way to design and refine user interfaces. San Francisco: Morgan Kaufmann Publishers, Inc. Steiner, K. E. & Tomkins, J. (2004). Virtual environments & stories: Narrative event adaptation in virtual environments. International Conference on Intelligent User Interfaces. Proceedings of the 9th international conference on intelligent user interface, pp New York: ACM Press.