Transcript Laying Out Components 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.
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, guiding a person’s eye through the display encourages natural 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.
Balance Instability 3461
Symmetry
Create symmetry by replicating elements left and right of the screen centerline.
Symmetry Asymmetry 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.
Regularity Irregularity 3461
Predictability
Create predictability by being consistent and following conventional orders or arrangements.
icon Predictability Title Bar icons Menu Bar Control Control Control Control Control Control Button Button Button Button Spontaneity Control Control Control Control Button Title Bar Menu Bar icon icons Button Control Control 3461
Sequentiality
Provide sequentiality by arranging elements to guide the eye through the screen in an obvious, logical, rhythmic, and efficient manner.
Sequentiality Randomness 3461
Economy
Provide economy by using as few styles, display techniques, and colors as possible.
Economy XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX XXXXXXXXX Intricacy XXXXXXXXX XXXXXXXXX XXXXXXXXX
QQQQQQQQ QQQQQQQQ QQQQQQQQ QQQ
QQ BBBBBBBBBBBB BBBBBBBBBBBB BBBBBBBBBBBB
ZZZZZZZZZZ ZZZZZZZZZZ ZZZZZZZZZZ ZZZZZZZZZZ ZZ
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.
Unity Fragmentation 3461
Proportion
Create windows and groupings of data or text with aesthetically pleasing proportions.
Square 1:1 Square-root of two 1:1.414
Golden rectangle 1:1.618
Square-root of three 1:1.732
Double square 1:2
3461
Simplicity
Optimize the number of elements on a screen, within the limits of clarity. Minimize the alignment points, especially horizontal and vertical.
Simplicity Complexity 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
Print Merge
Path:
D:\WINDOWS\PM4\*.txt
Files
mgximp.txt
readme1.txt
readme2.txt
tabledit.txt
typemgr.txt
File:
tabledit.txt
Directories
[...] [tutorial] [york3461] [-a-] [-c-] [-d-] [-e-]
Up Cancel Merge
3461
Print Merge Example
Page Setup
Orientation:
Portrait Landscape
Page Size:
Letter A3 Custom A4 Legal A5 Slide Tabloid B5
Horizontal:
11.70
Vertical: Paper Color ...
8.27
Add Page Frame OK Cancel
3461