Conceptual Models

CMPT 363

“Genius is the ability to reduce the complicated to the simple.”
– C.W. Ceram

Where Are We?

Let’s begin exploring
conceptual models…

 

with a case study

Apple iOS 6

Apple iOS 7
(and iOS 8... and now iOS9!)

 

Now, let’s get into the details of…

Conceptual Models

Mental Model

 
A mental model is the mental representation of how a system (object) operates

Mental Model

 
A mental model is also sometimes called the
user’s conceptual model

Mental Model

 
We form mental models to help us understand
  1. How to use an object
  2. What can be done with it
  3. How to recover from errors

Mental Model

 
Novice users of an object often have very primitive, incomplete, and sometimes even incorrect mental models of that system

Mental Model

 
As they become more experienced, their mental models hopefully evolve to become more accurate and complete

Mental Model

 
An example of a real world conceptual model for a fridge freezer (Norman, 1988)

Mental Model

 

  • Two compartments: the freezer (frozen food, top) and fridge (fresh food, bottom)
  • Two controls in bottom compartment
  • Task is to make the freezer warmer and keep the fresh food the same temperature

Fridge Freezer Instructions

 

Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman

Presented Conceptual Model

 

Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman

Correct Conceptual Model 

 

Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman

Revealing Mental Models

 
  • Card sorts
  • Interviews
  • Contextual inquiries
  • Visualizations
  • Participatory design
  • Usability tests (esp. "think aloud")

Mental Model

 
People will also form mental models when interacting with navigational structures of software applications or web sites

Activity:
Mental Model Case Study

Bulk Rename Utility  vs.  A Better Finder Rename

 


Metaphors

An interface metaphor uses a concept familiar to the user to help explain and communicate an unfamiliar concept
 

Problems with Metaphors

 
  • Breaks existing rules/conventions
  • Too constraining for designers
  • Conflicts with design principles
  • Actions beyond metaphor causes confusion
  • Translation of bad existing designs
 

Idioms

 
  • Idioms are figures of speech that are understood not to be
    taken literally
  • While an idiom must be learnt, it is learnt quickly, and once learned is essentially never forgotten
  • For example, “He’s no rocket scientist” really means he’s not especially bright
 

Design Model

 
The design model (sometimes referred to as the conceptual model) provides an overall framework of how users interact with a product

Levels of Design

 
  • Idea, intent, goals
  • Usability and user experience objectives
  • Function and content (system services)
  • Function and content structure (design model)
  • Interaction structure (navigation model)
  • Interaction techniques
  • Presentation techniques (layout and graphical design)
  • Physical form (artifact design)
 

Design Model

 
A common example of a problematic design model for many casual computer users is the use of Boolean logic (e.g. AND/OR) in some search dialogs

Design Model

 
A more appropriate model for non-programmers would utilize choices such as “All the Words” and “Any of the Words”

General Guidelines for
Defining Design Models 

 
  • Based on the user’s point of view
  • Centered around the user’s goals and tasks
  • Easy to understand and remember
  • Predictable in behaviour (consistent)
 

Key Design Model Questions

 
  • What will the visual representation be?
  • What objects/concepts are needed?
  • How various objects/concepts relate to each other?
  • How will needed tasks be supported?
 
 

Activity:
Design Model Case Study

 

Delicious Library (Mac OS)  vs.  Bookpedia (Mac OS)

Design Model

 
The design model should anticipate the user’s expectations rather than reflect the designer’s knowledge and models

Android Back (vs. Up) Behavior

 
 

http://developer.android.com/design/patterns/navigation.html

Android Back (vs. Up) Behavior

 

