3461

Laying Out Components

Principles of Good Screen Design

Galitz, W. O., (2002) The Essential Guide to User Interface Design, 2nd Edition, Wiley Computer Publishing, New York, NY.

3461

What Do Users Want in a Layout? 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. Plain, simple English. A simple way of finding out what in a system and

how to get it out. A clear indication of when an action can make a

permanent change in the data or system.

Simplicity, clarity, and understandability.

3461

Keep in mind that ...

People will send many, many hours staring at your screens.

3461

As a Designer you are Responsible for: Every control All text The screen organization All emphasis Each color Every graphic All screen animation Each Message All forms of feedback

3461

The Goals in Layout Design are to Reduce visual work Reduce intellectual work Reduce memory work Reduce motor work Minimize or eliminate any burdens or

instructions imposed by technology

3461

Consistency Provide real-world consistency. Provide internal consistency. Observe the same

conventions and rules for all aspects of an interface screen: organization presentation usage locations

Deviate only when there is clear benefit for the user.

3461

Ordering of Screen Data and Content Possible ordering schemes include:

conventional sequence of use frequency of use function or category importance general to specific

Ensure the at information that must be compared is visible at the same time.

Ensure that only information relative to the current task is presented on the screen.

3461

Screen Navigation and Flow Provide an obvious starting point in the

screen’s upper-left corner. Maintain a top-to-bottom, left-to-right flow. Provide an ordering of screen information and

elements that is rhythmic and which guides a person’s eye through the display in a “natural” progression.

3461

Provide Visual Pleasing Composition with the Following Qualities:

Balance Symmetry Regularity Predictability Sequentiality

Economy Unity Proportion Simplicity Groupings

3461

BalanceCreate screen balance by providing an equal

weight of screen elements, left and right, top and bottom.

Balance Instability

3461

SymmetryCreate symmetry by replicating elements left

and right of the screen centerline.

Symmetry Asymmetry

3461

RegularityCreate regularity by using consistently spaced column

and row starting points for widgets. Also use elements similar in size shape, color and spacing.

Regularity Irregularity

3461

PredictabilityCreate predictability by being consistent and

following conventional orders or arrangements.

Predictability SpontaneityTitle Baricon

Button

icons

Menu Bar

Control Control Control

Control Control Control

Button Button

Title Bar

icon

Button

icons

Menu Bar

Control

Control

Control

Control

Control

Control

Button Button

3461

SequentialityProvide sequentiality by arranging elements to

guide the eye through the screen in an obvious, logical, rhythmic, and efficient manner.

Sequentiality Randomness

3461

EconomyProvide economy by using as few styles, display

techniques, and colors as possible.

Economy Intricacy

XXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXX

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

QQQQQQQQQQQQQQQQQQQQQQQQQQQQQ

ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ

3461

UnityCreate unity by using similar sizes, shapes, or colors

for related information. Also by leaving less space between elements of a screen than the space left in the margins.

Unity Fragmentation

3461

ProportionCreate windows and groupings of data or text with

aesthetically pleasing proportions.

Square1:1

Square-rootof two1:1.414

Goldenrectangle1:1.618

Square-rootof three1:1.732

Doublesquare1:2

3461

SimplicityOptimize the number of elements on a screen, within

the limits of clarity. Minimize the alignment points, especially horizontal and vertical.

Simplicity Complexity

3461

Measure of screen complexity

Number of widgets on the screen+ The number of horizontal alignment points+ The number of vertical alignment points_____________________________________

3461

Groupings Provide function groupings of associated elements Evenly space widgets within a grouping Visually enforce groupings

provide adequate separation between groupings through liberal use of whte space

provde line borders around groups Provide meaningful titles for each grouping

3461

Evaluating Layouts - Eye Movement Method

Trace the required sequence of eye movements through the screen layout- draw a line successive controls.

The goal is design a layout that minimizes visual work.

3461

Print Merge ExamplePrint Merge

D:\WINDOWS\PM4\*.txtPath:

Files

mgximp.txtreadme1.txtreadme2.txttabledit.txttypemgr.txt

File:

Directories

[...][tutorial][york3461][-a-][-c-][-d-][-e-]

tabledit.txt

Up

Cancel

Merge

3461

Print Merge ExamplePage Setup

Orientation:

11.70

Paper Color ... Cancel

Portrait Landscape

Page Size: Letter Legal Tabloid

A3 A4 A5 B5

Custom Slide

Horizontal:

Vertical: 8.27

Add Page Frame OK