Performing user interface design v

12/07/1512/07/15 www.prsolutions08.blogspot.comwww.prsolutions08.blogspot.com 1
Chapter 12Chapter 12
User Interface DesignUser Interface Design

Interface DesignInterface Design
Easy to use?Easy to use?
Easy to understand?Easy to understand?
Easy to learn?Easy to learn?

Interface DesignInterface Design
lack of consistencylack of consistency
too much memorizationtoo much memorization
no guidance / helpno guidance / help
no context sensitivityno context sensitivity
poor responsepoor response
Arcane/unfriendlyArcane/unfriendly
Typical Design ErrorsTypical Design Errors

Golden RulesGolden Rules
 Place the user in controlPlace the user in control
 Reduce the user’s memoryReduce the user’s memory
loadload
 Make the interface consistentMake the interface consistent

Place the User in ControlPlace the User in Control
Define interaction modes in a way that does notDefine interaction modes in a way that does not
force a user into unnecessary or undesired actions.force a user into unnecessary or undesired actions.
Provide for flexible interaction.Provide for flexible interaction.
Allow user interaction to be interruptible andAllow user interaction to be interruptible and
undoable.undoable.
Streamline interaction as skill levels advance andStreamline interaction as skill levels advance and
allow the interaction to be customized.allow the interaction to be customized.
Hide technical internals from the casual user.Hide technical internals from the casual user.
Design for direct interaction with objects thatDesign for direct interaction with objects that
appear on the screen.appear on the screen.

Reduce the User’s Memory LoadReduce the User’s Memory Load
Reduce demand on short-term memory.Reduce demand on short-term memory.
Establish meaningful defaults.Establish meaningful defaults.
Define shortcuts that are intuitive.Define shortcuts that are intuitive.
The visual layout of the interface should be basedThe visual layout of the interface should be based
on a real world metaphor.on a real world metaphor.
Disclose information in a progressive fashion.Disclose information in a progressive fashion.

Make the InterfaceMake the Interface
ConsistentConsistent
Allow the user to put the current task into aAllow the user to put the current task into a
meaningful context.meaningful context.
Maintain consistency across a family ofMaintain consistency across a family of
applications.applications.
If past interactive models have created userIf past interactive models have created user
expectations, do not make changes unless there isexpectations, do not make changes unless there is
a compelling reason to do so.a compelling reason to do so.

User Interface Design ModelsUser Interface Design Models
 User modelUser model — a profile of all end— a profile of all end
users of the systemusers of the system
 Design modelDesign model — a design realization— a design realization
of the user modelof the user model
 Mental model (system perception)Mental model (system perception) ——
the user’s mental image of what thethe user’s mental image of what the
interface isinterface is

12/07/1512/07/15 S.Sreenivasa RaoS.Sreenivasa Rao
Implementation modelImplementation model — the interface “look and— the interface “look and
feel” coupled with supporting information thatfeel” coupled with supporting information that
describe interface syntax and semanticsdescribe interface syntax and semantics

User Interface Design ProcessUser Interface Design Process

Interface AnalysisInterface Analysis
 Interface analysis means understandingInterface analysis means understanding
– (1) the people (end-users) who will interact with(1) the people (end-users) who will interact with
the system through the interface;the system through the interface;
– (2) the tasks that end-users must perform to do(2) the tasks that end-users must perform to do
their work,their work,
– (3) the content that is presented as part of the(3) the content that is presented as part of the
interfaceinterface
– (4) the environment in which these tasks will be(4) the environment in which these tasks will be
conductedconducted..

User AnalysisUser Analysis
 Are users trained professionals, technician, clerical, orAre users trained professionals, technician, clerical, or
manufacturing workers?manufacturing workers?
 What level of formal education does the average user have?What level of formal education does the average user have?
 Are the users capable of learning from written materials orAre the users capable of learning from written materials or
have they expressed a desire for classroom training?have they expressed a desire for classroom training?
 Are users expert typists or keyboard phobic?Are users expert typists or keyboard phobic?
 What is the age range of the user community?What is the age range of the user community?
 Will the users be represented predominately by one gender?Will the users be represented predominately by one gender?
 How are users compensated for the work they perform?How are users compensated for the work they perform?

12/07/1512/07/15 www.prsolutions08.blogspot.comwww.prsolutions08.blogspot.com
• Do users work normal office hours or do they work untilDo users work normal office hours or do they work until
the job is done?the job is done?
• Is the software to be an integral part of the work users doIs the software to be an integral part of the work users do
or will it be used only occasionally?or will it be used only occasionally?
• What is the primary spoken language among users?What is the primary spoken language among users?
• What are the consequences if a user makes a mistakeWhat are the consequences if a user makes a mistake
using the system?using the system?
• Are users experts in the subject matter that is addressedAre users experts in the subject matter that is addressed
by the system?by the system?
• Do users want to know about the technology the sitsDo users want to know about the technology the sits
behind the interface?behind the interface?

