User Interface Design (Ch.

11)

Cengiz Günay
CS485/540 Software Engineering

Fall 2014, Some slides courtesy of Joan Smith, Roger Pressman, Ian Sommerville, and the
Internets

Günay (Emory MathCS) UI Design Fall 2014 1 / 10

(c) thedailywtf.com
 Interface Design!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 2!
(c) COBE Design
Interface Design!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 3!
 Golden Rules!

!  Placethe user in control!

!  Reduce the userʼs memory load!
!  Make the interface consistent!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 4!
Place the User in Control!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 5!
 Reduce the Userʼs Memory Load!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 6!
Make the Interface Consistent!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 7!
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.

These slides are designed to accompany Software Engineering: A Practitioner’s Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman. 15
 Activity Diagram ent er password
and user ID

Supplements the use valid passwor ds/ ID invalid passwor ds/ ID

case by providing a
graphical representation select major f unct ion prompt f or reent ry
ot her f unct ions
of the flow of interaction m ay also be
select ed

within a specific scenario select surveillance

no input
input t r ies r em ain

t r ies r em ain

t hum bnail views select a specif ic cam er a

select specif ic
select camera icon
camera - t humbnails

view camera out put

in labelled window

prompt f or
anot her view

These slides are designed to accompany Software exit t his f unct ion see anot her cam er a
Engineering: A Practitioner’s Approach, 7/e (McGraw-Hill, 14
2009). Slides copyright 2009 by Roger Pressman.
 homeowner c a m e ra i n t e rf a c e

Swimlane
ent er password

Diagrams and user ID

valid p asswo r d s/ ID
in valid
Allows the modeler to p asswo r d s/ ID
select m ajor f unct ion
represent the flow of
activities described by o t h er f u n ct io n s prom pt f or reent ry
m ay also b e
the use-case and at the select ed
same time indicate in p u t t r ies

which actor (if there are select surveillance r em ain

multiple actors involved n o in p u t

t r ies r em ain
in a specific use-case)
or analysis class has
responsibility for the t h u m b n ail views select a sp ecif ic cam er a
action described by an
activity rectangle:
select specif ic
•Actors cam era - t hum bnails
select cam era icon

•Timing
•Flow
generat e video
out put

view cam era out put prom pt f or

in labelled window anot her view

exit t h is
f u n ct io n

These slides are designed to accompany Software see

Engineering: A Practitioner’s Approach, 7/e (McGraw-Hill, an o t 15
h er
cam er a
2009). Slides copyright 2009 by Roger Pressman.
 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?!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 11!
 Design Issues!
!  Response time!
!  Help facilities!
!  Error handling!
!  Menu and command
labeling!
!  Application accessibility!
!  Internationalization!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 16!
Usability Testing

Define tasks
user stories
use cases
Define users
Testers
Regular users
Test and collect measurements
Time to complete task
Common errors
Complaints
Bugs

Günay (Emory MathCS) UI Design Fall 2014 8 / 10

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.!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 17!
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.!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 18!
Mapping User Objectives! Menu bar
major functions

List of user objectives

graphic, logo, and company name
objective #1
objective #2

objective #3
objective #4

objective #5
graphic

objective #n

Home page text copy

Navigation
menu

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 23!
Aesthetic Design!
!  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.!
These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 25!
Design Evaluation Cycle!

These slides are designed to accompany Software Engineering: A Practitionerʼs Approach, 7/e
(McGraw-Hill, 2009) Slides copyright 2009 by Roger Pressman.! 26!
12 Techniques for UI Design

From: “12 Useful Techniques For Good User Interface Design”

by Dmitry Fadeyev
1 Highlight important changes
2 Enable keyboard shortcuts in your Web application
3 Upgrade options from the account page
4 Advertise features of the application
5 Use color-coded lists
6 Offer personalization options
7 Display help messages that attract the eye
8 Design feedback messages carefully
9 Use tabbed navigation
10 Darken background under modal windows
11 Lightboxes and Slideshows
12 Short sign-up forms
Günay (Emory MathCS) UI Design Fall 2014 10 / 10