SEG 3210 User Interface Design

1
SEG 3210User Interface Design Implementation

• Prof. Dr.-Ing. Abdulmotaleb El Saddik
• University of Ottawa (SITE 5-037)
• [phone] x 6277
• elsaddik _at_ site.uottawa.ca
• abed _at_ mcrlab.uottawa.ca
• http//www.site.uottawa.ca/elsaddik/

2
Unit C conceptual models

• Review The trouble with Users
• Introduction to Conceptual Models
• Mental models
• Relationship between design and user models
• Metaphors
• Guidelines for Building Conceptual Models
• Key Points to Review

3
1. Review The trouble with Users

• Any developer can tell you that users are
• lazy,
• demanding,
• careless and
• incompetent
• In particular, developers are often frustrated
  that so many users apparently lack computer
  literacy
• Some day well hook up all the machines and
  eliminate the middle-man
• What can we do in the meantime?
• There are some common strategies...

4
First strategy - Wait for them to die

• Strategy flaws
• New bad users will replace them
• There will always be some users who are new to
  the current generation of technology.

5
Second strategy - Wait for the super-user to
evolve

• Strategy flaws
• No noticeable recent evolutionary leaps
• Expert users are even less forgiving of usability
  problems than novices...
• so we have to deal with the users weve got.

6
Third strategy - Educate them
7
Designing usable systems

• Analysis
• Understand the users and their tasks
• Design
• Apply this understanding during design activities
• Evaluate
• Validate design decisions to see whether people
  can actually use the system.

8
2. Introduction to Conceptual Models
Designers Model
Users Model
9
2. Introduction to Conceptual Models

• Conceptual model Design model
• Model held by the designer - may not be the same
  for all designers working on a product
• Mental Model Users model
• Model held by a user - may be different for each
  user
• System image
• Reflection of the model in the system itself its
  information display and control possibilities

• System image
• The interface, the systems behavior, and the
  documentation together are called the System
  Image.
• If the system image does not convey to users the
  design model in a clear and obvious way, the
  users will develop incorrect user models.

10
2. Introduction to Conceptual Models

• Conceptual model Definition (1)
• The designer analyzes the content to be taught,
• the task to be performed or
• the information to be displayed, and
• defines its structure and functionality.
• This structure in the designer's mind is called a
  conceptual model
• Conceptual model
• A designers attempt, through the user interface,
  to facilitate the development of a useful mental
  model.
• A framework through which functionality is
  presented
• A conceptual model is also called an external
  myth
• i.e. the designers attempt to present a
  simplified view of the system
• it is not really the same as the system
• Can be considered a roadmap to the system
• 1) Bielenberg, D. (1993). Interactive design and
  the mythical "intuitive user interface". Journal
  of Interactive Instruction Development, 6 (2),
  14-19

11
Human knowledge

• Human intelligence relies on a great deal of
  background knowledge.
• The more we know
• The easier many tasks become
• We have millions of facts in our brains
• Most should be quickly accessed
• Hence they must be highly organized
• The better we understand the organization the
  better we can build user interfaces that ...
• Allow us to access our knowledge
• Help us to improve our mental models

12
Principles of Knowledge organization

• Semantic nets
• Graph structures with...
• Nodes representing concepts
• Links representing relationships
• e.g.
• a person can be related to a dog by the owner
  relation.
• Ideas are similar to entity-relationship or
  object diagrams
• Rhetorical Structure Theory
• An example of this is the English sentences "An
  apple is a fruit, Fruit is sweet."

13
3. Mental Model

• A representation in a users brain of what
  contains his or her conceptualization and
  understanding of a system
• Patterns of knowledge representation in the brain
• Humans build models of systems using schemas and
  other semantic nets
• Mental models are like computer simulations
• But in the brain
• Humans manipulate mental models to
• Predict and test consequences of actions
• i.e. we run our models
• Solve problems
• Integrate new facts

14
Mental Model

• Mental models ...
• get better with experience
• can be wrong and need replacing
• We constantly seek evidence to strengthen or
  modify our mental models
• by observation and exploration
• good feedback can help in this process
• Many user interface malfunctions can be ascribed
  to incorrect mental models
• which may be generated by poor conceptual models
• Systematic malfunctions are strongly suggestive
  of erroneous mental models
