SIMS 213: User Interface Design & Development

Slides:



Advertisements
Similar presentations
Structured Design The Structured Design Approach (also called Layered Approach) focuses on the conceptual and physical level. As discussed earlier: Conceptual.
Advertisements

Chapter 2, part 3 Human Aspects: Interface Metaphors and Conceptual Models... What is a metaphor? Traditionally, metaphors were used in speech where things.
Interaction Techniques Level 2 Prepared by: RHR First Prepared on: Nov 23, 2006 Last Modified on: Quality checked by: MOH Copyright 2004 Asia Pacific Institute.
SECOND MIDTERM REVIEW CS 580 Human Computer Interaction.
Copyright 1999 all rights reserved The HCI Design Process n User Interfaces are not just built by sitting down and drawing up designs for them n Just like.
Vocabulary of Design Visibility - –how easily a user can see what can be done and how to do it Mappings - –how a control and object are related –suffers.
1http://img.cs.man.ac.uk/stevens Interaction Models of Humans and Computers CS2352: Lecture 7 Robert Stevens
Fall 2002CS/PSY Design of Everyday Things Agenda Discuss Norman’s views on HCI & design Discussion What did you take away from DOET book.
Metaphors and Direct Manipulation Metaphors Direct manipulation Dynamic queries Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 10, 2005.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 18, 2003.
Design Activities in Usability Engineering laura leventhal and julie barnes.
Human Computer Interface. HCI and Designing the User Interface The user interface is a critical part of an information system -- it is what the users.
Design of Everyday Things
SIMS 213: User Interface Design & Development
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 7, 2002.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 14, 2006.
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Jan 30, 2001.
The Xerox “Star” A Retrospective By Bruno Nadeau & Luv Sharma.
Chapter 2: Understanding and conceptualizing interaction
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 10, 2004.
I213: User Interface Design & Development Marti Hearst Tues, Feb 13, 2007.
Design Principles, Guidelines and Metaphor Howell Istance Department of Computer Science De Montfort University.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 13, 2003.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 17, 2005.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb
Design of Everyday Things Don Norman on Design & HCI.
Conceptual Model Mr. John Kelleher. 1 Conceptual Model A description of the proposed system in terms of a set of integrated ideas and concepts about what.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 12, 2002.
Introduction to HCI Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development January 21, 1999.
Chapter 4 Cognitive Engineering HCI: Designing Effective Organizational Information Systems Dov Te’eni Jane M. Carey.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 14, 2002.
Other Interaction Styles: Direct Manipulation, Haptic, Multimedia, Multimodal, Virtual Reality, Video Games Dr.s Barnes and Leventhal.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 11, 2003.
How does the user think visually? That understanding can tell us about how to design visual images.
1 ISE 412 Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation.
Chapter 2: Understanding and conceptualizing interaction Question 1.
Principles of User Centred Design Howell Istance.
User interface design. Recap OOD is an approach to design so that design components have their own private state and operations Objects should have constructor.
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
Object-Oriented Software Engineering Practical Software Development using UML and Java Chapter 7: Focusing on Users and Their Tasks.
COMPSCI 345 S1 C and SoftEng 350 S1 C Interaction Styles Lecture 4 Chapter 2.3 (Heim)
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Fun with Icons Thursday Presentation Lottery Q & A on Final Exam Course Evaluations.
Design of Everyday Things. Grade summaries Assignments 1-4 (out of 10) P0 (out of 10) P1 group grade (out of 100) P1 individual grade (out of 50) Midterm.
Fall 2002CS/PSY Design. Fall 2002CS/PSY System-Centered Design Focus is on the technology  What can be built easily using the available tools.
AVI/Psych 358/IE 340: Human Factors Interfaces and Interaction September 22, 2008.
Chapter 2.2 Game Design. CS Overview This introduction covers: –Terms –Concepts –Approach All from a workaday viewpoint.
More on Design of Everyday Things. Turn it up, or shut it down?
The Design of Everyday Things Darn these hooves! I hit the wrong switch again! Who designs these instrument panels, raccoons?
Interaction Tasks Select Position Orient Quantify Text.
Understanding Users Cognition & Cognitive Frameworks
Human-Computer Interaction
Fall 2002CS/PSY Dialog Design 2 Direct Manipulation 1) Continuous visibility of the objects and actions of interest 2) Rapid, reversible, incremental.
Theories and Practice of Interactive Media 13 October 2003 Kathy E. Gill.
Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz.
Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation ISE
Mouse Trackball Joystick Touchpad TroughputError rate T roughput (bps) Error r ate (%) Image by MIT.
Acknowledgements: Most of this course is based on the excellent course offered by Prof. Kellogg Booth at the British Columbia University, Vancouver, Canada.
IT323 - Software Engineering 2 1 Tutorial 3.  Suggest ways in which the user interface to an e-commerce system such as an online stores might be adapted.
The Design of Everyday Things Donald A. Norman. The psychopathology of everyday things Doors Doors Light switches Light switches Taps Taps Telephones.
1 Design Principles – Part 2 of 3 Learnability Principles Flexibility Principles.
Interaction Frameworks COMPSCI 345 S1 C and SoftEng 350 S1 C Lecture 3 Chapter (Heim)
Conceptual Model Design Informing the user what to do Lecture 10a Gabriel Spitz 1.
Image by MIT OpenCourseWare Troughput (bps) Error rate (%) Mouse Trackball Joystick Touchpad.
The Design of Everyday Things
Dialog Design 2 Direct Manipulation
Design of Everyday Things
Presentation transcript:

SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 1, 2001

Cooper Chapter 11 Scenarios Perpetual Intermediaries Daily use vs Edge Case Perpetual Intermediaries The Importance of Precise Vocabulary Case study: Image processing tool Who are the Personas? Found some common goals Focus on a few key capabilities Matched to the capabilities of the system Had fewer features, but seemed most powerful!

Cognitive Considerations From Don Norman’s book, The Psychology (Design) of Everyday Things Affordances, Constraints, and Mappings Mental Models Action Cycle and Gulf of Execution

Based on slide by Saul Greenberg Mental Models People have mental models of how things work: how does your car start? how does an ATM machine work? how does your computer boot? Allows people to make predictions about how things will work Based on slide by Saul Greenberg

Based on slide by Saul Greenberg Mental Models Mental models built from affordances constraints mappings positive transfer cultural associations/standards instructions interactions Mental models are often wrong! Based on slide by Saul Greenberg

Slide adapted from Saul Greenberg Our mental models of how bicycles work can “simulate” this to know it won’t work Slide adapted from Saul Greenberg

Slide adapted from Saul Greenberg

People are always trying to explain things Mental models often extracted from fragmentary evidence People find ways to explain things Computer terminal breaks when accessing the library catalog Sure your driving on the correct road

Norman’s Action Cycle Human action has two aspects execution and evaluation Execution: doing something Evaluation: comparison of what happened to what was desired

Action Cycle start here Goals Execution Evaluation The World

Action Cycle Goals Execution Evaluation The World Intention to act start here Goals Execution Intention to act Sequence of actions Execution of seq uence of actions Evaluation Evaluation of interpretations Interpreting the perception Perceiving the state of the world The World

Norman’s Action Cycle Execution has three stages: Start with a goal Translate into an intention Translate into a sequence of actions Now execute the actions Evaluation has three stages: Perceive world Interpret what was perceived Compare with respect to original intentions

Gulf of Evaluation The amount of effort a person must exert to interpret the physical state of the system how well the expectations and intentions have been met We want a small gulf!

Based on slide by Saul Greenberg Good Example Scissors affordances: holes for insertion of fingers blades for cutting constraints big hole for several fingers, small hole for thumb mapping between holes and fingers suggested and constrained by appearance positive transfer learnt when young conceptual model implications clear of how the operating parts work Based on slide by Saul Greenberg

Based on slide by Saul Greenberg Bad Example Digital Watch affordances four push buttons, not clear what they do contraints and mapping unknown no visible relation between buttons and the end-result of their actions negative transfer little association with analog watches cultural standards somewhat standardized functionality, but highly variable conceptual model must be taught; not obvious Based on slide by Saul Greenberg

Digital Watch Redesigned for Affordances (Rachna Dhamija)

Digital Watch Redesigned for Affordances (Ping Yee)

Interface Metaphors Revisited Definition of Metaphor application of name or descriptive term to an object to which it is not literally applicable Purpose function as natural models leverages our knowledge of familiar, concrete objects/experiences to understand abstract computer and task concepts Problem metaphor may portray inaccurate or naive conceptual model of the system A presentation tool is like a slide projector Slide adapted from Saul Greenberg

Slide adapted from Saul Greenberg Interface Metaphors Use metaphors that matches user's conceptual task desktop metaphor for office workers paintbrush metaphor for artists... Given a choice, choose the metaphor close to the way the system works Ensure emotional tone is appropriate to users E.g., file deletion metaphors trashcan black hole paper shredder pit bull terrier nuclear disposal unit... Slide adapted from Saul Greenberg

