1. Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU

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

3. Remote Control for Car Door

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

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

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

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

8. Space to Separate

9. Space to Structure

10. Space to Highlight

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

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

13. Multiple Column Lists Sherbert75 Toffee120 Chocolate35 Fruit gums27 Coconut dreams85

14. Multiple Column Lists (Cont.) Sherbert75 Toffee120 Chocolate35 Fruit gums27 Coconut dreams85

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

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

19. Layout Example

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