STID 3023

SYSTEMS ANALYSIS
AND
DESIGN

Interface Design

Week 12
2

Learning Objective

Implement several fundamental user interface design

principles.
Be able to design a user interface based on principles
and techniques for navigation design, input design and
output design.
Explain form and report design.
Apply general guidelines for formatting forms and
reports.
Explain effective text, table, and list formatting.
Apply general guidelines for designing interfaces
Explain common errors in developing Web interfaces.

What is the User Interface?

It is a platform that user interacts with the system

and the nature of the inputs and outputs that the
system accepts and produce.

It is deal with HCI (Human Computer Interface)

that combines the technique of psychology and
ergonomics with Computer Science.

What is the User Interface?

Users of systems interact with the system to carry

out tasks by:

reading and interpreting information about how to use

the system
issuing commands to the system to indicate what they
want to do
entering words and numbers into the system as data to
work with
reading and interpreting the results
responding to and correcting errors

Fundamental parts of
user
interface

Navigation mechanism
- the way for users gives instructions to the system
and tell its what to do.
- Eg : Menu, button
Input mechanism
- the way the system captures information
- Eg: Form
Output mechanism
- the way the system provides information to users
or other system.
- Eg: Report
7

Interface Design

Interface design is the process of defining how

the the system will interact with external entities
such as customers, supplies or other systems.

The human computer interface layer defines

the way in which the users will interact with the
system and the nature of the inputs and outputs
that the system accepts and produces.

The goal of user interface design is to make

interface pleasing to the eye and simple to use,
while minimizing the effort the user need to
accomplish their work.
8

Principles of User Interface

Design

Layout of the screen, form or report

- the interface should be a series of areas on the

screen that are used consistently for different

purposes
Example: a top area for commands and
navigation, a middle area for information to be
input or output (form/report) and a bottom area
for status information (display information about
what user is doing).

Principles of User Interface

Design

Content awareness
- refers to ability of an interface to make the user aware
of the information it contains with the least amount of
effort on the users part.
- User should always be aware of where they are in the
system and what information is being displayed.

Aesthetics
- refers to designing interfaces that are pleasing to the

eye.
- interfaces do not have to be works of arts, but they do
need to be functional and inviting to use.
10

Principles of User Interface

Design

User Experience
- Interface should be designed based on level of users

(experience or novice users).

novice users will prefer ease of learning and ease of
use.

Consistency
- when interfaces are consistent, user can interact with one

part of the system, and then know how to interact with the
rest.
- Purpose:

Making a system simple to use

Enable users to predict what will happen.

11

Principles of User Interface

Design

Minimize user effort

- Interface should be designed to minimize the
amount of effort needed to accomplish tasks.
- E.g.: fewest possible mouse clicks.

12

NAVIGATION DESIGN
Goal for navigation design:
To make system as simple as possible to
use.

13

Basic Principles

Assume users
Have not read the manual
Have not attended training
Do not have external help readily at hand

All controls should be clear and

understandable and placed in an intuitive
location on the screen.

14

Basic Principles

Prevent mistakes

Label commands/ actions appropriately and limit choices

Never display commands that cant be used (or gray
them out)
Confirm actions that are difficult or impossible to undo

Simplify recover from mistakes (eg: using

undo button)
Use consistent grammar order

15

Types of Menus

Types of Menus
Menu bar
Drop-down menu
Pop-up menu
Tab menu
Toolbar
Image map

When
Would You
Use Each of
These Menu
Types?

16

Types of Messages

Types of Messages
Error message
Confirmation message
Acknowledgment message
Delay message
Help message

When
Would You
Use Each of
These
Message
Types?

17

Types of Messages

Error Message
- informs the user that he or she has attempted
to do something to which the system cannot
respond.
- always explain the reason and suggest corrective
action.
- It is used when user does something that is not
permitted or not possible.

18

An Example of Crafting an
Error Message

19

Types of Messages

Confirmation Message
- Asks user to confirm that they are really want
to perform the action they have selected.
- always explain the cause and suggest possible
action.
- often include several choices other than OK and
CANCEL.
- It is used when user selects a potential dangerous
choice, such as deleting a file.

20

Types of Messages

Acknowledgement Message
- Informs the user that the system has
accomplished what it was asked to do.
- Acknowledgment messages are typically included
because novice users often like to be reassured that
an action has taken place.

21

