Lecture 1- Interaction Design

1. Lecture 1- Interaction Design Dr. Sampath Jayarathna Old Dominion University Credit for some of the slides in this lecture goes to www.id-book.com

2. What is interaction design? “Designing interactive products to support the way people communicate and interact in their everyday and working lives.” • Preece, Sharp and Rogers (2015), (Interaction Design Book) “The design of spaces for human communication and interaction.” • Winograd (1997), (Stanford HCI Group)

3. Goals of interaction design • Develop usable products • Usability means easy to learn, effective to use and provide an enjoyable experience • Involve users in the design process • Number of other terms used emphasizing what is being designed, e.g. • user interface design, software design, user-centered design, product design, web design, experience design (UX)

4. HCI and interaction design • Interaction design is the umbrella term covering all of these aspects • fundamental to all disciplines, fields, and approaches concerned with researching and designing computer-based systems for people

5. Bad designs Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button People do not make same mistake for the labels and buttons on the top row. Why not?

6. Good design • Marble answering machine (Bishop, 1995) • Based on how everyday objects behave • Easy, intuitive and a pleasure to use • Only requires one-step actions to perform core tasks • http://viewpure.com/RgVbXV1krgU?start=0&end=0 6

7. Activity 2 • The Marble Answering Machine (by Durell Bishop, student at the Royal College of Art) is a prototype telephone answering machine. The Marble Answering Machine demonstrates the great potential of making digital information graspable. • Find a partner. • Discuss and write down what is good and bad about the way this design works compared to regular voice mail systems (say your mobile service). • Submit your answers to Piazza thread. Don't forget to write both your names on your post!

8. What to design • Need to take into account: • Who the users are • What activities are being carried out • Where the interaction is taking place • Need to optimize the interactions users have with a product: • So that they match the users’ activities and needs • Product successdependsondesigningsystems/toolsthatcanbeused

9. Understanding users’ needs • Need to take into account what people are good and bad at • Consider what might help people in the way they currently do things • Think through what might provide quality user experiences • Listen to what people want and get them involved • Use tried and tested user-centered methods

10. Bad design results in • Anger and frustration • Decreased productivity in the workplace • Higher error rates • Physical and emotional injury • Equipment damage • Loss of customer loyalty • Costs money

11. Working in multidisciplinary teams • Many people from different backgrounds involved • Different perspectives and ways of seeing and talking about things • Benefits • more ideas and designs generated • Disadvantages • difficult to communicate and progress forward the designs being create

12. What do professionals do in the ID business? • interaction designers- people involved in the design of all the interactive aspects of a product • usability engineers- people who focus on evaluating products, using usability methods and principles • web designers- people who develop and create the visual design of websites, such as layouts • information architects- people who come up with ideas of how to plan and structure interactive products • user experience designers (UX) - people who do all the above but who may also carry out field studies to inform the design of products

13. The User Experience • How a product behaves and is used by people in the real world • the way people feel about it and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it • “every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs.” • Cannot design a user experience, only design for a user experience

14. Why was the iPod user experience was such a success? • Quality user experience from the start • Simple, elegant, distinct brand, pleasurable, must have fashion item, catchy names, cool, etc.

15. Simple Interaction Design Lifecycle Model • Establishing requirements • Developing alternatives • Prototyping • Evaluating

16. Core characteristics of interaction design • Users should be involved through the development of the project • Specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project • Iteration is needed through the core activities

17. You are not your user!!! • Seems obvious but… • You have different experiences • You have different terminology • You have different ways of looking at the world • Fatal mistakes • Assume all users are alike • Assume all users are like the designer,…..especially YOU!

18. Why go to this length? • Help designers: • understand how to design interactive products that fit with what people want, need and may desire • appreciate that one size does not fit all e.g., teenagers are very different to grown-ups • identify any incorrect assumptions they may have about particular user groups e.g., not all old people want or need big fonts • be aware of both people’s sensitivities and their capabilities

19. Cultural differences and accessibility • 5/21/2015 versus 21/5/2015? • Which should be used for international services and online forms? • Accessibility: Degree to which a product is usable and accessible by as many people as possible • Focus on disability • Have a mental or physical impairment • This has an adverse affect on their everyday lives • It is long term • https://www.washington.edu/doit/sites/default/files/atoms/files/Designing-Software-Accessible-Individuals-Disabilites.pdf

20. Usability goals • Effective to use (doing the right thing) • How good a product is at doing what it is supposed to do • Efficient to use (doing things right) • Product supports users carrying out their tasks efficiently. , Amazon One-Click • Safety • Safe to use • Have good utility • Product provides a right kind of a functionality so users can do what they need or want to do • Learnability • Easy to learn • Memorability • Easy to remember how to use

21. User experience goals Desirable aspects satisfying helpful fun enjoyable motivating provocative engaging challenging surprising pleasurable enhancing sociability rewarding exciting supporting creativity emotionally fulfilling entertaining cognitively stimulating Undesirable aspects boring unpleasant frustrating patronizing making one feel guilty making one feel stupid annoying cutesy childish gimmicky

22. Activity 3 • Selecting terms to convey a person’s feelings, emotions, etc., can help designers understand the multifaceted nature of the user experience • Find a partner. • Discuss and find the answers to the following. Submit to piazza. • How do usability goals differ from user experience goals?

