Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz.

Slides:



Advertisements
Similar presentations
Understanding and conceptualizing interaction. Recap HCI has moved beyond designing interfaces for desktop machines About extending and supporting all.
Advertisements

Chapter 11 Designing the User Interface
Chapter 12 User Interface Design
1 CS 501 Spring 2002 CS 501: Software Engineering Lecture 11 Designing for Usability I.
Representation at the Interface Gabriel Spitz 1 Lecture #13.
XP Exploring the Basics of Microsoft Windows XP1 Exploring the Basics of Windows XP.
Dialog Styles. The Five Primary Styles of Interaction 4 Menu selection 4 Form fill-in 4 Command language 4 Natural language 4 Direct manipulation.
Dialog Styles. The Six Primary Styles of Interaction n Q & A n Menu selection n Form fill-in n Command language n Natural language n Direct manipulation.
7M701 1 User Interface Design Sommerville, Ian (2001) Software Engineering, 6 th edition: Chapter 15
Lecture 7 Date: 23rd February
1 SWE Introduction to Software Engineering Lecture 26 – User Interface Design (Chapter 16)
1 / 31 CS 425/625 Software Engineering User Interface Design Based on Chapter 15 of the textbook [SE-6] Ian Sommerville, Software Engineering, 6 th Ed.,
User Interface Design: Methods of Interaction. Accepted design principles Interface design needs to consider the following issues: 1. Visual clarity 2.
Understanding and Conceptualizing Interaction Chapter 2.
Ch 7 & 8 Interaction Styles page 1 CS 368 Designing the Interaction Interaction Design The look and feel (appearance and behavior) of interaction objects.
Today’s class Group Presentation More about principles, guidelines, style guides and standards In-class exercises More about usability Norman’s model of.
Chapter 2: Understanding and conceptualizing interaction
These courseware materials are to be used in conjunction with Software Engineering: A Practitioner’s Approach, 6/e and are provided with permission by.
Other Interaction Styles: Direct Manipulation, Haptic, Multimedia, Multimodal, Virtual Reality, Video Games Dr.s Barnes and Leventhal.
1 FJK User-Centered Design and Development Instructor: Franz J. Kurfess Computer Science Dept. Cal Poly San Luis Obispo.
1 User Interface Design CIS 375 Bruce R. Maxim UM-Dearborn.
Chapter 13: Designing the User Interface
CSC450 Software Engineering
Design, goal of design, design process in SE context, Process of design – Quality guidelines and attributes Evolution of software design process – Procedural,
CS305: Fall2008 Mental and Conceptual Models Readings: Chapter 2 of ID-Book.
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.
1 Interface Design Easy to use? Easy to understand? Easy to learn?
Microsoft Wang Li, Wang Yini, Li YIcheng.  This is a presentation about Microsoft Windows7 guidelines  Wang Li K8wali00  Li Yicheng K8liyi00  Wang.
Principles of User Centred Design Howell Istance.
11.10 Human Computer Interface www. ICT-Teacher.com.
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.
The ID process Identifying needs and establishing requirements Developing alternative designs that meet those requirements Building interactive versions.
Understanding and conceptualizing interaction. Recap HCI has moved beyond designing interfaces for desktop machines About extending and supporting all.
INTERACTION DESIGN. Today’s objectives Understanding & conceptualizing interaction Control Design Challenge.
Conceptual Model Design Informing the user what to do Lecture # 11 Gabriel Spitz.
AVI/Psych 358/IE 340: Human Factors Interfaces and Interaction September 22, 2008.
Understanding and conceptualizing interaction
Chapter 2: Understanding and conceptualizing interaction.
INFO 355Week #71 Systems Analysis II User and system interface design INFO 355 Glenn Booker.
Understanding Users Cognition & Cognitive Frameworks
1 COSC 4406 Software Engineering COSC 4406 Software Engineering Haibin Zhu, Ph.D. Dept. of Computer Science and mathematics, Nipissing University, 100.
Conceptual Model Design Informing the user what to do Lecture 10 Gabriel Spitz 1.
Fall 2002CS/PSY Dialog Design 2 Direct Manipulation 1) Continuous visibility of the objects and actions of interest 2) Rapid, reversible, incremental.
Yonglei Tao School of Computing & Info Systems GVSU Ch 7 Design Guidelines.
Different Types of HCI CLI Menu Driven GUI NLI
The Structure of the User Interface Lecture # 8 1 Gabriel Spitz.
Task Analysis Lecture # 8 Gabriel Spitz 1. Key Points  Task Analysis is a critical element of UI Design  It describes what is a user doing or will.
Task Analysis Lecture # 8 Gabriel Spitz 1. Key Points  Task Analysis is a critical element of UI Design  It specifies what functions the user will need.
The Structure of the User Interface Lecture # 2 Gabriel Spitz.
Information Design Goal: identify methods for representing and arranging the objects and actions possible in a system in a way that facilitates perception.
William H. Bowers – Specification Techniques Torres 17.
A disciplined approach to analyzing malfunctions –Provides feedback into the redesign process 1.Play protocol, searching for malfunctions 2.Answer four.
1 Design Principles – Part 2 of 3 Learnability Principles Flexibility Principles.
Conceptual Model Design Informing the user what to do Gabriel Spitz 1.
The Structure of the User Interface Lecture # 9 Gabriel Spitz.
Conceptual Model Design Informing the user what to do Lecture 10a Gabriel Spitz 1.
1 Unit E-Guidelines (c) elsaddik SEG 3210 User Interface Design & Implementation Prof. Dr.-Ing. Abdulmotaleb.
Conceptual Model Design Informing the user what to do Lecture 10a Gabriel Spitz 1.
Chapter 6 : User interface design
How to think about interaction
Activity Flow Design - or - Organizing the users’ Work
Conceptual Model Design Informing the user what to do
Software Engineering: A Practitioner’s Approach, 6/e Chapter 12 User Interface Design copyright © 1996, 2001, 2005 R.S. Pressman & Associates, Inc.
Dialog Design 2 Direct Manipulation
Systems Analysis and Design in a Changing World, 6th Edition
Interface Design Easy to learn? Easy to use? Easy to understand?
Presentation transcript:

Conceptual Model Design Informing the user what to do Lecture # 10 (a) Gabriel Spitz

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

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

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

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

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

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

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

Conceptual Models Examples

Two Panel Concept Two panels side by side. 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

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

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

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

Instructional Style Interaction Gabriel Spitz

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

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  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  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