Uid Se26

User Interface Design
Course Objectives
To understand the need of a good User Interface (UI)
To be aware of the general UI design principles.
Dos and Dont s List for UI design.
Copyright 2004,
Infosys Technologies Ltd
ER/CORP/CRS/SE26/003
Version no: 2.0
User Interface (UI)

What is User Interface (UI)?
The man-machine interaction
Man-machine interaction involves how people use and communicate with
the systems
It is the front end of the system
Users interact with the computers with the help of
Video screens
Keyboards
Pointing device
The Goal of a UI
Easy to learn
Easy to use
A Good UI helps to tailor the system to the users needs

Copyright 2004,
Version no: 2.0
Importance of User Interface

Can spell the difference between acceptance of a software
product and its failure in the marketplace
It is the look and feel of a software package
Copyright 2004,
Version no: 2.0
User Interface Development Life Cycle
Requirement
Analysis
Design
Construct
Test
Deploy
Copyright 2004,
Version no: 2.0
User Interface Development Life Cycle Flow
Copyright 2004,
Version no: 2.0
Requirement Analysis
Users Profile
Task Profile
Environment
Profiles
Analyze
Users, Task
Use Case
and Environment
Copyright 2004,
Version no: 2.0
Design Phase
Build Conceptual Model
Design Model
User Model
Identify the main components
Main windows
Major control points
List the main features of each component
Document main features of identified component
Sequence of events
Events required to complete the different tasks
Copyright 2004,
Version no: 2.0
Design Phase
Prototypes
The prototyping of a user
interface and its subsequent
testing with real users is the
only accurate means of
measuring the usability of
an interface
Copyright 2004,
Version no: 2.0
Construction Phase
Working screens are developed
Fully functional screens are developed
It is a complete visualization of the high-level design
Review of the screens is done and feedback or
suggestions for improvement are considered for
rework
Copyright 2004,
10
Version no: 2.0
Usability Testing
Usability testing begins as early as the design phase
The three levels of usability testing are:
Concept Testing
Structured Walkthrough
User Observation
Copyright 2004,
11
Version no: 2.0
Deployment
Working models are delivered to end users
It includes providing
Help desk support
End user training
Documentation
Copyright 2004,
12
Version no: 2.0
Elements of User Interface Design

Windows
Events
An "event", with respect to user interfaces, is any function initiated by the user.
Copyright 2004,
13
Version no: 2.0

Push Buttons
Radio Buttons
Copyright 2004,
14
Version no: 2.0

Scroll list
Drop Down/Combo Box
Copyright 2004,
15
Spin Boxes
Version no: 2.0

POP UP MENU/CONTEXT SENSITIVE MENU
Copyright 2004,
16
Version no: 2.0

Pull-down Menus / Drop-down Menus
Copyright 2004,
17
Version no: 2.0

Single Line / Multi Line Text Field
Check Box
Copyright 2004,
18
Version no: 2.0

Tabbed Pane
Icons
Copyright 2004,
19
Version no: 2.0
Metaphors
Implied comparison between two things by implying that one is the
other
Ex: Desktop metaphor used in Windows and the Macintosh
Copyright 2004,
20
Version no: 2.0
Metaphors
Deleted files
TRASH CAN
PRINTER CONSOLE
Copyright 2004,
21
Version no: 2.0
Metaphors
Tips on choosing metaphors
Match major user objects
Simple is better
Metaphors need not be unique
Look at users real world
Be flexible
Copyright 2004,
22
Version no: 2.0
Ergonomics
Definition
A branch of science, an approach which puts human needs and
capabilities at the focus of designing technology systems.
Objectives
Most productive use of human capabilities
Maintenance of human health and well being
Usage
Deals with the interaction of technological and work situations with the
human beings
Basic human sciences involved are
Anatomy
Physiology
Psychology
Copyright 2004,
23
Version no: 2.0
Usability Heuristics
Use Simple and Natural dialog box
Copyright 2004,
24
Version no: 2.0
Speak the users language
Copyright 2004,
25
Version no: 2.0
Minimize the users memory load
Human weakness
Memory
Understanding complex math
Applying logic
Recognizing items is much easier than Recalling
Operation should be obvious to the user. Simple tasks should be kept
simple, and complex tasks made possible
Copyright 2004,
26
Version no: 2.0
Be Consistent
Ensure that the user interface works consistently
Place all buttons in consistent places on all the windows
Use the same wordings
Actions should be consistent ex: Double Click action to open folder
Same color combinations and interface styles are used across the
set of screens
Make objects consistent with its behaviour. Objects which act
differently should look different
Reduces training and support costs
Copyright 2004,
27
Version no: 2.0
Provide feedback
Obvious and Immediate
Example:
Acknowledge all button clicks by visual or aural feedback within 50
milliseconds
Display an hourglass for any action that will take from to 2
seconds
Animate the hourglass so they know the system is working in the
background
Display a message indicating the potential length of time (that the
user may have to wait) for any action that will take longer than 2
seconds
Offer engaging text messages to keep users informed and
entertained while they are waiting for long
Copyright 2004,
28
Version no: 2.0
Explorable Interface
Give users well-marked roads and landmarks
Make actions reversible
Always allow a way out
Support both novices and experts

