COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 COMP10092                              ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Resources                         Alan...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Why is HCI Important?                  ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                                                   http:...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Everyday things                   http:...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Affordance                           D...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Humans                         User’s ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Model Human Processor                  ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Model Human Processor                  ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Motor Processor: Mouse-Gesture Analysis...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Execution - Evaluation (Norman)        ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Execution - Evaluation                 ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Interaction Framework (Abowd  Beale)   ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Command Line Interfaces                ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Direct Manipulation Interfaces         ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Form Fillin                            ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Schneiderman’s Golden Rules            ...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Norman                         Make it...
COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility                 Evaluation: How Good is your UI?       ...
Upcoming SlideShare
Loading in...5
×

Comp10092 hci

319

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
319
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Comp10092 hci

  1. 1. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility COMP10092 Human Computer Interaction COMP10092 Sean Bechhofer sean.bechhofer@manchester.ac.uk Why HCI? To optimise performance of human and computer together as a system http://www.flickr.com/photos/eruditorum/1794630023/ COMP10092 HCI and Accessibility 2© University of Manchester, 2010© University ofManchester, 2010 1
  2. 2. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Resources   Alan Dix, Janet Finlay, Gregory D. Abowd and Russell Beale. Human- Computer Interaction (3rd edition). Prentice Hall, 2004. –  http://www.hcibook.com/e3/   Ben Shneiderman. Designing the user interface: Strategies for effective human-computer interaction (3rd ed.). Addison-Wesley Publishing, 1998 –  handouts   Jakob Nielsen on Usability and Web Design –  http://www.useit.com/   Donald Norman The design of everyday things. Basic Books, 2002 COMP10092 HCI and Accessibility 3 What is HCI?   “the study of the interaction between people, computers and tasks” (Johnson)   “a very difficult business. It combines two awkward disciplines: psychology and computer science” (Thimbleby)   “The ideal designer of an interactive system would have expertise in … psychology … cognitive science … ergonomics … sociology … computer science … engineering … business … graphic design … technical writing … and so it goes on” (Dix et. al)   Teamwork and a recognition of non-Computer Science specialisms COMP10092 HCI and Accessibility 4© University of Manchester, 2010© University ofManchester, 2010 2
  3. 3. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Why is HCI Important?   HCI can assist in building products/systems that are –  Useful, accomplish what’s required –  Usable, do it easily and naturally –  Used, make people want to use them   Increasing participation –  Ensuring interfaces and systems are accessible.   International Directives and Standards (EC Directive 90/270/EEC; ISO 9241) place requirements on systems in terms of usability   Safety and Security –  Remember those robots….. COMP10092 HCI and Accessibility 5 http://www.flickr.com/photos/benadamson/370361128/ COMP10092 HCI and Accessibility 6© University of Manchester, 2010© University ofManchester, 2010 3
  4. 4. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility http://www.flickr.com/photos/whiteafrican/2735720397/ COMP10092 HCI and Accessibility 7 http://www.flickr.com/photos/williamhook/2830319467/ COMP10092 HCI and Accessibility 8© University of Manchester, 2010© University ofManchester, 2010 4
  5. 5. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Everyday things http://www.flickr.com/photos/montillon/3177170555/ http://www.flickr.com/photos/tomasfano/2885450065/ COMP10092 HCI and Accessibility 9 Alternatives http://www.flickr.com/photos/soapbeard/2654965481/ http://www.flickr.com/photos/szudi/2473004057/ COMP10092 HCI and Accessibility http://www.flickr.com/photos/8586443@N03/2450347082/ 10© University of Manchester, 2010© University ofManchester, 2010 5
  6. 6. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Affordance   Describes the perceived and actual properties of an object. –  Buttons are for pushing –  Slots are for inserting things into –  Handles are for pulling   Constraints –  Limit the possibilities –  Size of hole/slot http://www.flickr.com/photos/jmmason/2093621345/ http://www.flickr.com/photos/tea_time/3158449107/ COMP10092 HCI and Accessibility 11 Interaction   Computer-Computer   Human-Computer Interaction Interaction –  User’s Conceptual Model –  Well-defined protocols (UCM) (e.g. TCP/IP) –  Study of task: modelling –  Restricted –  Evaluation of interfaces (experimentation) –  No margin for error –  Design Guidelines:   Human-Human Interaction distillation of design and –  Evolving experimental results –  Informal –  UI design must be an integral part of system –  Error-prone, but corrective design process, not a last- minute add-on. COMP10092 HCI and Accessibility 12© University of Manchester, 2010© University ofManchester, 2010 6
  7. 7. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Humans   User’s Conceptual Model BUT… (UCM)   Humans are adaptable and able –  of task and tool interface to learn –  skills, knowledge   Different kinds of users –  prior experience   Different kinds of tasks –  metaphors   Good UI design must account –  patterns for Humans and their different –  associations needs!   Humans –  make mistakes –  change their minds –  are inconsistent –  forget things –  overlook things COMP10092 HCI and Accessibility 13 Models   Models can help us understand complex systems –  Approximations that identify key characteristics of the system that we are observing   Model Human Processor; Semantic network (memory); Task Action Grammar (TAG): to describe interaction sequences; State Transition Networks; Process algebras; Temporal logics; Keystroke-level models, e.g. Fitts’ Law; etc.   Model Human Processor. –  attempts to describe/approximate some (parts of) the system –  assists in understanding how to build systems –  informs our design choices   Experiments help us in constructing such models. http://www.flickr.com/photos/practicalowl/392894653/ COMP10092 HCI and Accessibility 14© University of Manchester, 2010© University ofManchester, 2010 7
  8. 8. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Model Human Processor   Developed and tested via numerous experimental studies   Card, Moran, Newell (1983) The Psychology of Human-Computer Interaction   A simple “computer” architecture: –  Perceptual processor   storage of signals from senses + brief memory –  Cognitive processor   Working memory   Long-term memory (LTM)   Think, analyse, recall from LTM, store in STM –  Motor processor   Transmit signals to muscles etc. COMP10092 HCI and Accessibility 15 Model Human Processor Long Term Memory Working Memory Visual Image Auditory Image Store Store Perceptual Cognitive Motor Processor Processor Processor COMP10092 HCI and Accessibility 16© University of Manchester, 2010© University ofManchester, 2010 8
  9. 9. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Model Human Processor   Perceptual processor:   Long-term Memory (LTM) –  ~100ms cycle [50-200] –  Links/associations attention; change blindness –  Capacity ~ ∞   Cognitive processor: –  Decay ~ ∞ –  ~70ms cycle [30-100] –  Association; priming; gist –  Recognize-act cycle –  Interference reduces   Working Memory chances of retrieval –  Limited capacity: 7 (plus or   Motor Processor: minus 2) items –  ~ 70ms cycle [25-175] –  Decay: ~ 7 secs –  Chunking (cf experiments) –  Interference reduces chances of retrieval COMP10092 HCI and Accessibility 17 Long Term Memory: Semantic Networks COMP10092 HCI and Accessibility 18© University of Manchester, 2010© University ofManchester, 2010 9
  10. 10. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Motor Processor: Mouse-Gesture Analysis   Fitt’s Law: Tmove = a + b.log(D/S + 1)   D: distance to move   S: size of target   a and b constants depending on particular context.   In other words, to reduce time taken: –  Reduce the movement distance –  Make the target bigger COMP10092 HCI and Accessibility 19 Modelling Interaction   Interaction models or frameworks can help: –  in understanding what is going on when humans interact with a system. –  identify points of failure and likely causes of difficulty.   Interaction aids a user in accomplishing goals from a domain. Tasks manipulate concepts, and a goal is the desired output from a task. An intention is a specific action required to meet the goal.   The System uses a core language, while the User uses a task language to describe relevant concepts. COMP10092 HCI and Accessibility 20© University of Manchester, 2010© University ofManchester, 2010 10
  11. 11. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Execution - Evaluation (Norman)   User formulates a plan, which is then executed. 1.  Establishing the goal 2.  Forming the intention 3.  Specifying the action sequence 4.  Executing the action 5.  Perceiving the system state 6.  Interpreting the system state 7.  Evaluating the system state with respect to the goals and intentions http://www.flickr.com/photos/curiouskiwi/486099153/ COMP10092 HCI and Accessibility 21 Execution - Evaluation Goals What we want to happen Execution Evaluation What we do to Comparing what the world happened with what we wanted to happen The World COMP10092 HCI and Accessibility 22© University of Manchester, 2010© University ofManchester, 2010 11
  12. 12. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Execution - Evaluation Gulf of Execution Gulf of Evaluation Difference between user’s Distance between the physical formulation of the the actions to presentation of the system state reach the goal and the actions and the expectation of the user. allowed Psychological gap that needs to be crossed in order to interpret a user interface http://www.flickr.com/photos/brewbooks/394853504/ COMP10092 HCI and Accessibility 23 Slips and Mistakes   If I understand a system, but mistype or accidently press the mouse button at the wrong time, I’ve made a slip. –  I formulated the correct action but it was not executed correctly.   If I don’t understand the system, then I may make mistakes. E.g. I think this button:   is for search, but it actually magnifies the text. This is a mistake. –  I haven’t formulated the right goal. COMP10092 HCI and Accessibility 24© University of Manchester, 2010© University ofManchester, 2010 12
  13. 13. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Interaction Framework (Abowd Beale) Input 1. articulation 2. performance User Interface User System 4. observation 3. presentation Output COMP10092 HCI and Accessibility 25 Interaction Styles   Command line   Menus   Natural Language   Direct Manipulation   Form-Fill COMP10092 HCI and Accessibility 26© University of Manchester, 2010© University ofManchester, 2010 13
  14. 14. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Command Line Interfaces Advantages Disadvantages   quick and powerful for   little or no prompting experienced users   requires user’s knowledge of   user-controlled interaction system, programs   minimal amount of typing (no   relies on recall of commands mouse use) and syntax   can be used in conjunction with   difficult to learn other user interfaces   error prone COMP10092 HCI and Accessibility 27 Menu Interfaces Advantages Disadvantages   Users don’t have to memorize   May not be appropriate or complex commands efficient for some users and   Structured navigation benefits tasks novices and casual users   Can force user through many   Can shorten user learning time levels of menus and effort   Users may get lost in menu   Supports recognition memory hierarchies   Menu terms and names may not be meaningful to users   Use of modes forces users to follow the system’s path COMP10092 HCI and Accessibility 28© University of Manchester, 2010© University ofManchester, 2010 14
  15. 15. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Direct Manipulation Interfaces Advantages Disadvantages   Visual presentation of task   Can be hard to implement concepts   Requires graphics display/   Allows easy learning pointing devices   Encourages exploration COMP10092 HCI and Accessibility 29 Natural Language Interfaces Advantages Disadvantages   Relieves the burden of learning   Requires clarification special syntax   More keystrokes   Unpredictable COMP10092 HCI and Accessibility 30© University of Manchester, 2010© University ofManchester, 2010 15
  16. 16. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Form Fillin Advantages Disadvantages   Simplifies data entry   Screen real estate   Minimal training COMP10092 HCI and Accessibility 31 Guidelines   Guidelines, heuristics and “golden rules” can help us in designing and building user interfaces that aim to fulfill the goals of optimising user/ system performance.   They don’t guarantee that your interface/system will work! COMP10092 HCI and Accessibility 32© University of Manchester, 2010© University ofManchester, 2010 16
  17. 17. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Schneiderman’s Golden Rules 1.  Consistency 2.  Shortcuts for frequent/trained users 3.  Provide informative feedback 4.  Design dialogues to yield “closure” 5.  Error prevention and handling 6.  Easy reversal 7.  Internal locus of control 8.  Reduce short-term memory load COMP10092 HCI and Accessibility 33 Nielsen’s 10 heuristics 1.  Visibility of system status 2.  Match between system and the real world 3.  User control and freedom 4.  Consistency and standards 5.  Error prevention 6.  Recognition rather than recall 7.  Flexibility and efficiency of use 8.  Aesthetic and minimalist design 9.  Errors: recognise, diagnose and recover 10.  Help and documentation http://www.useit.com/ COMP10092 HCI and Accessibility 34© University of Manchester, 2010© University ofManchester, 2010 17
  18. 18. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Norman   Make it easy to determine what actions are possible at any moment –  well-designed things can only be put together certain ways (e.g. trapezoidal cable plugs, SIM cards) –  menus only display the actions which can be carried out at that time (other options are dimmed).   Follow natural mappings between intentions and the required actions, between actions and the resulting effect; and between the information that is visible and the interpretation of the system state –  it should be obvious what the function of a button or menu is - use conventions already established, dont try to design something which changes what people are familiar with In other words, make sure that the user can 1.  figure out what to do, and 2.  tell what is going on. COMP10092 HCI and Accessibility 35 Users in Design   Think “User” –  Remember that somebody (and most likely somebody else) is going to use the system.   Try it out –  Sit a user down with an early version of the interface. Record what the user thinks/does   Involve the users –  Users will have lots of valuable knowledge about the domain. Get them to contribute.   Iterate –  Make early prototypes and be prepared to throw them away. COMP10092 HCI and Accessibility 36© University of Manchester, 2010© University ofManchester, 2010 18
  19. 19. COMP10092: Graphical UserInterfacesCOMP10092 HCI and Accessibility Evaluation: How Good is your UI?   Observations   Experiments:   Interviews   What to measure?   Sound experimental –  effectiveness, methodology: how to obtain –  efficiency, meaningful, reliable results –  learning, –  errors, –  aesthetics…   When to measure it? –  during design? –  after design –  prototyping? COMP10092 HCI and Accessibility 37 HCI   Should be integral to system design   Models and understanding of users important –  User’s Conceptual Model   Developed on a large body of scientific work –  Guidelines distilled from scientific work can be useful   Prototyping and Evaluation   Future technology for interfaces –  e.g. virtual reality; 3D; audio   Further focus on this topic in 2nd Year (e.g. COMP20341) COMP10092 HCI and Accessibility 38© University of Manchester, 2010© University ofManchester, 2010 19

×