Ch10 Screen Layout

Yonglei Tao

School of Computing & 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

A Problem in 2008 Election

A voting machine with a touch screen

Barack Obama

John McCain

News Map

http://newsmap.jp/

User Performance

Eye movement Top to bottom, left to right

Action sequences Touch, keyboard, and mouse

Task sequences Work flow for accomplishing user tasks

And task frequencies

Layout Appropriateness

A metric to 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 Appropriateness

Formula

Cost = Σ task frequency * cost of task all tasks

A task is a sequence of widget-level actions users perform

Costs are based on the distance users must move the mouse or Fitts’s law

The Original Design

Two Versions of Redesign

Testing Results

Task Completion Time User Preference Rating

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

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

Eye Tracking

Eye tracking is the process of measuring either the point of gaze or the motion of an eye relative to the head

Eye tracking demo

Example - Eye Tracking Test

Factors on form completion Label placement Formatting Type of form content

Test subjects Novice and expert users

Eye Tracking – Gaze Plots

Source: “Label Placement in Forms”, Matteo Penzo, at http://www.uxmatters.com

Gaze Plots (Cont.)

Time Spent on a Search Form

Rookies on eBay

Pros on Amazon

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