Elegance & Simplicity and Scale, Contrast & Proportion Luc - - PowerPoint PPT Presentation

User Interface Design and Programming CS422

Luc Renambot renambot@uic.edu

Elegance & Simplicity and Scale, Contrast & Proportion

Book

• Designing

Visual Interfaces by Mullet and Sano

Select the elements

• "maximize meaning, minimize means" -

Abram Games, graphic designer

• Enhance communication by carefully

selecting elements to be emphasized

Economy

• Solve the problem completely, in a highly

economical way

Simplicity

• 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 - greater 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

Example

Common Errors

• Clutter and visual noise
• Interference between competing elements
• Using explicit structure as a crutch
• Belaboring the obvious
• Overly literal translation
• Excessive detail and embellishment
• Gratuitous dimensionality

Clutter and visual noise

Interference between competing elements

Using explicit structure as a crutch

Belaboring the obvious

Overly literal translation

Excessive detail and embellishment

Gratuitous dimensionality

London Underground Map

Line Map

CTA

CTA

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 suffer 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

Department of Transportation Icons

Department of Transportation Icons

Regularizing

• Establishing a pattern simplifies the design by

moving the viewer's experience to a higher level of abstraction.

• Reduce information by repeating elements

according to a discernable rule, principle, or rhythm

• Reduce visual complexity and enhance

structure and predictability

Regularizing

• Align or reflect elements along common axis
• Standardizing or repeating sizes and spacing
• Reducing components to basic geometric forms
• Any irregularity will be interpreted as significant by

the user even where none was intended. By regularizing non-critical elements throughout the work, you can attract the user's attention by reliably introducing an obvious irregularity whenever you do wish to make a distinction

Regularizing

• Use of regular geometric forms, simplified

contours, and simple colors wherever possible

• If multiple similar forms are required, make them

identical, if possible,in size, shape, color, texture, line-weight, orientation, alignment, or spacing.

• Limit variation in typography to a few sizes from
• ne or two families
• To reap the benefits of regularity, make sure

critical elements intended to stand out in the display are not regularized

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

Leverage

• Review the functional role played by each element in

the design (This information should be a natural product of the reduction phase.)

• Look for situations where multiple elements are filling

(or partially filling) the same role

• Question whether an element's role could be filled as

well by an adjacent component, possibly after minor modifications

• Combine redundant elements into a single, simpler unit
• r replace the lot with a common higher-level idiom

from the target environment designed to address the situation.

Too much leverage

• 70s LED watch with

multiple functions controlled by 2 small buttons: display time/date (the display was normally

• ff to conserve battery

power), switch into set time mode, switch into set date mode, increase the value of the time (or date)