Chapter 5 human computer interaction chapter 5

it is for guide for reading

1. Chapter 5 Interaction Design and HCI in the Software Process 4/23/2024 1

2. Outline Interaction Design Process of interaction design HCI in software Process Iterative design and prototyping 4/23/2024 2

3. Is about developing high quality interactive systems and products that support, enhance, and extend the way people work, communicate, and interact. 4/23/2024 3 Interaction Design

4. What is Design? Achieving goals within constraints Goals : the purpose of the design we are intending to produce Who is it for? Why do they want it? Constraints : the limitations on the design process by external factors Like materials, platforms, cost, time, health and safety Trade-offs : choosing which goals or constraints can be relaxed so that others can be met. 4/23/2024 4

5. What is Design? Golden rule of design Understand computers Limitations, capacities, tools, platforms Understand people Psychological, social aspects Human error we know how users behave under stress so design for it! and their interaction … 4/23/2024 5

6. Interaction design process 4/23/2024 6 what is wanted analysis design implement and deploy prototype what is there vs. what is wanted guidelines principles precise specification evaluation heuristics scenarios task analysis

7. Interaction Design Processes Activities in HCI Design process Requirements 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 4/23/2024 7

8. Cont … Three key characteristics of the interaction design process User Focus : focus on users early in the design and evaluation of the artefacts Usability: Identify, document and agree specific usability and user experience goals Iteration is inevitable- designers never get it right first time 4/23/2024 8

9. User Focus It is the way of identifying your users Who are they? Young/old. Many different users - Designing generic software Example:- word processor/website visitors. Probably not like you! Talk to them Watch them 4/23/2024 9

10. User focus Gather as much information as possible about the future users of the system. Stakeholders : people affected directly or indirectly by a system. Participatory design : bringing a potential user fully into the design process Cultural probes provide a way of gathering information about people and their activities. Use your imagination. 4/23/2024 10

11. Scenarios Scenarios are stories for design: rich stories of interaction. They are perhaps the simplest design representation, but one of the most flexible and powerful. It explore following main things: Explore interaction- what happens when Explore cognition -what are the users thinking Explore architecture -what is happening inside Scenarios are linear – they represent a single path amongst all the potential interactions 4/23/2024 11

12. Cont … Scenarios can be used to: Communicate with others – other designers, clients or users. It is easy to misunderstand each other whilst discussing abstract ideas. Concrete examples of use are far easier to share. Validate other models A detailed scenario can be ‘played’ against various more formal representations such as task models Express dynamics Individual screen shots and pictures give you a sense of what a system would look like, but not how it behaves. 4/23/2024 12

13. Navigation Design The process of accurately ascertaining one's position and planning and following a route . Allows your customers to find what they are looking for without confusion or unnecessary clicks Levels Widget choice-menus, buttons, search box, clock etc. Screen design Navigation within application Environment-other apps, Think about structure Local ( single screen) -one screen or page out Global ( whole site) - structure of site, movement between screens 4/23/2024 13

14. Local (single screen) Each state of the system or screen needs to give the user enough knowledge of what to do to get closer to their goal. 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 4/23/2024 14

15. Global-network diagrams The overall structure of an application. This is the way the various screens, pages or device states link to one another. Show different paths through system What leads to what What happens when Including branches Task oriented 4/23/2024 15 main screen remove user confirm add user

16. Screen Design and Layout The basic principles at the screen level of interaction design: Ask- What is the user doing? Think- What information is required? What comparisons may the user need to make? In what order are things likely to be needed? Design - Form follows function: let the required interactions drive the layout Available tools: suggest the user appropriate ways to read and interact with a screen or device We have to focus on : Grouping of items (logically together and physically together), Order of items Decoration 4/23/2024 16

17. Cont … Order of groups and items Think! - what is natural order Should match screen order! Decoration Use boxes to group logical items Use fonts for emphasis, headings But not too many!! Alignment of text : You read from left to right (English and European including Amharic)  align left hand side. Focus also on the alignment of numbers (in most cases numbers are aligned on the right) Spacing: space to separate (paragraphs), space to structure, etc. 4/23/2024 17

18. 4/23/2024 18 Medium Good Poor

19. User action and control Knowing what to do Screen consists not only of information presented to the user, but also of places for the user to enter information What is active and what is passive. giving you information Where do you click Where do you type Consistent style e.g. web underlined links Labels and icons Standards for common actions Language eg. Bold button = current state or action 4/23/2024 19

20. Appropriate Appearance 1. Presenting Information: Purpose matters For complex numerical data – scatter graph, histograms , 3D surfaces For hierarchical structure -- outlines or organization diagrams Sort order (which column, numeric alphabetic) 2 . Aesthetics and utility Aesthetically attractive designs will increase user satisfaction and improve productivity. Beauty and utility may conflict but can work together. 3 . Colour usage : Most often used very badly! Colour over used because ‘it is there’ but Over using - without very good reason creates: Poor use of contrast Beware colour blind! 4/23/2024 20

21. Across Countries and Cultures Localisation or internationalisation Making the software suitable for different languages and cultures Globalisation Try to choose symbols etc. that work everywhere Simply change language? Use ‘resource’ database instead of literal text … but changes sizes, left-right order etc. Deeper issues Cultural assumptions and values Meanings of symbols E.g tick and cross … + ve and - ve in some cultures … but … mean the same thing in others 4/23/2024 21  

22. HCI in Software Process 4/23/2024 22

