A passionate talk
Interaction designers: the tools of the trade
? (...)
! Marco Righetto 1
I submitted this document for the exam on 20th december 2007 of the Interaction Design Theory 1 course (Design dell’interazione) given by Philip Tabor with Gillian Crampton Smith at the Facoltà di Design e Arti, IUAV University of Venice. For all word-sequences which I have copied from other sources, I have: a) reproduced them in italics, and b) placed quotation marks at their start and their end, and c) 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. Graphics re-edited on August 2009.
Marco Righetto
2
Introduction
p.
4
Research Brainstorming Participatory interviews
p.
6
p.
8
Development Affordance Mental model Personas Flowcharts and storyboards
p.
12
p.
14
p.
16
p.
18
Prototyping Dynamic informations Mocking-up
p.
22
p.
24
Conclusion
p.
26
Photo credits
p.
27
3
Introduction
I’m going to present a little “training� I propose for good interaction design. These eight steps show how from the minds of a design team (or of a designer) it is possible to reach the goal: the final artefact. As in training, it is impotant what you get but also how. Especially in interaction design, comprehension and prevision of human relationship dynamics affect the result, and may be analyzed as inspiration for a new way of interacting. For example, if somebody during a design meeting (a brainstorm, a scenario, etc) suggests through his or her body movements an embarassed attitude towards that situation, the design would avoid (or exaggerate, depending on the case) the interactions in which those movements or positions are involved. Through this very simple example it appears clear how interaction design is related to our lives.
4
Research
?
5
Brainstorming
Nowadays the meaning of brainstorming tends to be stretched to many different techniques which are not brainstorming. That said, a brainstorm is a relaxed situation, in which all the participants are to express every single idea that comes into their minds. First of all, it is necessary that the people who participate can be sure they won’t be judged for what they will say. In some aspect a brainstorm can be associated to a multiple psychoanalysis session, or to an Alcoholics Anonymous meeting. In this sense people in a brainstorm have to trust each other: a great way to reach this fundamental goal, especially with people who don’t know each other could be playing some role games in which the body is more and more involved. Body is our first frame(1), and the more it is involved, the greater the feeling, the more extreme the mood.
Goffman, Erwin; 1969, The Presentation of Self in Everyday Life, University of Edinburgh Social Sciences Research Centre (1)
6
7
Participatory interviews
Thinking about the core of design meaning, which involves answering a problem, it is quite clear that the design process does not start when ideas come to mind. For sure, the sensibility of the designer is probably one of the most determinant aspects of the final result, indicating with this term the artifact itself, its look and feel, the emotional tone of the interaction and its enviromental aspects (how it interacts with the other elements of the society or enviroment in which it is placed). Anyway, to design for users (or better, for people) means – at first – satisfying what they tell you so, and – second – uncovering their latent needs and desires to make their lives become less stressful. A very useful way to reach this design goal is participatory inteviews. Through this technique the design team can collect a huge amount of information that can be used during the core design process. The participatory interview is not a quantitative, standardized method of research: it is not a statistical exercise. But it gives a substantial description of the opportunity the design team is defining. It is especially useful in “hostile” enviroments in which there is a strong need for effective design, in which disabled or elderly people are involved, or in which there are significant private or intimate element, such as sexual, financial or sentimental matters. These are not exactly interviews, but they oscillate between interviews and observations. In this sense ethnographic methods are very useful for collecting information.
8
9
10
Development
(...)
11
Mental model
On one hand, this is probably the most important aspect of the whole interaction design process. The mental model, in fact, does not deal only with the psychology of people in a certain period, but also with how the images that represent that model make the possibilities clear, simple, visibile. A good metaphor of this process may be the representation of knowledge given by the American philosopher C.S. Peirce (1839-1914). Extremly summarized, he says that an object can be known only through its “rappresentamen” (see fig. 1); in other words “the object as the sign rappresents it” (2). The “interpretante” is one of the possible other ways to get a more proper vision of the object. In my metaphor, the object can represent the mental model of the designer, the “rappresentamen” the mental model of users, and the “interpretante” the image of the system. On the other hand, developing a system through an appropriate mental model is the hardest part of the design process: a mental model deals with understanding people behaviour, and even more with understanding how people give a cause-effect relationship to two different events. Moreover, a mental model involves the understanding of the frame we are part of, and thus, understanding how it works and why. The most relevant question “why?” gives meaning to our lives and helps us to live a serene life: knowing why gives sense. But thinking “how” it happens is largely a part of the process to get good design. Probably, paying attention to the apparently less relevant aspect of a process, those that irritate even if not considered as “real problems”, would help to refine bad design and create good design: constant little incoherent details are more frustrating and frightening than an evident error.
Peirce, Charles Santiago Sanders; 1933, Collected Papers, CP 8.343 Cambridge, The Belknap press of Harvard university press (2)
12
The mental model of the user can be far away from the designer’s. A user not used to digital device might think that the cd player should be used as a place to hang a cup of coffee (example from Donald Norman - quote from(3)).
fig. 1
13
Affordance
Affordance is the quality of an artifact (either physical or virtual) that clearly suggests its (possible) uses. It can be said that “the more it affords, the less the effort”, because the cognitive resources someone has to use on the object are less, which means less time spent, less errors, less effort. Affordance is not an absolutely intrinsic quality of an artifact: I suggest that the same artifact presents a different affordance to different stakeholders. In this sense the relational aspect of affordance appears clear: cultural (and subcultural) influences stongly inspire the use of an artifact. In this sense I would like to remind a very useful example by Donald A. Norman(3), in which he reported how material suggests its use to vandals: glass “is to be broken”, wood “is to be cut”. Moreover, the concept of affordance is closely connected with that of visibility: in designing the affordance of a product/system/service the goal of the designer (or, more plausibly, of the design team) is to make things visible. In this case, visibility does not deal only with sight: visibility is the the answer to the “how” question. It is the way in which the hidden qualities of the artifact become clear and obvious to users. This is perhaps the main point: obviousness. What is obvious for the designer, may not be for the user. There are many ways to uncover the qualities of an artifact, and thus increase its affordance, for example through: - mapping, like the respective positions of the burners on a kitchen hob and their control knobs; - feedbacks, as in all the best e-commerce sites (e.g. Amazon.com); - error constraints, in other words, not permitting an action, as in the USB drive(4). The photos on the right are good examples of how the affordance of an object strongly suggests its use: the bench on the top allows people lying down, the bench on the bottom does not. Norman, Donald A.; 1997, La caffettiera del masochista. Psicopatologia degli oggetti quotidiani, Firenze, Giunti, pp.19-20 (3)
Saffer, Dan; 2006, Designing for interaction: creating smart applications and clever devices, Berkeley CA, Peachpit, pp. 57-58 (4)
14
15
Personas
Personas are, in some way, the natural development of the information collected through participatory interviews and other design research techniques. Personas “are fictitious characters that are created to represent the different user types within a targeted demographic that might use a site or product” (5). Even if this definition is correct, it maybe understates the main point of personsas: they are used as if they were real people. In this way, designers create and talk to vivid persons, so their relationship with them is completely different to generic users or, even worse, a demographic target. The statement “If men define situations as real, they are real in their consequences” (6), known as Thomas theorem, is in this case particulary effective. Obviously, personas are not the solution to all aspects related to the representation of users: design for a single person is not design, it might be craft, but the virtue of personas is that they convey real information in a lifelike way. Maybe an integrated design company in future would like to pay an actor or an actress to play the role of a persona, introducing him/her to designer as a “real person” they have to deal with, and not only as a character: physical presence definitely changes the perspective, and the relationship with the character.
(5) (6)
16
Wikipedia: http://en.wikipedia.org/wiki/Personas Thomas, William Isaac; 1929, The child in America, New York, Knopf, p. 572
17
Flowcharts and storyboards
During the design process sometimes the passionate work, the rapidity and shortcircuits which are created in the mind of the designer or the design team may do not underline some aspect of the artifact which are incoherent or some elements given as obvious, but which are not for the people who will use that artifact. Especially the flowchart, in my opinion, is a very clear way to look at the artifact from the “engineering” point of view: all the procedures to get what is asked for are visible step by step; a first step into processing. Of course, flowcharts can be used also from the user’s point of view; in this case, they might be useful to estimate the number of steps users have to follow to get to their goal, and how many chances there are to go wrong during the whole process. Anyway, storyboards are better from the user’s point of view, and can be an early step of video prototyping. I think that a combined use of both can develop a more complete idea of what the interaction with the artifact (not the artifact itself) will be like. For example in a flowchart from the device’s point of view, sketches of what the interaction is supposed to be would help to follow a correct sequence of steps, without missing the core of the design: people.
18
START
THE SERVICE
I open the software on my mobile phone
Do I ever crossed someone ?
N
I Go around Venice and cross someone
Y
Is here someone around ?
N
Y
Do I want to meet someone ?
N
Y
N
N
Y
I can set my status as visible, fisher, busy or invisible
I can change my profile picture, language level, or mobile phone number
Does his/her low profile intersts me?
Y
I cannot do anything else
Do I want to change my profile ?
Y
I choose an erasmus to meet
Do I want to choose another erasmus to meet ?
N
Do I want to change my status ?
Y
Do I want to invite her/him later?
N
Do I want to invite her/him now?
Y Y
I send an invitation now and a rod that I throw appears on my screen
I send an invitation later
Does the other student accept the invitation now ?
Next time we cross by a notification will be sent to both of us
Y
My mobile starts to vibrate
END
The more we get near the more our mobiles vibrate
N
N Does the other student accept the invitation later ?
Y
N Does the other student ignore the invitation ?
Y
A notification of later acceptance is sent to me
A notification of later acceptance is sent to me
Next time we cross by a notification will be sent to both of us
but I will not see that person unless he/she will unlock my fish
N
Are we near enough for infrared data exchanging ?
Y
END
19 END
20
Prototyping
!
21
Dynamic information
Since semiotics and graphic design have become a socially accepted parts of knowledge, it has appeared clear to most people that information is communicated through a medium, which is extremely relevant to how the reader interprets the information. Moreover, the organization of information within the medium is as relevant as the message itself: if I cannot read the timetable of train, I will probably miss the train and create confusion to other people if asked to help. But even if the chosen medium and its organization/ structure are appropriate for a particular situation (considering both the enviroment and the readers), different people need different information, presented in different ways and times (i.e. if I am blind I’ll probably prefer information given through sound or touch). Designing a prototype of a vaporetto kiosk we had to develop a way to represent dynamic information. Particularly I dealt with the problem of tourists and Venetians who have to buy a ticket. Maybe the most relevant aspect we discovered is that a new tourist probably loves to see all the possibilities he or she can choose (such as a panoramic tour in vaporetto, the most romantic water ways...), and probably would be glad to have a map of the vaporetto stops till the final destination. Differently, if the user is a Venetian, he or she probably needs a ticket or pass as fast as possible. Finally, if the stakeholder is a vandal he probably prefers a kiosk with many different projecting parts, which he or she can break or damage. To have good design we should take care not only of the traditional stakeholders of a service, but also of new users.
22
Insallation from Rafael Lozano Hemmer: the shadow - according to the distance from the light of a person, and his/her position change the radio frequency. Multiple users can listen to different radio stations at the same moment.
23
Mocking-up
Prototyping is “the final, essential step before a product or service is launched” (7). It can be developed for different purposes: to explore new ideas about an artifact with the design team, to persuade a company to finance that artifact, or to test it. These different purposes bring to different ways to represent the final artifact; “most interaction designers work with three types of prototype: paper, digital and physical” (8). The two main aspects involved in these different rappresentations are fidelity and resolution. A design team can choose which of these two aspects is more important in that moment of the process of designing. On one hand, a “rough and dirty prototype” is more useful to explore the possibilites of the role(9) of the product or service, and to test different ways of interaction. On the other, a more precise protype in terms of look and feel(9) can give a closer idea of the final artifact mood and aesthetics. Personally, I would say that a quickly prototype is more useful for the design team to come to and end, but a well refined prototype would be more effective in a presentation. Focusing on the design process, I’d rather mocking-up quickly models to understand which are the main features and the role of what will be the final artifact. For example, if I had an image projected on a whiteboard on which I can draw, and save my drawings as vectorial file, it would be interesting to see how to work without being blinded by the light, to see if it is possible to interact also through presence (i.e. tracing an harm helping the software to have a more precise representation of the drawing), and so on.
Dan Saffer, Designing for interaction New Riders, p. 114 Staphanie Houd and Charlie Hill in The Handbook of Human Computer Interaction (7) (8) (9)
24
21
25
Conclusion
The world we are living in is affected by several overwhelming problems such as climate change, excessive population growth and starvation. It might seem that interaction design, whose definition is not clear to most people, is another discipline for the 10% of the world who can afford luxury. But I belive this is not, or is not going to be true. First of all, interaction design deals with how people relate to each other: the quality of relationship is definitely a mirror of the kind of society those people are developing. That said, the sensibility and the cultural attitude of the designers are elements which will make the difference: good design cannot not consider, for example, how much energy is necessary for an artefact, or which effects it has on a community. Moreover, I think that interaction design has a first “mission�, which is to improve the quality of life of people. This means to generate artefacts which are not exlusive but inclusive. Through this simple method, people are more relaxed, do not have to spend their time and cognitive resources on how machines work, and perhaps can develop a different attitude towards the world. It is necessary to rembember how little but durable changes in the relationships between people and objects can deeply mutate everyday life, which forms the basic step of culture.
26
Photo credits
Brainstorming: Photo by adaptivepath.com, http://www.adaptivepath.com/ blog/wp-content/uploads/2007/08/brainstorm2.jpg Participatory Interviews: mine, http://www.viktoria.se/fal/projects/soniccity/ user_study/probes_bg.jpg Affordance: Photo by Marcot77, http://www.flickr.com/photo_zoom. gne?id=536476738&size=l Photo by PhatAlbert, http://www.flickr.com/photo_zoom. gne?id=536476738&size=l Personas: Photo by Sukanto Debnath, http://www.flickr.com/photo_zoom. gne?id=519690623&size=o; mine Dynamic Information: Photo by Rafael Lonzano Hemmer, http://www.lozanohemmer.com/pressRelease_Venezia2007/frequency_01.jpg Mocking-up: photo by kables,http://www.flickr.com/photo_zoom. gne?id=68787359&context=set-1483162&size=o
27
28
Colophon Interaction designers: the tools of the trade. A passionate talk was set using Adobe InDesign. Body text and headers in Lucida Sans.
29
30