About Interaction

about i n t e r act io n T o m m a s o B e r ta g n i n

Declaration of originality I submitted this document for the exam on 02.07.2012 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.

Padua, 25.06.2012

Content

Introduction

8

1

Data

10

2

Shape

14

3

Time

20

4

People

24

5

Prototypes

28

6

Interactive spaces

30

7

Opportunity

34

Conclusion

38

5

Introduction

6

What makes us different from other animals, is how we relate to each other, creating articulated social organizations. Since ancient times, people developed technology to create those organizations to allow them express and interact socially.

With the recent introduction of software and digital devices, the creation of technology-driven solutions often originates products complex to use and that don’t reflect the actual needs of people.

However, a necessary balance can be restored with the contribute of a proper discipline that deals seamlessly with technology and people: interaction design.

The revolutionary change that this discipline operates, is the shift of focus it causes. Rather than concentrating mostly on technology, interaction design looks at people first, and it models technology around people needs of “social animals�.

The cover of this booklet is a little play to remind the underlying work of interaction design, which drives the progress of technology from bits (I/O) to full human interactions.

7

1

Data

Information around us Nowadays we are surrounded by data, we can find it almost anywhere, read it on newspaper or watch it in television. It is only through the internet however, that we realize the amount of data available is so impressive that raises considerable problems of fruition. People with fast paced lifestyles have no time to assimilate or make use of data, and they pay less attention to what is available to them.

For an interaction designer converting data into accessible information is a big concern. His role in fact, regards selecting, interpreting, and drawing attention to useful data. Adding meaning to data while retaining synthesis and comprehensibility, requires the use of graphics; visual language then, becomes key to show big amounts of data in a beautiful balance.

The graphic language can be used in association with different variables can be used to create rich maps of data, often called infographic. Those maps combine colours, sizes, shapes, textures and orientation together to display articulated collection of data.

In practice, graphic is used to represent set of values, variables, that otherwise would necessary assume the form of words or numbers. This graphic representation of variables allows a more immediate and intuitive perception of the whole. Considering the first sketch at the top right, it is clear the different paces at which we can evaluate the data presented: in the first case we have to read all the table values, while in the case of the graph, we immediately get an overview of the data structure. We are able to work out a synthesis that allows us to understand the data proposed without any effort.

8

9

10

There is, however, another dimension interaction designer can use to provide even more efficacy to the representation of data: animation. Even though it is limited to digital representation of data, animation can represent data dynamically, filtering in real time variables or showing them separately. Animation allows simplification of representation without loss of precision, that’s because it can use the entire set of values representing them separately.

The approach discussed here, has been adopted in the revision of a public transport timetable, in particular one of the Venice waterbus service. Starting from the original table to the left, it became clear that the variables to represent were two: time and name of water-bus stops. Those can be easily represented on a plan according to its two main axes, x and y. That is why the improved version to the right shows subdivision in horizontal layers with hours of the day, and vertical lines shows the stops. This allows a rapid detection of time for the station interested.

Animation is used on the second sketch depicting an interactive map displayed on a web page. For each bus stop on the map, a drop-down list shows times for that particular place, making it easy to localize both spatially and time-wise the closest water-bus stop.

The awareness of the concepts just mentioned is a fundamental tool for the designer who uses it to represent the data. Data may then be associated to a raw material, which is shaped by simplifying and extrapolating the concepts in order to give it a structure and make it easily understandable. “Organization makes a system of many appear fewer“.1

1 - Maeda, John. 2006. The Laws Of Simplicity. Cambridge: MIT Press. 11

11

2 S hape

12

Talking to people with shape From the first moment we see an object, even though we don’t realize it, our brain processes a large amount of information.

Beyond aesthetic pleasure, what the shape suggests is the function of the object itself, telling us how it could be used and how we can manipulate it. A calibrated use of shape, materials, and hierarchy of elements, becomes the media to help people understand a product in a simple and immediate way. The object appearance therefore, translates into information.

13

14

By analysing a common object like a fire alarm, we see immediately how the elements that compose it should be used: the handle of the hammer has the size of our hand and it is something to hold firmly, the pointed ends are clearly mede to break the glass in order to finally reach the button, and a chain underlines the connection between the elements. The vision of these few elements, communicates immediately how to use them.

We cannot say the same for what is called “Primate chair� designed by Achille Castiglioni in the ‘60. Its shape does not tell us how you can sit on it: knees should rest on the big soft cushion at the base, while you sit on what apparently might seem an headrest. This, among many other objects, lacks of the visual clues necessary to understand how to use it.

The concept of affordance, refers to the the ability of an object to clarify his working through its shape. For this reason an interaction designer should be able to use and implement affordances, both in physical and graphical interfaces, limiting the time spent by the user to understand them.

15

16