23. Design principles • Generalizable abstractions for thinking about different aspects of design • The do’s and don'ts of interaction design • What to provide and what not to provide at the interface • Derived from a mix of theory-based knowledge, experience and common-sense

24. Design principles • Visibility – Can I see it? • Feedback – What is it doing now? • Constraint – Why can't I do that? • Consistency – I think I have seen this before? • Affordance – how do I use it? • Mapping – Where am I and where can I go?

25. Visibility • This is a control panel for an elevator • How does it work? • Push a button for the floor you want? • Nothing happens. Push any other button? Still nothing. What do you need to do? • It is not visible as to what to do!

26. Visibility …you need to insert your room card in the slot by the buttons to get the elevator to work! How would you make this action more visible? • make the card reader more obvious • provide an auditory message, that says what to do (which language?) • provide a big label next to the card reader that flashes when someone enters • make relevant parts visible • make what has to be done obvious

27. The case of the mistaken urinal

28. The case of the mistaken urinal

29. Visibility • Car Controls are positioned in a way that they can be easily found and used

30. Visibility • Hiding certain functions can be advantageous in interface design • Certain functions are kept invisible until needed; also contained within group of similar types • Google Search makes it clear where to enter text

31. Feedback • Sending information back to the user about what has been done • Includes sound, highlighting, animation and combinations of these • Needs to be immediate and synchronized with user action • e.g. when screen button clicked on provides sound or red highlight feedback:

32. Constraints • Restricting the possible actions that can be performed • Helps prevent user from selecting incorrect options or reduce chance of an error • Can also work to focus user's attention to needed task • Physical objects can be designed to constrain things • e.g. only one way you can insert a key into a lock

33. Logical or ambiguous design? • Where do you plug the mouse? • Where do you plug the keyboard? • top or bottom connector? • Do the colorcoded icons help? 33

34. How to design them more logically (i) A provides direct adjacent mapping between icon and connector (ii) B provides color coding to associate the connectors with the labels 34

35. Consistency • Design interfaces to have similar operations and use similar elements for similar tasks • For example: always use ctrl key plus first initial of the command for an operation – ctrl+C, ctrl+S, ctrl+O • Main benefit is consistent interfaces are easier to learn and use • Enable people to quickly transfer prior knowledge to new context and focus on relevant tasks

36. Aesthetic and Functional consistency • Aesthetic • Style and appearance is repeated to enhance recognition, communicates membership and sets emotional tone • Benz: instantly recognizable because consistently features its logo • Functional • Meaning and action are consistent to improve learnability and understanding • Traffic always turns yellow before red. • Cassette recorder control symbols used

37. Internal and external consistency • Internal consistency refers to designing operations to behave the same within an application • Consistency with other elements in the system • External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices • More difficult to achieve because different systems rarely observe the same design standards. • Extends the benefit of internal consistencies across multiple, independent systems

38. When consistency breaks down • What happens if there is more than one command starting with the same letter? • e.g. save, spelling, select, style • Have to find other initials or combinations of keys, thereby breaking the consistency rule • e.g. ctrl+S, ctrl+Sp, ctrl+shift+L • Increases learning burden on user, making them more prone to errors

39. Affordances: to give a clue • Perceived and actual properties of an object that give clues to its operation • e.g. a mouse button invites pushing, a door handle affords pulling • Since has been much popularised in interaction design to discuss how to design interface objects • e.g. scrollbars to afford moving up and down, icons to afford clicking on

40. What does ‘affordance’ have to offer interaction design? • Interfaces are virtual and do not have affordances like physical objects • Instead interfaces are better conceptualized as 'perceived' or 'virtual' affordances

41. Mapping • Controls and displays should exploit natural mapping • Natural mapping takes advantage of physical analogies and cultural standards • Physical : Steering wheel • Cultural: red means stop, green means go

42. What about Software? • Visibility: Visibility of tasks the UI supports and communication of system state/mode • Affordance: If it looks like a button it can be pressed, if it is underlined, it can be clicked • Mapping: Clicking on particular UI element produces expected effect • Constraints: Constraining search criterial, greying out menu items that don't display in a particular context • Feedback: Provide clear and immediate feedback for each action, animated icons for any waiting Many more examples of these that we will see during the semester………….

43. Larson's dog effect

44. How do we learn about users? • People skim ruthlessly – particularly in online environments. • If possible, they avoid reading entirely. • If there are usability problems in everyday 'simple' things, this makes it a much greater challenge for complex software • Problems can overcome through HCI methods that collect and analyze data to better understand your users. • There are many methods, we will learn and practice few • Surveys • Contextual inquiry • Interviews • Usage Analysis

45. Activity 4 • This assignment is intended for you to put into practice what you have read about todays lecture. Specifically, the objective is to enable you to define usability and user experience goals and to transform these and other design principles into specific questions to help evaluate an interactive product. • Think about our Startup project idea, and examine how we should design this, paying particular attention to how the user is meant to interact with it. • From your first impressions, write down what first comes to mind as to what is good and bad about the way the interaction works. • Compile a set of usability and user experience goals that you think will be most relevant in evaluating this project. Decide which are the most important ones and explain why. • Finally, discuss possible design principles applicable to this project interface.