Gabriel Spitz Conceptual Model Design Informing the user

Gabriel Spitz Conceptual Model Design Informing the user what to do Lecture 10 a 1

Gabriel Spitz Interface Design Space Interface elements Interface aspects Application Component Info Space Control Function/Scope • Available functions • Missing & • Completeness TBD 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 • Strategy • Form • Wizard • Message • Choice of control • Labels/terminology • Icon content • Object manipulation superfluous functions expressions • Idioms Presentation / • Color Pallet • Typography • Preferences (e. g. ) content (error, warning, information) • Maintaining context • Layout • Alignment • Repetition • Contrast method • Affordance • Color • Font style • Graphical clarity (of icons) • Resolution (details) • Manipulation dynamics

Gabriel Spitz Conceptualization Is the process of coming up with a high level solutions to a problem Helps us bridge the gap between Problem Space and the Design Space Conceptualization helps orient a design team to task specifics questions about how a conceptual model will be understood It prevents the design team from becoming narrowly focused too early and it allows the team to establish a set of commonly agreed terms 3

Gabriel Spitz Conceptual Model "A high level description of how a system is organized and operated" Johnson and Henderson 2002_ It enables "designers to straighten out their thinking before they start laying out widgets” 4

Gabriel Spitz Content of Conceptual Model includes Metaphors and Analogies Concepts that people are exposed to through the product Task domain objects, their attributes and operations Relationship and mapping between these concepts 5

Gabriel Spitz Exercise Describe the route you take to get from home to UMB Where is the description coming from 6

Gabriel Spitz Helping the User Figure It Out • Our action is driven 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 Mental Model Is what we expect a product to look like and behave It is based on our actual experience with and knowledge about similar items or parts of an item This knowledge is rarely complete or accurate. If we do not have any experience with a similar product, we will have to spend more time learning 8

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 Conceptual Model of a Design M Mental Model of a Bicycle

Gabriel Spitz A. Cooper’s Conceptual Models Manifest Model = Conceptual Model or Framework

Gabriel Spitz Why do we care about mental model? Everything in usability is about the match between mental model and the conceptual model The greater the match Easier to learn 11

Gabriel Spitz 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 1

Gabriel Spitz 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

Conceptual Models Examples

Two Panel Concept Two panels Above and below. One shows the set of items user can select from, the other shows the content of the selected item This is a learned interaction, but very common and quick to learn

Tabular Concept

List Concept

Content Group

Form Concept

Gabriel Spitz 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 Interface 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 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 interaction such as Blank sheet of paper Spreadsheet Canvas

Gabriel Spitz Instructing (activity) Instructing refers to telling the system to perform specific tasks such as Print, save, delete, etc. Used by many applications It includes keyboard commands, function keys, menu items, etc. Main benefit is that it supports quick and efficient interaction Good for repetitive actions performed on multiple objects

Gabriel Spitz Instructional Style Interaction Graphical User Interface Command Line Interface

Gabriel Spitz Conversation (activity) The underlying model is a conversation – question and answer Examples include: Help Facilities - Computer answer/User asks Search Engines - Computer answer/User asks Interactive Voice Recognition (Siri) User asks/Computer answer The benefit - 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 Conversational Style Interaction

Gabriel Spitz 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 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 Benefits of DM Interfaces Easy to learn basic functionality – we have a good Mental Model 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 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 Direct Manipulation Interface

Gabriel Spitz Exploring and Browsing Moving through a virtual space – Scanning, Reading, Skipping 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 Object Based Conceptual Models Usually based on an analogy with something in the physical world Examples

Gabriel Spitz Selecting a Conceptual Model Direct manipulation - Spatial types of tasks, e. g. designing, drawing, flying, driving, sizing windows Issuing instructions - Repetitive tasks, e. g. spell-checking, file management Conversation - 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