Sketching a Conceptual Design from User Experiences and a Task Model
Mapping User Experiences and UI requirements into Design is Hard!
Translating user requirements, task analysis, scenario, and personas into a design
(screens, windows, etc.) is not a simple matter of establishing correspondences between
user interface elements and abstract design model.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 1
Sketching a Conceptual Design from User Experiences and a Task Model
Symbols selection: tabbed dialog box
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 2
Sketching a Conceptual Design from User Experiences and a Task Model
Symbols selection: combo box
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 3
Sketching a Conceptual Design from User Experiences and a Task Model
Symbols selection: magnifier with selector and spin-list selector
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 4
Sketching a Conceptual Design from User Experiences and a Task Model
Options selection: tabbed dialog box
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 5
Sketching a Conceptual Design from User Experiences and a Task Model
Options selection: tree browser
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 6
Sketching a Conceptual Design from User Experiences and a Task Model
Options selection: menu
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 7
Sketching a Conceptual Design from User Experiences and a Task Model
Principles for mapping design models
-
Different visual design are possible for the same model
The best ones is those that users like and approve (testing is required)
Patterns are potential solutions
The worst solutions is those that developers image good and try to impose
Developers day-to-day practices, if not empirically validated, are not solutions
Suggestions from user are good solutions
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 8
Sketching a Conceptual Design from User Experiences and a Task Model
Iterative Design and Prototyping
Outlines
1- Iterative Design
2- Prototyping Principles Approach, Techniques and Tools
3- Benefits of Prototyping
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 9
Sketching a Conceptual Design from User Experiences and a Task Model
Iterative Design
- Is the process of building a concrete and visible design solution staring from a usercentered requirements description of the system
- Prototypes can be used in this process to validate requirements with end-users, gather
further information, estimate the design difficulties and develop solutions, etc.
A prototype:
- Simulates the structure, functionality, or operations of the system
- Represents a model of the product to be built
- May or may not implement any real functionality
Different kinds of prototyping:
- Low-fidelity versus high-fidelity prototypes
- Horizontal versus vertical prototyping
- Prototyping techniques range from paper to computer-based including video,
simulations, etc.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 10
Sketching a Conceptual Design from User Experiences and a Task Model
Low versus high-fidelity prototypes
- Fidelity refers to the level of detail
- High fidelity: prototypes look like the final product
- Low-fidelity: prototype with many details missing
Low-fidelity prototypes are:
Cheap, rapid versions of the final system
- limited functionality and/or interactivity
Depict concepts, designs, alternatives, and screen layouts rather than a model user
interaction with a system
- e.g. storyboard presentations, proof-of-concept prototypes
Demonstrate the general ‘feel and look’ of the UI
- their purpose is not to show in detail how the application operates
Are often used early in the design cycle
- to show general conceptual approaches without investing too much time or effort
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 11
Sketching a Conceptual Design from User Experiences and a Task Model
High-fidelity prototypes are:
Fully interactive
- Users can enter data into entry fields, respond to messages, select icons to open
windows, and interact with the UI
Represent the core functionality of the product’s UI A
Typically built with 4GLs such as Smalltalk or Visual Basic
- Can simulate much of the functionality of the final system
Trade off speed for accuracy
- Not as quick and easy to create as low-fidelity prototypes
- Faithfully represent the UI to be implemented in the product
- Can be almost identical in appearance to the actual product
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 12
Sketching a Conceptual Design from User Experiences and a Task Model
Low-Fidelity
Prototyping
-
Medium-Fidelity
Prototyping
High-Fidelity
Prototyping
Advantages
Lower development cost
Evaluate different design concepts
Useful communication vehicle
Addresses screen layout issues
Useful for identifying market
requirements
Proof of concept
Limitations
- Limited error checking
- Poor detailed specification
for coding
- Limited usefulness after
requirements established
- Limitations in usability
testing
- Navigational limitations
A compromise between high and low-fidelity prototypes
Establish your own!
-
High degree of functionality
- More expensive to develop
Fully interactive
- Time consuming to build
User driven
Inefficient for proof of
Defines
navigational
scheme
concept designs
Useful for exploration and testing - Not effective tool for
- Look and feel of final product
requirements gathering
- Serves as a living specification
- Marketing and sales tool
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 13
Sketching a Conceptual Design from User Experiences and a Task Model
Approaches for limiting prototype functionality
Vertical
Horizontal
Principles
- Contains in-depth functionality for only a few selected features, but not
the entire system
E.g. In an airline flight information system, users can access a database
with some real data from the information providers, but not the entire
data
- Lower performance than the final system (e.g. trial system with a limited
number of simultaneous users)
- May be non-networked, not fully scalable,
 Includes the entire user interface with no underlying functionality, a
