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.

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

Design, prototyping and construction
Chapter 11 Designing the User Interface
Graphical input techniques
Chapter 11 user support. Issues –different types of support at different times –implementation and presentation both important –all need careful design.
Understanding and conceptualizing interaction. Understanding the problem space –What do you want to create? –What are your assumptions? –Will it achieve.
Conceptual Models & Interface Metaphors. 2 Interface Hall of Fame or Shame? Tabbed dialog for setting options in MS Web Studio –more tabs than space to.
HCI 특론 (2007 Fall) Conceptual Models & Interface Metaphors.
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.
Interface metaphors & analogies pp pp
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.
User Interface Design Notes p7 T120B pavasario sem.
From requirements to design
Metaphors and Direct Manipulation Metaphors Direct manipulation Dynamic queries Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial.
Good Design Visibility is key to interaction design Take advantage of affordances/constraints Provide a good conceptual model for the user.
SIMS 213: User Interface Design & Development
Design Activities in Usability Engineering laura leventhal and julie barnes.
SIMS 213: User Interface Design & Development
1 SWE Introduction to Software Engineering Lecture 26 – User Interface Design (Chapter 16)
ICS 463, Intro to Human Computer Interaction Design: 6 (Practice). Guidelines and Metrics Chapters
Understanding and Conceptualizing Interaction Chapter 2.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 15, 2005.
Chapter 2: Understanding and conceptualizing interaction
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.
Help and Documentation CSCI324, IACT403, IACT 931, MCS9324 Human Computer Interfaces.
User interface design Designing effective interfaces for software systems Objectives To suggest some general design principles for user interface design.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 12, 2002.
Mid-Term Exam Review IS 485, Professor Matt Thatcher.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Chapter 13: Designing the User Interface
©Ian Sommerville 2004Software Engineering, 7th edition. Chapter 16 Slide 1 User interface design.
Design, goal of design, design process in SE context, Process of design – Quality guidelines and attributes Evolution of software design process – Procedural,
CS 235: User Interface Design August 27 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak
Chapter 2: Understanding and conceptualizing interaction Question 1.
Chapter 11: Interaction Styles. Interaction Styles Introduction: Interaction styles are primarily different ways in which a user and computer system can.
Principles of User Centred Design Howell Istance.
ITEC224 Database Programming
CSC 480 Software Engineering Lecture 19 Nov 11, 2002.
Usability Evaluation/LP Usability: how to judge it.
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.
Software Architecture
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?
Understanding Users Cognition & Cognitive Frameworks
Human-Computer Interaction
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.
Metaphors Informing the user what to do Lecture 10 Gabriel Spitz 1.
Conceptual Model Design Informing the user what to do Lecture # 10 (b) Gabriel Spitz.
1 Design Principles – Part 2 of 3 Learnability Principles Flexibility Principles.
Conceptual Model Design Informing the user what to do Lecture 10a Gabriel Spitz 1.
DOCUMENTATION REF: Essentials of IT (Hamilton et al) Chapter 1.
6. (supplemental) User Interface Design. User Interface Design System users often judge a system by its interface rather than its functionality A poorly.
Human Computer Interaction Lecture 21 User Support
Image by MIT OpenCourseWare Troughput (bps) Error rate (%) Mouse Trackball Joystick Touchpad.
Human Computer Interaction Lecture 21,22 User Support
The Desktop Screen image displayed when a PC starts up A metaphor
CEN3722 Human Computer Interaction Knowledge and Mental Models
Design, prototyping and construction
The Design of Everyday Things
Chapter 11 user support.
Professor John Canny Spring 2004 Feb 20
Professor John Canny Fall 2001 Sept 25, 2001
Professor John Canny Spring 2003 Feb 26
Design, prototyping and construction
Presentation transcript:

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 it should do, behave and look like, that will be understandable by the users in the manner intended. “ ”

2 How many windows in your house? Conceptual Models “Run-Throughs” Carelman’s Tandem “Convergent Bicycle (Model for Fiancés) Carelman’s “Coffee Pot for Masochists” Jacques Carelman, Catalog of Unfindable Objects, Balland.

