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

2. 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

3. Remote Control for Car Door

4. A Problem in 2008 Election A voting machine with a touch screen
Barack Obama
John McCain

5. News Map

6. 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

7. 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

8. 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

9. The Original Design

10. Two Versions of Redesign

11. Testing Results
Task Completion Time User Preference Rating

12. Issues to Consider Grouping and structure Ordering Decoration
Alignment
Evaluation

13. 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)
…… … … …

14. Order of Groups and Elements
Find out the user's natural order of doing their tasks
Match it on screen
Provide support for navigation

15. Decoration White space Borders Headings and captions
Reinforce groupings, not for single fields and command buttons
Headings and captions
Fonts, colors, and image

16. Space to Separate

17. Space to Structure

18. Space to Highlight

19. 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

20. 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

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

22. 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

23. 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.

25. 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

26. Example - Eye Tracking Test
Factors on form completion
Label placement
Formatting
Type of form content
Test subjects
Novice and expert users

27. Eye Tracking – Gaze Plots
Source: “Label Placement in Forms”, Matteo Penzo, at

28. Gaze Plots (Cont.)

29. Time Spent on a Search Form
Rookies on eBay
Pros on Amazon

30. Layout Example
F3.38

31. Layout Example
F3.40

32. Layout Example
F3.31

33. Layout Example
F3.39

34. Layout Example
F3.44

35. Layout Example

36. Layout Examples

38. Layout Example

39. 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