Interaction Design Basics– Part I Lecture Interaction Design Basics– Part I

Today’s Outline Interaction Design Basics Interactions And Intervention what is design Persona Central message The process of design

HCI Focus of Design Some of HCI is focused on understanding: the academic study of the way people interact with technology. However, a large part of HCI is about doing things and making things that is called a design.

Interaction Design Basics what it is, interventions, goals, constraints the design process what happens when users who they are, what they are like … scenarios rich stories of design navigation finding your way around a system iteration and prototypes never get it right first time!

Interactions And Interventions design interactions not just interfaces not just the immediate interaction e.g. stapler in office – technology changes interaction style manual: write, print, staple, write, print, staple, … electric: write, print, write, print, …, staple designing interventions not just artefacts not just the system, but also … documentation, manuals, tutorials what we say and do as well as what we make

what is design? Achieving goals within constraints goals - purpose who is it for, why do they want it constraints materials, platforms trade-offs

Goal What is the purpose of the design we are intending to produce? Who is it for? Why do they want it? For example, if we are designing a wireless personal movie player, we may think about young affluent users wanting to watch the latest movies whilst on the move and download free copies, and perhaps wanting to share the experience with a few friends.

Constraints What materials must we use? What standards must we adopt? How much can it cost? How much time do we have to develop it? Are there health and safety issues? In the case of the personal movie player: does it have to withstand rain? Must we use existing video standards to download movies? Do we need to build in copyright protection?

Trade-off Choosing which goals or constraints can be relaxed so that others can be met. For example, we might find that an eye-mounted video display, a bit like those used in virtual reality, would give the most stable image whilst walking along. However, this would not allow you to show friends, and might be dangerous if you were watching a attention-grabbing part of the movie as you crossed the road.

Golden Rule Of Design Part of the understanding we need is about the circumstances and context of the particular design problem. We will return to this later in the chapter. However, there are also more generic concepts to understand. The designs we produce may be different, but often the raw materials are the same. This leads us to the golden rule of design: Understand your materials

For Human–Computer Interaction Understand your materials understand computers limitations, capacities, tools, platforms understand people psychological, social aspects human error and their interaction …

To err is human accident reports .. but … human ‘error’ is normal aircrash, industrial accident, hospital mistake enquiry … blames … ‘human error’ but … concrete lintel breaks because too much weight blame ‘lintel error’ ? … no – design error we know how concrete behaves under stress human ‘error’ is normal we know how users behave under stress so design for it! treat the user at least as well as physical materials!

The user Central message … In this book you will find information on basic psychology, on particular techno- logies, on methods and models. However, there is one factor that outweighs all this knowledge. It is about attitude. Often it is said that the success of the various methods used in HCI lies not in how good they are, but in that they simply focus the mind of the designer on the user. This is the core of interaction design: put the user first, keep the user in the center and remember the user at the end.

The process of design Often HCI professionals complain that they are called in too late. A system has been designed and built, and only when it proves unusable do they think to ask how to do it right! In other companies usability is seen as equivalent to testing called checking

The process of design scenarios task analysis what is wanted interviews ethnography what is there vs. what is wanted guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis what is wanted analysis design implement and deploy a roadmap or a strategic approach for someone to achieve a unique expectation. It defines the specifications, plans, parameters, costs, activities, processes and how and what to do within legal, political, social, environmental, safety and economic constraints in achieving that objective prototype

Steps … requirements analysis design iteration and prototyping what is there and what is wanted … analysis ordering and understanding design what to do and how to decide iteration and prototyping getting it right … and finding what is really needed! implementation and deployment making it and getting it out there

Requirements What is wanted? The first stage is establishing what exactly is needed. As a precursor to this it is usually necessary to find out what is currently happening. For example, how do people currently watch movies? What sort of personal appliances do they currently use?

Requirements There are a number of techniques used for this in HCI: interviewing people, videotaping them, looking at the documents and objects that they work with, observing them directly.

Analysis The results of observation and interview need to be ordered in some way to bring out key issues and communicate with later stages of design.

Design We need to record our design choices in some way and there are various notations and methods to do this, including those used to record the existing situation. Its about designing the concept of the system called conceptual design.

Iteration and prototyping Humans are complex and we cannot expect to get designs right first time. We therefore need to evaluate a design to see how well it is working and where there can be improvements.

