5. step 3 understand the principles ofui

8/3/2019 5. Step 3 Understand the Principles OfUI

1/36

Step 3

Understand the Principles of

Good Interface andScreen Design


2/36

Outline

Human Considerations inInterface and Screen Design How to Discourage the User

What Users Want

What Users Do

Interf ace Design Goals

The Test fora Good Design

Screen and Web Page Meaningand Purpose

Organizing Elements Clearly andMeaningfully

Consistency

Starting Point

Ordering of Dataand Content Navigation and Flow

Visually Pleasing Composition

Distinctiveness

Focus and Emphasis

Conveying Depth of Levels oraThree-Dimensional

Appearance

Presenting Information Simply andMeaningfully

Application and Page Size

Application Screen Elements Organization and Structure

Guidelines

Statistical Graphics

Types of Statistical Graphics

Flow Charts

Technological Considerations inInterface Design Gr aphical Systems

Web Systems

2006 292


3/36

A well-designed interface and

screen

Reflects the capabilities, needs, and tasks of itsusers.

Is developed within the physical constraintsimposed by the hardware on which it isdisplayed.

Utilizes the capabilities of its controlling software

effectively. Achieves the business objectives of the system

for which it is designed.


4/36

Human Considerations in

Interface and Screen Design How to Discourage the User All distractions and discouragements must be eliminated in

design.

What Users Want

The desired direction is toward simplicity, clarity, andunderstandability

What Users Do

When interacting with acomputer, user: Identifies a task to be performed or a need to be fulfilled

Decides how the task will be completed or the need fulfilled.

Manipulates the computers controls.

Gathers the necessary data or content while filtering outmeaningless data or content.

Forms judgments resulting in decisions relevant to the taskor need.


5/36

Interface Design Goals

Reduce visual work.

Reduce intellectual work.

Reduce memory work. Reduce motor work.

Minimize or eliminate any burdens or

instructions imposed by technology.


6/36

The Test for a Good Design

A simple test for good design

Can all screen or Web page elements be

identified by cues other than by readingthe words that make themup?

The best interfaces make everything on

the screen obvious.


7/36

Screen and Web Page Meaning

and Pu

rpose All interface elements must have meaning tousers and serve a purpose in performing tasksor fulfilling needs.

Ifan element does not have meaning for theuser, do not include it in the interface because itis noise. Noise is useless information. Signals are useful

information

Noise reduces clarity ofa screen or Web page

The objective in design is to minimize noise andmaximize signals


8/36

Starting Point

Provide an obvious starting point in the screens upper-left corner.

Focus userattention on the most important parts ofascreen or page. Textual Displays

Looking at displays of textual information, usually ones eyes movefirst to the upper-left center of the display, and then quickly movethrough the display in aclockwise direction

Graphical and Web Displays

people do take

adva

ntage of

visua

l details s

uchas white sp

ace orcomponents that stand out conspicuously from othercomponents.

People tend to look at text first, not images.

Larger type dominates over smaller type.

Changing information is looked at before non-changing information.


9/36

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 isprioritized according to the users expectations and needs.

Possible ordering schemes include

Conventional. Sequence ofuse.

Frequency ofuse.

Function.

Importance.

Gener al to specific.

For m groups that coverall 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.


10/36

Ordering Web Pages

Establish levels of importance.

Place critical information near the top ofthe Web site.

Place important items at the top ofa page.

Organize information clearly.

Place important items consistently.

Facilitate scanning.

Str ucture for easy comparison.


11/36

Navigation and Flow Provide an ordering of screen information and elements that

Is rhythmic, guiding a persons eye through the display.

Encourages natural movement sequences.

Minimizes pointerand eye movement distances.

Locate the most important and most frequently used elements orcontrols atthe top left.

Maintain a top-to-bottom, left-to-right flow. Assist in navigation through a screen by

Aligning elements.

Grouping elements.

Using line borders.

Through focus and emphasis, sequentially, direct attention to items that are1. Critical.

2. Important.3. Secondary.

4. Peripheral.

Tab through windows in logical order of displayed information.

Locate command buttons at end of the tabbing order sequence.

When groups of related information must be broken and displayed onseparate screens, provide breaks at logical or natural points in theinformation flow.


12/36

Visually Pleasing Composition

Provide avisually oraesthetically pleasingcomposition possessing the following qualities: Balance

Symmetry

Regularity

Predictability

Sequentiality

Economy

Unity Proportion

Simplicity

Groupings


13/36

Visually Pleasing Composition (example)


14/36



15/36



16/36



17/36



18/36

Distinctiveness

Individual screen controls, and groups ofcontrols, must beperceptually distinct.

Screen controls Should not touch a window border.

Should not touch each other.

Field and group borders Should not touch a window border.


Buttons Should not touch a window border.


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.


19/36

Focus and Emphasis

Visually emphasize components