3 People form Conceptual Models to: Predict future (or infer invisible) events. Find causes for observed events. Determine appropriate actions to cause desired changes. Serve as mnemonic devices for remembering relations and events. Provide a means of understanding an analogous device. Allow them to apply heuristic problem-solving strategies designed to overcome information processing limitations. However, often incomplete and vague Home thermostat

4 Key aspects to design of a conceptual model (1/2) Decide what user will be doing when carrying out their tasks – his ‘interaction mode’ searching for information? recording events? E.g. Jeff Hawkin’s PDA (Palm Pilot) E.g. Buchenau and Suri (2000) Defibrillator E.g. Third Age Suit at ICE, Loughborough Univ. This prompts the choice of interaction style E.g. PDA (pen interface), command line interface, speech input, HUD (Head-Up Display)

5 Key aspects to design of a conceptual model (2/2) Actual concrete solutions thought through behavior of the interface ‘look and feel’ particular interaction styles Content metaphors desktop paper document notebook with tabs score sheet, stage with actors (Director) accounting ledger (spreadsheet) stereo (for all media players) phone keypad calculator Web: "Shopping Carts" Quicken: "CheckBook"

6 Alternative Conceptual Models A better way?

7 Types of Conceptual Models Structural model …explains what the system does independent of use (it’s a system-centered model). User has internalized structure of how the item works Internalized declarative knowledge Explanation of the underlying mechanism Functional model …explains what the system does to assist a user’s task (it’s a user-centered model) Internalized procedural knowledge Developed from past knowledge and experience in a similar domain (calculator)

8 Which model?

9 Incomplete model

10 Implications for HCI Users’ conceptual models are usually vague and incomplete just a piece of the puzzle The Interface should match the understanding the user already has Contrast with earlier HCI advice, where the users’ must grow the appropriate mental model of the application Users prefer simple models simple and working solution (even it is not completely correct) Occam’s Razor Threshold of Indignation

11

12 Refrigerator Problem: freezer too cold, but fresh food just right freezer fresh food

13 Refrigerator Controls Problem: freezer too cold, but fresh food just right What is your conceptual model? How do you adjust the controls? Answer: keep the numerical setting unchanged. Change the alphabetic setting, C -> B

14 Most Likely Conceptual Model i.e., independent controls Freezer Thermostat Freezer Control Cooling Unit Fresh Food Thermostat Fresh food Control Cooling Unit Cold Air

15 Correct Conceptual Model Now can you fix the problem? One control for two functions: Problem! Thermostat (Location Unknown) Control A Freezer Cooling Unit Fresh Food Control B Cold Air Valve

16 How design is received Developers of systems construct their mental models of how the system should function. This is called the design model. Users develop their own mental models of how their tasks should be accomplished, user’s model. After contact with a system, users build up a system image.

17 Design Model & User’s Model Users gets model from experience & usage through system image What if design & user models don’t match? Design Model User’s Model System Image 

18 But designers often do not intend that image Designers and the majority of users have never met. “The user of the system starts off with goals expressed in psychological terms. The system, however, presents its current state in physical terms”. That’s how gulfs have been created. Thus there is often a discrepancy.

19 Three problems emerge 1. Mapping problems - which controls the temperature in the refrigerator and which one for the freezer? not directly intuitive 2. Ease of control - it is often required to manipulate several physical variables at the same time for a simple user goal, like maintaining total rate constant while increasing the temperature. 3. Evaluation – requires prompt feedback

20 Two Guidelines for Design 1. Provide a good conceptual model allows user to predict the effects of our actions Problem: designer’s conceptual model communicated to user through system image: appearance, written instructions, system behaviour through interaction, transfer, idioms and stereotypes if system image does not make model clear and consistent, user will develop wrong conceptual model

21 Two Guidelines for Design (contd.) 2. Make things visible relations between user’s intentions, required actions, and results are sensible non arbitrary meaningful Visible affordances, mappings, and constraints Use visible cultural idioms Reminds person of what can be done and how to do it

