Hci [6]interaction design


Published on

Human Computer Interaction

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Hci [6]interaction design

  1. 1. Interaction Design HCI course Hurriyatul Fitriyah
  2. 2. overview Interaction design is about creating intervention in complex situation using technology of many components; including PC software, the web and physical devices
  3. 3. Interaction VS Product It is not about the product/ artifact, but about understanding and choosing how it is going to affect the way people do/ work
  4. 4. 1. The design
  5. 5. What is Design? A simple definition is: achieving GOALS within CONSTRAINTS o o Goals: what is the purpose of the design we are intending to produce? Who is it for? Constraints: what materials must we use? What standard must we adopt? How mch can it cost? How much time do we have to develop it? Are there health and safety issue?
  6. 6. Design is a trade-off  Choosing which goals or constraints can be downgraded so that others can be met  Accepting limitation of human and of design  The best design are where the designer understand the trade-off and the factors affecting them
  7. 7. Golden rule of design  Understand  In 1. your materials HCI, the materials is obviously The human (psycological, social, human error) 2. The computer (Limitations, capacity, tools, platforms)
  8. 8. To err is human  People make mistake, slips, error, omissions  But people are remarkably adaptable  As a designer you can give better training and documentation, but the product and its interaction design you created is the most important
  9. 9. 2. The Process of Design
  10. 10. A never ending iterative stages (never complete)
  11. 11. a. Interaction Starts with?  It starts with getting to know the users and their context (Requirement – what is wanted):   What is needed by users? Find out who they are? What they like?
  12. 12. b. 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  Including task analysis c. Design A step to transfer what you want into how to do it
  13. 13. d. Iteration and prototyping  Most of the time, we don’t get the design right at the first time  Comprise design evaluation e. Implementation and Deployment  When the designer happy with their product, then it is time to create it 
  14. 14. Your time is limited!  You can’t trapped in design cycle for like ever!!  there is a trade-off between the length of the design period and the quality of the final design  the real problem is not to find faults, instead the issue is: which usability problems is it worth fixing?
  15. 15. 3. User focus Know them!
  16. 16. How do you get to know them?  Who are they?   Probably NOT like you!   Ask them about what really happen and needed; using structured interview, open-ended duscussion, or ask them to join the design process Watch them!   Obvious for you, but most of the time not for the user Talk to them!   Young or old? Experienced or newbie? It’s harder to design generic computer system Sherlock Holmes’s Quote: “You see, but you do not observe!” Use you imagination!  If I were my User, then?
  17. 17. 4. Scenarios
  18. 18. Scenarios  Rich story of information  can be used and reused throughout design    Help us see what users will want to do Give us step-by-step walkthrough of users’ interaction; including what they see, do and are thinking Example: if user do this then computer do what? Then the user have to do what? etc
  19. 19. Scenarios also can be used to:  Communicate with others (designer colleagues, clients or even users)  Validated againts other models  Express dynamics
  20. 20. 5. Navigation Design HCI is a socio-technical intervention
  21. 21. Socio-technical intervention  Computer-user 1. 2. 3. 4. interact at several levels: Widgets (menus, buttons) Screen or window (grouping of button) Navigation within the application Environment; connect with other deviceapplication
  22. 22. Start considering structure with:  Who is going to use the application?  How do they think  What will they do with it
  23. 23. Thinking about structure 1. Local structure   Looking from one screen or page out Goalk seeking behaviour
  24. 24.  The screen, web page or device displays should make clear where you are in terms of the interactionn     Knowing where you are what you can do knowing where you are going or what will happen where you have been or what you have done
  25. 25. 2. Global structure – hierarcical organtization    Structure of site, movement between screen The hierarcy links screen, pages, or states in logical grouping Example: a PC application on the web
  26. 26. 3. Global structure – dialog    In HCI, the word ‘dialog’ is used to refer to flow of screen It give pattern of interaction A simple way is to use a network diagram showing the principal states or screen linked tigether with arrows; this can show:  What leads to what  Show what happens when  Include branches and loops  Be more task oriented that a hierarcy
  27. 27.  Network diagram ilustrating the main screen for adding or deleting a user
  28. 28. 5. Screen Design and Layout How we put the different element together in an interactive application
  29. 29. Basic principle at Screen level  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
  30. 30. a. Tools for layout  Grouping & structure: If things logically belong together, then we should normally physically group them together  Order of group and items  Decoration : decorative feature that helps to distinct each group and item, e.g. Font style, font type, color, line, boxes
  31. 31. Example: control panel
  32. 32.  Alignment:  White space:
  33. 33. b. User action and control  Entering information: form-based interface adn dialog boxes  Passive and active element on screen  Affordance: how user know where to click? It’s about psychologic on the elements’ shape, colour and other atribute
  34. 34. c. Appropriate appearance  Afford different presentation that allow users to select totheir convenient
  35. 35.  Aesthetic and utility: Remember that a pretty interface is not necessarily a good interface, it just need to be well-designed  Color much and 3D interface: just don’t too  Localization vs internationalization: adjust language, sign, symbol to segmented user
  36. 36.  Users need to find their way around a system, this involves:    Helping users know who they are, where they have been, and what they can do next Creating overall structures that are easy to understand and fit the users’ needs Desinging comprehensible screen and control panels
  37. 37. 6. Iteration and Prototyping
  38. 38. Complexity of Design  It means we don’t get it right the first time  Theory and models can help give good start points
  39. 39.  Formative  evaluation Intended to improve the design  Summative  evaluation To verify whether the product is good enough  The result of evaluating the system will usually be a list of faults or problems  This is followed by redesign exercise
  40. 40. Role of prototyping So, we need iterations and prototype to try out and evaluate
  41. 41.  But iteration can get trapped having no simple improvement, but are not good
  42. 42. Two things you needed in order for prototyping: 1. 2. To understand what is wrong and how to improve A good start point