To provide emphasis use techniques such as Higher brightness.

Reverse polarity or inverse video.

Distinctive Typeface.

Blinking.

Line r ulings and surrounding boxes or frames.

Color.

Larger size.

Animation.

Positioning.

Distinctive orunusual shape.

Isolation. De-emphasize less important elements.

To ensure that emphasized screen elements stand out, avoid

Minimize screen clutter.

In Web page design Call attention to new orchanged content.

Ensure that page text is not overwhelmed by page background.


20/36

Conveying Depth of Levels

or a Three-Dimensional Appearance

Use highlighting, shading, and other techniquesto achieve a three-dimensional appearance.

Always assume that a light source is in theupper-left corner of the screen.

Display command buttons above the screenplane

Display screen-based controls on, or etched orlowered below, the screen plane.

Do not overdo perspective and avoid Using perspective for noninteractive elements.

Providing too much detail.


21/36

Presenting Information Simply and

Meaningfully

Provide legibility. Infor mation is noticeable and distinguishable.

Provide readability. Infor mation is identifiable, interpretable, and attractive.

Present information in usable form.

Tr anslations, transpositions, and references to documentation should notbe required to interpret and understand information.

Utilize contrasting display features. To attract and call attention to different screen elements.

Create visual lines. Implicit and explicit, to guide the eye.

Be consistent. In appearance and procedural usage.

Typography Font Types and Families, Font Size, Font Styles and Weight, Font Case,

Defaults, Consistency, Text Backgrounds


22/36

Application and Page Size

Scrolling and Paging

Amount of Information to Present Present the properamount of information for the task.

Too little is inefficient.

Toomuc

h isconf

using. Present all information necessary for performing an action or

making a decision on one screen, whenever possible.

People should not have to remember things from one screen tothe next.

Restrict screen or window density levels to no more than about30 percent.

Paper versus Screen Reading Provide a simple facility for printing out a hard copy of

documents


23/36

Application Screen Elements Title

Windows All windows must have a title located at the top

Web Pages All Web pages must have titles located in the browser title barand on the content pages themselves.

Browser bar title and page title should be consistent.

Titles must be : Descriptive Unique , meaningfully different from other Web pages and Concise.

Captions/Labels Data Fields

Control Caption Data Field Differentiation Control Caption Data Field Justification

Headings Section Headings

Subsection or Row Headings

Field Group Headings

SpecialSymbols

Instructions

Completion Aids Required and Optional Data

Lists

Keying Procedures Keystrokes

Tabbing

Manual Tab versus Auto Skip

Keying Rules

Data Output

Reports Tables


24/36

Application Screen Elements example (1)


25/36



26/36



27/36



28/36



29/36



30/36

Organization and Structure

Guidelines Information Entry and Modification

(Conversational) Screens Grids

Text Entry from a Source Document Dedicated Source Document Screens

Display/Read-OnlyScreens Organization

Data Presentation

Data Arrangement Data Justification

Data Display


31/36

Organization and Structure Guidelines

example


32/36

Statistical Graphics

A statistical graphicis data presented in a graphical format.

a statistical graphic should possess the following qualities: The objective and use of the graph should be obvious and apparent.

The gr aph type should be recognizable.

The gr aph type should help users understand the datamore easily.

The d ata should be formatted and presented correctly.

The d ata should be formatted and presented for the using audience.

The gr aph should avoid distortions by telling the truth about the data.

Components of a Statistical Graphic : axes, scales, an area, a title and alegend or key,

Data Presentation

Axes

Scales andScaling Proportion

Lines

Labeling


33/36

Types of Statistical Graphics

Curve and Line Graphs : can be used to showrelationships between sets of data defined by twocontinuous variables.

Surface Charts :If the data being depicted by acurve orline represents all the parts ofa whole, consider

developing asurface orarea chart, Scatterplots : can be used to show relationships among

individual data points in a two-dimensional array.

BarCharts : can be used to show a few differencesbetween separate entities or to show differences in a

variable at a few discrete intervals. Segmented orStacked Bars : If both the total measure

ofavalue and its component portions are of interest,considerusing segmentedorstacked bars.

Pie Charts :can be used to show an apportionment ofa

total into its

com

ponent parts


34/36

Types of Statistical Graphics example (1)


35/36

Types of Statistical Graphics example (1)


36/36

Technological Considerations in

Interface Design Graphical Systems

Screen design must be compatible with the capabilities of the system, including System power.

Screen size.

Screen resolution.

Display colors.

O

ther displa

y fea

tures. Screen design must be compatible with the capabilities of the

System platform being used.

Development and implementation tools being used.

Platform style guide being used.

System Power

Screen Size

S

creen Resolution Colors

Other Display Features

Platform Compatibility

Development and Implementation ToolCompatibility

Style Guide Compatibility

5. step 3 understand the principles ofui

Documents