CS 320 Interaction Design

1. CS 320 Interaction Design AN INTERACTION ANALYSIS FRAMEWORK & INTERACTION PARADIGMS References S. Heim, The Resonant Interface HCI Foundations for Interaction Design [Chapter 1] Addison-Wesley, 2007 J. Preece, Y. Rogers, H. Sharp Interaction Design [Chapter 1] Wiley, 2007 February 7, 2011

2. Outline 1More on Interaction Design 2An Interaction Analysis Framework 3Interaction Paradigms 4Homework CS 320 February 7, 2011

3. What is Interaction Design? Relationships with other disciplines Multidisciplinary, collaborative work 1 More on Interaction Design 3 CS 320 February 7, 2011

4. Interaction Design • Interaction Design (IxD) is all about helping users make the best out of their experience with computer systems “Designing interactive products to support the way people communicate and interact in their everyday and working lives” [Price, Rogers and Sharp, 2007] “Interaction design defines the structure and behavior of interactive systems. Interaction designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond” [Wikipedia 2011] The practice typically centers on “embedding information technology into the ambient social complexities of the physical world” [M. McCullough, 2004] CS 320 February 7, 2011

5. Interaction Design and Related Disciplines 5 CS 320 February 7, 2011

6. Interaction Design 6 • Academic disciplines contributing to ID: • Psychology • Social Sciences • Computing Sciences • Engineering • Ergonomics • Informatics • Design practices contributing to ID: • Graphic design • Product design • Artist design • Industrial design • Film industry CS 320 February 7, 2011

7. Interaction Design 7 • Interdisciplinary fields focused on interaction design: • Human-Computer Interaction (HCI) • Cognitive Engineering • Cognitive Ergonomics • Computer Supported Cooperative Work (CSCW) • Information Systems • Working in multidisciplinary teams • Many people from different backgrounds involved • Different perspectives and ways of seeing and talking about things • Has benefits and disadvantages CS 320 February 7, 2011

8. Design principles Usability principles 5W+H context 2 An Analysis Interaction Framework 8 CS 320 February 7, 2011

9. Design Principles • Design principles [Norman, 1988] • Visibility • Feedback • Constraints • Consistency • Affordances CS 320 February 7, 2011

10. Design Principles: Visibility 10 • 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! From: www.baddesigns.com CS 320 February 7, 2011

11. Design Principles: Visibility 11 …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 tells what to do • Provide a large label next to the card reader that flashes when someone enters • Make relevant parts visible • Make what has to be done obvious CS 320 February 7, 2011

12. Design Principles: Feedback 12 • Sending information back to the user about what has been done • Includes sound, highlighting, animation and combinations of these • For example, when the screen button is clicked on, the interface provides a visual highlight as feedback, or a sound CS 320 February 7, 2011

13. Design Principles: Constraints 13 • Restrict the possible actions that can be performed • Help prevent user from selecting incorrect options • Physical objects can be designed to constrain things • e.g., only one way you can insert a key into a lock CS 320 February 7, 2011

14. Design Principles: Constraints 14 • Where do you plug the mouse? • Where do you plug the keyboard? • Top or bottom connector? • Do the color-coded icons help? From: www.baddesigns.com CS 320 February 7, 2011

15. Design Principles: Constraints 15 (A) provides direct adjacent mapping between icon and connector (B) provides color coding to associate the connectors with the labels From: www.baddesigns.com CS 320 February 7, 2011

16. Design Principles: Consistency 16 • Design interfaces to have similar operations and use similar elements for similar tasks • For example: • Always use Ctrl key plus the first initial of the command for an operation, i.e., Ctrl+C, Ctrl+S, ctrl+V, Ctrl+X • The main benefit is that consistent interfaces are easier to learn and use CS 320 February 7, 2011

17. Design Principles: Consistency 17 • Internal consistency refers to designing operations to behave the same way within an application • External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices CS 320 February 7, 2011

18. Design Principles: Consistency (or lack of it) 18 • A case of external inconsistency (A) Phones and remote controls (B) Calculators and computer keypads 8 9 1 2 7 3 4 5 6 4 5 6 8 9 1 2 7 3 0 0 CS 320 February 7, 2011

19. Design Principles: Affordances 19 • Affordance is a quality of an object, or an environment, that allows an individual to perform an action • e.g., a mouse button invites pushing, a door handle affords pulling • Norman (1988) used the term to discuss the design of everyday objects • Since then “affordance” has been much popularized in interaction design (in relation to designing interface objects) • e.g. , scrollbars to afford moving up and down, icons to afford clicking on CS 320 February 7, 2011

20. Usability Principles • Usability principles [Nielsen, 2001] • Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time • Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. • User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. CS 320 February 7, 2011

21. Usability Principles • Usability principles [Nielsen, 2001] • Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. • Error prevention Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. • Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. Instructions for use of the system should be visible or easily retrievable. • Flexibility and efficiency of use Accelerators may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. CS 320 February 7, 2011

22. Usability Principles 22 • Usability principles [Nielsen, 2001] (continued) • Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. • Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. • Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. CS 320 February 7, 2011

23. The 5W+H Context • 5W + H context for defining and analyzing interactive computer systems [Heim, 2007] • What/How • What are the physical and virtual interface components of various interactive computer systems and how can we use them? • Where/When • Wherecan we use these interactive systems and whenexactly? • Who/Why • Who are the main users of the interactive systems and whythey use them? CS 320 February 7, 2011

24. Principal Paradigms New Convergent Interaction Spaces 3 Interaction Paradigms 24 CS 320 February 7, 2011

25. HCI Paradigms [Heim, 2007] Legend: Large circles represent principal paradigms Oblong shapes represent convergent paradigms Words without surrounding shapes represent specific system architectures (sometimes used for a paradigm reference, as in desktop computing for personal computing). CS 320 February 7, 2011

26. HCI Paradigms 26 • Principal Paradigms • Large scale computing • [IBM] [NCSA] [Cray 1960’s] [IBM 2008] • Personal computing • [Xerox Star] [GUI History] [GUI OS] • Networked computing • Cloud computing [1][2][3][4] • Mobile computing • Smart phones [1] [2][3] • Tablet PCs [1] [2] CS 320 February 7, 2011

27. HCI Paradigms 27 • Recently evolved convergent interaction spaces • Collaborative environments • [Webex] [Cisco TelePresence] • Embodied virtuality • [Night Approach] [Sixth Sense] • Augmented reality • [Layar] • Immersive virtual reality • [CNN Hologram] [CAVE 1993] CS 320 February 7, 2011

28. Assignment #2 due Friday February 11, 2011 at 8:00 pm Find two related Interaction Design articles and write short critical summaries on them (400-500 words each) Recommended source: Communications of the ACM Log on the ACM Portal for downloading papers Other similar sources can be used as well If you need help, let me know as soon as possible See the CS 320 course website for the detailed handout Send the assignment as a PDF file todascalus@cse.unr.edu 4 Homework 28 CS 320 February 7, 2011