Human-Computer Interaction

Transcription

1 Interaction design basics Human-Computer Interaction Cezary Bolek Design what it is, goals, constraints The design process Users who they are, what they are like Scenarios Navigation Iteration and prototypes Interaction Main aim: design interaction system not just interface. Don t think about just the immediate interaction, but the interaction as a process Technology is just the tool that enables to create the specific form of interaction What is design? Example e.g. stapler in office technology changes interaction style manual: write, print, staple, write, print, staple, electric: write, print, write, print,, staple 1

2 What is design? Golden rule of design Problem solving by achieving goals within existing constraints Understand materials you work with. Goals - purpose What is main purpose, who is it for, why do they want it? Constraints Available materials, cost, time, paltform Trade-offs Golden rule of design for Human Computer Interaction Understand materials you work with. Understand computers limitations, capacities, tools, platforms Understand people psychological, social aspects physical human error and their interaction To err is human Accident reports aircrash, industrial accident, hospital mistake enquiry blames human error but concrete lintel breaks because too much weight blame lintel error? no designer error, who knows 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! give them a chance to make some. 2

3 Central message The process of design Requirements The user Analysis Design Implementation and deployment Prototype The process of design - requirements The process of design - analysis Requirements Analysis Requirements Analysis Design Implementation and deployment Design Implementation and deployment Prototype Prototype First stage what are expectations, what is there and what is wanted As a precursor to this it is usually necessary to find out what is currently happening. Techniques: Interviewing people, direct observation videotaping, looking at the documents and objects that they work with The results of observation and interview need to be ordered in some way to bring out key issues Analysis of scenarios of behavior Analysis of tasks that are to be carried out in context of goals to make interaction smooth and easy/ 3

4 The process of design The process of design - prototyping Requirements Requirements Analysis Analysis Design Design Implementation and deployment Implementation and deployment Prototype Prototype Central stage on the way form expectations to realization. There are numerous rules, guidelines, and design principles to help with this. There are various notations and methods to record design choices. Methods of modeling and describing interaction/ Humans are complex and it cannot be expected to get designs right first time Therefore we need to evaluate a design to see how well it is working and where there can be improvements. Most interaction systems design involve some form of prototyping, producing early versions of systems to try out with real users. The process of design - implementation But how can all this be done!? Requirements Analysis Design Implementation and deployment How to achieve to goal based on these steps in context limited time and resources? Trade-offs Prototype Physical implementation of the design This will involve writing code, making hardware, writing documentation and manuals everything that goes into real system Sometimes the design has to be accepted as final even if it is not perfect it is often better to have a product that is acceptable but on time and to cost than it is to have one that has perfect interaction but is late and over budget 4

5 how can all this be done!? The real problem is not to find the faults that is easy, nor to work out how to fix them But the issue is: which usability problems is it worth fixing User focus Perfect system often is badly designed system badly designed not because the design is bad, nut because too much effort will have been spent in the design process itself know your user example user Who are they? Probably not like you! Talk to them Watch them Use your imagination Know your user Know your user who are they? Who are your users? Are they young or old, experienced computer users or novices? The question becomes harder to answer if you are designing generic device or software (e.g. microwave oven, text editor), as there are many different users with different purposes and characteristics. It may be tempting to try to think of a generic user with generic skills and generic goals; however, it is probably better, either instead or in addition, to think of several specific users 5

6 Know your user probably not like you When designing a system it is easy to design it as if you were the main user: you assume your won interests and abilities The user is almost for sure different: has different knowledge, experience, interests, expectations, learning abilities Example: Software companies are primarily filled with male developers Software users are men and women (having better empathetic skills) Example user Description of, template for example user not necessarily a real person Use as surrogate user Details of person and personality matter makes them 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). Scenarios stories for design behavior templates use and reuse 6

7 Scenarios What will users want to do? What are the sequences of actions the users have to perform to achieve the goal? Step-by-step walkthrough. Sequences of actions. what can they see (sketches, screen shots) what do they do (keyboard, mouse etc.) what are they thinking? Behaviors templates embedded in the 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 recognized 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. Play the scenario Mock up device Pretend you are doing it. Act as a user do. Example: Internet-connected Swiss army knife Where is the thumb? Explore the depths Explore interaction what happens when Explore cognition what are the users thinking Explore architecture what is happening inside Use toothpick as stylus 7

