Intro to HCI / Why is Design Hard?

Transcription

1 Intro to HCI / Why is Design Hard? September 11, 2017 Fall 2017 COMP Fall 2017 COMP Announcements Assignment 1 is posted Due Sept 22 by 5:00pm on UMLearn Individual assignment Buying Pop with a Cell Phone (Japan 2003) 15 Steps 35 minutes 2 nd Phone Cash Deposit Read through and bring any questions to class on Wed Fall 2017 COMP Bill Moggridge, Designing Interactions, 2007 Lecture at Stanford Fall 2017 COMP

2 Communication Challenges Communication Challenges (cont) Fall 2017 COMP Fall 2017 COMP Today Interfaces vs. Interactions Historical Overview Interaction Paradigms What makes a good interface? Visionaries Why is design hard? Fall 2017 COMP Fall 2017 COMP

3 What makes a good experience? What makes a good experience? Fall 2017 COMP Fall What makes a good experience? Now you Tell me about something you ve used that provided you with a good experience. Why? Fall Fall 2017 COMP

4 why are we now talking about experiences as opposed to just interfaces? Terminology: Interaction What is the difference between an interface and interaction? Fall 2017 COMP Fall 2017 COMP Interaction Interactive Cycle An interface refers to what is presented to the user Could be a visual, physical, or auditory Includes what you can manipulate An interaction is the dialogue between the computer and the user The actions the user must invoke to perform a task and the corresponding responses The dialogue is ongoing Computer performance (execution) Output Input Reproduced from Dix, Finlay, Abowd, & Beale (2004) observation (interpretation) User articulation Fall 2017 COMP Fall 2017 COMP

5 Interactive Cycle Interactive Cycle Input/output channels constitute the interface Output observation (interpretation) The conversation between the system and user constitutes the interaction Output observation (interpretation) Allows the system and user to communicate Computer performance (execution) Input User articulation The interaction is the entire dynamic process. Computer performance (execution) Input User articulation Interface Interface Fall 2017 COMP Fall 2017 COMP Interactive Cycle: Steps Interactive Cycle: Steps 1. The user formulates a goal and plans a method to achieve the goal 2. The user translates the method into the system input language 3. The system executes the method instructions and updates its state Computer performance (execution) Output Input Interface observation (interpretation) User articulation 4. The system translates its state into its output language 5. The user interprets the results, and repeats the cycle Computer performance (execution) Output Input Interface observation (interpretation) User articulation Fall 2017 COMP Fall 2017 COMP

6 Interactive Cycle The interactive cycle requires both the user and the system to make several translations: From user s intention to system input language From input language to core system language From core system language to output channel From output channel to user s interpretation of output If the interface isn t properly designed, these translations can result is two gulfs Fall 2017 COMP Gulf of Execution (Don Norman) The manner in which the user must translate his/her plans into input the system can understand is not always natural or intuitive A gulf of execution arises when the user has difficulties providing instructions that are executable by the system Examples? Fall 2017 COMP Gulf of Evaluation (Don Norman) A Gulf of Evaluation arises when the users has trouble interpreting system output in light of his/her goals Reflects the amount of effort the user has to exert to determine how well his/her expectations and intentions have been met Gulf of Evaluation The gulf is small when the system provides information about its state in a form that is easy to get, is easy to interpret, and matches the way the person thinks of the system (Norman, Design of Everyday Things ) Examples? Fall 2017 COMP Fall 2017 COMP

7 Interface Impacts the User s Task The more translating the user has to do, the more difficult it is for the user to accomplish his/her task I/O channels affect what can and cannot be expressed Sometimes interaction language is far from how the user would naturally do a task (i.e., the domain language) Requires extra effort on behalf of user to translate back and forth Evolution of Interaction Paradigms Over time, interaction paradigms have shifted focus from the machine to the user The focus has shifted from what is easiest and fastest for the computer to what interfaces and interactions naturally suit users tasks Fall 2017 COMP Fall 2017 COMP Overview of History of Interaction Paradigms Paradigms Batch interfaces Conversational interfaces Graphical interfaces Ubicomp Visionaries Vannevar Bush, Douglas Engelbart, Mark Weiser Fall 2017 COMP Batch Interfaces (~ ) The user provides the system with all instructions in a single batch job Instructions entered on punch cards, magnetic tape, paper tape No interactivity All system output presented to the user once the entire job was executed, often on a paper printout Users: high degree of training required System time was far more expensive than human time (e.g. $100s/hr vs. ~$10/hr) Fall 2017 COMP

8 Conversational Interfaces or Command-Line Interfaces Time Period: ~ Interaction style: User enters commands in text at the command-line System executes command Sometimes feedback is displayed System can request information from user during interaction Conversational Interfaces Users: expert users Why? Advantages Highly flexible: by combining commands, many sophisticated operations are possible Disadvantages Requires recall rather than recognition During system execution, the user has little control Why can the above be causes for concern? Fall 2017 COMP Fall 2017 COMP Head of the Office of Science and Research Development Involved in many WWII activities In 1945 he wrote the inspirational and forwardthinking article As We May Think Key idea: technology should support and augment human intelligence Vannevar Bush The memex machine: Vannevar Bush A device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory. User can build associative trials User can annotate content His proposal for the physical instantiation of the memex sounds a lot like today s desktop computers Even suggested having multiple monitors Also proposed direct connection to nervous system for input Fall 2017 COMP Fall 2017 COMP

9 Douglas Englebart Beyond the Knowledge Worker Also advocated the need for computers to augment human intellect Primarily known for inventing the mouse Demonstrated in a 1968 video known as The Mother of All Demos : Copy/Paste Hypertext Computer-supported collaborative work Fall 2017 COMP Ivan Sutherland s Sketchpad (1963): Input using a light pen Direct manipulation Early WYSIWYG Computers useful for artists, draftsmen, etc Interfaces closer to task domains Fall 2017 COMP Graphical Interfaces Time period: Hardware advances High-resolution display, keyboard, mouse Typical style of GUI: WIMP Windows, Icons, Menus and Pointers First Commercial GUIs Xerox s 8010 Star Information System (1981) first commercial Followed by Apple s Macintosh First GUI desktop to be widely adopted Fall 2017 COMP Fall 2017 COMP

10 Graphical Interfaces: Interaction Style Users in control System waits for input, responds Recognition vs. recall Enables discovery and experimentation Most focus on direct manipulation Sense of directly manipulating objects of interest (Shneiderman, 1982) Simulated real-world metaphor What is it and why is this useful? Fall 2017 COMP