simulation; no real work can be performed
E.g. Users can execute all navigation and search commands, but without
retrieving any real information as a result of their commands
- Reduced level of functionality, but all of the features present
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 14
Sketching a Conceptual Design from User Experiences and a Task Model
Approaches for limiting prototype functionality: scenario
-
Scripts of particular fixed uses of the system; no deviation allowed
Both the level of functionality and the number of features are reduced
Very cheap to design and implement
But, only able to simulate the UI as long as the test user follows a previously plan test
Small, can be changed frequently and re-tested
Reduced level of functionality and reduced number of features
Can be developed using one or several task scenarios
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 15
Sketching a Conceptual Design from User Experiences and a Task Model
Functionality
Scenario
Details
Horizontal
Prototype
Vertical Prototype
Full System
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 16
Sketching a Conceptual Design from User Experiences and a Task Model
Techniques for prototyping
Low-Fidelity Prototyping Techniques
- Sketches and paper prototyping
- Pictive, with pre-made interface components on paper
Medium-Fidelity Prototyping Techniques
-
Drawing produced on computer
Storyboarding
User interface builders in testing mode
Slides shows and simulations
Wizard of Oz
High-Fidelity Prototyping Techniques
- Computer-based prototyping: Visual Basic, RAD, HTML Editing Environments
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 17
Sketching a Conceptual Design from User Experiences and a Task Model
Paper prototyping
[Rettig, M (1994) Prototyping for tiny fingers. Communications of the ACM, April, Vol.37,
No.4.]
- This technique features the use of simple materials and equipment (paper and pencil) in
order to create a paper-based simulation of an interface or system.
- Paper prototypes provide a valuable and cost-effective means to evaluate and iterate
design options before a team gets committed to one implementation.
- Interface elements such as menus, windows, dialogues and icons can be sketched on
paper or created in advance using card, acetate, pens etc.
- When the paper prototype has been prepared a member of the design team sits before
a user and ‘plays the computer’ by moving interface elements around in response to the
user’s actions.
- The user makes selections and activates interface elements by using their finger as a
mouse and writing ‘typed’ input. A further person facilitates the session by providing task
instructions and encouraging the user to express their thoughts and impressions.
- Other observers may make notes or a video record may be created.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 18
Sketching a Conceptual Design from User Experiences and a Task Model
Storyboarding
[Androile S (1991) Storyboard Prototyping. QED Information Sciences, Wellesley, MA.]
- Storyboards are sequences of images, which demonstrate the relationship between
individual screens and actions within a system.
- A typical storyboard will contain a number of images depicting features such as menus,
dialogue boxes and windows.
- The formation of these screen representations into a sequence conveys further
information regarding the structure, functionality and navigation options available within
an intended system.
- The storyboard can be shown to colleagues in a design team as well as potential users,
which allows others to visualize the composition and scope of an intended interface and
offer critical feedback.
- This method can be used early in the design cycle where the use of storyboards
supports the exploration of design possibilities and the early verification of user
requirements.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 19
Sketching a Conceptual Design from User Experiences and a Task Model
Storyboard : Word Main Window, Help System, and Open File Dialog Box
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 20
Sketching a Conceptual Design from User Experiences and a Task Model
Video Prototyping
[Vertelney, L (1989) Using video to prototype user interfaces. SIGCHI Bulletin, V21 (2), pp
57-61.]
- This method allows designers to create a video-based simulation of interface
functionality using simple materials (paper, acetates) and equipment (camcorder).
- Interface elements are created using paper, pens, acetates etc. For example a start
state for the interface is recorded using a standard camcorder.
- The movements of a mouse pointer over menus may then be simulated by stopping and
starting the camcorder as interfaces elements are moved, taken away and added.
- Users do not directly interact with the prototype although they can view and comment
on the completed video-based simulation.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 21
Sketching a Conceptual Design from User Experiences and a Task Model
Wizard of Oz
[Maudsley, Greenberg and Mander (1993) Prototyping an intelligent agent through Wizard
of Oz. Interchi’93 Conference Proceedings.]
- A method of testing a system that does not exist
- This approach involves a user interacting with a computer system which is actually
operated by a hidden developer - referred to as the "wizard’"
- A person hidden to the user provides feedback
- During this process the user is led to believe that they are interacting directly with the
system.
- This form of prototyping is beneficial early on in the design cycle and provides a means
of studying a user’s expectations and requirements.
- The approach is particularly suited to exploring design possibilities in systems, which are
demanding to implement.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 22
Sketching a Conceptual Design from User Experiences and a Task Model
Software-Based Prototyping
[Isensee, S, and J Rudd (1966) The Art of Rapid Prototyping. International Thomson
Computer Press, London.]
- This method is concerned with developing different proposed concepts through software
or hardware prototypes, and evaluating them.
- Rapid prototyping is described as a computer-based method, which aims to reduce the
iterative development cycle.
- Interactive prototypes are developed which can be quickly replaced or changed in line
with design feedback.
- This feedback may be derived from colleagues or from the experiences of users as they
work with the prototype to accomplish set tasks.
- Within software engineering circles the method is closely associated with user interface
management systems and various design support tools. The latter tools offer the
designer libraries of procedures and graphical interface elements for defining the
software’s logical structure and ‘look-and-feel’.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 23
Sketching a Conceptual Design from User Experiences and a Task Model
Rapid Application Development and Joint Application Design Workshops
[Andrews, D.C. (1991) JAD: A crucial dimension for rapid applications development. Journal
of systems management, March 23-31.]
RAD Workshop
- RAD Workshops are set up in which 8-20 individuals make design decisions through the
consensus building leadership of a trained, unbiased facilitator who is not a stakeholder
in the future system.
- A number of different formats for the method are offered. One variation produces formal
outputs such as entity-relationship models, which can be input directly into the system
specification.
JAD Workshop
- Is a RAD specific variation developed within IBM? Here users and information systems
professionals are drawn together to design a system jointly in a facilitated group session.
- Six roles are defined including session leader, user representative, specialist, analyst, an
information systems representative and an executive sponsor.
- A 20% to 60% increase in productivity over traditional design methods is claimed.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 24
Sketching a Conceptual Design from User Experiences and a Task Model
Prototyping Process
1-
Developing Paper or Computer-Based Prototypes
- Each prototype describes design ideas or product concepts with a focus on usability
2-
Testing Each Prototype in a Testing Lab with Potential End-Users
3-
Improving the Prototype by Using the Usabulity Testing Results
- Usability Results are analyzed, prioritized and Translated in Design Modifications
4-
Once the results are satisfactory, the prototype is stabilized and tested.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 25
Sketching a Conceptual Design from User Experiences and a Task Model
Benefits of Iterative Design and Prototyping
12345678-
Get feedback on our design faster
Decrease the cost of development and maintenance
Experiment with alternative designs
Fix usability problems before code is written
Keep the design centered on the user
Improves quality and speed of system specification and design.
Is integrated with current structured methods and CASE tools.
Promotes co-operation, understanding and teamwork among the various user groups
and development staff.
9- Can be used at various levels of detail, including concept, requirements, specification
and design.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 26
Sketching a Conceptual Design from User Experiences and a Task Model
Benefits of Iterative Design and Prototyping
Reported by Catani, M.B., And Biers, D.W. (1998). Usability Evaluation and Prototype
Fidelity: Users and Usability Professionals. Proceedings of the Human Factors and
Ergonomic Society, 42nd Annual Meeting.
- Cantani and Biers (1998) investigated the effect of prototype fidelity on the information
obtained from human performance test
- Three levels of prototypes:
- 30 university students performed 4 typical library search tasks using one of the
prototypes
- Paper - low fidelity
- Screen shots (storyboards) - medium fidelity
- Interactive Visual Basic - high fidelity
- Total of 99 usability problems were uncovered
- No significant difference in the number and severity of problems identified, and a high
degree of commonality in the specific problems uncovered by users using the 3
prototypes
Discussion about the Power of Prototyping: The Perils of Prototyping Tool by Alan Cooper
http://www.cooper.com/articles/vbpj_perils_of_prototyping.html
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 27
Sketching a Conceptual Design from User Experiences and a Task Model
Screens and GUI Elements Design
Outlines
1- WIMP Model (WIMP= Windows, Icons, Menus, Pointers)
2- Screens Design Principles
3- Grid as screen design tool
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 28
Sketching a Conceptual Design from User Experiences and a Task Model
WIMP Model = Windows, Icons, Menus, Pointers User Interface
 Programmers tend to think primarily in terms of windows and dialogue boxes, but
