Winter Star Design

[winterstar-design]

Principles of Design: Red Effect

A tendency to perceive women wearing red as more attractive and men wearing red as more dominant. 

Although healthy reproductive human females exhibit visible biologically induced signals of fertility, such as full red lips and flushed cheeks, the cues are comparatively subtle. Thus, it is common across cultures for females to accentuate these facial features with lipstick, or similar cosmetics. Females also increase their sexual attractiveness by wearing red clothing. The red effect in these context regards sexual attractiveness only and doesn’t influence perceptions of likability, kindness, or intelligence. 

The colour red impacts perceptions of dominance in human males, perhaps due to the common association between anger and a red face, which signals aggression versus a pale face, which signals fear. 

Design Tips For Red Effect

Consider the red effect in advertising and product design. Present females wearing red to attract attention and associate products with sexuality. Present males in culturally appropriate red apparel to signal power and authority. 

The red effect is sensitive to context but likely generalizes to products and activities that strongly relate to female sexuality, such as apparel, and male dominance, such as sports cars.   

[winterstar-design]

Principles of Design: Proximity

Elements that are close together are perceived to be more related than elements that are farther apart. 

Proximity is one of several principles referred to s Gestalt principles of perception. It is one of the most powerful means of indicating relatedness in design and will generally overwhelm competing visual cues, such as similarity. 

The grouping resulting from proximity reduces the complexity of designs and reinforces the relatedness of the elements. A lack of proximity results in the perception of multiple, disparate chunks, and reinforces differences among elements. 

Certain proximal layouts imply specific kinds of relationships and should be considered in layout design. For example, connecting or overlapping elements, are commonly interpreted as sharing one or more common attributes, whereas proximal but non-contacting elements are interpreted as related but interdependent.     

Design Tips For Proximity

Arrange elements such that their proximity corresponds to their relatedness. 

Ensure labels and supporting information are near the element that they describe. 

Opt for direct labelling on graphs over legends or keys. 

Locate unrelated or ambiguously related items far from one another. 

[winterstar-design]

Principles of Design: Priming

The activation of specific concepts in memory for the purposes of influencing subsequent behaviours. 

Whatever stimuli are received by the senses, concepts are automatically activated in memory. Once concepts reactivated, they stay activated for a period of time, capable of influencing subsequent thoughts, reactions, emotions, and behaviour. 

Priming is an effective means of influence when the stimulus introduced activates concepts that are consistent with a preexisting need or goal. For example, showing a soda advertisement in the previews encourages people to buy soda.   

Indirect priming - when the priming goes unnoticed - is the most effective as if the audience knows there is an attempt at influence, they may consciously counteract it. For example, showing favourable movie previews will favourably prime the audience to react positively to the movie generally.  

Design Tips For Priming

Consider priming in all aspects of design. First impressions, contexts, and antecedent events are all opportunities to influence subsequent reactions and behaviours - this includes product packaging, experience leading to the promotion of a product

Favour indirect priming over direct priming as it’s more persistent and leaves no trace

[winterstar-design]

Principles of Design: Inattentional Blindness

The failure to cognitively process a stimulus that is presented in clear view, leaving the observer without any awareness or memory of the stimulus. 

When focused on performing a task, observers are often blind to stimuli that are literally presented right before their eyes. 

In any situation where people fix their attention on a task, they will be blind to stimuli that are unexpected and unrelated to the task. For example, inattentional blindness is one reason talking on a phone while driving is unsafe - their eyes may be on the road, but the mind is often elsewhere.   

Design Tips For Inattentional Blindness

Consider inattentional blindness in all contexts where attention is key, including security, safety, product design, retail, and advertising. 

Given the strength of the effect, the best strategy is to create or alter tasks to focus attention on desired stimuli. For example, receiving a coupon prior to visiting a store can predefined the shopping targets ahead of time. 

When trying to draw attention away from one stimulus to another, consider semantically similar stimulus, alternative modalities (auditory versus visual stimuli), faces, personal names, and threat stimuli. 

[winterstar-design]

Principles of Design: Iconic Representation

The use of pictorial images to improve the recognition and recall of signs and controls. 

Icons can be used for identification, such as a company logo. They can serve as a space-efficient alternative to text, such as road signs, or to draw attention to an item within an informational display, such as an error icon next to input box. 

There are four types of iconic representation: similar, example, symbolic and arbitrary. 

Similar icons - they use images that are visually analogous to an action, object, or concept. They’re most effective at representing simple actions, objects, or concepts and less effective when the complexity increases. For example, similar right turn road signs. 

