Chapter 5 : Design Process

 User Classification
 Design Process
 Four Pillars of Design
 The Interaction Design Basic
 Learning Objectives

 Understand and discuss three (3) categories

of users.
 Explain the task analysis in the design
process.
 Understand the four (4) pillars of design.
 Understand the interactivity design process.
 Background
 The design process is highly complex and
difficult.

 There are frameworks in HCI which will

enable the designer to go about the task
of producing a suitable system in a more
structured way.
 Background
 In order to design and effective interface, there
are a basic questions to know the answers such
as :

1. Who is the user?

2. What is the task?
3. What is the environment in which the system
will operate.
Background
Background
 User Classification
 3 categories of user are identified :

1. Novice users
2. Knowledgeable intermittent users
3. Expert/frequent users

 The advantage of classification is that

generalizations can be made about the
users of the systems and their needs.
 User Classification
 Users can be classified in any way that is
appropriate to the system being built (depend
on the nature of the users and the system is
designed for.

 Example : the users might all be novices but

with different backgrounds so that they could
be classified according to whether or not they
had keyboard skills or had used a computer
before.
 User Classification : Novice Users

 Systems to be used by novices require more

feedback and more opportunities for closure.

 So that the novice feels that progress

towards the goal is being made and is not left
for long periods of time wondering if what
has been done so far is right as this might
well cause anxiety.
 User Classification : Novice Users

 Guidelines for the production of systems for novice users:

1. All initiatives should come from the computer.
2. Each required input should be brief.
3. Input procedures should be consistent with user expectation.
4. Special training should be necessary.
5. All system messages should be clear and unequivocal
(undeniable).
6. User decisions should be made from a small set of opinions.
7. User should control the pace of interaction.
8. User decision making should be in response to a specific
request for action.
9. Help (human/machine/manual) should always be available.
10. There should be sufficient feedback.
 User Classification :
Knowledgeable Intermittent Users
 Knowledgeable intermittent users are able to maintain
semantic knowledge of both the task they want to
perform and the computer concepts involved.
 However the use of the system is intermittent - need
consistent structures, good help facilities and good
documentation.
 Documentation and help systems are particularly
important to the intermittent user.
 Documentation and help systems can reduce the
amount of time spent searching for the relevant help.
 User Classification :
Knowledgeable Intermittent Users
 TSSL Model - a model of user activity that includes 4 levels :
Task, Semantics, Syntax and Lexical.

 Task Level : Pertains to the information requirements that have

to be met. E.g. : Create a word processing document.

 Semantic Level : Pertains to the set of objects and operations

through which the computer becomes meaningful to the user.
E.g. : The object “document” can be opened as “New”.

 Syntactic Level : Dictates the rules of combining the semantic

objects and operations into correct instructions. E.g. : Select a
file and then choose “Open”.

 Lexical Level : Describes the way specific computer devices are

used to implement the syntactic level. E.g. : Move a mouse
pointer to the document label and click twice to open it.
 User Classification : Expert Users

 Expert users will be well versed in both the

semantic and syntactic aspects of the computer
system.
 Expert organize their knowledge according to a
higher conceptual structure. They are able to
recall larger amounts of information that novices
can because their knowledge is chunked.
 Expert users of computer systems will typically
look for abbreviated command; for example:
keyboard short cuts.
 Design Process : Definition
 Design is inherently creative and unpredictable. Interactive
design designers must blend through knowledge of
technical feasibility with a mystical esthetic sense of what
attracts users.
 Carroll and Rosson (1985) characterize design in this way:
(i) Design is a process ; it is not a state and it cannot be
adequately represented statically.
(ii) Design process is nonhierarchical; it is neither strictly
bottom-up nor strictly top-down.
(iii) The process is radically transformational.
(iv) Design basically involves the discovery of new goals.
 Design Process

Scenarios
Task Analysis
Plan
Guidelines
Analysis Principles
Interviews
Ethnography Precise
Design specification
Dialog
•What is there notations
Vs Implement
What is wanted and deploy
Prototype
Evaluation
Heuristics
Architectures
Documentation
Help
 Design Process :
Task Analysis

 In order to design a system, it is necessary

first to understand what it is that the system
should be doing.
 The process of understanding the job to be
done by the system is provided by task
analysis.
 This allows the major tasks to be broken
down into its component parts.
 Design Process :
Task Analysis
Answer the enquiry

Write a letter Send a letter

Compose

Word process

Check

Print
Design Process :
Task Analysis
Design Process :
Task Analysis
Design Process :
Task Analysis
Design Process :
Task Analysis
 Design Process :
Task Analysis
 Procedure for task analysis:
Each task is a hierarchy of task and subtask. (tasks can be
broken down to their simplest level of task).

For each task define:

The Inputs to the task

- What information is needed?
- What are the characteristics of the information sources?
- What is the availability of information?
- What possible error might occur?
- Who or what initiates the task?
 Design Process :
Task Analysis
 Procedure for task analysis:

The Outputs from the task

- What is the performance criteria?
- What happens to the output?
- How does the task performer get feedback about task
performance?
 Design Process :
Task Analysis
The transformations
- What is the nature of the decision making?
- What strategies exist for decision making?
- What skills are needed?
- What interruptions are likely to occur and when?

The task composition of the particular job

- How often is the task done and when?
- Does the task depend on any other task?
- What is normal/abnormal work load?
- What control does the task performer have over workload?
The Four Pillars of Design
 The Four Pillars of Design :
First Pillar

 FIRST PILLAR: USER INTERFACE REQUIREMENTS

◦ Soliciting and clearly specifying user requirements is a
major key to success in any development activity
◦ Laying out the user-interface requirements is part of
the overall requirements development and
management process
◦ User interface requirements describe system behavior.

 Ethnographic Observation
◦ Identifying and observing the user community in
action.
 Ethnographic Observation
 Preparation
◦ Understand organization policies and work culture.
◦ Familiarize yourself with the system and its history.
◦ Set initial goals and prepare questions.
◦ Gain access and permission to observe/interview.

 Field Study
◦ Establish rapport with managers and users.
◦ Observe/interview users in their workplace and
collect subjective/objective quantitative/qualitative
data.
◦ Follow any leads that emerge from the visits.
 Ethnographic Observation
 Analysis
◦ Compile the collected data in numerical, textual,
and multimedia databases.
◦ Quantify data and compile statistics.
◦ Reduce and interpret the data.
◦ Refine the goals and the process used.

 Reporting
◦ Consider multiple audiences and goals.
◦ Prepare a report and present the findings.
Participatory Design
 Participatory Design

Controversial

 More user involvement brings:

◦ more accurate information about tasks
◦ more opportunity for users to influence design
decisions
◦ a sense of participation that builds users' ego
investment in successful implementation
◦ potential for increased user acceptance of final
system
 Participatory Design
 On the negative side, extensive user involvement
may:

◦ be more costly
◦ lengthen the implementation period
◦ build antagonism with people not involved or
whose suggestions rejected
◦ force designers to compromise their design to
satisfy incompetent participants
◦ build opposition to implementation
◦ exacerbate personality conflicts between design-
team members and users
◦ show that organizational politics and preferences
of certain individuals are more important than
technical issues
 Scenario Development
Day-in-the-life scenarios

 Characterize what happens when users perform typical

tasks
 Can be acted out as a form of walkthrough
 May be used as basis for videotape
 Useful tools:
◦ table of user communities across top, tasks listed
down the side
◦ table of task sequences
◦ flowchart or transition diagram
 The Four Pillars of Design :
Second Pillar
SECOND PILLAR : GUIDELINES DOCUMENTS AND
PROCESSES
Each project has different needs, but guidelines should be
considered for:

a. Words, icons, and graphics

 Terminology (objects and actions), abbreviations, and
capitalization
 Character set, fonts, font sizes, and styles (bold, italic,
underline)
 Icons, graphics, line thickness, and
 Use of color, backgrounds, highlighting, and blinking
The Four Pillars of Design :
Second Pillar
The Four Pillars of Design :
Second Pillar
 The Four Pillars of Design :
Second Pillar
b. Screen-layout issues

◦ Menu selection, form fill-in, and dialog-box

formats
◦ Wording of prompts, feedback, and error
messages
◦ Justification, white space, and margins
◦ Data entry and display formats for items and
lists
◦ Use and contents of headers and footers
The Four Pillars of Design :
Second Pillar
The Four Pillars of Design :
Second Pillar
The Four Pillars of Design :
Second Pillar
The Four Pillars of Design :
Second Pillar
The Four Pillars of Design :
Second Pillar
 The Four Pillars of Design :
Second Pillar
c. Input and output devices

◦ Keyboard, display, cursor control, and

pointing devices
◦ Audible sounds, voice feedback, touch input,
and other special devices
◦ Response time for a variety of tasks
 The Three Pillars of Design :
Second Pillar
d. Action sequences

◦ Direct-manipulation clicking, dragging,

dropping, and gestures
◦ Command syntax, semantics, and sequences
◦ Error handling and recovery procedures
◦ Programmed function keys
 The Four Pillars of Design :
Second Pillar
e. Training

◦ Online help and tutorials

◦ Training and reference materials
◦ Command syntax, semantics, and sequences
 The Four Pillars of Design :
Third Pillar
THIRD PILLAR : USER INTERFACE SOFTWARE
TOOLS

The difficulty in designing is the customers and users

may not have a clear idea of what the system will look
like.

But, the customers and users can be given a realistic

impression what the final system will look like by:

 Printed version of the proposed displays is helped

for pilot tests
 On-screen display
 Prototype of a menu system
 The Four Pillars of Design :
Third Pillar
These all can be development with simple drawing
or word processing tools.

Graphical environment ; Macromedia Director or

Flash
Development environment; Microsoft Visual Basic,
C++
 The Four Pillars of Design :
Fourth Pillar
FOURTH PILLAR : EXPERT REVIEWS & USABILITY
TESTING

Designers must carry out many small or large tests before

releasing it to customers.

 Expert review methods

 Tests with intended users
 Surveys
 Automated analysis tools

Procedures are depend on goals of the usability study,

number of expected users, the dangers of errors and the
level of investment.
Social Impact Statement for Early Design
Review

Describe the new system and its benefits

 Convey the high level goals of the new system.

 Identify the stakeholders.
 Identify specific benefits
 Social Impact Statement for Early Design
Review

Address concerns and potential barriers

 Anticipate changes in job functions and potential layoffs.
 Address security and privacy issues.
 Discuss accountability and responsibility for system
misuse and failure.
 Avoid potential biases.
 Weigh individual rights vs. societal benefits.
 Assess trade-offs between centralization and
decentralization.
 Preserve democratic principles.
 Ensure diverse access.
 promote simplicity and preserve what works.
 Social Impact Statement for Early Design
Review
Outline the development process

 Present and estimated project schedule.

 Propose process for making decisions.
 Discuss expectations of how stakeholders
will be involved.
 Recognize needs for more staff, training,
and hardware.
 Propose plan for backups of data and
equipment.
 Outline plan for migrating to the new
system.
 The Interaction Design Basic
 Interaction starts getting to know the users and their context:
finding out who they are and what they are like……probably
not like you!
 Design = developing representations
- Representations serve different purposes
- Example: Designing a car ( drawings, clay models, CAD
representations, prototype)
 Scenarios are rich design stories, which can be used and
reused throughout design:
i. helps us see what users will want to do
ii. it also give a step by step walkthrough of users’
interactions including what they see, do and thinking
 A. Navigation Design
 Navigation Design needs to be consider during the
design process by arranging the structure of an
application and its actual use; questions to be
considered:
(i) who is going to use the application?
(ii) how do they think about it?
(iii) what will they do with it?

 Individual screens or layout of devices will have their

own structure which are divided into two:
(i) local structure
- looking from one screen to page out
(ii) global structure
- structure of site, movement between screens
 A. Navigation Design

 Moving through the levels of interactivity in a project

requires a clear navigation scheme.

 Navigation is the process by which a user explores all

the levels of interactivity, moving forward, backward
and through the content and interface screens.

 A good navigation design will clarify the content and

interactive structure, enhance the document’s
usability and accommodate the user’s needs.
 A. Navigation Design
 Good navigation design clarifies the content and
interactive structure by:
 Quickly orienting the user in the first screens to
what can be seen, done and learned from the
product.
 Establish which pieces of content are more
important than other pieces of content by their
relative positions within the levels of interactivity.
 Letting the user knows where they are at in the
document at all times.
 Letting the user knows where they can go from
where they are at.
A. Navigation Design
A. Navigation Design
A. Navigation Design
 B. Screen Design

 Interactive design is the meaningful arrangement

of graphics, text, video, photos, illustrations,
sound, animation, 3D imagery, virtual reality and
other media in the interactive document.
 A simple interactive design could be an all-text
web page with a few links to other web pages.
 A more complex interactive design could be a
multimedia document that uses typography,
graphics, sound and video with lots of interactive
controls like buttons and links.
 B. Screen Design
 The best interactive designs:
◦ Present the message clearly
◦ Have an easy to understand and navigate
interface (interface ~ the visual layout of
content and interactive controls that lets the
user to interact with the program)
◦ Function well in the audience’s playback
technology (playback technology ~ the
hardware and software used to play the
interactive document)
 B. Screen Design

 Layout is the part of interface design that is

focused primarily on making everything on
screen balanced, aesthetically pleasing and easy
to read.
 Layout involves arranging all type of images,
media, texts and interactive controls on the
computer in a visually pleasing and functional
manner.
 Layout is also concerned with all screens in the
document
B. Screen Design
B. Screen Design
 D. Display Design
 Effective display designs must provide all the
necessary data in the proper sequence to carry out
the task.

 Mullet and Sano's categories of design principles:

◦ Elegance and Simplicity: unity, refinement and
fitness
◦ Scale, Contrast, and Proportion: clarity, harmony,
activity, and restraint
◦ Organization and Visual Structure: grouping,
hierarchy, relationship, and balance
 D. Display Design
◦ Module and Program: focus, flexibility, and
consistent application.
◦ Image and Representation: immediacy,
generality, cohesiveness, and characterization .
◦ Style: distinctiveness, integrity,
comprehensiveness, and appropriateness .
D. Display Design
 D. Display Design
 Field layout

◦ Blank spaces and separate lines can distinguish

fields.

◦ Names in chronological order, alignment of dates,

familiar date separators.

◦ Labels are helpful for all but frequent users.

◦ Distinguish labels from data with case, boldfacing,

etc.
 D. Display Design
 Field layout

◦ If boxes are available they can be used to make a

more appealing display, but they consume screen
space.

◦ Specify the date format for international audiences.

◦ Other coding categories – background shading, color,

and graphic icons
 D. Display Design
 Empirical results
◦ structured form superior to narrative form
◦ improving data labels, clustering related information,
using appropriate indentation and underlining, aligning
numeric values, and eliminating extraneous characters
improves performance
◦ performance times improve with fewer, denser displays
for expert users
◦ screen contents should contain only task-relevant
information
◦ consistent location, structure, and terminology across
displays important
◦ sequences of displays should be similar throughout the
system for similar tasks
 D. Display Design

– sequences of displays should be similar throughout the system

for similar tasks
 D. Display Design

 Display-complexity metrics
◦ Although knowledge of the users’ tasks and abilities
is key to designing effective screen displays,
objective and automatable metrics of screen
complexity are attractive aids
 Tullis (1997) developed four task-
independent metrics for alphanumeric
displays:
◦ Overall Density
◦ Local Density
◦ Grouping
◦ Layout Complexity
 D. Display Design

 Sears (1993) developed a task-dependent metric

called layout appropriateness to assess whether
the spatial layout is in harmony with the users’
tasks
 E. Window Design
 Introduction

◦ Users need to consult multiple sources rapidly

◦ Must minimally disrupt user's task
◦ With large displays, eye-head movement and visibility
are problems
◦ With small displays, windows too small to be effective
◦ Need to offer users sufficient information and flexibility to
accomplish task, while reducing window housekeeping
actions, distracting clutter, eye-head movement
 opening, closing, moving, changing size
 time spent manipulating windows instead of on task
 E. Window Design
◦ Can apply direct-manipulation strategy to windows
◦ Rooms - a form of window macro that enables users to
specify actions on several windows at once
 E. Window Design
 Coordinating multiple windows

◦ Designers may break through to the next generation of

window managers by developing coordinate windows, in
which windows appear, change contents, and close as a
direct result of user actions in the task domain
◦ Such sequences of actions can be established by
designers, or by users with end-user programming tools
◦ A careful study of user tasks can lead to task-specific
coordinations based on sequences of actions
 E. Window Design
 Coordinating multiple windows

◦ Important coordinations:
 Synchronized scrolling
 Hierarchical browsing
 Opening/closing of dependent windows
 Saving/opening of window state
 E. Window Design

 Image browsing
◦ A two-dimensional cousin of hierarchical
browsing
 Work with large images
 Overview in one window (context), detail in
another (focus)
 Field of view box in the overview
 Panning in the detail view, changes the field of
view box
 Matched aspect ratios between field of view box
and the detail view
• Zoom factors: 5-30
– Larger suggests
an intermediate
view is needed
• Semantic zooming
• Side by side
placement, versus
fisheye view
 Window design

Hierarchical browsing has been integrated into Windows Explorer to allow users
to browse hierarchical directories, into Outlook to enable browsing of folders of e-mails
and into many other applications. Hierarchical browsing in the XperCASE tool example here
(now called EasyCASE with EasyCODE).

The specification is on the left. As users click on components (DoubleAttrWebAdapter),

the detail view appears on the right in a Nassi-Shneiderman chart.
 E. Window Design
 Image browsing (cont.)

◦ The design of image browsers should be

governed by the users’ tasks, which can be
classified as follows:
 Image generation
 Open-ended exploration
 Diagnostics
 Navigation
 Monitoring
 E. Window Design
 Personal role management

◦ A role centered design emphasizes the users’

task rather than the applications and
documents
 Vision statement
 Set of people
 Task hierarchy
 Schedule
 Set of documents
 E. Window Design
 Personal role management (cont.)

◦ The requirements for personal role management include:

 Support a unified framework for information

organization according to users' roles
 Provide a visual, spatial layout that matches tasks
 Support multi-window actions for fast arrangement of
information
 E. Window Design
 Personal role management (cont.)

 Support information access with partial knowledge of

its nominal, spatial, temporal, and visual attributes and
relationships to other pieces of information.
 Allow fast switching and resumption among roles
 Free user's cognitive resources to work on task domain
actions rather than interface domain actions.
 Use screen space efficiently and productively for tasks.
 F. Web Page Design

The top ten mistakes of web-based presentation of information (Tullis)

 F. Web Page Design
• Numerous guidelines for web designers are available on the
Web and can be incorporated into your design process to
ensure consistency and adherence to emerging standards.
• Examples include, but are not limited to:
• The Java Look and Feel Design Guidelines, Second Edition (Sun, 2001)
• Sun’s Web Design Guide (Sun, 2008)
• The National Cancer Institute’s Research-Based Web Design & Usability
Guidelines (NCI, 2008)
• The World Wide Web Consortium’s Web Accessibility Initiative (WAI, 2008)
• The Web Style Guide (Lynch and Horton, 2008)
• There are numerous web sites that address web design, some
of which were created as companions to relevant books:
• Web 2.0 How-To Design Guide (Hunt, 2008)
• Web Bloopers (Johnson, 2003)
• KillerSites.com (Siegel, 1997)
 F. Web Page Design

Mash-ups are web pages or applications that integrate complementary elements

from two or more sources (for example, Craigslist and Google Maps™
 G. Interactive Control

 An important part of designing an interface is the

creation of clear and unmistakable interactive
controls.
 Interactive controls such as hyperlinks, hypertext,
buttons, image maps and hotspots add functionality
to the interface and are a prominent feature of your
navigation scheme.
 The controls are the only way that users can activate
interactive features.
 The design of interactive controls is critical to the
success or failure of your project.
G. Interactive Control
G. Interactive Control
 Nonanthropomorphic design
 Concerns:
◦ attributions of intelligence, autonomy, free will, etc can
deceive, confuse, and mislead users
◦ important to clarify differences between people and
computers
◦ users and designers must accept responsibility for
misuse of computers
◦ although attractive to some people, an anthropomorphic
interface can produce anxiety in others
 computers can make people feel dumb
 computers should be transparent and support
concentrating on the task in hand
 Nonanthropomorphic design
◦ mature technology should avoid Mumford's obstacle of
animism
◦ anthropomorphic interfaces may distract users
 Microsoft’s ill-fated Clippet character was intended to
provide help suggestions
◦ Amused some, but annoyed many
◦ Disruptive interference
◦ Lacked appropriate emotional expressions
 Nonanthropomorphic design

 Advocates of anthropomorphic interfaces suggest that they

may be most useful as teachers, salespeople, therapists, or
entertainment figures.

 An alternative design is to present a human author of a

package through prerecorded audio or video.
 Nonanthropomorphic design

 Guidelines:

◦ Be cautious in presenting computers as people.

◦ Design comprehensible, predictable, and controllable
interfaces.
◦ Use appropriate humans for introductions or guides.
◦ Use cartoon characters in games or children’s software, but
usually not elsewhere
◦ Provide user-centered overviews for orientation and closure.
◦ Do not use 'I' pronouns when the computer responds to
human actions.
◦ Use "you" to guide users, or just state facts.