8/14/2019 Presentation_4_c.pdf

1/18

Software EngineeringSoftware Engineering

User Interface DesignUser Interface Design

8/14/2019 Presentation_4_c.pdf

2/18

Interface DesignInterface Design

Easy to use?Easy to use?

Easy to understand?Easy to understand?

Easy to learn?Easy to learn?

8/14/2019 Presentation_4_c.pdf

3/18

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

T y p i c a l D es i g n E r r o r s T y p i c al D e s i g n E r r o r s

8/14/2019 Presentation_4_c.pdf

4/18

Golden RulesGolden Rules

Place the user in controlPlace the user in control

Reduce the userReduce the users memory loads memory load

Make the interface consistentMake the interface consistent

8/14/2019 Presentation_4_c.pdf

5/18

Place the User in ControlPlace the User in Control

Define interaction modes in a way that does not force a userDefine interaction modes in a way that does not force a user

into unnecessary or undesired actions.into unnecessary or undesired actions.

Provide for flexible interaction.Provide for flexible interaction.

Allow user interaction to be interruptible and undoable.Allow user interaction to be interruptible and undoable.

Streamline interaction as skill levels advance and allow theStreamline interaction as skill levels advance and allow the

interaction to be customized.interaction to be customized.

Hide technical internals from the casual user.Hide technical internals from the casual user.

Design for direct interaction with objects that appear on theDesign for direct interaction with objects that appear on the

screen.screen.

8/14/2019 Presentation_4_c.pdf

6/18

Reduce the UserReduce the Users Memory Loads Memory Load

Reduce demand on shortReduce demand on short--term memory.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 based on a realThe visual layout of the interface should be based on a realworld metaphor.world metaphor.

Disclose information in a progressive fashion.Disclose information in a progressive fashion.

8/14/2019 Presentation_4_c.pdf

7/18

Make the Interface ConsistentMake the Interface Consistent

Allow the user to put the current task into a meaningfulAllow the user to put the current task into a meaningful

context.context.

Maintain consistency across a family of applications.Maintain consistency across a family of applications.

If past interactive models have created user expectations,If past interactive models have created user expectations,do not make changes unless there is a compelling reasondo not make changes unless there is a compelling reason

to do so.to do so.

8/14/2019 Presentation_4_c.pdf

8/18

User Interface Design ModelsUser Interface Design Models

User modelUser modela profile of all end users of thea profile of all end users of the

systemsystem

Design modelDesign modela design realization of the usera design realization of the user

modelmodel

Mental model (system perception)Mental model (system perception)the userthe userss

mental image of what the interface ismental image of what the interface is

Implementation modelImplementation modelthe interfacethe interfacelook andlook and

feelfeelcoupled with supporting information thatcoupled with supporting information that

describe interface syntax and semanticsdescribe interface syntax and semantics

8/14/2019 Presentation_4_c.pdf

9/18

User Interface Design ProcessUser Interface Design Process

8/14/2019 Presentation_4_c.pdf

10/18

Interface AnalysisInterface Analysis

Interface analysis means understandingInterface analysis means understanding

(1) the people (end(1) the people (end--users) who will interact with the systemusers) who will interact with the system

through the interface;through the interface;

(2) the tasks that end(2) the tasks that end--users must perform to do their work,users must perform to do their work,

(3) the content that is presented as part of the interface(3) the content that is presented as part of the interface

(4) the environment in which these tasks will be conducted(4) the environment in which these tasks will be conducted.

8/14/2019 Presentation_4_c.pdf

11/18

User AnalysisUser Analysis Are users trained professionals, technician, clerical, or manufaAre users trained professionals, technician, clerical, or manufacturing workers?cturing 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 or haveAre the users capable of learning from written materials or havethey expressed a desire forthey expressed a desire forclassroom training?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? Do users work normal office hours or do they work until the jobDo users work normal office hours or do they work until the job is done?is done?

Is the software to be an integral part of the work users do or wIs the software to be an integral part of the work users do or w ill it be used only occasionally?ill 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 mistake using the syWhat are the consequences if a user makes a mistake using the sy stem?stem?

Are users experts in the subject matter that is addressed by theAre users experts in the subject matter that is addressed by thesystem?system?