23. HCI in the software process Software lifecycle Activities that take place from the initial concept formation for a software system up until its eventual phasing out and replacement. Distinct activities and the consequences for interactive system design Software engineering is the discipline for understanding the software design process, or life cycle Designing for usability occurs at all stages of the life cycle, not as a single isolated activity 4/23/2024 23

24. The Waterfall Model 4/23/2024 24 Requirements specification Architectural design Detailed design Coding and unit testing Integration and testing Operation and maintenance

25. Activities in the Life Cycle Requirements specification Designer and customer try to capture what the system is expected to provide and expressed in natural language. Language description for user and software. Architectural design Decomposition of the system into components. Which components provide which services. Interdependencies between separate components and the sharing of resources. Detailed design Refinement of architectural components and interrelations to identify modules to be implemented separately. Coding and unit testing Integration and testing Operation and maintenance 4/23/2024 25

26. The life cycle for interactive systems Cannot assume a linear sequence of activities like waterfall model lots of feedback! 26 Requirements specification Architectural design Detailed design Coding and unit testing Integration and testing Operation and maintenance

27. Waterfall vs. Iterative User-Centered Design Waterfall Lacks users’ perspective Has no feedback High cost of fixing Errors Iterative Iterate at every stage Lots of feedback Training costs reduced 4/23/2024 27

28. Usability Engineering IS Usability quality of a system that makes it easy to learn, easy to use and encourages the user to regard the system as a positive help in getting the job done Usability of an Interactive system is largely reflects the degree to which the characteristics and requirements of the intended users have been incorporated in the design Usability engineering demands that specific usability measures be made explicit as requirements 4/23/2024 28

29. Five quality dimensions: Learnability : How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency : Once users have learned the design, how quickly can they perform tasks? Memorability : When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors : How many errors do users make, and how easily can they recover from the errors? Satisfaction : How pleasant is it to use the design 4/23/2024 29

30. Usability metrics Criteria Measurement criteria which can be used to determine the measuring method for a usability attribute 4/23/2024 30

31. ITERATIVE DESIGN AND PROTOTYPING 4/23/2024 31

32. Iterative design and prototyping Iterative design overcomes inherent problems of incomplete requirements Prototypes Simulate or animate some features of intended system It is a tangible artifact, not an abstract description that requires interpretation. 32

33. Why prototype? Evaluation and feedback are central to interaction design Stakeholders can see , hold , interact with a prototype more easily than a document or a drawing Team members can communicate effectively You can test out ideas for yourself It encourages reflection: very important aspect of design Prototypes answer questions, and support designers in choosing between alternatives 33

34. What to prototype? Technical issues Work flow, task design Screen layouts and information display Eg. paper prototype 34

35. Cont … Prototypes and prototyping techniques can be analyze along four dimensions Representation describes the form of the prototype (e.g., sets of paper sketches or computer simulations) Precision describes the level of detail at which the prototype is to be evaluated e.g., informal and rough or highly polished; Interactivity describes the extent to which the user can actually interact with the prototype e.g., watch-only or fully interactive; Evolution describes the expected life cycle of the prototype (e.g., throw away or iterative. 4/23/2024 35

36. Fidelity in Prototyping Fidelity refers to the level of detail High Fidelity prototype Looks like the final product Low Fidelity Many details missing Quick and easy way to translate high-level design concepts into tangible and testable artifacts. 4/23/2024 36

37. Low-fidelity Prototyping Uses a medium which is unlike the final medium, e.g. paper, cardboard Is quick, cheap and easily changed More cycles of testing, more prototype Examples: sketches of screens, task sequences, etc ‘Post-it’ notes storyboards ‘Wizard-of-Oz’ 37

38. Storyboards Often used with scenarios, bringing more detail, and a chance to role play It is a series of sketches showing how a user might progress through a task using the device Used early in design Include annotations and scripts indicating how the interaction will occur. 38

39. Sketching Sketching is important to low-fidelity prototyping Don’t be inhibited about drawing ability. It allows you to bring your ideas to life quickly Practice simple symbols 39

40. Card-based prototypes 40 Index cards (3 X 5 inches) Each card represents one screen or part of screen Often used in website development

41. ‘Wizard-of-Oz’ prototyping 41 The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. Usually done early in design to understand users’ expectations >Blurb blurb >Do this >Why? User

42. High-fidelity prototyping 42 Uses materials that you would expect to be in the final product. Prototype looks more like the final system than a low-fidelity version. For a high-fidelity software prototype common environments include Macromedia Director, Visual Basic, and Smalltalk. Danger that users think they have a full system

43. Approaches to prototyping Throw-away The design knowledge gained from this exercise is used to build the final product, but the actual prototype is discarded. 4/23/2024 43

44. Approaches to prototyping Incremental The final product is built as separate components. The final product is then released as a series of products, each subsequent release including one more component. 4/23/2024 44

45. Approaches to prototyping Evolutional Prototype is not discarded and serves as a base for the next iteration. The actual system is seen as evolving from a very limited initial version to its final release. 4/23/2024 45

46. Management issues Time- building prototypes takes time Planning- adequate planning and costing a design process Non-functional features –safety, reliability critical to product acceptance Contracts- require documentation which serves as the binding agreement. 4/23/2024 46

47. Key guiding principles of conceptual design are: Keep an open mind but never forget the users and their context. Discuss ideas with other stakeholders as much as possible. Use low-fidelity prototyping to get rapid feedback and Iterate, iterate, and iterate 47 Summary

48. Quiz List three prototyping approaches? Why we prototype? What are the use of scenarios? 4/23/2024 48

49. 4/23/2024 49 Thank you!