22 Good Design Scissors Affordances: holes for something to be inserted Constraints: big hole for several fingers, small hole for thumb Mapping: between holes and fingers suggested and constrained by appearance Positive transfer and cultural idioms learned when young constant mechanism Conceptual model: implications clear of how the operating parts work

23 Bad Design Digital Watch Affordances: four push buttons to push, but not clear what they will do Constraints and mapping unknown: no visible relation between buttons, possible actions and end result Transfer of training: little relation to analog watches Cultural idiom: somewhat standardized core controls and functions but still highly variable Conceptual model: must be taught 12:00

24 Interface Metaphors Definition of Metaphor application of name or descriptive term to an object to which it is not literally applicable Purpose leverages our knowledge of familiar, concrete objects/experiences to understand abstract computer and task concepts Metaphor is basic to human language for a similar reason: it allows us to talk about knew or abstract things by drawing on familiar experience: Time is like a line we move on We can go forward and look back We can push a meeting back Love is like a journey (also like a fall) A presentation tool is like a slide projector

25 Metaphor Since functional models draw on past experience and not everyone has computer experience, its useful to draw on the real world. Hence the “desktop metaphor”: Directories are like folders Files are like sheets of paper Windows are like ?: Menus are like menus Deleting is like putting in the trash Running an application program is like opening the doc. Copy to buffer and restore is like cut-and-paste...

26 Interface Metaphors Use metaphors that matches user's conceptual task desktop for office workers paintbrush for artists layers for animators ledger for accountants search engine for surfers timeline for video editors scrollbar, toolbar, portal even Bluetooth!

27 Uses of metaphors… as a way of conceptualising a particular interaction style, e.g. using the system as a tool as a conceptual model that is instantiated as part of an interface, e.g., the desktop metaphor as a way of describing computers, e.g., the Internet highway names for describing specific operations e.g., ‘cut’ and ‘paste’ commands for deleting and copying objects as a part of the training material aimed at helping learning, e.g., comparing a word processor with a typewriter.

28 Opposition to interface metaphors (1/3) Overly literal interpretation Unnecessary fidelity Metaphors meant to support under- standing of new domain Break the rules Bin on desktop Too constraining E.g. finding a deeply nested file or moving a file to another folder Conflicts with design principles Fidelity with metaphor compromises design principles E.g. violating consistency principle with Mac bin

29 Opposition to interface metaphors (2/3) Not being able to understand the system functionality beyond the metaphor Metaphor acts as straight-jacket to user’s vision Overly literal translation of existing bad designs Calculator (a) replicates poor design elements of ‘real’ calculators 

30 Opposition to interface metaphors (3/3) Limits the designer’s imagination in conjuring up new paradigms and models Always looking ‘backwards’ Microsoft Windows Media Player vs. WinAmp Gentner & Nielsen (1996) Superbook

31 Interaction Paradigms A particular philosophy about interaction design Can inform novel conceptual models Beyond GUI Ubiquitous computing Pervasive computing Wearable computing 

32 Metaphors – Strengths & Difficulties Strengths Gives a way for people to understand a new concept quickly given what they know. Helps to provide good choices for visual and audio elements, as well as terminology. Difficulties The metaphor may create expectations that are false along with the true ones: Can I shred this file instead of putting in the trash can? Our understanding is “functional” rather than “structural”. That means understanding is relative to how we do things.

33 Evaluating suggested metaphors 1. How much structure does the metaphor provide? Organises the disparate features 2. How much of the metaphor is relevant to the problem? How inadequate is the metaphor? 3. Is the interface metaphor easy to represent? 4. Will your audience understand the metaphor? 5. How extensible is the metaphor? Consider these questions in light of a ‘shared calendar’ system. 

34 The Metaphor of Direct Manipulation 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)

35 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

36 Resources Chapter 2 Understanding and conceptualising interaction Chapter 8 Prototyping and Construction