Task Analysis and ModelingTask Analysis and Modeling Answers the following questions …Answers the following questions …
– What work will the user perform inWhat work will the user perform in
specific circumstances?specific circumstances?
– What tasks and subtasks will beWhat tasks and subtasks will be
performed as the user does the work?performed as the user does the work?
– What specific problem domain objectsWhat specific problem domain objects
will the user manipulate as work iswill the user manipulate as work is
performed?performed?
– What is the sequence of work tasks—What is the sequence of work tasks—
the workflow?the workflow?
– What is the hierarchy of tasks?What is the hierarchy of tasks?

• Use-casesUse-cases define basic interactiondefine basic interaction
• Task elaborationTask elaboration refines interactive tasksrefines interactive tasks
• Object elaborationObject elaboration identifies interface objects (classes)identifies interface objects (classes)
• Workflow analysisWorkflow analysis defines how a work process isdefines how a work process is
completed when several people (and roles) are involvedcompleted when several people (and roles) are involved

Swimlane DiagramSwimlane Diagram
pat ient pharmacist physician
r e q u e st s t h at a
p r e scr ip t io n b e r e f ille d
no refills
remaining
ch e cks p at ie n t
r e co r d s
d e t e r m in e s st at u s o f
p r e scr ip t io n
refills
remaining
refill not
allowed
approvesrefill
e v alu at e s alt e r n at iv e
m e d icat io n
none
r e ce iv e s r e q u e st t o
co n t act p h y sician
alternative
available
ch e cks in v e n t o r y f o r
r e f ill o r alt e r n at iv e
out of stockr e ce iv e s o u t o f st o ck
n o t if icat io n
r e ce iv e s t im e / d at e
t o p ick u p
in stock
p icks u p
p r e scr ip t io n
f ills
p r e scr ip t io n
Figure 12.2 Swimlane diagram for prescript ion refill funct ion

Analysis of Display ContentAnalysis of Display Content
 Are different types of data assigned toAre different types of data assigned to
consistent geographic locations on the screenconsistent geographic locations on the screen
(e.g., photos always appear in the upper right(e.g., photos always appear in the upper right
hand corner)?hand corner)?
 Can the user customize the screen locationCan the user customize the screen location
for content?for content?
 Is proper on-screen identification assigned toIs proper on-screen identification assigned to
all content?all content?
 If a large report is to be presented, howIf a large report is to be presented, how
should it be partitioned for ease ofshould it be partitioned for ease of
understanding?understanding?

• Will mechanisms be available for moving directly toWill mechanisms be available for moving directly to
summary information for large collections of data.summary information for large collections of data.
• Will graphical output be scaled to fit within the bounds of theWill graphical output be scaled to fit within the bounds of the
display device that is used?display device that is used?
•How will color to be used to enhance understanding?How will color to be used to enhance understanding?
•How will error messages and warning be presented to theHow will error messages and warning be presented to the
user?user?

Interface Design StepsInterface Design Steps
 Using information developed duringUsing information developed during
interface analysisinterface analysis define interface objectsdefine interface objects
and actions (operations).and actions (operations).
 Define events (user actions)Define events (user actions) that will causethat will cause
the state of the user interface to change.the state of the user interface to change.
Model this behavior.Model this behavior.

Depict each interface stateDepict each interface state as it will actuallyas it will actually
look to the end-user.look to the end-user.
Indicate how the user interprets the state ofIndicate how the user interprets the state of
the systemthe system from information provided throughfrom information provided through
the interface.the interface.

Interface Design PatternsInterface Design Patterns
 Patterns are available forPatterns are available for
– The complete UIThe complete UI
– Page layoutPage layout
– Forms and inputForms and input
– TablesTables

-Direct data manipulation-Direct data manipulation
-Navigation-Navigation
-Searching-Searching
-Page elements-Page elements
-e-Commerce-e-Commerce

12/07/1512/07/15 S.Sreenivasa RaoS.Sreenivasa Rao 23
Design IssuesDesign Issues
 Response timeResponse time
 Help facilitiesHelp facilities
 Error handlingError handling
 Menu and commandMenu and command
labelinglabeling
 Application accessibilityApplication accessibility
 InternationalizationInternationalization

Design EvaluationDesign Evaluation
CycleCycle
preliminary
design
build
prototype #1
interface
evaluation
is studied by
designer
design
modifications
are made
build
prototype #n
interface
user
evaluate's
interface
Interface design
is complete

Performing user interface design v

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to Performing user interface design v

Similar to Performing user interface design v (20)

More from Azhar Shaik

More from Azhar Shaik (14)

Recently uploaded

Recently uploaded (20)

Performing user interface design v