Ch 9 Screen Layout

Yonglei Tao

School of Computing and Info Systems

GVSU

Screen Layout

Find out What the user is doing What information is required In what order things are likely to be

needed Design

Let the required interactions drive the layout

Remote Control for Car Door

Issues to Consider

Grouping and structure Ordering Decoration Alignment Evaluation

Grouping and Structure

Logical together -> Physical together

Billing details: Name Address: … Credit card no

Delivery details: Name Address: … Delivery time

Order details: Item Description Quantity Unit Price Cost size 10 screws (boxes) 7 3.71 25.97 …… … … …

Order of Groups and Elements

Find out the user's natural order of doing their tasks

Match it on screen Provide support for navigation

Set up the tabbing order Set up keyboard equivalents for direct

access to controls

Decoration

White space Borders

Reinforce groupings, not for single fields and command buttons

Headings and captions Fonts, colors, and image

Space to Separate

Space to Structure

Space to Highlight

Aligning Screen Elements

Minimize alignment points on a window Easy eye and mouse movement

Vertical orientation A top-to-bottom flow through controls

Horizontal orientation Need to enhance distinctiveness

Balance elements with multiple groups and multiple columns

Alignment

Text Large numbers

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell

Multiple Column Lists

Sherbert 75Toffee 120Chocolate 35Fruit gums 27Coconut dreams 85

Multiple Column Lists (Cont.)

Sherbert 75Toffee 120Chocolate 35Fruit gums 27Coconut dreams 85

Sherbert 75Toffee 120Chocolate 35Fruit gums 27Coconut dreams 85

Address

Address

Frist Name

Last Name

O K Cancel

Address

C ity

State

Posta l Code

Frist Name Last Name

O K Cancel

Address

C ity State Z ip Code

User Performance

Eye movement Top to bottom, left to right

Action sequences keyboard and mouse

Task sequences Work flow for accomplishing user tasks

Also consider task frequencies

Layout Appropriateness

Assess if the spatial layout is in harmony with the user tasks

Help layout design and redesign Specify task sequences and their frequencies Produce a layout to minimize visual scanning Evaluate it by how well it matches the tasks Take into consideration user expectations about

the positions of fields

Layout Example

Layout Example

Layout Example

Design Guidelines

Follow the natural flow of work Group related fields effectively Provide good default values whenever

possible Gray out unavailable components Use meaningful labels Provide mnemonics and accelerator keys for

navigating between visual components