“The Up button is used to navigate within an app based on the hierarchical relationships between screens. For instance, if screen A displays a list of items, and selecting an item leads to screen B (which presents that item in more detail), then screen B should offer an Up button that returns to screen A. If a screen is the topmost one in an app (that is, the app's home), it should not present an Up button.
The system Back button is used to navigate, in reverse chronological order, through the history of screens the user has recently worked with. It is generally based on the temporal relationships between screens, rather than the app's hierarchy.”


– Android Developer Docs

 

 

http://developer.android.com/design/patterns/navigation.html

 

http://developer.android.com/design/patterns/navigation.html

 

http://developer.android.com/design/patterns/navigation.html

 

 http://www.apple.com/ios/what-is/

System Image

 
The system image is the physical appearance of a system, and its operation, responses to user’s commands, and related documentation

Conceptual Model

Conceptual Models

 
As designers, we expect the user’s mental model to be the same as our design model

Conceptual Models

 
This will only happen if the system image accurately (and successfully) communicates the correct conceptual model!
  • What we’ve covered so far  
    • Mental model
    • Design model
    • System image
  • Coming up
    • Principles to communicate
      conceptual models

    Time for Questions & Discussion

    Conceptual Models

     
    • Design principles that effectively communicate the conceptual model, as originally identified by Donald Norman:
      • Visibility
      • Affordances
      • Mapping
      • Feedback
      • Constraints

    Visibility

     
    Elements of the interface, representing the various functions of a device, should be visible
     

    Visibility

     
    Examples of poor visibility can be found in many office phone systems and digital wrist watches

    Visibility

     
    Making everything visible at once is not really feasible, as the issue of relative visibility also needs to be considered

    Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: Amazon Design Team

    Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: Amazon Design Team

    Visibility

     
    For today's multi-touch devices, the issue of discoverability is a related key factor to also consider

    Affordances

     
    Affordances are the actual and perceived properties of an object that provide cues about how that object can be used and the results produced by that object

    Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source:  http://www.joelonsoftware.com

    Perceived Affordances

     
    For graphical user interfaces, perceived affordances come into play – a combination of what you see and what you know (conventions)

     

      Pictured: iOS 7
     

    Pictured: Windows Phone 8
    • What we’ve covered so far  
      • Principles to communicate conceptual models
        • Visibility
        • Affordances (visual cues)
    • Coming up
      • More principles to communicate conceptual models

        Time for More Questions
        and Discussion

         

        Mapping

         
        Mapping concerns itself with the relationship between controls and the objects that  they affect

        Mapping

         
        Ideally, one control affects one object

         

        Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Pictured: Logitech Harmony Smart Control

        “On our 900's the replay function jumped back just enough to compensate for our reaction time when the commercial is over and we want to go back to watching the recording. It worked great! Now, on the Smart Control those functions are on dual function keys. When holding the rewind button long enough to trigger the replay function the fast forward keeps going, effectively increasing the effective reaction time so that I need at least 3 replays to get back to the portion of the program I missed. This design "feature" was a really dumb idea for keys that depend on reaction time. A remote big enough for the extra 2 keys would have been much better. ” 

        – Logitech Harmony Smart Control Reviewer

        Natural Mapping

         
        Natural Mapping is the spatial relationship between controls and the objects that they affect

        Natural Mapping

         
        This may involve both control layout and movement

        Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman

        Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman

        Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.appolicious.com

        Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://cyrilmottier.com

        Multi-touch Gestures

         
         

        Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://developer.android.com/

        Feedback

         
        Information reported to the user indicating that an action has been performed and what its result has been

        Feedback

         
        Common techniques with regard to software interfaces include cursor changes, progress meters, message boxes, and previews

        Constraints

         
        Constraints limit the number of ways that something can be used

        Constraints

         
        • Physical
        • Cultural
        • Logical

        Constraints

         
        Physical – people can only do what is physically possible
         
        Example?

        Constraints

         
        Cultural – based on wide-spread cultural standards
         
        Example?

        Constraints

         
        Logical – the use of people’s sense of reasoning to
        determine alternatives
         
        Example?

        Activity:
        Conceptual Model Analysis

        Trulia.com​

        Bonus Feature!

         
        These design principles not only help communicate
        a conceptual model but thay can also be used as a method to quickly evaluate interfaces

        Good Design

         
        • Provides a good conceptual model
        • Makes things visible
        • Provides (perceived) affordances
        • Gets the mappings right
        • Supports interaction through feedback 
        • Exploits the power of constraints

        Summary

         
        • Mental model
        • Design model
        • System image
        • Principles to communicate conceptual models
          • Visibility
          • Affordances (visual cues)
          • Feedback
          • Mapping
          • Constraints

        References and Suggested Books

         
        • The Design of Everyday Things by Donald Norman
        • The Usability Engineering Lifecycle by Deborah Mayhew

         

        Made with Slides.com