Elegance & Simplicity and

Scale, Contrast & Proportion

(material from: Designing Visual Interfaces by Mullet and Sano)

"maximize meaning, minimize means" - Abram Games
 

Enhance communication by carefully selecting elements to be emphasized

Solve the problem completely, in a highly economical way
 
Here is a web page showing a wide assortment of US Road signs -
http://www.trafficsign.us/
 
Here are some other roadsigns .. but first lets try a quiz:
 http://www.channel4.com/4car/fun/quiz/2005/euro-signs/euro-signs.jsp

Europe: http://www.reidsguides.com/t_au/t_au_road_signs.html
and http://www.ideamerge.com/motoeuropa/roadsigns/

and http://www.elve.net/rcoulst.htm

and a good bad example: http://www.baddesigns.com/dontgo.html

and another good bad one, though this time its not the sign's fault (I've had similar experiences in Evanston):
http://www.baddesigns.com/streetsn.html

Elegant solutions reveal an intimate understanding of the problem and an ability to ensure that its essence is grasped by the consumer

minimization of component parts and simplification of relationships between the parts
 
 

Benefits of Simplicity:

• Approachability - rapidly apprehended and understood to support immediate use
• Recognizability - less visual information, more easily assimilated, understood, remembered
• Immediacy - greateer impact because they are recognized and understood without conscious effort
• Usability - improving approachability and memorability enhance usability

3 Principles of Simplicity

• elements must be unified to produce a coherent whole
• parts, and the whole, must be refined to focus the viewer's attention on the essential aspects
• fitness of the solution to the communication problem must be ensured at every level

Common Errors:

• Clutter and visual noise - packing too much information/control into a single screen makes it difficult to organize what is there and how to move through it
  
  
  
  

• Interferance between competing elements - the text in the menus competes with the text in the menu accelerators - using an icon for the accelerator keys makes the distinction obvious
  
  
  

• Using explicit structure as a crutch - adding extra boxes and lines can help to organize the elements, but it is also a sign that you are in trouble, and can be easily abused and over-used.
  
  

• Overly literal translation - using the familiarity of a physical object can help people quickly understand the software version, but the software doesn't need to have the same limitations as the physical object.
  
  
  

• Excessive detail and embellishment, including graduitous 3Dness, may look cool, but may also make the text harder, or impossible, to read.
  
   
  

London Underground Map

Slightly different higher resolution version available at:
  http://www.oxfordtube.com/uploads/Underground_Map%5B1%5D.pdf

Compare this map of the CTA in downtown Chicago:
http://www.transitchicago.com/maps/maps/fwebmaptrain.gif

to this map of the CTA
http://www.transitchicago.com/maps/maps/2007C.html

Line Map

Techniques:

• Reducing a design to its essence
• Regularizing the elements of the design
• Combining elements for maximum leverage

Reduction:

Reinforce the message by removing non-essential elements

1. Determine the essential qualities (typically a short list of adjectives) that should be conveyed by the design, along with any fixed formal elements, such as a name or label, an essential control, or color, texture, pattern, or image.
2. Critically examine each element in the design and ask yourself why it is needed, how it relates to the essence of the design (identified above), and how the design would fuffer without it. If you can't answer any of these questions, remove the element.
3. Try to remove the element from the design anyway. What happens? If the design collapses, either functionally or aesthetically, the element must be replaced. Otherwise, consider omitting it from the final solution.

    Department of Transportation Icons

here are a bunch more:
http://www.aiga.org/content.cfm/symbol-signs

Regularizing:
 

Leverage:

    good example is the header for a window

• label
• drag area
• place to put window management controls
• place to show which window has focus

1. Review the functional role played by each element in the design. (This information should be a natural product of the reduction phase.)
2. Look for situations where multiple elements are filling (or partially filling) the same role
3. Question whether an element's role could be filled as well by an adjacent component, possibly after minor modifications.
4. Combine redundant elements into a single, simpler unit or replace the lot with a common higher-level idiom from the target environment designed to address the situation.
   
   

Too much leverage can be bad - 70s LED watch with multiple functions controlled by 2 small buttons: display time/date (the display was normally off to conserve battery power), switch into set time mode, switch into set date mode, increase the value of the time (or date)

http://www.thinkgeek.com/gadgets/watches/725d/

Scale, Contrast & Proportion

(material from: Designing Visual Interfaces by Mullet and Sano)
 

Before we get to the lecture, lets talk about Project 1 some more in terms of button sizes. I'm passing around a printout of the group solutions to Project 1 at 1:1 scale (2" by 3") and another sheet showing various possible button sizes. Which button sizes / spacing do you think you could easily press with your fingers?

pdf file

need to achieve a balance in the relationsips between elements in the design

Scale - relative size or magnitude of a given design element in relation to other design elements - always relative

Contrast - noticeable differences along a common visual dimension (shape, size, color, position, orientation, movement)

Proportion - ratios of dimensions

Differentiation - contrast provides differentiation

Emphasis - scale and contrast are used to emphasize important elements of the design

Activity - scale and contrast move the viewer's eye through the composition in a predictable sequence

Interest - scale and contrast add visual interest
 

Visual contrasts established by manipulating perceptual qualities

the following are retinal variables - perceived immediately and effortlessly - fundamental units of visual communication

• Size
• Value (saturation)
• Orientation
• Texture
• Shape
• Position
• Hue

Information represented in a visual display is characterized by