Example icons - they use images of things that exemplify or are commonly associated with an action, object, or concept. They’re most effective at representing complex actions, objects, or concepts. For example, an airplane can indicate the location of the airport. 

Symbolic icons - they use images that represent an action, object, or concept at a higher level of abstraction. They’re most effective when actions, object, or concepts involve well-established and easily recognizable objects. For example, an image of an open padlock on a car indicates its function even though the padlock looks nothing like the actual control. 

Arbitrary icons - they use images that bear little or no relationship to the action, object, or concept. The relationship has to be learned and the icons should be only used when developing cross-cultural or industry standards that will be used for long periods of time. This gives people sufficient exposure to an icon to make it an effective communication device. For example, the radiation icon has to be learned as nothing particular to the image that indicates radiation but anyone who works with radiation immediately recognizes it.  

Design Tips For Iconic Representation

Iconic representation reduces performance load, conserves display and control area, and make signs and controls more understandable across cultures. 

Icons must be labelled and share a common visual motif (style and colour) to optimize performance. 

Use similar icons when representations are simple and concrete. 

Use example icons when representations are complex. 

Use symbolic icons when representations involve well-established and recognizable symbols.  

Use arbitrary icons when representations are to be used as standards. 

[winterstar-design]

Principles of Design: Horror Vacui

A tendency to favor filling blank spaces with objects and elements over leaving spaces blank or empty. 

The style is opposite to minimalism and commonly employed in various commercial media such as newspapers, comics and websites. 

Research suggests that as horror vacui increases, the perceived value decreases.  For example, the degree to which the shop windows were filled with mannequins, clothes, price tags, and signage was inversely related to the average price of the clothing and brand prestige of the store. Chain stores tend to fill window displays to the maximum degree possible, whereas high-end boutique often uses a single mannequin, no signage, and no price tags -- if passerby needs to know the price, they presumably could not afford it. This result is certainly consistent with common experiences, but somewhat surprising as lavish decoration is historically considered an indication of affluence and luxury. There’s speculation that the inverse relationship is actually between the affluence of a society and the perceived value associated with horror vacui -- that is, for those accustomed to having more, less is more, and for those accustomed to having less, more is more. Others speculate that the relationship is more a function than affluence. 

Design Tips For Horror Vacui

Consider horror vacui in the design of commercial displays and advertising. 

To promote the association of high value, favour minimalism for the affluent and well-educated audience and horror vacui for the poorer and less-educated audience and vice versa. 

For information-rich media, use information-organizing principles such as alignment and chunking to retain the benefits of information-dense pages while reducing horror vacui. 

[winterstar-design]

Principles of Design: Orientation Sensitivity

A phenomenon of visual processing in which certain line orientations are more quickly and easily processed and discriminated than other line orientations. 

The efficiency with which people can perceive ad make judgement about the orientation of lines is influenced by a number of factors. For example, standard analog clocks are easier to read than twenty-four hour clocks because the numbers on standard clocks are separated by 30 degrees, which is detectable. The numbers on twenty-four hour clocks are separated by 15 degrees. 

Orientation sensitivity is based on two phenomena that are observed in visual perception: oblique effect and pop-out effect. 

Oblique Effect - The ability to more accurately perceive and judge line orientations that are close to vertical and horizontal, than line orientations that are oblique. The effect is caused by a greater sensitivity of neurons to vertical and horizontal stimuli than to oblique stimuli. People tend to make judgments about line orientation that are biased toward the nearest vertical or horizontal axis. 

Pop-out Effect -  The tendency of certain elements in a display to pop out as figure elements, and as a result be quickly and easily detected. The effect is caused by a change in the visual stimuli sufficient to activate additional input neurons, which then help to detect differences in line orientation and patterns. 

Design Tips For Orientation Sensitivity

Designs in which the primary elements are vertical or horizontal are considered more aesthetic than designs in which primary elements are oblique. 

Consider orientation sensitivity in composition requiring discrimination between different lines or textures or decisions based on the relative position of elements. 

Facilitate discrimination between linear elements by making their orientation differ by more than 30 degrees. 

In displays requiring estimates of orientation or angle, provide visual indicators at 30-degree increments to improve accuracy in oblique regions. 

Use horizontal and vertical lines as visual anchors to enhance aesthetics and maximize discrimination with oblique elements. 

[winterstar-design]

Principles of Design: Mapping

