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

User Interface Design and Programming CS422 Elegance & Simplicity and Scale, Contrast & Proportion Luc Renambot renambot@uic.edu

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 one 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 or 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 off to conserve battery power), switch into set time mode, switch into set date mode, increase the value of the time (or date)