• Mental models can be contrasted with images
• Images are views of one state of a mental model

15
Types of mental models

• We can build user interfaces that help users
  build and manage one or both of the following
• Structural models
• User has internalized how something works
• e.g. How a car works
• Functional models
• User has internalized how to use something
• e.g. How to drive a car
• How to
• by a ticket,
• go to a platform,
• wait for a train,
• get on a train,
• change trains and
• leave the station at the destination

16
How the two types of models can help people

• Structural
• Help deal with unfamiliar problems
• Help users predict the effects of any possible
  sequence of actions
• However they require more work to learn
• Context-free -gt can be extended and integrated
  with other knowledge
• Functional
• Help get a task done fast with minimal thinking
• i.e. blindly following directions
• Context-dependent --gt easier to use
• For most tasks, most people only build functional
  models

17
Mental models

• Mental models can be
• Abstract
• Subway / Metro / Underground maps that are not to
  scale and leave out many details
• Concrete
• Topological map
• Simple
• Average drivers model of a car
• Detailed
• Mechanics model of a car

18
London complete system Famous for introducing
abstraction - not to scale
19
London central coreSame detail, just bigger
scale
20
Paris suburban system Even more abstract
21
Paris central coreLess abstract - more to scale
- more complex
22
TorontoHighly abstract and simple
23
Mental models are typically messy

• They are incomplete
• Peoples ability to run them is severely limited
• We are not machines
• They are unstable
• People forget details
• Models of similar systems are confused with each
  other
• People incorporate unscientific ideas and
  superstitions into mental models
• If there is a 50 chance, then if it succeeded
  last time it will fail next time
• We cannot hope to instill perfect mental models
  in users
• We can only promote the development of a model
  that is neater, more elegant, more stable, more
  complete and more confident

24
Classroom exercises with mental models

• In the following tasks, think about
• What mental activity you perform to compute the
  answer
• How much time it takes.
• How accurate you think your answer is
• If you need to do a similar task often, how could
  you improve your mental model.
• Could a computer make the task easier? How?

• How many windows in your house?
• How many traffic lights are there on the route
  you drive to work (or some other drive)?
• If you came back to a cold house and you wanted a
  20C temperature, what would you do?
• How would you leave a message for somebody on
  their voice mail? When would they get it?
• How would you find out of a given procedure in a
  program is ever going to be called?

25
Two puzzles to illustrate mental models

• There are four cards
• Each has a letter on one side and a number on the
  other side
• Rule If there is a vowel on one side, then there
  is an even number on the other side
• You see the following cards E, D, 4, 7
• Which cards do you need to turn to verify the
  rule?

• There are four receipts
• Rule If a purchase is for more than 1000, the
  manager must sign on the back of the receipt
• You see the following receipts on the table
• two showing amounts 1200 and 200
• two showing the back, one with the managers
  signature
• Which receipts do you need to turn to verify the
  rule?

26
4. Relationship between design and user models

• Ideally, the user model should completely map
  onto the design model.
• More often the users develop only a partial
  mental model of the design model.
• The way users find out about the design model is
  through the interface, the systems behavior, and
  the documentation
• The gulfs of execution and evaluation
• Users can bridge the gulfs by changing their
  mental model
• Designers can bridge the gulfs by changing the
  conceptual model they present

27
Mapping

• Mapping indicates the relationship between the
  action of the user and the result of the action.
• Natural mapping
• The users natural understanding of action
  results
• steering the wheel (direct association)
• RED for stop and GREEN for go (cultural
  understanding)
• Four controls for four stove burners (logical
  association)
• Present the font choices using the fonts
  themselves

Times New RomanArial Arial Black Courier New Old
English Monotype Sorts Univers
28
Forcing Function

• Design that prevents users from taking actions
  which are inappropriate or which would lead to
  error
• Appliance shut off when opened
• Microwaves
• Washing Machines
• Radio buttons
• Choose one and one only
• Good example of a forcing function design
• Menu bar - grays out and prevents the selection
  of those items inapplicable to the current
  context

New Open Close Save Save as...
29
Directness of an interface

• The feeling that one is operating directly in the
  world of interest
• Rather than through a computer
• Semantic directness
• The degree to which the UI allows users to say
  what they want to say simply and concisely