• Number of dimensions (things being measured)
• Length of each dimension (number of possible values in each dimension)
• Scale of measurement for each dimension
  • nominal (associative, selective) - distinct categories should be obvious
  • ordered - determine relative ordering - which one is 'more' than the other should be obvious
  • quantitative - determine amount of difference between ordered values - how much 'more' should be obvious

Nominal - User interested in categorizing

In associative perception the viewer ignores variation in one visible dimension in reading the remainder of the display

An associative variable does not affect the visibility of other dimensions (e.g. we can recognize hue regardless of orientation.) A variable is dissociative if visibility is significantly reduced for some values along that dimension (e.g. its hard to determine hue of a very thin line or small dot)

Hue, Orientation, Texture, Shape, Position are associative

Size and Value are dissociative - they dominate perception and disrupt processing of other correlated dimensions
  

In selective perception viewer attempts to isolate all instances of a given category and perceptually group them into a single image. The task is to ignore everything but the target value on the dimension of interest - to see at a glance where all the targets are within the display
  

All the variables except shape are selective

  

In ordered perception the viewer must determine the relative ordering of values along a perceptual dimension. Given any two visual elements, a natural ordering must be clearly apparent so the element representing 'more' of the corresponding quality is immediately obvious

Position, size, and value are ordered

In quantitative perception the viewer must determine the amount of difference between two ordered values. The user does not need to refer to an index or key - the relative magnitudes must be immediately apparent

Position and size are quantitative

Visual variables differ substantially in length:

• Shape is longest - almost infinite variety
• Position in 2D space is limited by display size and resolution, but very fine grained
• Size and color 10-15
• Value and texture support less than 10
• Orientation is shortest - confusion arises if more than 4 levels are attempted

Principles:

• Clarity
• Harmony
• Activity
• Restraint

Common Errors:
 

Insufficient contrast

here is a nice real world example: http://www.baddesigns.com/speedo.html 

Excessive contrast

Visual interference - it seems like a nice idea to show colours in the correct colour, or a font in its font, but these can make the text harder to read.

Spatial tension

Awkward dimensions

Techniques:

 Establishing perceptual layers

1. Group each item of information into a small number (7 +/- 2) of categories according to its origin or intended use. A group must be established for any group of items that will need to be processed independently. Each item must be assigned to at least one group.
2. Determine the rank or importance of the various groups and organize them into an even smaller number (e.g. 3-5) of echelons based on this ranking
3. Use appropriate perceptual variables to establish the layering effect. Size and value can establish clear perceptual hierarchies, while hue is most effective for non-hierarchical grouping
4. Maximize the perceptual difference between groups while minimizing the difference within groups
5. Use the squint test to ensure that elements in the same layer group together as a unit, but that group itself can be visually separated from the rest of the display

Sharpening visual distinctions

1. Identify the ranking that need to be established across the groups of information (see layering)
2. Determine the range of variation (e.g. minimum and maximum values or sized, number of colors, etc.) available and use as much of it as possible in the resulting code.
3. Use logarithmic rather than linear scaling across the visible range to ensure the discriminability of contrasts at large absolute magnitudes. Doubling each successive level is usually sufficient.
4. Use the squint test to ensure that at least the first two or three echelons can be easily recognized 'at a glance.'

Integrating figure and ground

1. Determine the overall size of the figure/ground combination. Note that desgins will usually require adjustment as the overall size is changed, since critical internal relationships are disrupted when a figure is scaled uniformly. 
   
2. Equalize the visual weight of figure and ground. Use the squint test to check that neither the positive or negative space dominate.
3. Provide enough space around the margins of the figure to eliminate unwarrented visual tension.
   
4. Position the figure correctly within the ground. The figure should usually be centered within the ground unless communication requirements dictate otherwise. Use the squint test .

Think about how you present information on a resume - how you use whitespace (vertical and horizontal) to set apart the different sections, underlining and boldface to highlight certain words

Here is some informative text ... its all one paragraph, all the same font, the same font size:

ILLINOIS STATE FORECAST, NATIONAL WEATHER SERVICE CHICAGO IL, 430 PM CST TUE MAR 23 1999 TONIGHT...CLEAR NORTH...CLEARING CENTRAL...MOSTLY CLOUDY FAR SOUTH. LOWS FROM THE UPPER 20S FAR NORTHWEST TO NEAR 40 FAR SOUTH. WEDNESDAY...MOSTLY CLOUDY NORTHEAST...PARTLY SUNNY ELSEWHERE. HIGHS NEAR 40 NORTH...45 TO 50 CENTRAL AND NEAR 60 FAR SOUTH. WEDNESDAY NIGHT...PARTLY CLOUDY. LOWS IN THE 20S NORTH TO 30S SOUTH. THURSDAY...PARTLY OR MOSTLY SUNNY. HIGHS FROM NEAR 40 NORTH TO THE 5OS SOUTH. EXTENDED FORECAST... FRIDAY THROUGH SUNDAY...DRY WITH A SLOW WARMING TREND. LOWS FROM THE 20S NORTH TO 30S SOUTH FRIDAY...WARMING TO THE 30S NORTH TO 40S SOUTH SUNDAY. HIGHS FROM THE 40S NORTH TO 50S SOUTH FRIDAY...GRADUALLY WARMING TO THE MIDDLE 50S NORTH TO LOWER 60S SOUTH BY SUNDAY.

1 - Given a blank page, and without changing the font size, lay out this text on the page in a better format

2 - Given another blank page, and starting from the original paragraph above, and given the ability to change the font size, lay out this text on the page in a better format

(compare this kind of formatting to what you expect to see in a restaurant menu)