Cater to both the inexperienced and the experienced user
Provide good error messages

Expressed in plain language (no technical jargon)
Precise
Constructively suggest solution
Copyright 2004,
29
Version no: 2.0
Error Prevention
Prevent a problem from occurring in the first place
Copyright 2004,
30
Version no: 2.0
Provide help and documentation
Easy to search through

Focused on the users task
A list of concrete steps that must be followed
Concise and precise
Copyright 2004,
31
Version no: 2.0
Tips and Techniques

Navigation between screens
Navigation within a screen
Use colors sparingly
Follow the contrast rule
Minimal number of appropriate fonts
Items are unavailable gray (disable) them out, do not
remove them
Copyright 2004,
32
Version no: 2.0
Tips and Techniques

Left align edit fields and right align their labels
Copyright 2004,
33
Version no: 2.0
Tips and Techniques

Right align Integers
Peter Anderson
Sydney
Left align Strings
Australia
Copyright 2004,
34
Version no: 2.0
Tips and Techniques

Decimal-align floating point numbers
Copyright 2004,
35
Version no: 2.0
Tips and Techniques

Cluttering: Do not create busy/crowded screens. Reduce
cluttering.
Copyright 2004,
36
Version no: 2.0
Tips and Techniques

Clustering: Use group boxes and white-space to group
logically related items on the screen. Enhance clustering.
Copyright 2004,
37
Version no: 2.0
Tips and Techniques

Menu and button labels should have the key word(s) first.
Bad Choice
Insert page break
Add Footnote
Update Table of
Contents
Good Choice
Insert
Page Break
Footnote
Table of Contents
Copyright 2004,
38
Version no: 2.0
Tips and Techniques

Always look at the users productivity, not the computers
Which of the following takes less time?

Heating water in a microwave for one minute and ten
seconds
Heating it for one minute and eleven seconds
Copyright 2004,
39
Version no: 2.0
Tips and Techniques

Use explicit destruction
When an action has irreversible negative
consequences, it should require the user to take an
explicit action to perform it
Example:
Deleting a worksheet should require clicking on an
erase pushbutton and answering a warning question
such as Are you sure you want to erase this
worksheet? with a button click in the warning dialog
box
Copyright 2004,
40
Version no: 2.0
Tips and Techniques

Robustness
Interface should prevent errors from occurring, but if
they do occur, it should allow users to quickly recover
Autonomy
Users are most comfortable in an environment that is
neither confining nor infinite, an environment that can be
explored and is not hazardous
Simple
A good design requires a good balance between
maximizing functionality and maintaining simplicity
Copyright 2004,
41
Version no: 2.0
Good vs. Bad
Copyright 2004,
42
Version no: 2.0
Good vs. Bad
Copyright 2004,
43
Version no: 2.0
Good vs. Bad
Copyright 2004,
44
Version no: 2.0
Good vs. Bad
This is a demo to show the visual elements

like color, fontfont-style and font size affects
the user interface.. Make the things
pleasant to the user rather than causing
eye strain and headache while reading the
text.
This is a demo to show the visual

