1

Understanding the Principles

GOOD INTERFACE

SCREEN DESIGN




2
Screen Design Guidelines
A test for a good design
Organizing screen elements
Screen navigation flow
Visually pleasing composition
Typography
Keying procedures
Data output
Web sites and Web pages
Statistical Graphics
Technological consideration




3
How to Discourage the User
Unclear caption and badly worded questions.
Improper type and graphics emphasis.
Misleading headings.
Information requests perceived to be irrelevant or
unnecessary.
Information requests that require one to backtrack
and rethink a previous answer.
Cluttered, cramped layout.
Poor quality of presentation, legibility,
appearance, and arrangement.






4
What Users Want
An orderly, clean, clutter-free appearance.
An obvious indication of what is being shown and what
should be done with it.
Expected information located where it should be.
A clear indication of what relates to what, including
options, headings, captions, data, and so forth.
Plain, simple English.
A simple way of finding out what is in a system and
how to get it out.
A clear indication of when an action can make
permanent changes in the data or system.




5
(1) Test for a Good Design
Can all screen or Web page elements be identified
by cues other than by reading the words that make
them up?
The best interface make everything on the screen
obvious.


6
(2) Organization
Visual clarity is achieved when the display
elements are organized and presented in
meaningful, understandable, and recognizable
ways.
A clear and clean organization makes it easier to
recognize a screens essential elements and to
ignore its secondary information when
appropriate.



7
Starting Point
Provide an obvious starting point in the screens
upper-left corner.
Focus user attention on the most important parts of
a screen or page.


8
Textual Display
Eyeball fixation studies indicate that in looking at
displays of textual information, usually ones eyes
move first to the upper-left center of the display,
and then quickly move through the display in
clockwise direction.
It was found out that visual targets located in the
upper-left quadrant of a screen were found fastest
and those located in the lower-right quadrant took
longest to find.

9
Graphical and Web Display
People tend to look at text first, not images.
Larger type dominates over smaller type.
Changing information is looked at before non-
changing information.
10
Ordering of Data and Content
Divide information into units that are logical, meaningful,
and sensible.
Organize by the degree of interrelationship between data or
information.
Provide an ordering of screen units of information and
elements that is prioritized according to the users
expectation and needs.
Ordering of schemes.
Form groups that cover all possibilities.
Ensure that information that must be compared is visible at
the same time.
Ensure that only information relative to the users tasks or
needs is presented on the screen.
11
(3) Navigation and Flow
Provide an ordering of screen information and
elements
Locate the most important and frequently used
elements or controls at the top left.
Maintain a top-to-bottom, left-to-right flow.
Assist in navigation through a screen


12
Movement
From dark areas to light areas.
From big objects to little objects.
From unusual shapes to common shapes.
From highly saturated colors to unsaturated colors.


13
Focus
For screens containing data, locate the most
important or frequently used screen controls to the
top left of the screen where initial attention is usually
directed. This will also reduce the overall number of
eye and manual control movements needed to work
with a screen. Then, maintain a top-to-bottom, left-
to-right flow through the screen.


14
(4)Visually Pleasing Composition
Balance
Symmetry
Regularity
Predictability
Sequentiality
Economy
Unity
Proportion
Simplicity
Groupings

15
[1] BALANCE
Create screen balance by providing an equal
weight of screen elements, left and right, top and
bottom.
Balance is a stabilization or equilibrium, a midway
center of suspension. The design elements have an
equal weight, left to right, top to bottom.
16
Balance vs. Instability
17
[2] SYMMETRY
Create symmetry by replicating elements left and
right of the screen centerline.

Symmetry, is axial duplication: A unit on one side
of t he centerline is exactly replicated on the other
side.
18
Symmetry vs. Asymmetry
19
[3] REGULARITY
Create regularity by establishing standard and
consistently spaced horizontal and vertical
alignment points.

Also, use similar element sizes, shapes, colors,
and spacing.

20
Regularity vs. Irregularity
21
[4] PREDICTABILITY
Create predictability by being consistent and
following conventional orders or arrangements.

Predictability, suggests a highly conventional
order or plan. Viewing one screen enables one to
predict how another will look.
22
Predictability vs. Spontaneity
23
[5] SEQUENTIALITY
Provide sequentiality by arranging elements to
guide the eye through the screen in an obvious,
logical, rhythmic, and efficient manner.

24
Sequentiality vs. Randomness
25
[6] ECONOMY
Provide economy by using as few styles, display
techniques, and colors as possible.

Economy, is the frugal and judicious use of
display elements to get the message across as
simply as possible.

26
Economy vs. Intricacy
27
[7] UNITY
Using similar sizes, shapes, or colors for related
information.

Leaving less space between elements of a screen
than the space left at the margins.

28
Unity vs. Fragmentation
29
Aesthetically Pleasing Shapes
30
[8] SIMPLICITY
Optimize the number of elements on a screen,
within limits of clarity.

Minimize the alignment points, especially
horizontal or columnar.

31
Simplicity vs. Complexity
32
[9] GROUPINGS
Optimize Grouping screen elements aids in
establishing structure, meaningful relationships,
and meaningful form.

In addition to providing aesthetic appeal, past
research has found that grouping aids in
information recall and results in a faster screen
search.
33
Grouping Using Borders
Incorporate line border.
Do not exceed three lines thickness or two line
style on a screen.
Create lines consistent in height and length.
For adjacent groupings with borders, whenever
possible, align borders left, right, top, bottom.
Use rules and borders sparingly.
34
Distinctiveness
Incorporate Individual screen controls, and groups
of controls, must be perceptually distinct.
Screen controls
Field and group borders
Buttons
A button label should not touch the button border.
Adjacent screen elements must be displayed in
colors or shades of sufficient contrast with one
another.
35
Focus and Emphasis
Visually emphasize components
De-emphasize less important elements
Minimize screen clutter
Call attention to new or changed content
Ensure that page text is not overwhelmed by page
background
36
Three-Dimensional Ideas
Use highlighting, shading, and other techniques to
achieve a three-dimensional appearance.
Always assume that a light source is in the upper-
left corner of the screen.
Display screen-based controls on, or etched or
lowered below, the screen plane.
Do not overdo perspective
37
Three-Dimensional Illusion
38
(5) Typography
A fonts characteristics can be used as a tool to:
Communicate the organization of screen elements.
Identify the most important screen elements.
Establish a reading order.
Create a particular mood.
39
Font Types and Families
Use simple, common, and familiar fonts to
achieve the best reading speed.
Use no more than two families, compatible in
terms of line thicknesses, capital letter height, and
so on.
40
Font Types and Families
If it is necessary to mix typeface families on a screen
do the following:
Never mix families within the same race.
Assign a separate purpose to each family.
Allow one family to dominate.
41
Font Family
42
Font Size
Use no more than three sizes
12 point for menus
10 points for windows
12 to 14 points for body text
18 to 36 points for titles and headings
43
Font Case
Use mixed-case
Consider using upper case or capitalization
Use all lowercase with caution.