• good If users can directly draw in a word
  processor when creating a document rather than
  switching applications
• bad If users in a draw program must draw a
  shape using separate lines
• Articulatory directness
• The relation between the meanings of elements in
  a UI and their physical form
• reasonable turn indicator in a car
• bad burner controls on many stoves

30
Example burner controls on many stoves
Stove Top B
Stove Top A
Controls A
Controls B
31
Affordances and constraints

• A UI element with good perceived affordance
  suggests what is possible to do with it
• A UI element with good perceived constraints
  suggests what is not possible to do with it.
• Good affordances and constraints
• Reduce the users reliance on her mental model
• She can immediately tell what to do without
  thinking about it
• Help the user build their mental model
• Typical affordance
• An element that looks like a button, can be
  pushed
• When the cursor is over it, it darkens indicating
  that pressing the mouse now would perform the
  action
• Typical constraints
• e.g. a square peg and a round hole
• e.g. the scroll bar can only scroll a limited
  distance

32
Conceptual models of novices vs. experts

• Knowledge starts of as declarative
• Statements of fact that can be put in words
• With practice, knowledge gradually becomes more
  procedural and automated
• One internalizes the mental model of how to do
  certain things
• An expert may not even be able to explain what
  they do
• The fact-learning required in the early stage is
  a bottleneck
• We must make interfaces so they can be learned
  and used with just a few pieces of knowledge
• e.g. how to use the mouse
• Expanding on existing procedural knowledge can
  sometimes be easier
• Computer experts can more easily to learn any UI

33
States and modes

• In the UI a mode is
• A state entered by a particular action, in which
  the set of actions available changes
• e.g. in the Unix vi text editor, one can be in
• Text entry mode
• Command mode
• e.g. Dialog boxes are modes if one has to quit
  before doing anything else
• Modeless dialogs are better.
• Each mode has its own mini conceptual model
• This can be confusing to users
• Hence avoid modes where possible

34
5. Metaphors

• Metaphors are an important tool in building
  conceptual models
• There is a close linkage between metaphors and
  conceptual models.
• metaphor implies a model
• model isn't easily grasped without metaphors
• What is a metaphor ?
• A word or phrase denoting one object used in
  place of another to suggest a likeness
• The use in an interface of familiar concepts to
  represent more abstract system concepts
• Analogy
• Partial likeness between things that are compared
• Metaphor vs. Analogy
• Distinction is that in a metaphor an object is
  treated as if it were another in analogy we
  remain aware that they are different.
• Metaphors
• Help the user use prior knowledge to understand a
  system
• Make abstract ideas more concrete
• Help users build mental models

35
Examples of metaphors

• Mac/MS-Windows - desktop metaphor
• mismatch ejecting disk by dropping in trash can
• word processor - typewrite metaphor
• mismatch auto-line wrap
• Spreadsheet as ledger - squared paper metaphor
• mismatch calculating formulae
• Mailtool - mailbox metaphor
• icon mismatch US mailbox not UK, German, French
  etc
• Control panel as cards with tabs
• Conceptual model as roadmap to the system
• Ubiquitous computing is a step beyond
  metaphors
• integrating a computer invisibly into an everyday
  device (e.g. an employee badge)
• Two types of metaphors
• Verbal metaphors
• The system is explained in a metaphorical way
• Virtual interface metaphors
• The system appears in a metaphorical way

36
Difficulties developing metaphors

• Following a metaphor too literally can mean we
  underutilize the power of the computer
• e.g. in a windowing system it can be hard to sort
  through many windows which represent documents
• This is easier with real paper documents
• We should ensure the computer also makes this
  easy
• Incomplete metaphors can mislead the user
• e.g. Ejecting a disk (file cabinet) by putting it
  in the trash
• It is difficult to extend metaphors consistently,
  especially when adding functionality
• e.g. Magical Macintosh features
• Infinite folders-within-folders
• Aliases for files (same file in several folders)
• The trash can is on the desktop!

37
A solution to the metaphor extension problem

• Composite metaphors
• Several metaphors working together
• as long as they dont conflict!
• People dont seem to have a problem working with
  multiple mental models at a time
• E.g.
• desktop
• menus
• windows
• scrolls
• cutting and pasting
• publishing and subscribing

