1

UNIT 4
User Interface Design
 2

Golden Rules

 Placethe user in control

 Reduce the user’s memory load
 Make the interface consistent
 3

Place the User in Control

• Define interaction modes in a way that does not force a user
into unnecessary or undesired actions.
• Provide for flexible interaction.
• Allow user interaction to be interruptible and undoable.
• Hide technical internals from the casual user.
• Design for direct interaction with objects that appear on the
screen.
 4

Reduce the User’s Memory Load

• Reduce demand on short-term memory.
• Establish meaningful defaults.
• Define shortcuts that are intuitive.
• The visual layout of the interface should be based on a real
world metaphor.
• Disclose information in a progressive fashion.
 5

Make the Interface Consistent

• Allow the user to put the current task into a

meaningful context.
• Maintain consistency across a family of applications.
• If past interactive models have created user
expectations, do not make changes unless there is a
compelling reason to do so.
User interface analysis and design
 The overall process for analyzing and designing a user interface
begins with the creation of different models of system function
 Tools are used to prototype and ultimately implement the design
model,and the result is evaluated by end users for quality.
 7

Interface analysis and Design Models

 User model — a profile of all end users of the system
 Design model — a design realization of the user model
 Mental model (system perception) — the user’s mental image of what the
interface is
 Implementation model — the interface “look and feel” coupled with
supporting information that describe interface syntax and semantics
 In addition, users can be categorized as:
 Novices
 Knowledgeable , intermittent users
 Knowledgeable , frequent users
The Process:
 The analysis and design process for user interface is iterative and can
be represented using spiral model.
 The user interface analysis and design process begins at the interior of
the spiral and encompasses four distinct framework activities:
 Interface analysis and modeling
 Interface design
 Interface construction
 Interface validation
 Interface analysis:
 Focuses on the profile of the users who will interact with the system.
 Once general requirements have been defined , a more detailed task
analysis is conducted.
 Those tasks that the user performs to accomplish the goals of the
system are identified, described and elaborated.
 Interface design:
 Define a set of interface objects and actions that enable a user to
perform all defined tasks in a manner that meets every usability goal
defined for the system
 10

Interface Design
Interface constructions:
 Normally begins with the creation of a prototype that enables usage scenario
to be evaluated.
 As the iterative design process continues , a user interface tool kit may be
used to complete the construction of the interface.
Interface validation:
 Focuses on
 The ability of the interface to implement every user task correctly.
 The degree to which the interface is easy to use and easy to learn.
 The users acceptance of the interface as a useful tool in their work.
 12

Interface Analysis

 Interface analysis means understanding

 (1) the people (end-users) who will interact with the system
through the interface;
 (2) the tasks that end-users must perform to do their work,
 (3) the content that is presented as part of the interface
 (4) the environment in which these tasks will be conducted.
 13

User Analysis
 Are users trained professionals, technician, clerical, or manufacturing workers?
 What level of formal education does the average user have?
 Are the users capable of learning from written materials or have they expressed a desire for classroom
training?
 Are users expert typists or keyboard phobic?
 What is the age range of the user community?
 Will the users be represented predominately by one gender?
 How are users compensated for the work they perform?
 Do users work normal office hours or do they work until the job is done?
 Is the software to be an integral part of the work users do or will it be used only occasionally?
 What is the primary spoken language among users?
 What are the consequences if a user makes a mistake using the system?
 Are users experts in the subject matter that is addressed by the system?
 Do users want to know about the technology the sits behind the interface?
 14

Task Analysis and Modeling

 Answers the following questions …
 What work will the user perform in specific circumstances?
 What tasks and subtasks will be performed as the user does the work?
 What specific problem domain objects will the user manipulate as work is
performed?
 What is the sequence of work tasks—the workflow?
 What is the hierarchy of tasks?
 Use-cases define basic interaction
 Task elaboration refines interactive tasks
 Object elaboration identifies interface objects (classes)
 Workflow analysis defines how a work process is completed when several people (and
roles) are involved
 15

Swimlane Diagram
p a t ie n t p h a rm a c is t p h ys ic ia n

r e q u e s t s t h at a d e t e r m in e s s t a t u s o f
p r e s c r ip t io n b e r e f ille d
p r e s c r ip t io n

n o r e f ills c h e c ks p a t ie n t
r e main in g r e co r d s

r e f ills
r e main in g ap p r o v e s r e f ill

r e f ill n o t
c h e c ks in v e n t o r y f o r
allo w e d
r e f ill o r a lt e r n a t iv e

