1 / 52

Conceptual Model Design Informing the user what to do

Conceptual Model Design Informing the user what to do. 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. Start With Class Exercise.

sandrapayne
Download Presentation

Conceptual Model Design Informing the user what to do

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Gabriel Spitz Conceptual Model DesignInforming the user what to do

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

  3. Start With Class Exercise • Design a Web Application that lets you schedule appointments with clients

  4. Gabriel Spitz Review Some Actual Design

  5. Concepts Used in Exercise • Maintaining Calendars • Maintaining Appointments • Receiving Reminders

  6. Lessons learned from Exercise • We/Users often have a Mental Model for objects/tasks that we are about to encounter • When you design your application you keep in mind the mental model users will have in their mind • Use concepts that are associated with the: • Object that they are about to use • Task that they are about to perform

  7. Gabriel Spitz Why Worry About Conceptual Model • A key goal of UI design is to reduce learning and lower barrier to adoption • We achieve this goal via familiarity • By relying what our users know and what they can anticipate

  8. Gabriel Spitz Interface Design Space

  9. Gabriel Spitz UI Design Conceptual Model • The Conceptual Model 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 conceptual model 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 use

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

  11. 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” Circular Controls Triangle Controls Engine Controls Radio Controls Aesthetic Design Functional Design

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

  13. Gabriel Spitz Why Conceptual Model?

  14. Gabriel Spitz Helping the User Figure It Out • As users our actions are driven by what we see and how close is what we see to what we expect/know • As a user we seethe 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

  15. Gabriel Spitz Mental Model • Is what we (as individuals) 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

  16. Gabriel Spitz What would you expect when clicking on the Log In link

  17. Gabriel Spitz How many expected something different to the above?

  18. 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 Mental Model of a Bicycle Conceptual Model of a Design Me

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

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

  21. Gabriel Spitz Example from Akamai Match Target Protected Asset • Match Target • Reflects the Technology • Rules are activated when a request matches a hostname • Protected Asset • Reflects the way users think • This is what I want to protect

  22. 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 the Easier it is to learn

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

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

  25. Gabriel Spitz Mental Model System Model Conceptual Model

  26. Gabriel Spitz Context Helps us interpret the above signs

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

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

  29. Conceptual Models Examples

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

  31. Tabular Concept

  32. List Concept

  33. Content Group

  34. Form Concept

  35. Gabriel Spitz Creating a Conceptual model

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

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

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

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

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

  41. Gabriel Spitz Conversational Style Interaction

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

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

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

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

  46. Gabriel Spitz Direct Manipulation Interface

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

More Related