A relationship between controls and their movements or effects. Good mapping between controls and their effects results in greater ease of use. 

When the effect corresponds to expectation, the mapping is considered to be good or natural. Otherwise, the mapping is considered poor. For example, the relationship between than electric window control on the car door and raising or lowering of the window is obvious.  

Good mapping is primarily a function of similarity of layout, behaviour or meaning. Similarity makes the control-effect relationship predictable, and easy to use. For example, emergency shut-off button is coloured red; this is similarity in meaning.  

Design Tips For Mapping

Position controls so that their locations and behaviors correspond to the layout and behavior of the device. 

Simple control-effect relationships are best. 

Avoid using a single control for multiple functions whenever possible. If unavoidable, use visually distinct modes, such as different colours, to indicate active functions. 

Be careful when relying on conventions to attach meaning to controls as different population groups may interpret the conventions differently. For example, in England, flipping a light switch up turns it off and flipping it down turns it on.  

[winterstar-design]

Principles of Design: Legibility

The visual clarity of text, generally based on the size, typeface, contrast, text block, and spacing of the characters used.  

Design Tips For Legibility

Size:

Use 9- to 12-point type for printed text. 

Use smaller size only for captions and notes. 

Use larger type for low-resolution displays and more senior audiences.

Typeface:  

There’s no performance difference between serif and sans serif so select based on aesthetic preferences. 

Use anti-aliasing sans-serif text on low-resolution displays and for type smaller than 12-point.

Use sentence case text for text blocks.  

Contrast:  

Use dark text on a light background or vice versa. 

Performance improves when contrast levels between the text and background exceed 70%. 

Foreground/background colour combination generally don’t affect legibility as long as you observe the minimum contrast level.

Patterned or textured backgrounds can dramatically reduce legibility and should be avoided. 

Text Blocks:  

There’s no performance difference between the justified and unjustified text so select based on aesthetic preferences. 

For 9- to 12-point type, a line length of 3 to 5 inches (8 cm to 13 cm) is recommended, resulting in a maximum of about 10 to 12 words per line, or 35 to 55 characters per line. 

Spacing:   

For 9- to 12-point type, set leading to the type size plus 1 to 4 points.

Proportionally spaced typefaces are preferred over mono-spaced.

[winterstar-design]

Principles of Design: Layering

The process of organizing information into related groupings in order to manage complexity and reinforce relationships in the information.

Two-dimensional Layering - Involves separating information into layers such that only one layer of information can be viewed at a time. It can be revealed in either a linear or nonlinear fashion.  

Linear layers are useful when information has a clear beginning, middle, and end. For example, stories

Nonlinear layers are useful when reinforcing relationships between layers. The types of nonlinear layer relationships can be hierarchical, parallel and web.

Hierarchical layers are useful when information has super-ordinate and subordinate relationship within itself and are revealed top-down or bottom-top in rigid accordance with the hierarchical structure. Organizational charts or family trees are examples of hierarchical layers. 

Parallel layers are useful when information is based on organization of other information and are revealed through some correspondence with that organization. For example, in the thesaurus, words are organized alphabetically. Each word is further organized by synonym.    

Web layers are useful when information has many different kinds of relationships within itself and are revealed through any number of associative linkage to other layers. 

Three-dimensional Layering - Involves separating information into layers such that multiple layers of information can be viewed at a time. The layers are revealed as either opaque or transparent planes of information that sit atop one another. 

Opaque layers are useful when additional information about a particular item is desired without switching context. For example, a hovered detail pop-up on a map. 

Transparent layers are useful when overlays of information combine to illustrate concept or highlight relationships. Weather maps are great examples of transparent three-dimensional layering.

Design Tips For Layering

Use two-dimensions layering to manage complexity and direct through information. Consider using linear layers when telling stories and presenting sequences of time-based events. Consider using nonlinear layers when emphasizing relationships within the information. 

Use three-dimensional layering to elaborate information and illustrate concepts without switching context. Use opaque layers when presenting elaborate information and transparent layers when illustrating concepts or highlighting relationships in information. 

[winterstar-design]

Principles of Design: Interference Effects

A phenomenon in which mental processing is made slower and less accurate by competing mental process. 

Human perception and cognition involve many different mental systems that parse and process information independently of one another. The outputs of these systems are communicated to working memory, where they are interpreted. When the outputs are identical, the process of interpretation occurs quickly and performance is optimal. Otherwise, interference occurs and additional processing is needed to resolve the conflict. The additional time required to resolve the conflict impacts performance.  