e v a lu a t e s a lt e r n a t iv e
m e d ic a t io n
r e c e iv e s o u t o f s t o c k o u t o f st o ck
n o t if ic a t io n

a lt e r n a t iv e
a v a ila b le
in st o ck
r e c e iv e s t im e / d a t e
none
t o p ic k u p

p ic ks u p f ills
p r e s c r ip t io n p r e s c r ip t io n

r e c e iv e s r e q u e s t t o
co n t act p h y s ic ia n

Fig u re 1 2 . 2 S w im la n e d ia g ra m fo r p re s c rip t io n re fill fu n c t io n

 16

Analysis of Display Content

 Are different types of data assigned to consistent geographic locations on the
screen (e.g., photos always appear in the upper right hand corner)?
 Can the user customize the screen location for content?
 Is proper on-screen identification assigned to all content?
 If a large report is to be presented, how should it be partitioned for ease of
understanding?
 Will mechanisms be available for moving directly to summary information for
large collections of data.
 Will graphical output be scaled to fit within the bounds of the display device
that is used?
 How will color to be used to enhance understanding?
 How will error messages and warning be presented to the user?
 Analysis of the Work Environment:
 Hackos and Redish stated the importance of work environment analysis as:
People do not perform their work in isolation.
 They are influenced by the activity around them, the physical characteristics
of the workplace, the type of equipment they are using, and the work
relationships they have with other people.
 If the products you design do not fit into the environment, they may be
difficult or frustrating to use.
 18

Interface Design Steps

USER INTERFACE DESIGN STEPS:

Using information developed during interface analysis, define
interface objects and actions (operations).
Define events (user actions) that will cause the state of the user
interface to change. Model this behavior.
Depict each interface state as it will actually look to the end-user.
Indicate how the user interprets the state of the system from
information provided through the interface.
 APPLYING INTERFACE DESIGN STEPS:
 Once the objects and actions have been defined and elaborated
iteratively , they are categorized by type.
 Target , source and application objects are identified.
 A source object is dragged and dropped onto a target object.
 The implication of this action is to create a hard-copy report.
 An application object represents application-specific data that are not
directly manipulated as part of screen interaction
User Interface Design Patterns:
 GUI have become so common that a wide variety of user interface
design patterns has emerged
 A design pattern is an abstraction that prescribes a design solution to a
specific , well-bounded design problem.
 21

Design Issues
 Response time
 Help facilities
 Error handling
 Menu and command labeling
 22

WebApp Interface Design

 Where am I? The interface should
 provide an indication of the WebApp that has been accessed
 inform the user of her location in the content hierarchy.
 What can I do now? The interface should always help the user understand his current options
 what functions are available?
 what links are live?
 what content is relevant?
 Where have I been, where am I going? The interface must facilitate navigation.
 Provide a “map” (implemented in a way that is easy to understand) of where the user has been and what
paths may be taken to move elsewhere within the WebApp.
 23

Effective WebApp Interfaces

 Bruce Tognozzi [TOG01] suggests…
 Effective interfaces are visually apparent and forgiving, instilling in their users a
sense of control. Users quickly see the breadth of their options, grasp how to
achieve their goals, and do their work.
 Effective interfaces do not concern the user with the inner workings of the
system. Work is carefully and continuously saved, with full option for the user to
undo any activity at any time.
 Effective applications and services perform a maximum of work, while requiring
a minimum of information from users.
 24

Interface Design Principles-I

 Anticipation—A WebApp should be designed so that it anticipates the use’s next move.
 Communication—The interface should communicate the status of any activity initiated by
the user
 Consistency—The use of navigation controls, menus, icons, and aesthetics (e.g., color,
shape, layout)
 Controlled autonomy—The interface should facilitate user movement throughout the
WebApp, but it should do so in a manner that enforces navigation conventions that have
been established for the application.
 Efficiency—The design of the WebApp and its interface should optimize the user’s work
efficiency, not the efficiency of the Web engineer who designs and builds it or the client-
server environment that executes it.
 25

Interface Design Principles-II

 Focus—The WebApp interface (and the content it presents) should stay focused on
the user task(s) at hand.
 Fitt’s Law—“The time to acquire a target is a function of the distance to and size
of the target.”
 Human interface objects—A vast library of reusable human interface objects has
been developed for WebApps.
 Latency reduction—The WebApp should use multi-tasking in a way that lets the
user proceed with work as if the operation has been completed.
 Learnability— A WebApp interface should be designed to minimize learning time,
and once learned, to minimize relearning required when the WebApp is revisited.
 26

