Interaction Design: Actions to Design Interactions Andrea Micco Matr. 275353 Iuav University of Venice Faculty of Design and Arts Interaction Design Theory 1 Gillian Crampton Smith with Philip Tabor Appello 1 / January 31, 2013
I submitted this document for the exam on January 31, 2013 of the Interaction Design Theory 1 course (Teorie dellâ€™interazione) given by Gillian Crampton Smith with Philip Tabor at the Faculty of Design and Arts, Iuav University of Venice. For all word-sequences which I have copied from other sources, I have: a) reproduced them in italics, or placed quotation marks at their start and their end, and b) indicated, for each sequence, the exact page number or webpage URL of the original source. For all images which I have copied from other sources, I have indicated: a) the creator and/or owner of the image, and b) the exact page number or webpage URL of the original source. I declare that all other word-sequences and images in this document were written or created by me alone. Venice, January 28, 2013
VERIFY WITH PROTOTYPES
A TRUE AND VALUABLE FEEDBACK
Giving a definition of interaction design is a really difficult challenge: in this work I will try to reconstruct, through simple examples and related illustrations, a way to approach towards interaction design, with a method based on a series of actions. As discipline, interaction design brings all the baggage of traditional knowledge from other disciplines: information architecture, industrial design, graphic design, user-experience design, etc. This is also because it involves almost all the artifacts and environments that everyone uses in everyday life. For this reason, design strategies for interactions allow the designer to define and delimit problems and to proceed in the proper design phase. A first step towards the analysis of these issues is certainly the brainstorming part: within the research (but also into the concept development) a good brainstorming activity helps to let your mind be free and to develop your ideas as much as possible. Then the designer can select the right and the best ideas. Imagining a context is useful to check if the chosen ideas work: this process must be led not only by thinking in an abstract way but also by visualizing a storyboard as if it was a movie. Indeed interaction design uses its own specific types of notations and graphic methods: flowcharts, state diagrams, more or less illustrative storyboards, etc. The system in which the designer is going to develop the product or the service is often difficult to catch: using metaphors, for example, could help you to understand how it will work and to find the right connections between real elements and metaphorical ones. In this exploration about actions towards the realization of the prototype, the designer has constantly to ask himself: Who? Why? What? Where? How? etc. He also has to understand the real needs of users through interviews but also by imagining personas. During the prototype phase, it is not necessary to achieve soon the final artifact to test the product we are doing. It is easier to do a raw paper prototype: the important thing is to test this model, improving interactions before the final production. Especially non-expert people, who our design is aimed to, will be able to simply give us a true and valuable feedback.
Which is the first action to design interactions? Itâ€™s hard to say, but certainly it is always important to look around us, see what surrounds us and how simple steps can change and make a difference to a better design. Often, when something goes wrong in an interaction, it happens to blame the user: you may think that he/she cannot understand a so sophisticated interaction, but actually it is not so. Everyone in everyday life interacts with dozens of objects with spontaneity. Most of the simple things we use should not even need labels. Among the general principles in design, the word affordance help us to define this state: it is the set of properties that belongs to an object and which tells us how it could be used. A carafe should be designed with a handle that invites you how hold it, as well as a door should suggest how to open it with its handle shape. This is because we use automatically affordances and constraints of objects, which allow us to understand what we can do and how do it. However we do not only interact with individual objects, but especially with complex systems of elements linked together: designing a system means designing also a good mapping, the relation between its elements (for example between commands and related effects). This principle is not trivial, because the problems of mapping involve not only a small system, such as switches in a room or for a cooker, but they come to affect all interactive systems (even to an airplane cockpit). Looking around also means to give attention to the number of commands and buttons that a device has, often too large. ÂŤThe difficulty of dealing with novel situations is directly related to the number of possibilitiesÂť1: so if there are too many elements and buttons the user will have too many choices; instead, if the action to be performed is one, it is hard to go wrong for the user. This scenario is particularly relevant to imagine how our everyday environment could be in the future: the house, increasingly based on an intelligent and interconnected environment, will be controlled in some way through a complex system; this ambient will be even closer to our actions than now. So, before the imaginative phase of our design, we have to look around us and ask if anything can really be improved in our environments.
[Norman, Donald. The Design of Everyday Things. New York: Basic Books. 1988. p. 81] 1
Bad affordance The handle position indicates that user can open the door moving it upward
Bad mapping These buttons on an extractor hood do not correspond logically to real functions (numbers are for the air and the fourth button is for the light)
Good affordance A simple filtering water jug with a good handle
Good mapping Three switches on a landing: you quickly understand their function through the position
Examples of good and bad mapping and affordances in everyday environments.
In addition to look around, for a designer it is very important to put the imagination phase down on the paper. Despite the spread of technologies, the paper is still the main tool for brainstorming activity and in general to display ideas. Indeed it is the easiest and fastest way to write down ideas, concepts, sketching how an interactive process can take place and what are the involved dynamics. In particular, during the design phase the storyboard is often used. As it happens in cinema or advertising languages, the designer can imagine a sequence of images, corresponding to users’ actions. In this way it is possible to know which parts of the interaction are correct and which ones need to be changed, because are too complex. The storyboard can have different levels of realism: from the only sketched drawings you can reach photorealistic images, where you can focus on the scenario and where you can draw on. In fact, if you analyse more scenes, the represented interaction will be more complete. In addition, a storyboard is important because it doesn’t only show the steps or states of an interactive product, but allows the designer to focus on users’ behaviour and understand the whole context. The activity of drawing storyboards is actually a basic (sometimes neglected) phase to visualize ideas in all fields of design, a planning useful within a designer team. It is a way to compare different ideas, avoiding thinking in an abstract way. For example the team can pin drawings on a wall, using paper on a large frame to allow distance viewing. Pens and other strong markers can be used to highlight some parts, with appropriate filled shapes for the main parts of the storytelling. You can choose to emphasize some actions of input or output as well as users’ behaviours. Storyboards will carry also an emotional tone, because very often good design is like a story.
A sequence of scenes represented through a storyboard. In this case the theme is the interaction with a new automatic coffee dispenser, which has human emotional features.
During the concept development or during the design phase of a system, the designer runs into a number of elements sometimes difficult to control as a whole. Using metaphors may be a way to solve this complexity, as well as to allow the user to interact easily with a product. Actually metaphors are particular types of conceptual models. The conceptual model is somehow the set of all the operation principles that any technical device has: when users interact with a system, they build in mind a conceptual model of how it works. So a good design must assume that the designer has developed a conceptual model suitable for its purpose. This process takes place through the system image, which becomes a means between users’ and designer’s conceptual models. In other words, user construct his/her model through the image thought by the designer. Everyday we see system images that works into metaphors: in literature, the metaphor is a figure of speech which involves a term replaced with another partially similar. For this reason, the metaphor allows us to understand the functions of a thing with a known term. For example, a complex system like the British economy can be represented through the metaphor of a hydraulic system: its real parts, such as valves, pipes or vessels are connected to a particular economic situation: input or output amounts, investments, etc. (that is what happens in Bill Phillips’ Moniac). Obviously, I believe that this type of system involves a certain level of compromise to understand the whole complex phenomena, but it is a good example of how the designer should approach to a system, with all its involved elements that he has to deal with. We should admit that in present life we meet always a great metaphor: the Graphical User Interface is an illusory construction, the metaphor of a desk with all the elements that you can imagine on it. But this metaphor is not entirely consistent; there are no obvious links between the source domain and the target domain (such as the “trash”). However, the aim to build a machine for the «Office of the Future»2 has been largely overcome, and now the desktop is an extended metaphor which doesn’t need to be related to the initial domain. This shows that once you have introduced a metaphor, it can evolve and lose its original meaning during time. Designers have to use their imagination to understand systems, without forgetting that sometimes it is better using standards than too innovative solutions. [Moggridge, Bill. Designing Interactions. Cambridge: MIT Press. 2006. p. 8] 2
Spool Project works
Patterns of sewing Costs: rent, fees, fun
Stitched clothes Future opportunities
Power switch Parents
The physical system of a sewing machine is the metaphor to represent a studentâ€™s economic situation. Each element of the source domain (sewing machine) correspond to a part of target domain (studentâ€™s condition).
In order to simplify user’s effort during an interaction, data visualization is particularly important. Indeed designers have to show a set of data, commands or functions and have to «make things visible»3 while leaving a margin of error to users. Representing data is primarily a tool for designers’ work, a form of notation. It can have multiple appearances. From a simple matrix you can get more complex systems such as Venn diagrams or tree diagrams. In this context, interaction design is connected to information design, as technique to simplify complex processes or concepts. Previously we talked about the system image as a way in which you create user’s conceptual model. These system images include, for instance, also instruction manuals: they are certainly a way to represent data and functions, but ideally they should be written before the same phase of design, rather than subsequently. This example shows that we always encounter – without realizing – data visualizations. Today technologies involved in the development of interfaces (from the Web to mobile devices until public interactive services) are connected to more and more data visualizations: displaying times, places, services, contents is now an exploration and a discovery process. With this so fast development, the user can enjoy the information no longer in a static but in a dynamic way. These dynamic visualizations come directly from similar static ones, but allow to expand some key points and see, at the same time, the data in their complexity and particularity. For example, a simple chronology on a history book is now a dynamic timeline and old cartographies become dynamic maps, enhanced thanks to the power of Web technologies. The challenge for designer is to develop and carry on this trend and understand how the technological possibilities can be the basis to display concepts and simplify the use of contents and services. It is a matter of communicating information through appropriate visualizations and provide not only something beautiful, but also something functional.
[Norman, Donald. The Design of Everyday Things. New York: Basic Books. 1988. p. 188] 3
Direction Venice from 08:00 to 14:30 Every hour on ’00 and ’30 Prices: 15€ / μ27€
Orange Line Stop 1 min 30 min
Static data visualization of Alilaguna waterbus service connecting Marco Polo airport with San Marco in Venice area.
Until now we have considered the actions to design interactions often talking about the importance of users. However, we have to focus on specific users, we ÂŤhave to have a clear picture of what they are thinking aboutÂť.4 Actions focusing on user remind that the main reason to design interactions is certainly not to create a good interface itself: interaction design must consider users and what they are and want to do, creating precisely tools and allowing them to successfully achieve their hidden desires. For example, if you see the case of Graphical User Interface, we can say that users do not want to enjoy a series of windows on the screen, but definitely want to create, save, store and find data for their work or their personal life. In order to understand what users do, the first activity is look and wonder how people do things and why. During the development of interaction design as discipline, the methods introduced by IDEO were very successful. In the nineties in this field human factors research began to have a significant role, and designers were looking for a way to involve more users in the design process. Through the use of method cards (especially created by IDEO)5 it was possible to create opportunities for creative thinking between the team and the other people. From all the researches on users, through interviews, tests and participatory design experiences, the design team can develop a set of ideas and point to a target. The designer can imagine personas, which are fictitious users working as archetypes. Personas are a powerful tool in the design strategies to direct activities towards special needs: these users do not exist, but often are so real in their features that they really live in the designerâ€™s mind. Their life is very special; they are very different to each other and yet they are very demanding. This means that personas are the way to carry on a user-centered design.
[Moggridge, Bill. Designing Interactions. Cambridge: MIT Press. 2006. p. 131] 4
[Ibid. p. 667]
Matteo, 34 years old He comes to Venice once a week to organize and manage events. He has to reach places of work and move all the equipment for the events. He likes adventure, motorbikes and all the things give him a piece of freedom.
Pietro, 58 years old Since he was young, he is still a scout. He is married and has two sons. With his family he likes going for trips. He has an adventure attitude, but during his travels he doesnâ€™t want to spend too much!
Perla, 48 years old She is a true Venetian housewife. She married very young and she never worked. She has a child and two dogs. She hates going shopping in crowded places and taking vaporetti with her dogs.
Matteo, Pietro and Perla are three personas: they are very special fictitious users thought for a service to rent small boats in Venice.
VERIFY WITH PROTOTYPES
The ideas developed by the designer team can be verified through the prototyping phase. There are two main reasons to build a prototype: on one hand, the prototype allows the team to clarify what you are planning to design, an experience typical of a workin-progress project. From another point of view, the prototype is what is presented to stakeholders and users and you can use it to test the artefact. So the prototype has not always the same and static form. In fact, a prototype realized during initial stages is very sketchy, often made of paper, cardboard, post-it notes and markers. It is structured by the series of states that the product will present (for example the main screens of the application or the stages of the interface only drawn and colored). Its main feature is the physical aspect, the possibility to hold it and see what effect it may have during testing, obtained through a series of questions during interviews. The initial prototype is a sort of exploration, because as we said earlier, the paper is a fast and versatile tool to build mock-up and get a first impression about the project. Actually ÂŤdesigners are often too quick to start working in the final medium of their projectÂť6 and should instead use paper without worrying about technical limits. During demonstration phase, context and behaviours has an important role. A low-resolution and low-fidelity prototype may be involved in a video simulation, that is the best way to communicate the project aims and its effect. It is a good idea to promote the product, even if you are in front of a so-called Wizard of Oz, where everything seems to work interactively (but all depend on designerâ€™s tricks). However, when the aim of the prototype is to present the look and feel closer to the final artefact, the prototype is built with high-fidelity features: the appearance can be indistinguishable from the final product and interactions, feedbacks and animations simulate the real operation. For the designer it is not easy to choose which part has to be developed, because it is impossible and unproductive to make a finished product. The beauty and the usefulness of prototypes is the fact that they are not complete, but allow you to test and improve the design of interactions before implementation.
[Moggridge, Bill. Designing Interactions. Cambridge: MIT Press. 2006. p. 705] 6
Paper prototype for a mobile application allowing students to find a restaurant in a city and to order their favourite recipes.
SOMETHING REALLY NEW
In this paper we examined briefly the design development strategies using for each paragraph a statement that sounds like a key action. It may seem a simplification, but text and relative images, developed over the last few months, are starting points about how to approach to interaction design. As a student of a school of design, the development of this process has been very enlightening: it gave me the basis for a correct design method to continue in this direction for my future projects. Compared to editorial design - on which I worked in the past - the ideas I received led me to the conviction that interaction design offers great potential and challenges. The difficulty may be to create something really new. New things are definitely created analysing the state of the art and with a serious user research. But the most surprising thing is the possibility that these processes have in a team work, where ideas grow together and no one is closed in their convictions. This work is not only an analysis of design strategies; it is also the result of an activity of learning-by-doing. I believe in the possibility to learn by doing, trying and then analysing what has been done.
Johnson, Jeff. Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules. Burlington MA: Morgan Kaufmann. 2010 Moggridge, Bill. Designing Interactions. Cambridge: MIT Press. 2006 Nielsen, Jakob. Loranger, Hoa. Web Usability 2.0: Lâ€™usabilitĂ che conta. Milan: Apogeo. 2006 Norman, Donald. The Design of Everyday Things. New York: Basic Books. 1988 Suffer, Dan. Designing for Interaction: Creating Smart Applications and Clever Devices. Berkeley CA: New Riders. 2010 McCloud Scott. Understanding Comics: The Invisible Art. New York: Harper Collins. 1993, accessed January 15, 2013. http:// www.harpercollins.com/book/index.aspx?isbn=9780060976255 Reichelt, Leisa. Disambiguity: Yes, you should be using personas. 2007, accessed January 10, 2013. http://www. disambiguity.com/yes-you-should-be-using-personas/ Tognazzini, Bruce. Magic and Software Design. 1993, accessed January 10, 2013. http://www.asktog.com/papers/magic.html
Chapter headings and captions: FF DIN Light Alternate by FontFont Main text and notes: Century Std Light by ITC Laser print on 100gsm smooth paper Printed on January 2013.
Actions to design interactions