38
Some sources of ideas for metaphors

• Human activities
• Agents
• Stage and theater
• Searching, creating, writing etc.
• Machines
• Television and telecommunications
• Carpentry, plumbing and construction
• Office devices like rolodex and keyboards
• Clocks and other representations of time
• 2-D space
• Forms, spreadsheets
• Drafting tables, light tables
• Game boards
• Instrument panels
• Menus
• Maps
• 2.5 -D space
• Desktops and briefcases
• Books and encyclopedias

39
Check list for metaphors

• Does the concept represent the functionality?
• Are the users familiar with the concept?
• Does the concept fit with the system context ?
• Is the concept too complex for my user group ?
• What are the mismatches from the metaphor in
  representative use scenarios/use cases ?
• Identify strategies to manage mismatches ?
• Identify the levels at which the metaphor applies
  - the task, procedural method, appearance level.
• The metaphor is trading off accuracy of the
  mental model for learnability

40
6. Guidelines for Building Conceptual Models

• General
• Keep the conceptual model, and thus the system,
  simple.
• Build conceptual models that draw maximally on
  real-world knowledge.
• Avoid conceptual models that require abstract,
  logical thinking.
• Documentation and on-line help should
  explicitly present the conceptual model.
• Choose names and terminology consistent with the
  conceptual model.
• Design conceptual models that maximize both
  semantic and articulatory directness.
• Where possible, eliminate modes

41
Guidelines for Building Conceptual Models

• Using conceptual models to build mental models
• Take into account mental models users will bring
  with them to the new system.
• Design so as to facilitate the users development
  of an efficient and effective mental model.
• Conceptual models should be oriented to the
  users, not the designers mental model.
• Help the user build a structural model if they
  need to be creative with the system.
• Help the user build a functional model if they
  need to rapidly perform some function.
• Ensure feedback works to correct and build users
  mental models.
• Avoid displaying clutter or irrelevant
  information as this will slow the building of a
  mental model.
• Different but related conceptual models may be
  needed for novices and experts
• Reduce the dependence on the users mental model
  by making the interface as visible as possible
  using elements with appropriate perceived
  affordance and constraints

42
Guidelines for Building Conceptual Models

• Metaphors
• Make departures from any metaphor clear
• Avoid metaphors that if followed literally would
  not allow the power of the computer to be fully
  used.
• When the metaphor is already chosen, trade
  literalism for power by adding magic features.
• Avoid partial metaphors that users may be misled
  to assume are more complete
• When building composite metaphors, make sure the
  component metaphors do not conflict

43
7. Key Points to Review

• Task analysis and conceptual modeling are
  techniques that help us design better user
  interfaces
• We understand users and their needs more deeply
• Task Goal-directed procedure
• with subtasks and actions
• internal task vs. external task
• natural task vs. artificial task
• Goal State the user wants to be in
• implicit goal vs. explicit goal

44
Key Points to Review

• Task analysis Modeling users tasks
• parallel with traditional analysis (e.g. OO)
• Model the tasks
• Determine user classes
• List and prioritize tasks
• Gather goals, preconditions, decompositions,
  mental models, side-effects, breakdowns
• Simplify and improve the models
• Make abstract
• Build conceptual models
• Add back details
• Standardize,
• rearrange,
• reduce need

45
Key Points to Review

• Conceptual model (roadmap to system)
• vs. mental model (map in users brain)
• Human knowledge representation
• Mental models
• Simulations used to test and predict consequences
  of actions
• Cause malfunctions when incorrect
• Contrast with images
• Structural (workings) vs. functional (use)
• Abstract vs. concrete simple vs. detailed
• Typically messy
• The conceptual model helps build good mental
  models

46
Key Points to Review

• Users vs. designers mental models
• Gulfs of execution and evaluation
• Interface directness
• Semantic Say what you want
• Articulatory Relation to physical form
• Perceived affordance and constraints
• Reduce reliance on mental model
• Novices vs. experts
• Declarative vs. automated and procedural
  knowledge
• Bottleneck acquiring initial declarative
  knowledge
• Modes States where actions differ To be avoided
• Metaphors Familiar concepts to represent system
• Difficulties
• Following to literally
• Misleading due to incompleteness
• Being consistent
• Composite metaphors