Do users want to know about the technology the sits behind the iDo users want to know about the technology the sits behind the i nterface?nterface?

8/14/2019 Presentation_4_c.pdf

12/18

Task Analysis and ModelingTask Analysis and Modeling

Answers the following questionsAnswers the following questions What work will the user perform in specific circumstances?What work will the user perform in specific circumstances?

What tasks and subtasks will be performed as the user does theWhat tasks and subtasks will be performed as the user does thework?work?

What specific problem domain objects will the user manipulate asWhat specific problem domain objects will the user manipulate aswork is performed?work is performed?

What is the sequence of work tasksWhat is the sequence of work tasksthe workflow?the workflow?

What is the hierarchy of tasks?What is the hierarchy of tasks? UseUse--casescasesdefine basic interactiondefine basic interaction

Task elaborationTask elaborationrefines interactive tasksrefines interactive tasks

Object elaborationObject elaborationidentifies interface objects (classes)identifies interface objects (classes)

Workflow analysisWorkflow analysisdefines how a work process is completeddefines how a work process is completedwhen several people (and roles) are involvedwhen several people (and roles) are involved

8/14/2019 Presentation_4_c.pdf

13/18

SwimlaneSwimlaneDiagramDiagram

patient ph armacist p hysician

req ue sts th at a

p rescription be re f i l led

no refills

remaining

ch ecksp at ien t

reco rd s

de te rm ine sstat us of

pre scrip t io n

refillsremaining

refillnotallowed

approvesrefill

ev alu at es alte rn ativ e

me dicat ion

none

receiv es re qu est to

co ntact p h ysician

alternativeavailable

ch ecksinv en tor y f or

ref i l l o r al te rnativ e

out of stockrece iv es ou t o f st ockn oti f icatio n

rece iv es t im e/ d at e

to picku p

in stock

p icksu p

pre scrip tio n

fills

pre scrip t io n

Figure 12 .2 Swimlane d iagram for prescription refill funct ion

8/14/2019 Presentation_4_c.pdf

14/18

Analysis of Display ContentAnalysis of Display Content Are different types of data assigned to consistent geographic loAre different types of data assigned to consistent geographic locationscations

on the screen (e.g., photos always appear in the upper right hanon the screen (e.g., photos always appear in the upper right han ddcorner)?corner)?

Can the user customize the screen location for content?Can the user customize the screen location for content?

Is proper onIs proper on--screen identification assigned to all content?screen identification assigned to all content?

If a large report is to be presented, how should it be partitionIf a large report is to be presented, how should it be partitioned for easeed for ease

of understanding?of understanding? Will mechanisms be available for moving directly to summaryWill mechanisms be available for moving directly to summary

information for large collections of data.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 displaydisplaydevice that is used?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 the user?How will error messages and warning be presented to the user?

8/14/2019 Presentation_4_c.pdf

15/18

Interface Design StepsInterface Design Steps

Using information developed during interface analysisUsing information developed during interface analysis

(SEPA, Section 12.3),(SEPA, Section 12.3),define interface objects anddefine interface objects and

actions (operations).actions (operations).

Define events (user actions)Define events (user actions)that will cause the state ofthat will cause the state of

the user interface to change. Model this behavior.the user interface to change. Model this behavior.

Depict each interface stateDepict each interface stateas it will actually look to theas it will actually look to the

endend--user.user.

Indicate how the user interprets the state of the systemIndicate how the user interprets the state of the system

from information provided through the interface.from information provided through the interface.

8/14/2019 Presentation_4_c.pdf

16/18

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 manipulationDirect data manipulation

NavigationNavigation

SearchingSearching

Page elementsPage elements

ee--CommerceCommerce

8/14/2019 Presentation_4_c.pdf

17/18

Design IssuesDesign Issues

Response timeResponse time

Help facilitiesHelp facilities

Error handlingError handling

Menu and command labelingMenu and command labeling Application accessibilityApplication accessibility

InternationalizationInternationalization

8/14/2019 Presentation_4_c.pdf

18/18

Design Evaluation CycleDesign Evaluation Cyclepreliminarydesign

buildprototype #1

interface

evaluationis studied by

designer

designmodifications

are made

build

prototype # ninterface

userevaluate'sinterface

Interface designis complete