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
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) …… … … …
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 Dix Janet Finlay Gregory Abowd Russell Beale Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix, Alan Finlay, Janet Abowd, Gregory Beale, Russell
Multiple Column Lists Sherbert75 Toffee120 Chocolate35 Fruit gums27 Coconut dreams85
Multiple Column Lists (Cont.) Sherbert75 Toffee120 Chocolate35 Fruit gums27 Coconut dreams85
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
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