Types of Messages

Delay Message
- Informs the user that the system is working
properly.
- should permit the user to cancel the operation in
case the user does not want to wait for its
completion.
- Should provide some indication of how long the
delay may last.

22

Types of Messages

Help Message
- Provides additional information about the
system and its components.
- help message is organized by table of contents or
by keyword search.

23

INPUT & OUTPUT

DESIGN
Goal of input design:
To simply and easily capture accurate
information for the system.
Goal of output design:
To present information to users so they
can accurately understand it with least
effort.

24

Types of Inputs
Text
Numbers
Selection boxes

Types of Boxes
Check box
Radio button
On-screen list box
Drop-down list box
Combo box
Slider

When
Would You
Use Each of
These
Box
Types?
25

Types of Input Boxes

26

What Is a Form?
A business document that contains some
predefined data and may include some
areas where additional data are to be
filled in
To capture information for the system
Typically based on a database record or
query
Input mechanism

27

What Is a Report?
A business document that contains only
predefined data
A passive document meant only for
reading or viewing, not data input
To present information to users
Output mechanism
Typically contains data from many
unrelated transactions or records

28

Types of Reports

Types of Reports
Detail reports
Summary report
Turnaround document
Graphs

When
Would You
Use Each of
These
Report
Types?

29

Fundamental Questions
When Designing Forms and
Reports
Who will use the form or report?
What is the purpose of the form or
report?
When is the form or report needed to
be delivered and used?
Where does the form or report need o
be delivered and used?
How many people need to use or view
the form or report?

30

A coding sheet is an old

tool for designing forms
and reports, usually
associated with textbased forms and reports
for mainframe
applications.

31

Visual Basic and other development tools provide

computer-aided GUI form and report generation.
32

A typical form design

specification:
Based on a use case
connection
Involves three parts:
1) Narrative
overview
2) Sample design
3) Assessment
33

Guidelines for Structuring Data

Entry Fields
Entry

Never request data that already online or that can

be computed

Defaults

Always provide default values when appropriate

Units

Make clear the type of data units requested

Replacement

Use character replacement when appropriate

Captioning

Always place a caption adjacent to fields

Format

Provide formatting examples when appropriate

Justify

Automatically justify data entries

Help

Provide context-sensitive help when appropriate

34

Data entry structure is concerned with navigation flow.

35

Navigation flow should be natural and intuitive to the user, not

disjointed and confusing.

36

37

38

39

Grouping, organization, layout, and highlighting are

important considerations in form design

40

Highlighting can include use

of upper case, font size
differences, bold, italics,
underline, boxing, and other
approaches.

41

Highlighting can be valuable

technique for conveying special
information:

Notifying users of errors in data entry or

processing.
Providing warnings to users regarding possible
problems such as unusual data values or an
unavailable device.
Drawing attention to keywords, commands, highpriority messages, and data that changed or gone
outside normal operating ranges.

42

43

Business reports are static, no user interaction.

Therefore, business reports are often printed in
hardcopy form.
44

45

Bar and line graphs give

pictorial summary
information that can
enhance reports and
graphs.
46

Summary

The fundamental goal of navigation design is to

make the system as simple to use as possible
The goal of input mechanism is to simply and
easily capture accurate information
The goal of the output mechanism is to provide
accurate information to users that minimize
information overload and bias

47

Checklist for validating the

Usability of User Interface

Cursor-Control Capabilities

Editing Capabilities

e.g: Move the cursor forward to the next data

field
e.g: Delete the character to the left of the
cursor

Exit Capabilities

e.g: Confirm the saving of edits or go to

another screen/form

48

49

Guidelines for Designing

System Help
Guideline

Explanation

Simplify

Use short, simple wording, common spelling,

and complete sentences. Give users what they
need to know, with ability to find additional
info.

Organize

Use lists to break information into manageable

pieces.

Show

Provide examples of poorer use and the

outcomes of such use.

50

Common Errors When Designing

the Interface and Dialogues of
Web Sites

Opening new browser window

Breaking or slowing down the back button
Complex URLs
Orphan Pages
Scrolling Navigation Pages
Lack of Navigation Support
Hidden Links
Links that Dont Provide Enough Information
Buttons that provide No Click Feedback

51

Style Guides

Microsoft and Apple provide guidelines on design

of interfaces for their platforms
Large organizations may have their own style
guides

52