elements like color, font-style and
font size affect the user interface.
Make the things pleasant to the
user rather than causing eye strain
and headache while reading the
text.
Copyright 2004,
45
Version no: 2.0
Just Bad
Copyright 2004,
46
Version no: 2.0
Just Bad
Copyright 2004,
47
Version no: 2.0
Good Ones
Copyright 2004,
48
Version no: 2.0
Good Ones
Copyright 2004,
49
Version no: 2.0
Good Ones
Copyright 2004,
50
Version no: 2.0
Reports
A Report is an integral part of any industrial strength software. We can
define reports in any of the following ways:
A set of data that is organized and formatted according to specific criteria.
Output that has been formatted for quick reading.
A display (on the screen or printed onto paper) of the records or parts of
the records of a database that satisfy a particular search or sort.
The presentation of a formatted collection of information; can be presented
on paper, on the web, on diskette, or online.
Copyright 2004,
51
Version no: 2.0
Types of Report
Form Report
List Report
Cross Tab Report
Pivot Report
Copyright 2004,
52
Version no: 2.0
Form Report
A form report displays one record per page.
Field values are inserted to the right of field labels.
An Example ( Prepared in Report 6i tool by Oracle)
Copyright 2004,
53
Version no: 2.0
List Report
A List report is the most basic type of report.
List report is a columnar report.
Each column corresponds to a column selected from the database.

Copyright 2004,
54
Version no: 2.0
Cross Tab Report
A cross tab (matrix) report contains one row of labels, one column of labels,
and information in a grid format that is related to the row and column labels.
To create a matrix report, you need at least four groups: one group must be a
cross-product group, two of the groups must be within the cross-product group
to furnish the "labels," and at least one group must provide the information to
fill the cells.
Copyright 2004,
55
Version no: 2.0
Pivot Report
A pivot table is a great reporting tool that sorts and sums independent of the
original data layout in the spreadsheet.
An interactive report that automatically extracts, organizes, and summarizes

your data.
You can then use the report to analyze the data - for example, make
comparisons, detect patterns and relationships, and analyze trends.
An Example ( Prepared in MS Excel)
Copyright 2004,
56
Version no: 2.0
Tools for generating reports
Crystal Reports by Seagate
Reports 6i by Oracle
Excel by Microsoft
Copyright 2004,
57
Version no: 2.0
To Summarize
Use Simple and Natural Dialog

Speak the Users Language
Minimize the Users Memory Load
Be Consistent
Provide Feedback
Copyright 2004,
58
Version no: 2.0
To Summarize
Provide Clearly Marked Exits
Provide Shortcuts
Provide Good Error Messages
Prevent rather than cure
Provide Help and Documentation
Copyright 2004,
59
Version no: 2.0
Thank You!
Copyright 2004,
60
Version no: 2.0

Uid Se26

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Uid Se26

Uploaded by

Copyright:

Available Formats

User Interface Design

To understand the need of a good User Interface (UI)

To be aware of the general UI design principles.

Dos and Dont s List for UI design.

User Interface (UI)

A Good UI helps to tailor the system to the users needs

Importance of User Interface

User Interface Development Life Cycle

User Interface Development Life Cycle Flow

Elements of User Interface Design

Elements of User Interface Design

Elements of User Interface Design

Drop Down/Combo Box

Elements of User Interface Design

Elements of User Interface Design

Elements of User Interface Design

Elements of User Interface Design

Support both novices and experts

Provide good error messages

Easy to search through

Tips and Techniques

Tips and Techniques

Tips and Techniques

Left align Strings

Tips and Techniques

Tips and Techniques

Tips and Techniques

Tips and Techniques

Tips and Techniques

Which of the following takes less time?

Tips and Techniques

Tips and Techniques

Good vs. Bad

Good vs. Bad

Good vs. Bad

Good vs. Bad

This is a demo to show the visual elements

This is a demo to show the visual

Cross Tab Report

A form report displays one record per page.

Field values are inserted to the right of field labels.

An Example ( Prepared in Report 6i tool by Oracle)

List report is a columnar report.

Each column corresponds to a column selected from the database.

Cross Tab Report

An interactive report that automatically extracts, organizes, and summarizes

An Example ( Prepared in MS Excel)

Tools for generating reports

Crystal Reports by Seagate

Use Simple and Natural Dialog

You might also like