When the operation of an object is increasingly complex, it is important to understand all the different modes in which it can perform.

The corkscrew sketched here, has a good affordance because people understand how to grasp it and the pointed screw shows that it can be used to extract the cork. Its functions are two: screw into the cork, and remove the cork from the bottleneck. This typology however, unlike other models equipped with handles that rise and fall, to pull the cork out requires to screw in the point completely. Only then a second mode is activated extracting the cork out; most of the people get wrong this second mode. This means that they had a mental model that was in contrast to the actual inner working of the object.

By characterizing the top piece responsible for the transition between the two modes, from screwing to cork extraction, it is then possible to clarify how to use it. The hierarchy of elements is crucial here, for people to understand and create a mental model that allows them to an object for its purpose.

Develop and show a clear mental model is fundamental to make an object or an interface a pleasure to use. Interaction designer should always be aware of the fact that they possess a clear mental model of what they are working on. This is not true for people who will use it, therefore a great deal of work should go into embedding that model into the final products. “... the designer only talks to the user via the product itself, so the entire communication must take place through the ‘system image’: the information conveyed by the physical product itself ”.2

2 - Norman, Don. 1988. The Design of Everyday Things. New York: Basic Books.

17

3 T IM E

Time dimension With the development of digital technologies, we saw the introduction of behaviours in software and electronic devices.

They are able to mutate, adapt, react to our input, and this opens a whole new dimension that offers great space for experimentation.

To manage what happens over time between people and digital artefacts, what is also called flow, many tools are available.

Flowcharts are a particular type of diagrams, where all steps are defined by short texts enclosed in shapes that specify the phase: rectangular shapes for processes, rhomboidal for decisions.

The diagram shown here, explains from a user perspective what are the passages and decisions needed to purchase a coffee, it describes in detail the steps and choices showing a complexity that we would not normally perceive.

A well articulated vision of the processe can be very useful to interaction designers, either at the research stage, when it’s possible to discover weaknesses and open new paths of development, or in pre-production stage, to describe in detail a complex system being created.

18

19

20

Displaying what happens with interactions that develops over time, can also be done with a notation derived from film industry, the storyboard. It consists in a series of scenes and characters with the addition of short captions to explain details of the action.

The sketch to the left shows a system of hot beverage vending machine using the storyboard notation: a sequence illustrates a person standing close to the machine who selects a product, set some parameters through the touch-screen, and finally collects the product. In the sketch to the right, a detailed sequence of screens is used to show what happens when the user interacts with the touch-screen.

This type of notation is used to show an interesting feature of the vending machine here illustrated: the presentation of beverages happens via a large screen with images instead of the common buttons. In this way the user memorize products in relation to their relative position on the screen, and the connection between button and result becomes immediate. This is what is called natural mapping.

Another function achievable with software, is the implementation of a memory that keep traces of actions over time. This vending machine stores the selection made for each product, magnifying the product buttons that are chosen more frequently. The result is that each machine adapts and acquires unique characteristics according to who uses it. �The present world is full of static objects that force people to adapt to them... But harnessing the increased power of digital devices, interaction designers can create objects that learn, react, respond, understand context, and perform tasks that have personal meaning�.3

3 - Saffer, Dan. 2007. Designing For Interaction. Berkley: AIGA Design Press. 159

21

4 Peo ple

22

Discovering needs Digital technology allows us to create specific applications for limited groups of people. This is why it is increasingly important to find out exactly what their real needs are, and create a proper experience.

Sometimes happens to make the error of designing as if we were the end users, but this frequently leads to mistakes or bad assessment. Each person is different and has its unique characteristics. Discovering what people think and do in real life, helps creating new concepts that lead to a rich and effective final product.

23

24

One way to begin creating an empathy between people and interaction designer, is to create user profiles also known as personas. In practice personas are a collection of information such as age, profession, habits, etc... accompanied by an image that is intended to give a realistic connotation to this person. Later, personas become a reference that guide and inform the whole design process.

Field search conducted by researchers with people are called participatory interviews. Carried out on a sample that corresponds to the end user, participatory interviews aim primarily to collect data, but also stimulate the interviewed in the generation of new ideas and opinions. It’s necessary to apply different methods to explore not solely the expressed needs, but also emotions and the subconscious.

People are at the centre of interaction designers work.

Independently from the project approach chosen, whether it is more user-centred or task centred, interaction designer needs to be aware of the influence and the contribute people can give to a project. “It is generally most valuable to apply, or sometimes modify, a range of different methods for any given project.

The most useful set will depend on whatever the purpose is primarily a generative one of defining design opportunities for particular kind of users or a domain of activity, or an evaluative one of refining specific design ideas as they develop�.4

4 - Moggridge, Bill. 2007. Designing Interaction. Cambridge: MIT Press. 669

25

