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

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

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

3461 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

3461 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

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

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

3461 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 and which guides a person’s eye through the display in a “natural” progression.

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

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

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

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

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

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

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

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

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

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

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

3461 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

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

3461 Print Merge Example

3461 Print Merge Example