modern GUIs provide a large range of choice to implement the design solutions:
Windows
 Primary windows, secondary windows, utility windows (a window whose contents affect
an active primary window), and Plain windows (no title bar or window controls) provide
the top-level containers for your application.
Containers: panels and frames
 A panel is a container for organizing the contents of a window or dialog box: panel,
scroll panel, tabbed panel (tab cards), toolbar, group boxes and headings
 An internal frame is a container used in MDI (Multi-Document Interface) applications to
create windows that users cannot drag outside of the desktop panel
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 29
Sketching a Conceptual Design from User Experiences and a Task Model
Icons
 Graphic representation of objects such as documents, storage media, folders,
applications, and the Trash. Icons look like their real-world counterparts whenever
possible.
Controls
- Command Button, Toggle Button (buttons with two States e.g. On/Off), Checkbox, Radio
Button, Combo Box, Menu, Pop-Up Menus (Contextual Menu), Toolbar
Dialog Boxes
Text Components
 Uneditable information displays: Label, Progress Bar, Lists
 Editable displays: password field, text window, colors selector, files explorer
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 30
Sketching a Conceptual Design from User Experiences and a Task Model
Behaviors
 Mouse operations, drag-and-drop operations, Keyboard operations including the use of
mnemonics, keyboard shortcuts
Colors
- Language including conventions for names in buttons, labels for checkboxes and radio
buttons, messages in dialog boxes, online help systems, and manuals
Advanced controls
- Tables and Grids, Trees, Graphs, OLE/ActiveX Controls
- Objects Explorer (Files, Color, Settings, etc.)
- Animation: Progress and Delay Indication Bars, System Status Animation, Slides (to let
the user enter a numeric value bounded by a minimum and maximum value)
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 31
Sketching a Conceptual Design from User Experiences and a Task Model
Models for focal interaction context
- The focal interaction context is the primary point (screen) of interaction between the
user and the system
- Typically, the focal interaction supports the main user tasks (not help, preferences, etc.)
- Different models are possible to implement the focal interaction context:
1- Full-screen
- Outdated, but full screen model maximizes available screen real estate and minimizes
windows management overhead
- For a telephone order-entry, where the operator is dealing with only one customer and
using one application, the full screen operation is relevant
2- Single-document interface (SDI)
 E.g. Word Pad
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 32
Sketching a Conceptual Design from User Experiences and a Task Model
3- Multiple-document interface (MDI)
 E.g. most popular windows applications