Implementation and deployment We need to create and deploy the design. This will involve writing code, perhaps making hardware, writing documentation and manuals

… but how can I do it all ! ! limited time  design trade-off usability? finding problems and fixing them? deciding what to fix? a perfect system is badly designed too good  too much effort in design

User focus know your user personae cultural probes

know your user who are they? probably not like you! talk to them watch them use your imagination

Persona description of an ‘example’ user use as surrogate user not necessarily a real person use as surrogate user what would Betty think details matter makes her ‘real’

Example Persona Betty is 37 years old, She has been Warehouse Manager for five years and worked for Simpkins Brothers Engineering for twelve years. She didn’t go to university, but has studied in her evenings for a business diploma. She has two children aged 15 and 7 and does not like to work late. She did part of an introductory in-house computer course some years ago, but it was interrupted when she was promoted and could no longer afford to take the time. Her vision is perfect, but her right-hand movement is slightly restricted following an industrial accident 3 years ago. She is enthusiastic about her work and is happy to delegate responsibility and take suggestions from her staff. However, she does feel threatened by the introduction of yet another new computer system (the third in her time at SBE).

Talk to users It is hard to get yourself inside someone else’s head, so the best thing is usually to ask them. This can take many forms: structured interviews about their job or life, open-ended discussions, or bringing the potential users fully into the design process.

Talk to users People may also be able to tell you about how things really happen, not just how the organization says they should happen. To encourage users to tell you this, you will need to win their trust, since often the actual practices run counter to corporate policy.

Cultural Probes direct observation probe packs used to … sometimes hard in the home psychiatric patients, … probe packs items to prompt responses e.g. glass to listen at wall, camera, postcard given to people to open in their own environment they record what is meaningful to them used to … inform interviews, prompt ideas, enculture designers

Use your imagination Even if you would like to involve many users throughout your design exercise this will not always be possible. It may be too costly, it may be hard to get time with them (e.g. hospital consultant), it may be that there are just too many (e.g. the web).However, even if you cannot involve actual users you can at least try to imagine their experiences.

Scenarios stories for design use and reuse In the performing arts, a scenario (from Italian: that which is pinned to the scenery) is a synopotical collage of an event or series of actions and events. In the Commedia dell'arte it was an outline of entrances, exits, and action describing the plot of a play, and was literally pinned to the back of the scenery. It is also known as canovacio or "that which is pinned to the canvas" of which the scenery was constructed. Surviving scenarios from the Renaissance contain little other than character names, brief descriptions of action, and references to specific lazzi with no further explanation. It is believed that a scenario formed the basis for a fully improvisational performance, though it is also likely that they were simple reminders of the plot for those members of the cast who were literate. Modern commedia troupes most often make use of a script with varying degrees of additional improvisation.

Scenarios stories for design linearity communicate with others validate other models understand dynamics linearity time is linear - our lives are linear but don’t show alternatives

scenarios … what will users want to do? step-by-step walkthrough what can they see (sketches, screen shots) what do they do (keyboard, mouse etc.) what are they thinking? use and reuse throughout design

Scenario – movie player .. Brian would like to see the new film “Moments of Significance” and wants to invite Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to see if she would like it and so connects to one of the movie sharing networks. He uses his work machine as it has a higher bandwidth connection, but feels a bit guilty. He knows he will be getting an illegal copy of the film, but decides it is OK as he is intending to go to the cinema to watch it. After it downloads to his machine he takes out his new personal movie player. He presses the ‘menu’ button and on the small LCD screen he scrolls using the arrow keys to ‘bluetooth connect’ and presses the select button. On his computer the movie download program now has an icon showing that it has recognised a compatible device and he drags the icon of the film over the icon for the player. On the player the LCD screen says “downloading now”, a percent done indicator and small whirling icon. … … …

Scenario – movie player During lunchtime Brian takes out his movie player, plugs in his earphones and starts to watch. He uses the arrow keys to skip between portions of the film and decides that, yes, Alison would like it. Then he feels a tap on his shoulder. He turns round. It is Alison. He had been so absorbed he hadn’t noticed her. ‘What are you watching’, she says. ‘Here, listen’, he says and flicks a small switch. The built-in directional speaker is loud enough for both Brian and Alison to hear, but not loud enough to disturb other people in the canteen. Alison recognizes the film from trailers, ‘surprised this is out yet’ she says. ‘Well actually . . .’, Brian confesses, ‘you’d better come with me to see it and make an honest man of me’. ‘I’ll think about it’, she replies.

