1. Conceptual Model Design Informing the user what to do Gabriel Spitz 1

2. Today  Talk about Conceptual and Mental Models  Provide examples of object based conceptual models  Describe different type of Interaction Styles which are a part of the conceptual model Gabriel Spitz 2

3. Motivation for Conceptual Model  A key goal of UI design is to reduce learning and lower barrier to adoption  One way to achieve this goal is via familiarity  Such familiarity stems from what our users know and what they can anticipate Gabriel Spitz 3

4. 4

5. 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

6. UI Design Structure  The Structure is concerned with the over all concept of the UI  It is based on clear and consistent “models” that we assume will be apparent and recognizable by the users  Good structure is one where the UI design is organized  - Purposely (Goal) – Meaningfully (User) - Usefully (Task)  It informs and helps us as designers to  Organize items and present them on the screen in a way that is meaningful and coherent to the user  E.g., how to group items Gabriel Spitz 6

7. Organizing Items Gabriel Spitz 7 Organization by Product type Organization by Usage

8. Conceptualization  Is the process of coming up with a high level solutions as to how should the functions of a product be organize and represent in the UI  It helps orient a designer ask specifics questions about how a the product will be understood  It encourages the designer to explore different ideas and only than establish a set of commonly agreed terms Gabriel Spitz 8

9. 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” Gabriel Spitz 9 Engine ControlsRadio Controls Circular ControlsTriangle Controls Aesthetic DesignFunctional Design

10. Conceptual Model Includes  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 Gabriel Spitz 10

11. Why Conceptual Model? Gabriel Spitz 11

12. Helping the User Figure It Out Our actions are 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 As UI designers we are responsible for selecting and implementing the conceptual model of our design Gabriel Spitz

13. Mental Model  Is what we expect a product to look like and the way we expect it to 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 Gabriel Spitz 13

14. Gabriel Spitz 14 What would you expect when clicking on the Log In link Draw it on a small piece of paper

15. Gabriel Spitz 15 How many drew something similar to the above?

16. Conceptual Model VS. Mental Model Mental model is the idea a user has about an artifact e.g., Spreadsheet Conceptual model is the way a designer represents an artifact, how it works & how the interface controls affect it. This is what a user will see 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 Bicycle Conceptual Model of a Design

17. Mental Model Gabriel Spitz 17 When user clicks this Icon They expect this Not This

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

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

20. Mismatch Between Models  Mismatch between the users’ expectation – their mental model; and the conceptual model presented by the UI designer will lead to:  Error  Poor performance  Frustration Gabriel Spitz 20

21. 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

22. 22 Context Helps us interpret the above signs

23. Conceptual Model Content  To capitalize on users’ mental model (what users already know), the conceptual model needs to match on all the dimensions of the mental model  Objecte  Interaction Style  Labels Gabriel Spitz 23

24. Gabriel Spitz 24 Object – Canvas Interaction style – Direct Manipulation Labels – Drawing related e.g., Mix Object – Spreadsheet Interaction style – Instructing Labels – Spreadsheet related e.g., Sum

25. Conceptual Models Examples

26. 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

27. Tabular Concept

28. List Concept

29. Content Group

30. Form Concept

31. Creating a Conceptual model Gabriel Spitz 31

32. Creating a Conceptual Model  Conceptual models are created by our choices for the interface  The Interface metaphor – The object we interact with  Interaction styles – The Activity /Method we use for the interaction 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

33. 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

34. 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

35. Instructional Style Interaction Gabriel Spitz Command Line Interface Graphical User Interface

36. Conversation (activity) The underlying model of 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

37. Conversational Style Interaction Gabriel Spitz

38. 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

39. 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

40. 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

41. 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

42. Direct Manipulation Interface Gabriel Spitz

43. 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

44. Object Based Conceptual Models  Usually based on an analogy with something in the physical world  Examples Gabriel Spitz

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