Organization & Visual Structure

(material from: Designing Visual Interfaces by Mullet and Sano, and Designing the User Interface by Schneiderman and Plaisant)

And some more about colour:
and another potentially useful page with some examples of contrasting text

Here is a cute color test -
take the test and email me a screen snapshot (or photo of your screen after you complete it) along with your name

here are the results from the 2016  and 2017 classes

bat (0-4) 0 (0%) 0 (0%)
mole (5-9) 0 (0%) 1 (3%)
dog (10-14) 0 (0%) 0 (0%)
cat (15-19) 4 (3%)
2 (7%)
tiger (20-24) 14 (37%)
10 (34%)
hawk (25-29) 15 (39%)
13 (49%)
robot (>29) 5 (13%)
3 (10%)

There is a somewhat more rigorous one here that gives you better feedback

Some more on perception

"The eye travels along the paths cut out for it in the work" Paul Klee

not naturally occurring in man-made artifacts - need to establish relationships among components

Benefits of structure

Gestalt Principles - 1920s

    how individual elements are grouped into gestalts (wholes) during visual perception



Group related elements together establishing a hierarchy of elements and groups, then structure the display to reflect the relationships between the elements while maintaining balance.

Effective Grouping

And how about saving a file. The old windows way looked like this:

bad old windows file selector

So how does something like this look in a more modern version? Here the visual hierarchy better matches their relationships, and the 'Save' button is moved next to the file that is being saved.

new save 1

Common Errors:

Haphazard layout - should establish spatial relationships to organize the elements of the design. The image on the left is very chaotic making it hard to see the relationships. The image on the right is much better organized, making the relationships clear.
haphazard layout

Ambiguous Internal Relationships: consistency in the alignment of the boxes, but not in their contents, and several things are 'almost aligned' - enough to be distracting but not enough to be immediately obvious (Name vs Delay, Slow)

How are these things set in a more recent version of windows?

desktop1desktop 2desktop 3desktop 4desktop 5

and finally in Windows 10

Conflicting Symmetries:

Here the boundaries but not the contents are symmetrical, the eye is drawn to the boundaries not the contents. This is also an example of excessive contrast with the excessive number of boxes, and other issues in aligning the contents of the boxes.

conflicting symmetries

Aligning Labels but not controls:
Aligning labels but not controls

Alignment within, but not across controls. Things start out OK at the top and then completely self-destruct in the lower half of the dialogue box


False structure - adding boxes to impose structure adds visual noise and excessive hierarchies of 1.
False Structure

Excessive display density - the larger (75% of the screen with a small font) was replaced by the 3 smaller more focused dialogue boxes
Excessive Display Density




  1. Identify the axis along which symmetry will be established. In visual interface design this decision usually boils down to whether horizontal and/or vertical symmetry.
  2. Symmetry about the vertical axis is more prevalent in human perception and is generally more useful in visual displays
  3. Center the information on the axis of symmetry by carefully balancing the amount of information on each side of the axis. The information need not form a literal mirror image provided the mass and extent are equalized.
  4. Make sure the axis of symmetry is itself centered within the overall display context (i.e. the window or icon in question)
  5. Use the squint test to verify the results


  1. Identify the major boundaries in the existing layout, and look for ways to enhance them by moving additional elements into alignment with them
  2. Look for elements and margins - both internal and external - that almost, but not quite, align with one another and bring them into alignment by altering the size or position of one or both elements
  3. Look for free-standing elements and make sure they are aligned with something else in the display - either a major margin or some other element to which they are related
  4. If an element cannot be related to anything else in the display, try to relate it to the proportions of the display itself by positioning the element to correspond to the regular division of the space


Optical Adjustment:

  1. Determine the true point of alignment. Translate this into the 'normal' margin that would be occupied by a rectangular element in the same position
  2. Extend elements beyond the margin according to the sharpness of their adjacent angle. The greater the acuteness of the angle, the farther it will need to extend beyond the 'normal' margin
  3. Use a 'close-up' version of the squint test to verify alignment

For more information on typography you may want to check out 'helvetica' a documentary by Gary Hustwit.

and a bit about text size and layout a bit in regards to what happened at the Oscars
Why Typography Matters

Negative Space:

  1. Determine the organization of the information into a prioritized set of chunks of manageable size. 
  2. Ensure spatial separation of independent units of information by adding extra white space between chunks. Extra space is needed even if explicit boundary delimiters are used!
  3. Determine which elements require additional visual emphasis
  4. Increase the white space surrounding crucial elements
  5. Always remember that white space is not wasted space! Its role is to direct the viewer's attention to adjacent regions containing critical information.

Lets also take a look at the interfaces for some devices with particular purposes, rather than general PC interfaces.

In particular its important to note that there are no [X] close boxes or other standards of the desktop computer interface, but the rules about layouts and white space, icons, and feedback all apply.

PS3's XMB (2006)

Xbox One Interface (2013)

Kindle Fire interface (2011)

a Garmin and a TomTom GPS.

Garmin YouTube interface video (2011)

Microsoft's Metro style (2011)

All major companies have their own evolving set of guidelines for their developers that embody their current set of principles.

google’s material design

apple’s design guidelines

microsoft design guidelines

As a longer in class activity I'd like people to form into groups of 2 and compare the user interfaces from two standalone dedicated devices that try to solve the same problem. For example:

you will find quite a few videos on line (including the ones above on this page) that tour you through these interfaces

compare their effectiveness in terms of:

By the end of class turn in an email or a link to a webpage with all of your group member's names and your discussion. Keep these ideas in mind as you are finalizing the design of your dedicated consumer device for Project 2.

last updated 3/14/2017