Examples of interference effects include: 

Stroop Interference - an irrelevant aspect of the stimulus triggers a mental process that interferes with processes involving a relevant aspect of the stimulus.  For example, the time it takes to name the colour of words is greater when the meaning and colour of the words conflict. 

Garner Interference - an irrelevant variation of stimulus triggers a process that interferes with processes involving a relevant aspect of the stimulus. For example, the time it takes to name the shapes is greater when they are presented next to shapes that change with each presentation.

Proactive Interference - existing memories interfere with learning. For example, error often made when learning a new language because people apply the grammar of their native language to the new language. 

Retroactive Interference - learning interferes with existing memories. For example, learning a new phone number can interfere with phone numbers in your memory. 

Design Tips For Interference Effects

Avoid designs that create conflicting mental processes. 

Interference effects of perceptions, such as Stroop & Garner, result from conflicting coding combinations or from an interaction between closely positioned elements that visually interact with one another. For example, a red go button or two icons groups or blend because of the shape and proximity.

Minimize interference effects of learning, such as proactive and retroactive interference, by mixing the presentation of modes of instruction, employing advance organizers, and incorporating periods of rest every 30-45 minutes. 

[winterstar-design]

Principles of Design: Law of Prägnanz

Interpreting ambiguous images as simple and complete, versus complex and incomplete. 

When people are presented with a set of elements that can be interpreted in different ways, they interpret the elements in the simplest way.  For example, two shapes touching at their edges could be interpreted as adjacent or overlapping. Another example would be a set of characters that can be interpreted as faces. (^_^)  :-0

The tendency to perceive and recall images are simple as possible shows that cognitive resources are being applied to translate or encode images into simpler forms. 

Design Tips For Law of Prägnanz

Minimize the number of elements in a design.

Symmetrical compositions are perceived as simpler and more stable than asymmetrical composition, but they can be also perceived as boring.

When efficiency of use is the highest priority, favour symmetrical compositions. When interest is the highest priority, favour asymmetrical compositions. 

Consider all of Gestalts principles of perception: closure, common fate, figure-ground relationship, good continuation, proximity, similarity, and uniform connectedness.

[winterstar-design]

Design Principles: Anthropomorphic Form

A tendency to find forms that appear humanoid or show human-like characteristic appealing.

Humans are inclined to see certain forms and patterns resemble faces and body proportions.

Anthropomorphic form can grab attention, establish a positive affective tone for interaction and form a relationship based on emotional appeal.

Design Tips For Anthropomorphic Form

Use this principle when attracting attention and establishing emotional connections. 

Use more abstract anthropomorphic forms than realistic forms as realistic depictions often reduce aesthetic appeal.

Use female body proportions to evoke associations of sexuality and vitality. 

Use round anthropomorphic forms to evoke baby-like associations.

Use angular anthropomorphic forms to evoke aggressive, masculine associations.   

[winterstar-design]

Principles of Design: Alignment

The placement of elements that edges line up along common column or rows, or their bodies along a common centre. 

Left- and right-aligned texts provide clear visual alignment cues than centre-aligned text. 

Justified texts provide more alignment cues than unjustified text. 

Alignment can create a sense of unity and cohesion.

It can lead a person through a design. For example, grids show the relatedness of elements through rows and columns and can lead the eyes left-right and top-bottom.

Design Tips For Alignment

For most designs, align elements into rows and columns or along a centre line. 

For non-grid designs, highlight the alignment paths. Use left- or right-justified text to create alignment cues.

Use justified text for complex compositions with many elements

When aligning elements diagonally, the relative angles between the invisible path should be 30 degrees and greater.

For spiral or circular alignments, highlight the alignment path so the alignment is perceived.

[winterstar-design]

Principles of Design: Affordance

The physical characteristics of an object or environment influence its function.

Objects and environments are better suited for some functions than others. For example, round wheels are better for rolling than triangle wheels. 

When the affordance of an object or environment corresponds with its intended function, the design will perform more efficient and will be easier to use. For example, a door with a handle affords pulling. You can also push the handle but it wouldn’t be as efficient. A door with a flat plate would be more efficient for pushing.  

Images of common physical objects and environments can enhance the usability to a design. For example, our knowledge of how folders function in the real world suggest their function in the software environment.

Design Tips for Affordance

Design object and environments to afford their intended function and negatively afford improper use.

Mimic familiar objects and environments in abstract contexts to imply the way which new systems can be used.