4- Multiplex
 Netscape Mail
5- Tabbed notebooks or workbooks
 E.g. Clip Art
 It is an alternative solution for MDI
6- Dialog boxes and tabbed boxes
 E.g. preference settings
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 33
Sketching a Conceptual Design from User Experiences and a Task Model
Screens design
 Space is the most effective element you can use to provide support for user in their
cognitive processing of visual displays.
 Spatial relationships are perceived pre-cognitively - that is, without conscious effort
 They do not have to be decoded and interpreted, as do color cues, typographical cues,
and so on.
 Alignment and proximity are two of the most fundamental and useful spatial techniques
available to visual designers
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 34
Sketching a Conceptual Design from User Experiences and a Task Model
Alignment
 Human beings perceive items that are aligned vertically and/or horizontally to be more
organized than those that are not
 People process, learn and remember organized information better than unorganized
information.
Proximity
 Elements that are close together in a visual display will be assumed to be related.
Elements that are far apart will not be seen as related to each other.
 When elements are not clearly differentiated by proximity, your user has to group them
consciously by focusing on them, taking in their meaning, and deciding which ones go
together
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 35
Sketching a Conceptual Design from User Experiences and a Task Model
Poor alignment creates too many perceptual "edges" in a display
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 36
Sketching a Conceptual Design from User Experiences and a Task Model
Better alignment results in fewer features to be processed
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 37
Sketching a Conceptual Design from User Experiences and a Task Model
Equal division of space results in poor proximity - what goes with what?
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 38
Sketching a Conceptual Design from User Experiences and a Task Model
Use more or less space between elements to indicate which ones go together by
virtue of their relative proximity
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 39
Sketching a Conceptual Design from User Experiences and a Task Model
Contrast
Contrast exists in many forms, the primary being:
 size
 color
 shape
