Designing Visual Interfaces

1. Elegance & Simplicity
   • Principles: Unity, Refinement, Fitness
   • Techniques:
     • Reduction
       1. determine essential qualities (adjectives)
       2. critique each element (does it relate to the essence of the design?; would design suffer without it? remove if non-essential)
       3. remove essential elements & see effect (if still essential, think of replacements)
     • Regularization
       1. use regular geometric forms, simplified contours & muted colors
       2. make forms identical in size, shape, color, texture, line-weight, orientation, alignment, spacing.
       3. limit topography to few sizes from 1 or 2 families
       4. make critical elements not-regularized, so they stand out
     • Leverage
       1. review functional role of each element
       2. identify if multiple elements are filling (or partially filling) the same role
       3. see if adjacent elements can replace elements (even if it requires minor modifications)
       4. combine redundant elements into single, simpler unit or replace the lot with a higher level idiom
          *Don’t overdo leverage (wrist watch: time & stopwatch in same screen)
2. Scale, Contrast & Proportion
   • Principles: Clarity, Harmony, Activity, Restraint
   • Techniques:
     • The Squint Test
       1. close one eye & squint the other
       2. step back & take a look at the whole screen
       3. identify elements that are not apparent (they won’t be readily recognized)
     • Establishing Perceptual Layers
       dimensions that are both associative & selective are to be contrasted (e.g. color)
       1. assign each element to a group; categorize elements based on origin/intended use
          (keep categories few – around 7)
       2. rank groups according to importance in 3-5 levels
       3. differ perceptual variables for each group to form layering effect
          (Hierarchical – size, value, …)
          (Non-hierarchical – hue, …)
       4. maximize difference between groups, but minimize difference within groups
       5. squint test to ensure elements of one group stick together, but whole group is separate from other groups
     • Sharpening Visual Distinctions
       1. Identify ranks of groups/elements
       2. determine range of variation available (in size, color, etc) & use as much of the range as possible
       3. use log-scale rather than linear-scale across visible range to enhance discriminability (skipping a level is usually sufficient)
       4. squint-test to ensure the first 2 or 3 echelons can be seen “at a glance”
     • Integrating Figure & Ground
       1. determine overall size of figure & ground
       2. equalize visual weight (squint test to ensure neither positive, nor negative space dominates
       3. provide sufficient margins to reduce visual tension
       4. center the figure on the ground if possible. squint test to ensure figure looks centered
       5. margins in GUI > margins in print
3. Organization & Visual Structure
   • Principles: Grouping, Hierarchy, Relationship, Balance
   • Techniques:
     • Using Symmetry to Ensure Balance
       1. identify axis of symmetry (x or y)
       2. vertical axis is more prevalent
       3. equally distribute content on both sides of symmetry axis
       4. center the axis of symmetry in overall display
       5. squint test to ensure symmetry & other effects
     • Using Alignment to Establish Visual Relationships
       1. identify major boundaries & align items to them to enhance them
       2. elements that are almost aligned, align them completely by changing size, or position of margin/element
       3. look for free-standing elements & align them with major margin or some other element in the display
       4. if can’t be related to anything, try to relate it to proportions of display itself, by positioning it to a regular division of space
     • Optical Adjustments for Human Vision
       1. determine true alignment/spacing required
       2. extend elements beyond the margin according to the sharpness of acute angle (more acute = more extension)
       3. use “close-up” squint test to ensure element equivalence
     • Shaping the Display with Negative Space
       1. review organization of information in a prioritized set of chunks (review prioritized info groups)
       2. separate individual units of info by adding extra white-space between them
       3. determine which elements require additional visual emphasis
       4. increase white-space around critical elements (1) by moving other elements away, or (2) by moving them into margin
       5. remember white-space is not wasted space
4. Module & Program
   • Principles: Focus, Flexibility, Consistent Application
   • Techniques:
     • Reinforcing Structure through Repetition
       1. start with a rough sketch of the series of layouts
       2. look for common margins/functional units
       3. look for elements that are visually related but can’t be placed beside each other
       4. use standard locations & consistent style of rules, text, images, …
     • Establishing Modular Units
       1. determine vertical unit (e.g. front height)
       2. should be good to provide distinction from other vertically stacked groups
       3. determine horizontal unit – should be large enough to contain the largest word (at least 3x the vertical unit)
       4. horizontal unit should be 5-7 divisions of screen width & should be easy to factor into multiples & partial units
     • Creating Grid-Based Layout Programs
       1. determine size restrictions of layout
       2. determine basic vertical (groups) & horizontal (labels with options) modules
       3. draft a rough layout sketch
       4. extend smaller elements; shrink bigger ones
       5. for resizable window layouts, design for minimum acceptable width, not arbitrarily small
5. Image & Representation
   • Principles: Immediacy, Generality, Cohesiveness, Characterization, Communicability
   • Techniques:
     • Selecting the Right Vehicle
     • Refinement through progressive abstraction
     • Coordination to Ensure Visual Consistency
6. Style
   • Principles: Distinctiveness, Integrity, Comprehensiveness, Appropriateness
   • Techniques:
     • Mastering the Style
     • Working Across Styles
     • Extending & Evolving the Style

taken from: Mullet, Kevin et all. “Designing Visual Interfaces”

Advertisement

Posted in: Uncategorized