Alignment & Closure: Maggie, Queenie, Jessica, Heejae, Yurria

January 28, 2011

Alignment

Alignment: the placement of elements such that edges line up along common rows or columns, or their bodies along a common center. It creates unity in a design and helps create flow throughout it.

Alignment can be created in the rows and columns in a grid to cause the viewers eye to move from left-to- right and top- to- bottom.
The edge of a page and the positioning of a design medium (centerlines) are elements that also create flow through a design.

When looking at paragraph alignment, creating an invisible left- aligned or right- aligned column block creates a powerful visual cue against which other elements can be aligned. Center- aligned text blocks present more visually unclear alignment cues and justified text provides more alignment than unjustified text.

More complex alignments occur when aligning elements along diagonals. Also, in spiral or circular alignment, the designer must highlight the alignment path so that it’s noticeable in order to avoid a scattered looking pattern. However, there are some rare exceptions to misalignment that are used to attract attention and create tension.

Closure

Closure: A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual elements. (Gestalt principle of perception)

This subconscious tendency is so powerful that people will automatically fill in absent information and close gaps when they’re missing in order to complete the pattern.

Closure is most powerful when elements are simple, recognizable and placed near one another. This allows the designer to avoid complicated designs by using a small number of simple elements to organize and communicate information. If a pattern isn’t easily recognizable, designers can create subtle visual cues to guide viewers toward it.


Signal-to-Noise Ratio and Uniform Connectedness: Josef, Debbie, Sara, Ainura

January 28, 2011

Signal-to-Noise Ratio

  • Refers to the ratio of relevant, important information to irrelevant distractions or ‘background noise’
  • A higher signal-to noise ratio is preferable, as it conveys maximum relevant information with minimal distraction
  • Signal can be improved through clear writing, appropriate use of correct graphs and images and keeping the design as simple as possible to give the audience less to focus on
  • Noise can be reduced by eliminating all unnecessary features and simplifying necessary ones as much as possible without affecting performance

Uniform Connectedness

  • Refers to elements connected by visual methods tending to be viewed as closely related or grouped
  • Common methods include enclosing elements within a  perimeter, or directly connecting them with lines
  • Is one of the most powerful principles and usually overrides any others it conflicts with
  • Often used to group controls or text sections together. Can also be used to easily improve poor design layouts


Layering, Orientation Sensitivity, & Proximity: Talisa, Lauren, Katie, Anna, Eman

January 27, 2011

Layering

  • “The process of organizing information into related groupings in order to manage complexity and reinforce relationships in the information”
  • Two basic kinds of layering: two-dimensional and three-dimensional
  • Two-dimensional Layering: involves the division of information into layers so that only one layer can be seen at any one time; can be displayed in a linear or nonlinear manner
  • Linear models are useful for information that is organized with a clear beginning, middle, and end, much like a book
  • Nonlinear models are of greater use when reinforcing the relationships between the varying layers, such as hierarchal, parallel, or web
  • Hierarchal Layers: when information has superordinate (primary) and subordinate (secondary) relationships within itself; illustrated in an organizational chart/diagram
  • Parallel Layers: when information uses the organization of other information, like a thesaurus
  • Web Layers: when information has different kinds of relationships within itself, like hypertext
  • Three-dimensional Layering: the act of dividing information into layers so that multiple layers can be seen at any one time; are displayed as ‘opaque’ or ‘transparent’ planes of information that sit on top of each other
  • Opaque Layers: when supplementary information about a topic is required without switching contexts (such as software pop-ups)
  • Transparent Layers: when various overlays of information merge to highlight key concepts/relationships (such as weather maps)
  • Ultimately, two-dimensional layering is a method of understanding complex ideas and knowing how to navigate through any given amount of information; three-dimensional layering is a method of expanding on information and illustrating ideas without switching context

Nonlinear - Web Layering: Hypertext

Nonlinear - Opaque Layering: Software Pop-up Windows