Slide adapted from Saul Greenberg Metaphors continued metaphors can be overdone! Common pitfalls overly literal unnecessary fidelity excessive interactions overly cute novelty quickly wears off overly restrictive cannot move beyond mismatched does not match user’s task and/or thinking Slide adapted from Saul Greenberg

The Metaphor of Direct Manipulation the feeling of working directly on the task An interface that behaves as though the interaction was with a real-world object rather than with an abstract system Central ideas visibility of the objects of interest rapid, reversible, incremental actions manipulation by pointing and moving immediate and continuous display of results Almost always based on a metaphor mapped onto some facet of the real world task semantics) Slide adapted from Saul Greenberg

Object-Action vs Action-Object Select object, then do action interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions) Advantages closer to real world modeless interaction actions always within context of object inappropriate ones can be hidden generic commands the same type of action can be performed on the object eg drag ‘n drop: my.doc move Slide adapted from Saul Greenberg

Slide adapted from Saul Greenberg Direct manipulation Representation directly determines what can manipulated Slide adapted from Saul Greenberg

Slide adapted from Saul Greenberg Phone list List metaphor Rolodex metaphor Slide adapted from Saul Greenberg

Slide adapted from Saul Greenberg Games Slide adapted from Saul Greenberg

Slide adapted from Saul Greenberg Direct Manipulation Xerox Star: pioneered in early '80s, copied by almost everyone simulates desktop with icons in and out baskets file folders and documents calculators printers blank forms for letters and memos small number of generic actions applicable system wide move, copy, delete, show properties, again, undo, help eg same way to move text, documents, etc property sheets pop-up form, alterable by user What you see is what you get (WYSIWYG) Slide adapted from Saul Greenberg

Slide adapted from Saul Greenberg Xerox Star continued Star's observers: objects understood in terms of their visual characteristics affordances, constraints actions understood in terms of their effects on the screen causality intuitively reasonable actions can be performed at any time conceptual model A subtle thing happens when everything is visible: the display becomes reality Slide adapted from Saul Greenberg

Is direct manipulation the way to go? Some Disadvantages Ill-suited for abstract operations spell-checker? Tedium manually search large database vs query Task domain may not have adequate physical/visual metaphor Metaphor may be overly-restrictive Solution: Most systems combine direct manipulation and abstractions word processor: WYSIWYG document (direct manipulation) buttons, menus, dialog boxes (abstractions, but direct manipulation “in the small”) Slide adapted from Saul Greenberg

Conventional Applications: A Mix Slide adapted from Saul Greenberg

Based on slide by Saul Greenberg Guidelines for Design Provide a good conceptual model allows users to predict consequences of actions communicated thorugh the image of the system Make things visible relations between user’s intentions, required actions, and results should be sensible consistent meaningful (non-arbitrary) make use of visible affordances, mappings, and constraints remind person of what can be done and how to do it Based on slide by Saul Greenberg

Slide adapted from Saul Greenberg Summary Good Representations captures essential elements of the event / world deliberately leave out / mute the irrelevant appropriate for the targetted users, their task, and their interpretation Metaphors use our knowledge of the familiar and concrete to represent abstract concepts need not be literal have limitations that must be understood Direct manipulation visibility of the objects of interest rapid, reversible, incremental actions manipulation by pointing and moving immediate and continuous display of results Slide adapted from Saul Greenberg

Raskin on Cognition Cognitive Engineering Ergonomics: sizes and capabilities of the human body Cognetics: Ergonomics of the mind Applied side of cognitive science

Image from Newsweek, Jan 2001 Raskin on Cognition Cognitive Conscious / Unconscious Examples? Differences? Locus of Attention What is it? Why is it important for HCI? Image from Newsweek, Jan 2001

Cooper on error dialog boxes Why are they problematic? How related to locus of attention? What are the alternatives? Cooper is talking to programmers “Silicon Sanctimony” You should feel as guilty as for using a goto – an admission of failure in design

Umm, thanks for the warning, but what should I do? What happens when you cancel a cancelled operation? Do I have any choice in this? Uhhh… I give up on this one

Inane Dialog Boxes

Slide adapted from Saul Greenberg Silly Help Midwest Microwave's online catalog Slide adapted from Saul Greenberg

ClearCase, a source-code control system from Rational Software

Slide adapted from Saul Greenberg “HIT ANY KEY TO CONTINUE” Slide adapted from Saul Greenberg

Next Time: Design