8 Communicate with others designers, clients, users Validate other models Use scenarios to.. a detailed scenario can be played against various more formal representations such as task models or dialog and navigations models Express dynamics screenshots appearance scenario behavior Scenarios - linearity In contrast to other methods describing the patterns of interaction, scenarios are linear they represent a single path among all the potential interactions Positive points: our live and time are linear it is easier to understand simple linear narratives (we are natural storytellers and story listeners) Negative points: Real interactions have choices (here: no choice, no branches, no special conditions) it s easy to miss the unintended things a person may do So: use several scenarios use several methods Levels start Navigation system design local structure single screen global structure whole site Widget choice menus, buttons, sliders, etc. View, screen design Application navigation design Environment equipment, operating system, other applications, other devices 8

9 The web Physical devices Widget choice Elements and tags Widget choice Controls <a href=... > buttons, knobs, dials Screen design Page design Screen design Physical layout Navigation design Site structure Navigation design Modes of device Environment The web, browser, external links Environment The real world Think about structure Individual view, screen individual screens or the layout of devices will have their own structure (discussed later) Local structure looking from one screen or page out Global structure structure of site, movement between screens Wider still relationship with other applications Local structure 9

10 Goal seeking Goal seeking Much of interaction involves goal-seeking behavior. Users have some idea what they are after and a partial model of the system. start goal start goal In 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 buttons and links. progress with local knowledge only... Goal seeking Goal seeking start goal start goal but can get to the goal try to avoid these bits! 10

11 Important knowledge 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 web site live links to higher levels Where you are breadcrumbs shows path through web site hierarchy top level category sub-category this page Beware the big button trap Modes - examples things more things Where do they go? lots of room for extra text! other things the thing from outer space Lock to prevent accidental use 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! 11

12 Hierarchical diagrams Global structure The system Info and help Management Messages between screens within the application Add user Remove user Hierarchical diagrams ctd. Application structure Parts of application. Relations between views (screens or groups of screens, states) Typically functional separation But may be organized by roles, user type, or some esoteric breakdown... modules in an educational system The system Info and help Management Messages Add user Remove user Navigating hierarchies Deep hierarchies are difficult to navigate It is better to have broad top-level categories to limit depth of hierarchy Miller s 7±2 rule is often misused in this context for short term memory, not menu size Many guidelines suggest that menu breadth (the number of choices available at each level) should be around seven wrong For options/menus visual context Example: for web page index, 60 or even more items can be used if the items are organized in a way the eye can easily find the right one Optimal? many items on each screen but structured within screen 12

13 Dialogue Network diagrams Marriage service Minister: Man: Minister: Woman: Minister: do you name take this woman I do Do you name take this man I do I now pronounce you man and wife 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 Main screen Remove user Add user Confirm Show different paths through system Network diagrams ctd. Show relations between operations (actions) : what leads to what what happens when Including branches Wider still More task oriented then hierarchy diagrams Main screen Remove user Add user Confirm between applications and beyond... 13

14 Wider still... Style issues: platform standards, consistency Functional issues e.g. cut and paste Screen design and layout for data presentation and control Navigation issues embedded applications, embedding data from other apps links to other apps the web ABCDEF HIJKLM NOPQRVWXYZ basic principles, grouping, structure, order, alignment, use of white space Basic principles Available tools Questions What is the user doing? What are the expectations? Analysis What information is required? What comparisons may the user need to make? In what order are the things likely to be needed? Design Form follows function. Physical implementation of functionality Grouping of items Order of items Decoration fonts, boxes, backgrounds Alignment of items White space between items 14

15 Grouping and structure Order of groups and items logically together physically together Think! what is natural order of elements/operations Billing details: Name Address: Credit card no: Order details: Delivery details: Name Address: Delivery time item quantity cost/item cost size 10 screws (boxes) Should match screen order! from left/right, from top/bottom Instructions (hints, help) support to understand components functionality, but can obfuscate beware the cake recipe syndrome! mix milk and flour, add the fruit after beating them Decoration Use boxes to group logical items. Frames can also play aesthetic role Use fonts for emphasis, headings. but... not too many! In moderation Text alignment European languages read from left to right align left hand side Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Limes inferior boring but readable! ABCDEF HIJKLM NOPQR VWXYZ fine for special effects but hard to scan Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Limes inferior 15