Use contrast to make user interface elements more or less dominant in the display,
influencing the order in which they are processed and their perceived importance
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 40
Sketching a Conceptual Design from User Experiences and a Task Model
Insufficient contrast leads designers to apply more and more treatments to
make important information stand out
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 41
Sketching a Conceptual Design from User Experiences and a Task Model
Use contrast that is sufficiently strong to allow simple, easily-perceptible
treatments
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 42
Sketching a Conceptual Design from User Experiences and a Task Model
Relationships between visual components

Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 43
Sketching a Conceptual Design from User Experiences and a Task Model
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 44
Sketching a Conceptual Design from User Experiences and a Task Model
Grids are an essential tool for screens design
Horizontal and vertical lines to locate window components
 aligns related components
Grids facilitates the organization of screens




contrast to bring out dominant elements
grouping of elements by proximity
show organizational structure
alignment
Grids improve the consistency
 location
 format
 repetition
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 45
Sketching a Conceptual Design from User Experiences and a Task Model
Standard
icon set
Message text in
Arial 14, left
adjusted
How to use grid?
?
No
Ok
Do you really want
to delete the file
“myfile.doc” from
the folder “junk”?
No
!
Ok
Cannot move the
file “myfile.doc” to
the folder “junk”
because the disc is
full.
Ok
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 46
Sketching a Conceptual Design from User Experiences and a Task Model
Two-level Hierarchy
•indentation
•contrast
Alignment connects
visual elements in a
sequence
Logic of organizational
flow
Grouping
by white
space
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 47
Sketching a Conceptual Design from User Experiences and a Task Model
Colors Design
Outlines
-
Color is not Art
Color Palette is so complicated!
Use colors only where they are really needed
Use Color to Aid Scanning
Use Color as a Code
Use Color to Draw Attention
Use Color to Show Relationship
Avoid Contrast Deficiency
Accommodate Colorblind Users
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 48
Sketching a Conceptual Design from User Experiences and a Task Model
Colors is not Art and not a distracting users
A funny toolbar in Win Cim 2.0 (CompuServe)
Colors can enhance the affordance of buttons representing various ways of sending a file:
send, send without carriage returns, send with quotes, send with CIS quotes
Colors are not always required - Word Professional Toolbar
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 49
Sketching a Conceptual Design from User Experiences and a Task Model
Colors can highlight the difference:
Unsuccessful operation in Easy CD Creator
Operation Completed
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 50
Sketching a Conceptual Design from User Experiences and a Task Model
Foundations for Colors Design
1. When properly applied, color can greatly improve the user interface
- Improving the esthetic quality of the interface
- Guiding the user's attention to points of interest.
2. The improper use of color on the other hand, can seriously impair the user's ability to
interact with the program.
3. Research has shown that over 80% of visual information is related to color.
 While people have many and diverse preferences for color, specific colors produce
