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 CS 320 Interaction Design 1

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

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

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] 4 CS 320 February 7, 2011

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

Interaction Design 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 6 CS 320 February 7, 2011

Interaction Design 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 7 CS 320 February 7, 2011

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

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

Design Principles: 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! From: CS 320 February 7,

Design Principles: 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 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,

Design Principles: Feedback 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,

Design Principles: Constraints 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,

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

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

Design Principles: Consistency 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,

Design Principles: Consistency 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,

Design Principles: Consistency (or lack of it) A case of external inconsistency (A) Phones and remote controls(B) Calculators and computer keypads CS 320 February 7,

Design Principles: Affordances 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,

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. 20 CS 320 February 7, 2011

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. 21 CS 320 February 7, 2011

Usability Principles 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. 22 CS 320 February 7, 2011

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  Where can we use these interactive systems and when exactly?  Who/Why  Who are the main users of the interactive systems and why they use them? 23 CS 320 February 7, 2011

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

HCI Paradigms [Heim, 2007] 25 CS 320 February 7, 2011 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).

HCI Paradigms Principal Paradigms  Large scale computing  [IBM] [NCSA] [Cray 1960’s] [IBM 2008]IBMNCSACray 1960’sIBM 2008  Personal computing  [Xerox Star] [GUI History] [GUI OS]Xerox StarGUI HistoryGUI OS  Networked computing  Cloud computing [1][2][3][4]1234  Mobile computing  Smart phones [1] [2][3]123  Tablet PCs [1] [2]12 26 CS 320 February 7, 2011

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

Assignment #2 due Friday February 11, 2011 at 8:00 pm  Find two related Interaction Design articles and write short critical summaries on them ( words each)  Recommended source: Communications of the ACM  Log on the ACM Portal for downloading papersACM Portal  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 to 4 Homework 28 CS 320 February 7, 2011