1. Principles of Good Screen Design
Laying Out Components
Principles of Good Screen Design
Galitz, W. O., (2002) The Essential Guide to User Interface Design, 2nd Edition, Wiley Computer Publishing, New York, NY.

2. What Do Users Want in a Layout?
An orderly, clean, clutter-free appearance
An obvious indication of what is being shown and what should be done with it.
Expected information located where it should be.
Plain, simple English.
A simple way of finding out what in a system and how to get it out.
A clear indication of when an action can make a permanent change in the data or system.
Simplicity, clarity, and understandability.

3. Keep in mind that ...
People will send many, many hours staring at your screens.

4. As a Designer you are Responsible for:
Every control
All text
The screen organization
All emphasis
Each color
Every graphic
All screen animation
Each Message
All forms of feedback

5. The Goals in Layout Design are to
Reduce visual work
Reduce intellectual work
Reduce memory work
Reduce motor work
Minimize or eliminate any burdens or instructions imposed by technology

6. Consistency Provide real-world consistency.
Provide internal consistency. Observe the same conventions and rules for all aspects of an interface screen:
organization
presentation
usage
locations
Deviate only when there is clear benefit for the user.

7. Ordering of Screen Data and Content
Possible ordering schemes include:
conventional
sequence of use
frequency of use
function or category
importance
general to specific
Ensure the at information that must be compared is visible at the same time.
Ensure that only information relative to the current task is presented on the screen.

8. Screen Navigation and Flow
Provide an obvious starting point in the screen’s upper-left corner.
Maintain a top-to-bottom, left-to-right flow.
Provide an ordering of screen information and elements that
is rhythmic, guiding a person’s eye through the display
encourages natural

9. Provide Visual Pleasing Composition with the Following Qualities:
Balance
Symmetry
Regularity
Predictability
Sequentiality
Economy
Unity
Proportion
Simplicity
Groupings

10. Balance
Create screen balance by providing an equal weight of screen elements, left and right, top and bottom.

11. Symmetry
Create symmetry by replicating elements left and right of the screen centerline.

12. Regularity
Create regularity by using consistently spaced column and row starting points for widgets. Also use elements similar in size shape, color and spacing.

13. Predictability
Create predictability by being consistent and following conventional orders or arrangements.

14. Sequentiality
Provide sequentiality by arranging elements to guide the eye through the screen in an obvious, logical, rhythmic, and efficient manner.

15. Economy
Provide economy by using as few styles, display techniques, and colors as possible.

16. Unity
Create unity by using similar sizes, shapes, or colors for related information. Also by leaving less space between elements of a screen than the space left in the margins.

17. Proportion
Create windows and groupings of data or text with aesthetically pleasing proportions.

18. Simplicity
Optimize the number of elements on a screen, within the limits of clarity. Minimize the alignment points, especially horizontal and vertical.

19. Measure of screen complexity
Number of widgets on the screen
+ The number of horizontal alignment points
+ The number of vertical alignment points
_____________________________________

20. Groupings Provide function groupings of associated elements
Evenly space widgets within a grouping
Visually enforce groupings
provide adequate separation between groupings through liberal use of whte space
provde line borders around groups
Provide meaningful titles for each grouping

21. Evaluating Layouts - Eye Movement Method
Trace the required sequence of eye movements through the screen layout- draw a line successive controls.
The goal is design a layout that minimizes visual work.

22. Print Merge Example

23. Print Merge Example