Also play act … mock up device pretend you are doing it internet-connected swiss army knife … use toothpick as stylus but where is that thumb?

… Explore the depths explore interaction explore cognition what happens when explore cognition what are the users thinking explore architecture what is happening inside

Use scenarios to .. communicate with others validate other models designers, clients, users validate other models ‘play’ it against other models express dynamics screenshots – appearance scenario – behaviour

linearity Scenarios – one linear path through system Pros: Cons: So: life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely) Cons: no choice, no branches, no special conditions miss the unintended So: use several scenarios use several methods

Navigation design local structure – single screen global structure – whole site the systems info and help management messages add user remove user start main screen remove user confirm add user

levels widget choice screen design application navigation design menus, buttons etc. screen design application navigation design environment other apps, O/S

The web … widget choice screen design navigation design environment elements and tags <a href=“...”> page design site structure the web, browser, external links

Physical devices widget choice screen design navigation design environment controls buttons, knobs, dials physical layout modes of device the real world

Think about structure within a screen local global wider still later ... local looking from this screen out global structure of site, movement between screens wider still relationship with other applications

Local structure Much of interaction involves goal-seeking behavior. Users have some idea of what they are after and a partial model of the system. In an ideal world if users had perfect knowledge of what they wanted and how the system worked they could simply take the shortest path to what they want, pressing all the right buttons and links.

Goal seeking goal start

Goal seeking goal start progress with local knowledge only ...

Goal seeking goal start … but can get to the goal

Goal seeking goal start … try to avoid these bits!

Four golden rules knowing where you are knowing what you can do knowing where you are going or what will happen knowing where you’ve been or what you’ve done

Where you are – breadcrumbs shows path through web site hierarchy top level category sub-category web site this page live links to higher levels

Beware the big button trap Public information systems often have touch screens and so have large buttons. Watch someone using one of these and see how often they go to the wrong screen and have to use ‘back’ or ‘home’ to try again. If you look more closely you will find that each button has only one or two words on it giving the title of the next screen, and possibly some sort of icon. Quite rightly, the button label will be in a large font as users may have poor eyesight.

Beware the big button trap It is hard to choose appropriate labels that mean the same for everyone, especially when the breadth of the screen hierarchy is fixed by the maximum number of buttons. So it is no wonder that people get confused. However, there is usually plenty of room for additional explanation in a smaller font, possibly just the next level of button labels, or a sentence of explanation. It may not look as pretty, but it may mean that people actually find the information they are looking for.

Beware the big button trap things the thing from outer space more things other things where do they go? lots of room for extra text!

Modes

Modes lock to prevent accidental use … if lock forgotten remove lock - ‘c’ + ‘yes’ to confirm frequent practiced action if lock forgotten in pocket ‘yes’ gets pressed goes to phone book in phone book … ‘c’ – delete entry ‘yes’ – confirm … oops !

Global between screens within the application

Hierarchical diagrams the system info and help management messages add user remove user

Hierarchical diagrams ctd. parts of application screens or groups of screens typically functional separation the systems info and help management messages add user remove user

Navigating hierarchies deep is difficult! misuse of Miller’s 7 ± 2 short term memory, not menu size optimal? many items on each screen but structured within screen see /e3/online/menu-breadth/

what does it mean in UI design? Think about dialogue what does it mean in UI design? Minister: do you name take this woman … Man: I do Minister: do you name take this man … Woman: I do Minister: I now pronounce you man and wife

what does it mean in UI design? Think about dialogue what does it mean in UI design? marriage service general flow, generic – blanks for names pattern of interaction between people computer dialogue pattern of interaction between users and system but details differ each time Minister: do you name take this woman …

Network diagrams show different paths through system main screen remove user confirm add user show different paths through system

Network diagrams cntd. what leads to what what happens when including branches more task oriented then hierarchy main screen remove user confirm add user

Wider still between applications and beyond ...

wider still … style issues: functional issues navigation issues platform standards, consistency functional issues cut and paste navigation issues embedded applications links to other apps … the web

Summary of today’s We have learnt today Interaction Design Basics Interactions And Intervention what is design Persona Central message The process of design