specific psychological associations.
 Target your audience by using color to elicit these specific associations.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 51
Sketching a Conceptual Design from User Experiences and a Task Model
We need colors, but not so much
 What's worse, every display phosphor has different characteristics (a color looks
different on different displays).
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 52
Sketching a Conceptual Design from User Experiences and a Task Model
Use colors only where they are really needed
 According to Signal Detection theory, lots of different colors and highlighting make the
screen so noisy that you can't find anything,
 No single method will reliably draw attention, except blinking which is 'loudest'.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 53
Sketching a Conceptual Design from User Experiences and a Task Model
Use Color can help user scanning the screen
- Use no more than six different color codes on a screen.
- Color can speed search of the screen. If one color is used, the search is very fast. Using
more colors slows that search. More than six colors radically slows search.
- If the user must pick out the fields that are in error, making them all one color will speed
the search.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 54
Sketching a Conceptual Design from User Experiences and a Task Model
Use Color as a code language
- Color can have meaning; in fact, color already has meaning you can use
- Follow the population stereotypes
Sample codes
Common associations
- Fields in error are: RED
- The husband's data are: BLUE
- The wife's data are: PINK
-
RED = stop/danger
BLUE = boy
PINK = girl
YELLOW = caution
GREEN = rest/go
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 55
Sketching a Conceptual Design from User Experiences and a Task Model
Use Color to draw attention
- Use bright colors for an item you want the user to notice now, (i.e., use red as
background for required fields!)
- If colors are not used in many places on the screen, a colored message will get the
user's attention.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 56
Sketching a Conceptual Design from User Experiences and a Task Model
Use color to show relationship (mapping)
- Items of the same color will tend to be perceptually grouped together.
- If an error message and a field in error are both yellow (and there are no other yellow
colored fields), most people will infer that the yellow message refers to the yellow field.
- In the example below, it's easier for the user to tell the equation describing each graph
because the graphs are colored, as well as formatted differently.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 57
Sketching a Conceptual Design from User Experiences and a Task Model
Avoid contrast deficiency
- Example = Do not use yellow on white. Do not use pure red or blue on black.
- Yellow appears bright, while blue and red appear dark. Those combinations don't give
enough contrast between letters and background – you need a 90% contrast difference
between foreground and background in order to read text clearly. Therefore, this doesn't
work.
- A highly saturated (pure) red error message may not be legible on a dark background.
Even if legible, it won't stand out.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 58
Sketching a Conceptual Design from User Experiences and a Task Model
Avoid chromatic aberration
- Do not create text in pure red or blue.
- Due to chromatic aberration, red and blue do not focus well on the retina (they look
fuzzy).
- In submarines, red lights were used to keep sailors dark-adapted, but then the sailors
had trouble reading the dials.
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 59
Sketching a Conceptual Design from User Experiences and a Task Model
Avoid chromatic aberration
- Do not show pure red and blue together
- Red and blue focus improperly in opposite directions. When juxtaposed, extreme
fuzziness and even a 3-D illusion can occur:
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 60
Sketching a Conceptual Design from User Experiences and a Task Model
Accommodate colorblind users
- Do not make users rely solely on color to use the system.
o 9% of men are color weak
o 2% of women are color weak
o Everyone is colorblind in low light
- Unless all users have been screened for color weakness (blindness), you can't depend on
the user's ability to see colors
- If red vs. green is the only way to tell which fields are in error, about 6% of all users will
have trouble telling the difference
- In example below, bullet color indicates the type of page
- The designer relied on color-coding exclusively (not good!).
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 61
Sketching a Conceptual Design from User Experiences and a Task Model
Accommodate colorblind users
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 62
Sketching a Conceptual Design from User Experiences and a Task Model
Ahmed Seffah – Computer Science Department - Concordia University - 03/08/16 - Page 63