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, guiding a person’s eye through the display  encourages natural 3461

Provide Visual Pleasing Composition with the Following Qualities:

     Balance Symmetry Regularity Predictability Sequentiality      Economy Unity Proportion Simplicity Groupings 3461

Balance

Create screen balance by providing an equal weight of screen elements, left and right, top and bottom.

Balance Instability 3461

Symmetry

Create symmetry by replicating elements left and right of the screen centerline.

Symmetry Asymmetry 3461

Regularity

Create 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

Predictability

Create predictability by being consistent and following conventional orders or arrangements.

icon Predictability Title Bar icons Menu Bar Control Control Control Control Control Control Button Button Button Button Spontaneity Control Control Control Control Button Title Bar Menu Bar icon icons Button Control Control 3461

Sequentiality

Provide sequentiality by arranging elements to guide the eye through the screen in an obvious, logical, rhythmic, and efficient manner.

Sequentiality Randomness 3461

Economy

Provide economy by using as few styles, display techniques, and colors as possible.

Economy XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX Intricacy XXXXXXXXX XXXXXXXXX XXXXXXXXX

QQQQQQQQ QQQQQQQQ QQQQQQQQ QQQ

QQ BBBBBBBBBBBB BBBBBBBBBBBB BBBBBBBBBBBB

ZZZZZZZZZZ ZZZZZZZZZZ ZZZZZZZZZZ ZZZZZZZZZZ ZZ

3461

Unity

Create 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

Proportion

Create windows and groupings of data or text with aesthetically pleasing proportions.

Square 1:1 Square-root of two 1:1.414

Golden rectangle 1:1.618

Square-root of three 1:1.732

Double square 1:2

3461

Simplicity

Optimize 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 Example

Print Merge

Path:

D:\WINDOWS\PM4\*.txt

Files

mgximp.txt

readme1.txt

readme2.txt

tabledit.txt

typemgr.txt

File:

tabledit.txt

Directories

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

Up Cancel Merge

3461

Print Merge Example

Page Setup

Orientation:

Portrait Landscape

Page Size:

Letter A3 Custom A4 Legal A5 Slide Tabloid B5

Horizontal:

11.70

Vertical: Paper Color ...

8.27

Add Page Frame OK Cancel

3461