Orientation Sensitivity

  • “A phenomenon of visual processing in which certain line orientation are more quickly and easily processed and discriminated than other line orientations”
  • A number of factors affect the efficiency with which people are able to perceive and judge the orientation of lines (for example, interpreting numbers on an analog clock is simple and quick because the lines are set at 30 degree increments – the recommended difference of line orientation for easy interpretation of information
  • The oblique effect and pop-out effect are both phenomena that are part of visual perception
  • Oblique Effect: perceiving and judging line orientation more accurately when it is more vertical or horizontal, rather than lines that are slanting (oblique); when judging line orientation as it is recalled from memory, most individuals are able to more accurately imitate the line if it is vertical or horizontal; as well, vertical/horizontal elements in design are considered to be more aesthetically pleasing; this effect is caused by a greater sensitivity of neutrons to vertical and horizontal stimuli than to oblique stimuli
  • Pop-out Effect: easily and quickly identifying certain elements because of their tendency to “pop-out” as primary elements; for example, when a person is required to identify a specific line within a whole set of lines of common orientation, that target line becomes evident only when it is set at a 30 degree difference (or more); the effect is strongest in coalition with the oblique effect – it is easier  to identify differences in line orientation when put against a background of vertical/horizontal lines than it is when put against a background of oblique lines

An image used in a study of child education based on the judgment of line orientation (A.L. Benton)

Proximity

  • “Elements that are close together are perceived to be more related than elements that are farther apart.”
  • This principle is one of several that are referred to as Gestalt Principle of Perception
  • States that elements placed at a closer distance are recognized as a single group/chunk and are generally thought to be more related than elements placed farther apart
  • Grouping, the direct result of proximity, reduces the intricacy of a design and strengthens the relationship between the elements
  • Some proximal layouts should be considered in layout design because they suggest different kinds of relationships (for example, overlapping/connecting elements indicates that they have similar attributes, while elements in close proximity that do not connect imply that they are related, but independent) – think of a Venn Diagram, for instance
  • Proximity is one of the most powerful methods of illustrating a relationship between elements in a design; generally, it will overwhelm competing visual cues


Works Cited for Images

http://www.atpm.com/9.10/design.shtml

http://cie.asu.edu/volume1/number7/

http://cbsfilings.com/site/Pop-up_ad.html

http://astimen.files.wordpress.com/2010/04/etom-hypertext.jpg?w=700


Common Fate & Figure Ground Relationships: Jane, Joshephine, Minjee, Reid

January 27, 2011

by. Jane, Josephine, Minjee, Reid

Common Fate

It is one of the principles referred to as Gestalt principles of perception. It groups the elements that move in same direction. It is perceived to be more related than the elements that move in different direction. The elements are grouped by their common motion and direction. Their relatedness is strongest when the elements move at the same time and velocity. The relatedness is lacking when any of these factors vary. Common fate relationships influence whether elements are seens as figure of ground elements. The moving objects are perceived as figure elements and stationary ones as ground elements. Common fate is a grouping strategy. Related elements should have same factors such as time, velocity, frequency, intensity and direction.

Figure-Ground Relationship

The figure ground relationship is also referred to as Gestalt principles of perception. The human perceptual system seperates stimuli into either figure or ground elements. Figure elements are the objects of focus, and ground elements are the background. The relationship between these two are stable when the composition of figure and ground are clear.  The figure object will gain more focus and stands out from its background. To get rid of confusion of the viewers, clearly differentiating the elements between figure and ground is crucial.

http://www.csus.edu/indiv/w/wickelgren/psyc103/ClassVisionHigher2.html


Exercise 3: strategies for conveying information

January 27, 2011

by: Melanie, Dayna, Laura, Tanya and Jina

INTERFERENCE EFFECTS:

Perception and cognition are two different mental systems that operate seperately from each other. They recieve information from an external stimulus and send it to the brain’s memory where it is interpreted. When these outputs agree, interpretation is efficient, however if 2 or more are in conflict interference occurs and mental processing takes longer.

STROOP INTERFERENCE: an insignificant aspect of the stimulus begins another mental process, interfering with a significant aspect

The Stroop Test: Interference is caused by instinctively reading the words versus the task of naming the colours. This conflict slows the process of giving an appropriate response.

GARNER INTERFERENCE: insignificant variations of stimulus begins another mental process, interfering with a significant aspect

Similar to the Stroop test, surrounding irrelevant colours, shapes and words interfere with the relevant colour/shape. This conflict slows the process of giving an appropriate response.

PROACTIVE INTERFERENCE: existing memories interfere with learning (ex. learning a new language, writing with opposite hand)

RETROACTIVE INTERFERENCE: learning intereferes with existing memories (ex. learning a new telephone number and forgetting an old one, learning new technology and forgetting how to operate old technology)

LAW OF PRAGNANZ

The Law of Pragnanz states that when an individual is faced with things that can be interpreted in several different ways, the brain automatically sees it in its simplest form. Our memory recalls images in their most basic form as they will be easier to remember (fewer cognitive resources are needed). Typically people process visiual information to create an image in the mind that is symmetrical, contains few, simple shapes.

The brain recalls a white triangle rather than 6 more complicated shapes.

The brain recalls a building with 2 large pilars rather than a series of intricate and complex pathways.

This shows how popular brands have simplified their logos with the Law of Pragnanz in mind, making it easier for people to remember/recognize their brand.


http://www.snre.umich.edu/eplab/demos/st0/stroopdesc.html

http://en.wikipedia.org/wiki/Stroop_effect

http://www.designlessbetter.com/blogless/tags/logo-design


Exercise Three: Strategies for Conveying Information

January 21, 2011

Your Project One group has been assigned two or three examples of strategies derived from the Gestalt Laws of Pattern Perception that can be employed to convey information. The strategy assignments are as follows:

  • Group Sight: Alignment, Closure
  • Group Touch: Common Fate, Figure Group Relationship
  • Group Taste: Good Continuation, Highlighting
  • Group Hearing: Interference Effects, Law of Pragnanz
  • Group Smell: Layering, Orientation Sensitivity, Proximity
  • Group ESP: Signal-to-Noise Ratio, Uniform Connectedness

In your Project One groups, create a blog post that summarizes your assigned strategies for the class. Click here to download the relevant pages from Universal Principles of Design. For each strategy, include at least one illustration that is not found in Universal Principles of Design. Be prepared to briefly present your post next week.

Exercise Three is due at 12:00 on Friday, January 28.