16 Alignment - names Alignment - numbers Usually scanning for surnames make it easy! Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan Janet Gregory Russell Dix Finlay Abowd Beale Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell Think about the purpose of presentation! Which is biggest? Alignment - numbers Multiple columns Visually: long number = big number Align decimal points...or right align integers Scanning across big intercolumn gaps is hard (hard to avoid with large data base fields) cookies 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 16

17 Multiple columns Multiple columns Use leaders or graying (horizontal but vertical too) cookies 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 cookies 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 Multiple columns or even (with care!) bad alignment Space to separate White spacing cookies 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 17

18 Space to structure White spacing Space to highlight White spacing Physical controls - example Physical controls - example Grouping of items defrost settings type of food time to cook Grouping of items Order of items 1) type of heating 2) temperature 3) time to cook 4) start

19 Physical controls - example Physical controls - example Grouping of items Order of items Decoration different colors for different functions lines around related buttons (temp. +/-) Grouping of items Order of items Decoration Alignment centered text in buttons easy to scan? Physical controls - example Grouping of items Order of items Decoration Alignment White space gaps to aid grouping User action and control entering information knowing what to do visual context 19

20 Entering information Visual support Forms, dialogue boxes Form for presentation and data input Similar layout issues for labels and data input fields Alignment is important right alignment can be used, or labels over/under field, or smaller font for label Logical layout Order should be the result of form purpose analysis Depending on culture context top bottom, left right Groupings Name: Alan Dix Address: Lancaster Name: Alan Dix Address: Lancaster? Name: Alan Dix Address: Lancaster User must have opportunity to easily find out: which components are active and passive what are available actions for each component: where do you click where do you type Consistent style helps Don t fight the habits Example: web portal hyperlinks uniform, underlined, same color Labels and icons Standards for common actions Standards for behavior, e.g. button [bold] current state or command only Visual context - affordances For physical objects shape and size suggest actions pick up, twist, throw Buttons afford pushing For screen objects button like object affords mouse click physical-like objects suggest use Context of computer interface elements might differ icons afford clicking or even double clicking not like real buttons! mug handle affords grasping Appropriate appearance presenting information, aesthetics and utility colour and 3D, localisation & internationalisation 20

21 Presenting information Presentation form depends on information type: text, numbers, maps, tables Displaying purpose matters, determining its form, e.g.: sort order (which column, numeric alphabetic) text vs. diagram scatter graph vs. histogram Chap Chap10 Chap Generally: Chap Chap12 Chap You should follow use paper Chap13 Chap Chap14 Chap presentation principles! but...add interactivity, softens design choices. e.g: e.g. re-ordering columns dancing histograms Name Size Reformatowany histogram Main goal: simple interface higher productivity Aesthetics and utility easier to learn Beauty and utility may conflict Problems with clarifying the functionality of components Mixed up visual styles (different design teams) Clean design little differentiation confusing Backgrounds behind text good to look at, but hard to read But can work together may increase user satisfaction then improve productivity In consumer products key differentiator (e.g. imac) Both often used very badly! Color Color and 3D LCD monitors often offer limited color palette Color over used because it is there Beware color blind! Use sparingly to reinforce other information 3D effects Good for physical information and some graphs but if over used text in perspective!! 3D pie charts Bad use of color Over use - without very reason (e.g. kids site) Color blindness Poor use of contrast Do adjust your set! Adjust your monitor to grays only Can you still read your screen? 21

22 Localization & internationalization Interface should be adjustable to support different cultures and languages Try to choose symbols that are universal same meaning in every culture E.g. in American culture symbols mean positive and negative, in European may mean positive and positive Prototyping In software development, use resource database instead of literal text dialog boxes, menus etc. (easy to modify) Prototyping You never get it right first time If at first you don t succeed Pitfalls of prototyping Moving little by little but to where? Goal must be clear and well defined. Design Protoype Evaluate OK? Done! Re-design Need a good start point Need to understand what is wrong and how to improve Intermediate goals shouldn t shade main goal. 22