5 PROTOT YPEs

Testing ideas While developing new concepts, the creation of prototypes is a central activity that helps in many different way. One point is that they highlight aspect of the project that may have been forgotten or not planned. Another point is that they allow to gather feedbacks from users in early tests and participatory interviews.

The most important thing however, is that they give new ideas to move forward with a project. Prototypes are in fact tools to speed up the development process, and because of that, interaction designers should use them as frequently as possible. “...many designers feel that prototyping is the design activity...� 5

5 - Saffer, Dan. 2007. Designing For Interaction. Berkley: AIGA Design Press. 117

26

27

6 Inter act i ve s pac es

Ambient devices We can talk, share pictures and video experiences, to someone at the antipodes, connecting instantly with any part of the world: we already are in the future. Apparently all of this seems normal, almost predictable, but we live in an amazing world. Complexity is part of this, and no doubt future years will only increase it, but what exactly will it bring us? Or rather, in which direction interaction design might push it?

28

29

30

An integration between technology and the home environment, is a direction to investigate. Some sketches show how the house could communicate to us. A mirror could show us updates on health, while the fridge suggests recipes according to the food available, the wardrobe recommends pairings for trendy clothing, and a door may become an agenda that reminds of the to-do list while leaving the house.

It might also be interesting to review how the environment allows us to share knowledge and experiences with others; like people around a campfire telling stories, a table could be the meeting place for people who explore, learn, and play together...

“Ambient devices (which are really a subset of calm technologies) don’t ask for attention. They exist on the periphery of human senses, offering information, but not insisting that people pay attention or act on that information. They aren’t alarms, and if they go unnoticed, that is fine. They are supposed to be unobtrusive”.6

6 - Saffer, Dan. 2007. Designing For Interaction. Berkley: AIGA Design Press. 168

31

7 O ppo rtu ni t y

32

The third option When interaction designers begin a new project they are given the brief, a document containing the objectives and purposes of the project itsel. Inside a brief they find limitations related to the usage context, they discover problems caused by a particular category of users, cost limits , technological constraints, all types of design constraints. This begins to define the scope of action, in itself an advantage, and designers should not be intimidated by constraints. Their role is to convert those limitations into opportunities, starting with a thorough analysis that bring out the opportunities. Rather than accepting a compromise between two solutions, interaction designers must seek the third unknown way, that takes us beyond the problem toward a possible improvement of everyday life.

33

34

Taking as example a search made ​​for the development of a rental service of small boats, it was necessary to investigate who were the actors of the service, where it would be used, how and in what situation.

On one side the research tries to answer to the questions What?

Why? Who? Where? How? which is a way to gather some insights on the topic. On the other side the research shows process and mood of the service, along with the invention of a noun and some adjectives that qualifies it.

Gathering as much information as possible makes possible to have a clearer view of limitations, and later be able to create new opportunities.

“Good design comes from the successful synthesis of a solution that recognizes all the relevant constraints”.7

7 - Moggridge, Bill. 2007. Designing Interaction. Cambridge: MIT Press. 649

35

Conclusion

36

In this text are listed some of the concepts an interaction designer should remember: 1 - it is necessary to treat information as a basic material from which, through synthesis, extrapolate clear concepts; 2 - shapes contain infinite number of meanings that requires a careful use whatever the media is; 3 - time is a dimension to be explored that adds meaning; 4 - people latent desires must be discovered to generate a complete satisfaction of needs; 5 - prototypes are tools to generate new ideas and speed up the development process; 6 - technology has to be part of the home environment in order to facilitate and inform people in a non-invasive way; 7 - constraints and limitations should be transformed into opportunities.

Digital technology is a mean of advancement and improvement.

Today, thanks to the contribution of interaction designers, we can derive pleasure and benefit from well-designed applications or devices; but there are always opportunities for improvement.

Combining informations, materials, shapes, time, interaction designers can create endless combinations and decide which is the way to go towards our future.

37

Sources List - Moggridge, Bill. 2007. Designing Interactions. Cambridge: MIT Press.

- Norman, Donald A. 1988. The Psychology of Everyday Things. New York: Basic Books.

- Saffer, Dan. 2006. Designing for Interaction. Berkeley CA: Peachpit.

- Maeda, John. 2006. The Laws of Simplicity. Cambridge: MIT Press.

38

Colophon Chapter headings: Code Pro Light, 24pt Headings: Open Sans Light, 14pt Main text: Open Sans Light, 10pt Captions: Open Sans Light, 7pt Cover: Code Pro Light, 72pt Binding: Sandwitch, hand sewn perfect bound

39

Š Tommaso Bertagnin Iuav University of Venice, Masters in Design (Visual and Multimedia Communication) Interaction Design Theory 1, 2011–12 (Gillian Crampton Smith with Philip Tabor)

40