HIPO or STRUCTURE CHARTS

User Interface
Hierarchy of Input Process and Output
Background
Developed by IBM as a tool and
documentation technique which
attempts to:
 Provide a structure by which the
function of a system can be understood
 State the functions to be accomplished
 Provide visual description of the input,
process and output of each function
Purpose
 To define procedures and operations in a hierarchical
manner, correlating input, processing, and output steps
with the integrated whole expressed in the hierarchy
diagram

 The term HIPO (Hierarchy plus Input-Process-

Output) is applied to a kind of visual aid commonly used
to supplement structure charts. Whereas structure charts
emphasize only structure and function, HIPO highlight the
inputs, processing, and outputs of program modules.
HIPO (Hierarchy plus Input-Process-Output)
 A typical HIPO package consists of three types of diagrams that
describe a program or system of programs from the general level to
the detail level.
 Hierarchy Chart / Visual table of contents
 Acts as a hierarchical chart for the functioned performed by the system
 IPO overview diagram
 Shows a general sequence of inputs, major processing functions, and output
 IPO Detailed diagram
 Show a detailed sequence f inputs, shows a detailed sequence of inputs, major
processing functions, a outputs.
 At the most general level is the visual table of contents, which is
almost identical to the structure chart but includes some additional
information. Each block in the visual table of contents is given an
identification number that is used as a reference in other HIPO
diagrams. The Figure below shows a visual table of contents for the
payroll processing application.
 Each module in the visual table of contents is described in
greater detail in an overview diagram, which includes
the module's inputs, processing, and outputs. The
reference number assigned to the overview diagram
shows where the module fits into the overall structure of
the system as depicted in the visual table of contents. If
the module passes control to a lower-level module in the
hierarchy for some specific processing operation, that
operation is also given a reference number.
Visual Table of Contents for Payroll Processing Example
 An overview diagram for the payroll processing module
''Calculate Each Employee's Pay,'' is shown in the Figure below.
IPO Overview Diagram for "Calculate Each Employee's Pay"
Module
 HIPO for Inventory System
Level 0
0
Inventory
System

1.0 2.0 3.0 4.0

Level 1 File Maintenance Transaction Reports Utilities

3.3
1.1 1.2 2.2 2.3 3.1 3.2 4.1 4.2
2.1 Purchase
Inventories Employees Archive
Level 0 Items Suppliers Issues Update Purchase Stock list Orders

3.2.1 3.3.1 4.1.1 4.2.1

1.1.1 1.2.1 2.1.1 2.2.1 2.3.1 3.1.1
Monthly PO history Add employee backup
Add Items Add Items Issue stocks Add stocks New PO Re-order list

Level 1
4.1.2
3.2.2 4.2.2
2.3.2 3.2.2 Change
1.1.2 1.2.2 Quarterly Restore
Edit PO Critical list password
Edit items Edit items

3.2.3 3.2.3
2.3.3
1.1.3 1.2.3 Fast moving Yearly
Print PO items
Delete Items Delete Items

3.2.4
Slow moving
items
HIPO for Web Application

0
Web Name

1.0
Index

1.1 1.2 1.3 1.4 1.5 1.6

Home Articles Gallery Forum Guestbook Contacts
Advantages Structure
 Using top down design has several advantages.
 It helps to prevent the programmer from becoming
overwhelmed by the size of the job at hand.
 Also, the programmer is more likely to discover early in the
programming process whether a specific solution will work.
 When the program is actually coded (written in a
programming language), each box in the structure chart can be
written as a separate module performing a specific task.
User interface design
-- Know who your user is…
Before we can answer the question "How do we make
our user-interfaces better", we must first answer the
question: Better for whom? A design that is
better for a technically skilled user might not be better
for a non-technical businessman or an artist.
User interface design
 User interface design important for several reasons.
 First of all the more intuitive the user interface the easier it is
to use, and the easier it is to use and the less expensive to use
it.
 The better the user interface the easier it is to train people to
use it, reducing your training costs.
 The better your user interface the less help people will need
to use it, reducing your support costs.
 The better your user interface the more your users will like to
use it, increasing their satisfaction with the work that you have
done.
User interface design
Techniques
 Consistency, consistency, consistency.
 Ensure user interface works consistently
 If you can double-click on items in one list and have something
happen, then you should be able to double-click on items in
any other list and have the same sort of thing happen.
 Put your buttons in consistent places on all your windows,
 use the same wording in labels and messages, and
 use a consistent color scheme throughout.
 Consistency in your user interface enables your users to build
an accurate mental model of the way it works, and accurate
mental models lead to lower training and support costs.
User interface design
Techniques
 Navigation between major user interface items is
