Yonglei Tao School of Computing & Info Systems GVSU Ch10 Screen Layout Yonglei Tao School of Computing & Info Systems GVSU

Screen Layout Find out Design 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 Action sequences Task sequences Top to bottom, left to right Action sequences Touch, keyboard, and mouse Task sequences Work flow for accomplishing user tasks And task frequencies Evaluation of layout

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: 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 Headings and captions 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 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 Sherbert 75 Toffee 120 Chocolate 35 Fruit gums 27 Coconut dreams 85

Multiple Column Lists (Cont.) Sherbert 75 Toffee 120 Chocolate 35 Fruit gums 27 Coconut dreams 85 Sherbert 75 Toffee 120 Chocolate 35 Fruit gums 27 Coconut dreams 85

From IEEE conference site. Issues From IEEE conference site. Issues. (1) default choice is “of interest”, in fact, any one can have only less than 10, so it forces the user to look at every row and click on most of them since there are a large number of choices. (2) the background color that highlight each row is not the same and a row is quite long. It is hard to stay with a row from the left to the right end precisely.

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

Layout Example F3.38

Layout Example F3.40

Layout Example F3.31

Layout Example F3.39

Layout Example F3.44

Layout Example

Layout Examples

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