Interface Design Principles-III

 Maintain work product integrity—A work product (e.g., a form completed by the
user, a user specified list) must be automatically saved so that it will not be lost if
an error occurs.
 Readability—All information presented through the interface should be readable
by young and old.
 Track state—When appropriate, the state of the user interaction should be tracked
and stored so that a user can logoff and return later to pick up where she left off.
 Visible navigation—A well-designed WebApp interface provides “the illusion that
users are in the same place, with the work brought to them.”
 Interface design guidelines
 Reading speed on a computer monitor is approximately 25 percent slower than
reading speed for hardcopy.
 Avoid “under construction” signs—an unnecessary link is sure to disappoint.
 Users prefer not to scroll. Important information should be placed within the
dimensions of a typical browser window.
 Navigation menus and head bars should be designed consistently and should be
available on all pages that are available to the user.
 The design should not rely on browser functions to assist in navigation.
 Aesthetics should never supersede functionality.
 Navigation options should be obvious, even to the casual user.
 28

Interface Design Workflow for webapps

 Review information contained in the analysis model and refine as
required.
 Develop a rough sketch of the WebApp interface layout.
 Map user objectives into specific interface actions.
 Define a set of user tasks that are associated with each action.
 Storyboard screen images for each interface action.
 Refine interface layout and storyboards using input from aesthetic
design.
 29

Mapping User Objectives

Menu bar
major functions

List of use r obje ct ive s

graphic, logo, and company name
obje ct ive #1
obje ct ive #2
obje ct ive #3
obje ct ive #4
obje ct ive #5
graphic

obje ct ive #n

Home page text copy

Navigation
menu
 30

Interface Design Workflow-II

 Identify user interface objects that are required to implement the
interface.
 Develop a procedural representation of the user’s interaction with the
interface.
 Develop a behavioral representation of the interface.
 Describe the interface layout for each state.
 Refine and review the interface design model.
 31

Design Evaluation Cycle

preliminary
design

build
prototype #1
interface

build
prototype # n
interface

user
evaluate's
interface
design
modifications
are made

evaluation
is studied by
designer

Interface design
is complete
 32

WebApp Design
 33

WebApp Design Quality

“There are essentially two basic approaches to design: the artistic ideal of expressing
yourself and the engineering ideal of solving a problem for a customer.”
Jakob Nielsen
 34

Some other design attributes are

Security
 Rebuff external attacks
 Exclude unauthorized access
 Ensure the privacy of users/customers
Availability
 the measure of the percentage of time that a WebApp is available for use
Scalability
 Can the WebApp and the systems with which it is interfaced handle significant
variation in user or transaction volume
Time to Market
 Although time-to-market is not a true quality attribute in the technical sense, it is
a measure of quality from a business point of view.
 35

WebApp Design Goals

 Simplicity
 Better the web design should be moderation and simple.
 Content should be informative .
 Aesthetics should be pleasing, but not overwhelming.
 Functions should be easy to use and easier to understand.
 Consistency
 Content should be constructed consistently
 Graphic design (aesthetics) should present a consistent look across all parts of the
WebApp
 Architectural design should establish templates that lead to a consistent hypermedia
structure
 Interface design should define consistent modes of interaction, navigation and content
display
 Navigation mechanisms should be used consistently across all WebApp elements
 36

WebApp Design Goals

 Identity
 Establish an “identity” that is appropriate for the business purpose
 Robustness
 The user expects robust content and functions that are relevant to the user’s needs
 Navigability
 designed in a manner that is intuitive and predictable
 Visual appeal
 the look and feel of content, interface layout, color coordination, the balance of text, graphics and
other media, navigation mechanisms must appeal to end-users
 Compatibility
 With all appropriate environments and configurations
 37

A Design Pyramid for WebApp

user

Interface
design

Aesthetic design

Content design

Navigation design

Architecture design

Component design

technology
WebApp Interface
 One of the challenges of interface design for WebApps is the indeterminate nature of the user’s entry
point.
 The objectives of a WebApp interface are to:
 (1) establish a consistent window into the content and functionality provided by the interface,
 (2) guide the user through a series of interactions with the WebApp, and
 (3) organize the navigation options and content available to the user.

 To achieve a consistent interface, you should first use aesthetic design to establish a coherent “look.”
 To guide user interaction, you may draw on an appropriate metaphor that enables the user to gain an
intuitive understanding of the interface.
 To implement navigation options, you can select from one of a number of interaction mechanisms:
 Navigation menus—keyword menus (organized vertically or horizontally) that list key content
