Object State Modeling for Event- Driven Systems Yonglei Tao 1.
Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.
-
Upload
corey-hines -
Category
Documents
-
view
213 -
download
0
Transcript of Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.
![Page 1: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/1.jpg)
Ch 9 Screen Layout
Yonglei Tao
School of Computing and Info Systems
GVSU
![Page 2: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/2.jpg)
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
![Page 3: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/3.jpg)
Remote Control for Car Door
![Page 4: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/4.jpg)
Issues to Consider
Grouping and structure Ordering Decoration Alignment Evaluation
![Page 5: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/5.jpg)
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 …… … … …
![Page 6: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/6.jpg)
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
![Page 7: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/7.jpg)
Decoration
White space Borders
Reinforce groupings, not for single fields and command buttons
Headings and captions Fonts, colors, and image
![Page 8: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/8.jpg)
Space to Separate
![Page 9: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/9.jpg)
Space to Structure
![Page 10: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/10.jpg)
Space to Highlight
![Page 11: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/11.jpg)
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
![Page 12: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/12.jpg)
Alignment
Text Large numbers
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix , AlanFinlay, JanetAbowd, GregoryBeale, Russell
![Page 13: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/13.jpg)
Multiple Column Lists
Sherbert 75Toffee 120Chocolate 35Fruit gums 27Coconut dreams 85
![Page 14: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/14.jpg)
Multiple Column Lists (Cont.)
Sherbert 75Toffee 120Chocolate 35Fruit gums 27Coconut dreams 85
Sherbert 75Toffee 120Chocolate 35Fruit gums 27Coconut dreams 85
![Page 15: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/15.jpg)
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
![Page 16: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/16.jpg)
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
![Page 17: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/17.jpg)
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
![Page 18: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/18.jpg)
![Page 19: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/19.jpg)
Layout Example
![Page 20: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/20.jpg)
Layout Example
![Page 21: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/21.jpg)
![Page 22: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/22.jpg)
![Page 23: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/23.jpg)
Layout Example
![Page 24: Ch 9 Screen Layout Yonglei Tao School of Computing and Info Systems GVSU.](https://reader036.fdocuments.in/reader036/viewer/2022062806/5697bf841a28abf838c86aa5/html5/thumbnails/24.jpg)
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