Interaction design quick tour 2


Published on

1 Like
  • Be the first to comment

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

No notes for slide

Interaction design quick tour 2

  1. 1. INTERACTION - Quick Tour - 1 L.F.M.I 2014
  2. 2. Interaction is… • • • • • Process of information transfer from user to the computer and from computer to the user. Interaction models: translations between user and system Ergonomics: physical characteristics of interaction Interaction styles: the nature of user/system dialog Context: social, organizational, motivational L.F.M.I 2014 2
  3. 3. Ergonomics • • • Study of the physical characteristics of interaction How the controls are designed, the physical environment in which the interaction takes place, the layout & physical qualities of the screen. Ergonomics issues • arrangement of controls and displays • surrounding physical environment • health issues L.F.M.I 2014 • use of colour 3
  4. 4. Common interaction styles • • • • • • • • Command line interface Menus Natural language Question/answer and query dialogue Form-fills and spreadsheets Wimp (Windows, Icons, Menus and Pointers) Point and click Three–dimensional interfaces L.F.M.I 2014 4
  5. 5. User Interaction Styles • Interaction can be seen as a dialog between the computer and the user. • Linguistic manipulation - by typing in commands • Direct manipulation - by using some sort of pointing device L.F.M.I 2014 5
  6. 6. Interaction Styles : Menu Binary Menus Pull-Down, Pop Up and Toolbars • Often have more than two items Menus – True/False • Pull-Down menus always – Male/Female available to the user by making – Yes/No selections on a top menu. – Radio Buttons Choice • Keyboard shortcuts ; Ctrl– Check Boxes Choice C , Ctrl+V, etc • Multiple-item Menus • Multiple-selection menus or check • Toolbars, iconic menus and boxes palettes L.F.M.I 2014 • Pop up menu 6
  7. 7. Interaction Styles : Menus for Long Lists Scrolling Menus, Combo Boxes & Fisheye Menus L.F.M.I 2014 7
  8. 8. Interaction Styles : Menus for Long Lists • Embedded Menus & Hotlinks : • Embedded menus are an alternative to explicit menus • The menu items might be embedded in text or graphics and still be selectable. L.F.M.I 2014 8
  9. 9. Interaction Styles : Combination of Multiple Menus 1. 2. 3. 4. Linear menu sequences Simultaneous menus Tree-structured menu Menu maps L.F.M.I 2014 9
  10. 10. Interaction Styles : Dialog Boxes • • Dialog box design is combination of menu selection and form fill. Can also contain task-specific functions such as; entering the customer’s name and address for a car rental; specifying clothing size, color and fabric for an order entry system. L.F.M.I 2014 10
  11. 11. Interaction Design • Users’ capabilities User-centered approach is based on : • • • Early focus on users and tasks: directly studying cognitive, behavioral, anthropomorphi c & attitudinal characteristics Empirical measurement: users’ reactions and performance to scenarios, manuals, simulations & prototypes are observed, recorded and analysed Iterative design: when problems are found in user testing, fix them and L.F.M.I 2014 carry out more tests • Size of hands • Motor abilities • Height • Strength • Disabilities 11
  12. 12. Four basic activities in IDx • • • • Identifying needs and establishing requirements Developing alternative designs Building interactive versions of the designs Evaluating designs L.F.M.I 2014 user-centered design approach 12
  13. 13. Lifecycle models • Lifecycle models are: • • management tools simplified versions of reality L.F.M.I 2014 Traditional ‘waterfall’ lifecycle Spiral Lifecycle model 13
  14. 14. Lifecycle Model L.F.M.I 2014 Life Cycle for RAD (Rapid Application Development Dynamic Systems Development Method 14
  15. 15. Lifecycle Model The Star lifecycle model L.F.M.I 2014 Usability engineering lifecycle model 15
  16. 16. INTERFACE DESIGN 1 - Quick Tour - L.F.M.I 2014 16
  17. 17. What is User Interface? • • • • • • The user interface, or the human/computer interface is what the user sees, and includes: the physical controls – buttons, etc. what the system looks like (if there is a monitor – the system could be a washing machine or a photocopier) how the system accepts input from the user how the system responds to user input how the system outputs the results of processing L.F.M.I 2014 17
  18. 18. Human-Computer Interface • • A human and a computer communicates. A human usually has 5 senses: Sight, Hearing, Touch, Taste, Smell L.F.M.I 2014 • • • • • • • • A keyboard, for typing, A mouse, for clicking, A scanner, for copying, A camera, for images. A monitor, for displaying, A printer, for printing, A sound card. For audio, A DVD, for video. 18
  19. 19. Metaphor: Computer objects as visible, moveable objects • • • • • • • • Items represented as icons a metaphor provides a lot of information it enables the transfer of skills good metaphors provide natural mappings metaphors are not taken literally they can highlight underlying assumptions metaphors are not symmetrical they can be violated Desktop Metaphor (Macintosh) L.F.M.I 2014 19
  20. 20. Expressive Interface: to make the ‘look and feel’ of an interface appealing. Ways of conveying the status of a system are through the use of : Dynamic icons : a recycle bin expanding when a file is placed into it. Animations : a bee flying across the screen indicating that the computer is doing something, like checking files Spoken messages, using various kinds of voices, telling the user what need to be done. Various sounds indicating actions and events (window closing, files being dragged, new email arriving). L.F.M.I 2014 20
  21. 21. Expressive Interface • Benefit of expressive interface : Provide reassuring feedback to the user that can be both informative and fun Influences how pleasurable it to interact with. The more effective the use of imagery at the interface, the more engaging and enjoyable it can be. L.F.M.I 2014 Emoticons - compensate for lack of expressiveness in text communication 21
  22. 22. • Gimmicks Amusing to the designer but not the user. - Clicking on a link to a website only to discover that it is still ‘under construction’ Error Messages “the application has expectedly quit due to poor coding in the operating system” • Shneiderman’s guidelines for error messages include: • avoid using terms like FATAL, INVALID, BAD • Audio warnings • Avoid UPPERCASE and long code numbers • Messages should be precise rather than vague L.F.M.I context-sensitive help • Provide 2014 22
  23. 23. Website Error messages “The requested page /helpme is not available on the web server.” If you followed a link or bookmark to get to this page, please let us know, so that we can fix the problem. Please include the URL of the referring page as well as the URL of the missing page. L.F.M.I 2014 23
  24. 24. Summary • Affective aspects are concerned with how interactive systems make people respond in emotional ways • Well-designed interfaces can elicit good feelings in users • Expressive interfaces can provide reassuring feedback • Badly designed interfaces make people angry and frustrated L.F.M.I 2014 24