and/or functionality.
 Graphic icons—button, switches, and similar graphical images that enable the user to select
some property or specify a decision.
 Graphic images—some graphical representation that is selectable by the user and implements a
link to a content object or WebApp functionality.
 39

Aesthetic Design
Aesthetic design, also called graphic design, is an artistic endeavor that
complements the technical aspects of WebApp design. Without it, a WebApp may
be functional, but unappealing.
Layout Issues:
Layout guidelines are worth considering
 Don’t be afraid of white space.
 Emphasize content.
 Organize layout elements from top-left to bottom right.
 Group navigation, content, and function geographically within the page.
 Don’t extend your real estate with the scrolling bar.
 Consider resolution and browser window size when designing layout.
 Graphic Design Issues
 Graphic design considers every aspect of the look and feel of a WebApp.
 The graphic design process begins with layout and proceeds into a
consideration of global color schemes;
 text types, sizes, and styles;
 the use of supplementary media (e.g., audio, video, animation);
 all other aesthetic elements of an application.
 41

Content Design
 Develops a design representation for content objects
 For WebApps, a content object is more closely aligned with a data object for
conventional software
 Represents the mechanisms required to establish their relationships to
one another.
 analogous to the relationship between analysis classes and design
components.
A content object has attributes that include content-specific information
and implementation-specific attributes that are specified as part of design
 Content Design Issues
 Once all content objects are modeled, the information that each object is to deliver must be
authored and then formatted to best meet the customer’s needs.
 Content authoring is the job of specialists in the relevant area who design the content object by
providing an outline of information to be delivered and an indication of the types of generic
content objects (e.g., descriptive text, graphic images, photographs) that will be used to deliver
the information.
 Aesthetic design may also be applied to represent the proper look and feel for the content.
 As content objects are designed, they are “chunked” to form WebApp pages.
 The number of content objects incorporated into a single page is a function of user needs,
constraints.
 
 43

Architecture Design
 Content architecture focuses on the manner in which content objects (or composite objects such
as Web pages) are structured for presentation and navigation.
 The term information architecture is also used to represent structures that lead to better
organization, labeling, navigation, and searching of content objects.
 WebApp architecture addresses the manner in which the application is structured to manage user
interaction, handle internal processing tasks, effect navigation, and present content.
 Architecture design is conducted in parallel with interface design, aesthetic design and content
design.
 44

Content Architecture

Linear
structure Grid
structure

Network
structure Hierarchical
structure
 WebApp Architecture
 The Model-View-Controller (MVC) architecture is one of a number of suggested
WebApp infrastructure models that decouple the user interface from the WebApp
functionality and informational content.
 46

Navigation Design
 Navigation Semantics
 Begins with a consideration of the user hierarchy and related use-cases.
 Each actor may use the WebApp somewhat differently and therefore have
different navigation requirements.
 As each user interacts with the WebApp, she encounters a series of navigation
semantic units (NSUs)
 NSU—“a set of information and related navigation structures that collaborate in
the fulfillment of a subset of related user requirements”
 47

Navigation Semantic Units

 Navigation semantic unit
 Ways of navigation (WoN)—represents the best navigation way or path for users
with certain profiles to achieve their desired goal or sub-goal. Composed of …
 Navigation nodes (NN) connected by Navigation links

link12 link24
NN2
NN1
NN4 NSU

link13 NN3 link34

 48

Navigation Syntax
 Individual navigation link—text-based links, icons, buttons and switches, and
graphical metaphors..
 Horizontal navigation bar—lists major content or functional categories in a
bar containing appropriate links.
 Vertical navigation column
 lists major content or functional categories
 lists virtually all major content objects within the WebApp.
 Tabs—a metaphor that is nothing more than a variation of the navigation bar
or column, representing content or functional categories as tab sheets that are
selected when a link is required.
 Site maps—provide an all-inclusive tab of contents for navigation to all
content objects and functionality contained within the WebApp.
 49

Component-Level Design
 WebApp components implement the following functionality
 perform localized processing to generate content and navigation capability in a
dynamic fashion
 provide computation or data processing capability that are appropriate for the
WebApp’s business domain
 provide sophisticated database query and access
 establish data interfaces with external corporate systems.
Object-Oriented Hypermedia Design
Method(OOHDM)
 One of the most widely discussed WebApp design methods— OOHDM.
 Daniel and his colleagues originally proposed the Object-Oriented Hypermedia
Design Method (OOHDM), which is composed of four different design
activities:
 conceptual design,
 navigational design,
 abstract interface design, and
 implementation.