Download presentation
Presentation is loading. Please wait.
Published byFelicia Lewis Modified over 8 years ago
1
Conceptual Model Design Informing the user what to do Lecture # 11 Gabriel Spitz
2
Interface elements Interface aspects Application ComponentInfo SpaceControl Function/Scope Available functions Missing & superfluous functions CompletenessTBD Framework Organizing principle (Posture) Segmentation into components Segmentation into info spaces Grouping of items Proximity Sequencing items TBD Activity flow/Behavior Navigation schema Task sequence Error recovery Action reversal System state info Action constraints (error avoidance) Guidance Spatial workflow Modes/temporal workflow Closure Feedback Defaults Shortcuts Representation Metaphors / expressions Idioms Strategy (e.g.) Form Wizard Message content (error, warning, information) Maintaining context Choice of control Labels/terminology Icon content Object manipulation method Affordance Presentation Color Pallet Typography Preferences Layout Alignment Repetition Contrast Color Font style Graphical clarity (of icons) Resolution (details) Manipulation dynamics Interface Design Space Gabriel Spitz
3
D. Norman’s Action Model Gabriel Spitz Goal Intention Detailed Plan Comparison Interpretation Perception External World Execution Users look at the interface They identify patterns Determine how to act
4
Action Plan Our action-plan is driven in part by what we see and how close is what we see to what we expect/know What we see is the Conceptual Model of the interface What we expect is our Mental Model of the interface We as UI designers are responsible for selecting and implementing the conceptual model of our design Gabriel Spitz
5
Conceptual Model VS. Mental Model Conceptual model is a mental representation of how an artifact works & how the interface controls affect it. It is the way the user will understand the interface Mental model is the idea a user has about an interface – Mental representation The closer a conceptual model is to the mental model the easier it is for a user to figure out how to operate a system MeMe Mental Model of a BicycleConceptual Model of a Design
6
A. Cooper ’ s Conceptual Models Gabriel Spitz Manifest Model = Conceptual Model or Framework
7
Mismatch Between Models Mismatch between the users’ expectation – their mental model; and the conceptual model used by the UI designer will lead to: Error Poor performance Frustration Gabriel Spitz 7
8
A Conceptual Model Is the way the system will appear to users and therefore the way the user will understand it It is the overall “ big idea ” of the UI For example this interface is like a desktop, a wending machine, an ATM machine It is also the context within which UI elements – actions & components – are anticipated and interpreted Gabriel Spitz
9
Creating a Conceptual Model Conceptual models are created by our choices for the interface Interaction styles – The Activity /Method we use for the interaction The metaphor – The object we interact with Keep in mind that the interface has to communicate how it should be used Help information can aid, but should not be necessary Gabriel Spitz
10
Interaction Styles Interaction styles refers to the way we interacts with an application. These include: Instructing Conversing Manipulation Browsing & Navigating Metaphor or the objects used in the the interaction such as Blank sheet of paper Spreadsheet Canvas Gabriel Spitz
11
Instructing (activity) Instruction is common conceptual model in user-interface and used by many applications Instructing is performed using keyboard commands, function keys, menu items, etc. Instructing refers to telling the system to perform specific tasks such as Print, save, delete, etc. The main benefit of instruction is that it supports quick and efficient interaction Good for repetitive actions performed on multiple objects Gabriel Spitz
12
Instructional Style Interaction Gabriel Spitz
13
Conversation (activity) The underlying model of this interaction mode is a conversation with another human Users ask and the system responds Examples include: Help Facilities Search Engines Interactive Voice Recognition –Siri The benefit of this interaction style is that it allows users to interact with the system in a way that is familiar Makes them feel comfortable, at ease and less scared The drawback is that misunderstandings can arise when the system does not know how to parse what the user says Gabriel Spitz
14
Conversational Style Interaction Gabriel Spitz
15
Direct Manipulating (activity) Involves dragging, selecting, opening, closing and zooming actions on virtual objects Exploit’s users’ knowledge of how they move and manipulate objects in the physical world what you see is what you get (WYSIWYG) the direct manipulation approach (DM) Shneiderman (1983) coined the term Direct manipulation Gabriel Spitz
16
Core Principles of DM Continuous representation of objects and actions of interest Physical actions and button pressing instead of issuing commands with complex syntax Rapid reversible actions with immediate feedback on object of interest Gabriel Spitz
17
Benefits of DM Interfaces Easy to learn basic functionality Users can work rapidly to carry out a wide range of tasks Easy to remember how to carry out tasks over time Easy to detect errors Gabriel Spitz
18
Disadvantages of DM Some people take the metaphor of direct manipulation too literally Not all tasks can be described by objects and not all actions can be done directly Some tasks are better achieved through delegating e.g. spell checking Can waste extensive screen space Moving a mouse around the screen can be slower than pressing function keys to do same actions Gabriel Spitz
19
Direct Manipulation Interface Gabriel Spitz
20
Exploring and Browsing The way people browse information with existing media (e.g. newspapers, magazines, libraries, pamphlets) Information is structured to allow flexibility in the way a user is able to search for information e.g. multimedia, web Gabriel Spitz
21
Object Based Conceptual Models Usually based on an analogy with something in the physical world Examples Gabriel Spitz
22
Selecting a Conceptual Model Direct manipulation is good for ‘doing’ types of tasks, e.g. designing, drawing, flying, driving, sizing windows Issuing instructions is good for repetitive tasks, e.g. spell- checking, file management Having a conversation is good for children, computer- phobic, disabled users and specialized applications (e.g. phone services) Hybrid conceptual models are often employed, where different ways of carrying out the same actions is supported at the interface - but can take longer to learn Gabriel Spitz
23
Metaphor Definition ? “ The transference of the relation between one set of objects to another set for the purpose of brief explanation ” Lakoff & Johnson “...the way we think, what we experience, and what we do every day is very much a matter of metaphor. ” in our language & thinking - “ argument is war ” he attacked every weak point... criticisms right on target... if you use that strategy We can use metaphor to highlight certain features & suppress others Gabriel Spitz
24
Example Metaphors Global metaphors personal assistant, wallet, clothing, pens, cards, telephone, eyeglasses Data & function rolodex, to-do list, calendar, applications documents, find, assist Collections drawers, files, books, newspapers, photo albums Gabriel Spitz
25
Designing the Interface of a music player Actions Start Stop Pause Rapid forward Rapid backward Gabriel Spitz
26
What is an Interface Metaphor A metaphor is one thing that is conceived as representing another; A is like B An interface metaphor is an interface that has been developed to resemble aspects of a physical entity Gabriel Spitz The interface to a Yamaha CD Player
27
Why Interface Metaphor It combines new concepts with familiar knowledge Creating a list with Shopping Cart We can describe an application as being like some other familiar object, or an operation being like a familiar operation Gabriel Spitz
28
Why Interface Metaphor Helps users conceptualize abstract, hard to imagine, computer concepts in more concrete and familiar terms Gabriel Spitz Store content in a temporary storage location and then insert it in a file Cut & Paste VS.
29
An Interface Metaphor Example Imagine expressing the various communication functions and procedures as a set of instructions Gabriel Spitz Global Metaphor Others: PIM Wallet
30
Benefits of Interface Metaphor It capitalizes on knowledge that users already have – less learning Users are more comfortable dealing with objects and concepts that they are familiar with – greater user satisfaction Can reduce the visual clutter at the interface Gabriel Spitz
31
Interface Metaphor - Example Gabriel Spitz Metaphor for Data & Function Calendar To-do list
32
Interface Metaphor - Example Gabriel Spitz PIM
33
Interface Metaphor - Example Gabriel Spitz Metaphor for a Collection AZZ Cardfile
34
Potential Issues with Metaphors Some metaphors or the way they are used break cultural and logical rules Trash can should be under the desk Deleting a document is not equivalent to ejecting a disc for safe keeping Gabriel Spitz
35
Potential Issues with Metaphors Some changes strain the metaphor and hamper users ’ performance and learning Printer control dialog box What does the rewind button means Gabriel Spitz
36
Potential Issues with Metaphors Gabriel Spitz Another strained metaphor
37
Potential Issues with Metaphors Not all metaphors cross cultural boundaries easily Gabriel Spitz
38
Metaphors Need to be Adapted Some changes extend the metaphor in a “ natural ” way and thus increase its value as an organizing concept Gabriel Spitz
39
Extending Metaphor Gabriel Spitz A good metaphor is one that can account for the largest number of functions
40
Game Metaphor Gabriel Spitz
41
Gallery Metaphor Gabriel Spitz
42
Metaphor Controversy Interface metaphors can be abused or misused However Interface metaphors can also be very helpful and useful Adopt interface metaphors in an effective way to combine familiar knowledge with new functionality Gabriel Spitz
43
Design Guides Provide good conceptual model customers want to understand how UI controls impact object Make things visible if object has function, interface should show it Map interface controls to customer ’ s model infix -vs- postfix calculator -- whose model? Provide feedback what you see is what you get! Gabriel Spitz
44
Summary – Conceptual Model A usable interface will have: A purposefully designed conceptual model for the system image A conceptual model that is logical, well articulated, easy to learn, and easy to understand A conceptual model that is compatible with users task and work style A conceptual model that capitalizes on what users know or are familiar with Gabriel Spitz
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.