important.
 If it is difficult to get from one screen to another, then your users will
quickly become frustrated and give up. When the flow between
screens matches the flow of the work the user is trying to
accomplish, then your application will make sense to your users.
Because different users work in different ways, your system needs to
be flexible enough to support their various approaches.
 Navigation within a screen is important.
 In Western societies, people read left to right and top to bottom.
Because people are used to this, should you design screens that are
also organized left to right and top to bottom when designing a user
interface for people from this culture? You want to organize
navigation between widgets on your screen in a manner users will
find familiar to them.
User interface design
Techniques
 Word your messages and labels effectively.
 The text you display on your screens is a primary source of
information for your users. If your text is worded poorly, then
your interface will be perceived poorly by your users. Using full words
and sentences, as opposed to abbreviations and codes, makes your text
easier to understand. Your messages should be worded positively, imply
that the user is in control, and provide insight into how to use the
application properly.
 For example, which message do you find more appealing “You have input
the wrong information” or “An account number should be eight digits in
length.”
 Furthermore, your messages should be worded consistently and
displayed in a consistent place on the screen. Although the messages
“The person’s first name must be input” and “An account number should
be input” are separately worded well, together they are inconsistent. In
light of the first message, a better wording of the second message would
be “The account number must be input” to make the two messages
consistent.
User interface design
Techniques
 Use color appropriately.
 Color should be used sparingly in your applications and, if you do use
it, you must also use a secondary indicator. The problem is that some
of your users may be color blind and if you are using color to
highlight something on a screen, then you need to do something else
to make it stand out if you want these people to notice it. You also
want to use colors in your application consistently, so you have a
common look and feel throughout your application.
 Follow the contrast rule.
 If you are going to use color in your application, you need to ensure
that your screens are still readable. The best way to do this is to
follow the contrast rule: Use dark text on light backgrounds and light
text on dark backgrounds. Reading blue text on a white background
is easy, but reading blue text on a red background is difficult. The
problem is not enough contrast exists between blue and red to make
it easy to read, whereas there is a lot of contrast between blue and
white.
User interface design
Techniques
 Align fields effectively.
 When a screen has more than one editing field, you want to
organize the fields in a way that is both visually appealing and
efficient. I have always found the best way to do so is to left-
justify edit fields: in other words, make the left-hand side of
each edit field line up in a straight line, one over the other. The
corresponding labels should be right-justified and placed
immediately beside the field. This is a clean and efficient way to
organize the fields on a screen.
 Justify data appropriately.
 For columns of data, common practice is to right-justify
integers, decimal align floating-point numbers, and to left-justify
strings.
User interface design
Techniques
 Don’t create busy user interfaces.
 Crowded screens are difficult to understand and, hence, are
difficult to use. Experimental results show that the overall
density of the screen should not exceed 40 percent, whereas
local density within groupings should not exceed 62 percent.
 Group things effectively.
 Items that are logically connected should be grouped together
on the screen to communicate they are connected, whereas
items that have nothing to do with each other should be
separated.You can use white space between collections of
items to group them and/or you can put boxes around them to
accomplish the same thing.
Example of UID

Techniques Yes No
Consistency
Navigation
Labels
Colors
Alignment
Groupings
Crowded
Example of UID

Techniques Yes No
Consistency
Navigation
Labels
Colors
Alignment
Groupings
Crowded
 Example of UID

Techniques Yes No
Consistency
Navigation
Labels
Colors
Alignment
Groupings
Crowded
 Example of UID

Techniques Yes No
Consistency
Navigation
Labels
Colors
Alignment
Groupings
Crowded
 Example of UID

Techniques Yes No
Consistency
Navigation
Labels
Colors
Alignment
Groupings
Crowded
 Example of UID

Techniques Yes No
Consistency
Navigation
Labels
Colors
Alignment
Groupings
Crowded
 Example of UID

Techniques Yes No
Consistency
Navigation
Labels
Colors
Alignment
Groupings
Crowded
Example of UID
Example of UID
Summary
 HIPO diagrams are an excellent means of documenting
systems and programs. The varying levels of detail
incorporated in the diagrams allow them to be used by
managers, analysts, and programmers to meet needs ranging
from program maintenance to the overhaul of entire systems.
 The user interface of an application will often make or break
it. Although the functionality that an application provides to
users is important, the way in which it provides that
functionality is just as important. An application that is difficult
to use won’t be used. Period. It won’t matter how technically
superior your software is or what functionality it provides, if
your users don’t like it they simply won’t use it. Don’t
underestimate the value of user interface design nor
of usability.