80/20 Rule: 80% of output is produced by 20% of its inputs. (Team 6)

Accessibility is standardizing design for all humans (Team 8)

Affordances: The relationship between individuals and the properties of artifacts that gives the individual insight into how to use the artifact. (Team 3)

Alignment: Create order and organization among elements (Team 7)

Anthropomorphic Form: People are drawn to humananoid forms or patterns as long as they are not too realistic. (Team 5)

Archetypes are conventions we learn from our culture(s) (Team 8)

Attractiveness Bias: People are likely to assume good things about attractive people than unattractive people, often based on facial symmetry and hip-to-waist ratio. (Team 3)

Biophilia Effect: The emotional, cognitive and physical benefits conferred by exposure to natural environments (Team 9)

Cathedral Effect: The influence of ceiling height on people’s focus and behavior by generating feelings of confinement or freedom (Team 2)

Chunking: Dividing information into 3-5 chunks makes it easier to process and memorize. (Team 5)

Classical Conditioning: A psychological approach that uses positive or negative stimuli to create an association or influence behavior. (Team 4)

Closure: Objects grouped together are seen as the whole (Team 7)

Cognitive Dissonance: A state of intellectual/emotional discomfort that results when expectations about something are subverted. (Team 4)

Color: Used to improve the aesthetics of a design, create visual interest, and assign meaning. (Team 4)

Comparison: A method to understand relationships and pattens between two or more elements. (Team 1)

Confirmation: A technique of verification to ensure the intended action is executed. (Team 1)

Consistency: When things behave the same, the systems are more usable and learnable. (Team 6)

Constraint: A restriction that guides a desired behavior or outcome by preventing unnecessary/unwanted actions. (Team 4)

Contour Bias: A tendency to favor contoured objects overs sharp, angled, or pointed objects. (Team 9)

Depth of Processing: How information is retained in long-term memory (Team   7)

Desire Lines: Integrate how users are actually using a product into its design. (Team 6)

Discoverability: The ease with which one can determine possible actions, and how to complete those actions, when a system or object is unfamiliar. (Team 4)

Exposure Effect: Occurs when people begin to like something (neutral or positive) after they’ve been exposed to it many times (Team 5)

Face-ism Ratio: The ratio of face to body in an image that influences the way the person in the image is perceived. (Team 10)

Fibonacci Sequence: A sequence where two previous numbers summed together form the next sequential number, whose ratio is often naturally occurring. (Team 10)

Feedback: Any means through which the result of an action is communicated back to the user who prompted it.(Team 1)

Figure-Ground Relationship: Manipulating the separation of a visual focus and the rest of the visual field to produce either an emphasis through contrast or ambiguous interpretation. (Team 2)

Five Hat Racks: The five methods that can be used to organize information — categorically, through time, through location, alphabetically, and through a continuum. (Team 3)

Flexibility-Usability Tradeoff: As flexibiity increases, usability decreases (Team   7)

Forgiveness: Use good affordances to help users avoid making errors altogether, minimize unintended consequences, and where possible fully recover from errors. (Team 3)

Framing: Emphasizing the positive and/or negative aspects of an idea or situation in order to influence the thoughts and decisions of users. (Team 6)

Gamification: The principle of gamification is the method of designing an experience that would not usually be experienced in a game like way. (Team 8)

Garbage In-Garbage Out: Bad input produces bad output. (Team 1)

Golden Ratio: The ratio between two quantities is the same as the ratio of their sum to the larger two quantities. (Team 4)

Gutenberg Diagram: The Gutenberg Diagram is a principle that describes the Western reading orientation where the reader begins from the top left and ends at the bottom right. (Team 6)

Hick’s Law: A principle, described in the form of a formula, stating that the more choices available, the longer it will take the user to make a decision. (Team 3)

Hierarchy: Complex relationships are organized into simple and visual structures. (Team 6)

Highlighting: Differentiating a small, specific area of content to increase scan-ability and call attention to points of emphasis. (Team 6)

Horror Vacui: The busier and more cluttered a design, the cheaper the product feels. (Team 6)

Immersion: A state of mental focus so intense that awareness of the “real” world is lost, generally resulting in a feeling of joy and satisfaction. (Team 8)

Interference Effect: Objects and things that cause a conflict in the thought process and increase cognitive load are known as the “interference effect.” (Team 8)

Inverted Pyramid: A way information can be presented so that critical information can be presented first followed by additional information in descending order of importance. (Team 3)

Iteration: The methodical and intentional reworking of a system or piece of a system to work towards a continuous, improved outcome. (Team 1)

Law of Pragnanz: humans subconsciously interpret complex figures in the simplest forms possible. (Team 3)

Layering: the idea of grouping the related information together in order to manage complexity and strengthen relationships in information. (Team 10)

Mimicry: The imitation of familiar things in order to take advantage of that familiarity and recognizability. (Team 4)

Mnemonic Device: A way to make information easily remembered by connecting something unfamiliar with something familiar through the use of imagery or words. (Team 9)

Nudge: The technique of using gentle reminders to lead a user to a desired action, typically utilizing defaults, feedback, incentives, structure choices, and visible goals to reduce friction and reinforce desired choices. (Team 2)

Ockham’s Razor: Simplicity is preferred over complexity. (Team 10)

Orientation Sensitivity: The ability to parse visual information along the x and y axes more easily, as well as the ability to discern a different element against a background of common orientation. (Team 10)

Performance Load: The amount of effort required to complete a task. (Team   4)

Progressive Disclosure: Showing the user only the most relevant, useful information, as the user needs it. (Team 7)

Propositional Density: The notion that objects and environments can be more interesting and memorable when it contains more deep meanings relative to the number of (visual) elements depicted. (Team 3)

Prototyping: Create mocks to explore the design of a product, test it, and refine it. (Team 1)

Proximity: Using distance between objects to help group or organize information visually. (Team 2)

Recognition-Over-Recall: Using cues to induce familiarity, reduce cognitive effort, and increase precision. (Team 2)

Red Effect: Women are percieved as more attractive and men are regarded as more powerful if they’re wearing red (Team 5)

Scarcity: The idea that an object’s level of desirability increases as its supply decreases (Team 5)

Self-Similarity: Property in which individual pieces are similar in composition to the sum of the pieces. (Team 9)

Signifiers: Communicating appropriate actions and behaviors. (Team 7)

Stickiness: Refers to the virality of ideas entering society’s cultural consciousness based on simplicity, surprise, concreteness, credibility, emotion, & story. (Team 2)

Symmetry: A sense of harmonious and beautiful proportion and balance. (Team 10)

Uncanny Valley: The effect when anthropomorphic forms have features that resemble the human form too much, so much that it becomes unappealing and creepy (Team 5)

Veblen Effect: Pricing something higher raises demand due to exclusivity. (Team 8)

Visibility: The usability of a system is improved when its status and methods of use are clearly visible. (Team 8)

von Restorff Effect: Things that are different stand out and are remembered. (Team 8)

Wabi-Sabi: A traditional Japanese philosophy that embraces imperfect and weathered aspects of an object. (Team 9)

Wayfinding: The process in which people understand, orient, and guide themselves through a physical environment by use of information and visual ques. (Team 9)

 

Many thanks to Tiffany Tam for coordinating this list.

 

The Fibonacci Sequence

A number sequence where the two previous numbers summed together form the next sequential number.

The Fibonacci sequence can be found in nature, such as seashells, flower petals, galaxy spirals, and the bones in our hands. The sequence is “naturally” pleasing, and can also be found as intentional designs in poetry, music, art, and architecture.

Closely related to the Fibonacci sequence is is the Golden Ratio, which is a 1 to 1.6 ratio of their sum to the larger of two quantities. Many items exhibiting the Golden Ratio also have the Fibonacci sequence.

Example 1: Modulor, by Le Corbusier

French-Swiss architect Le Corbusier used two Fibonacci sequences to create the Modulor, which is technically and theoretically biologically harmonious in design.

Example 2: Golden Ratio

The golden ratio is an example of the Fibonacci sequence, where  a + b is to a as a is to b. The numbers have been added here for ease of parsing the numbers. Notice how this is also a nautilus shell.

Example 3: Bones in my hand

The bones in our hands illustrate the Fibonacci sequence. It’s hard to tell, but this picture illustrates it better.

Resources

1. Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
2. Hom, Elaine J. “What Is the Golden Ratio?” LiveScience, Purch, 24 June 2013, www.livescience.com/37704-phi-golden-ratio.html.
3. Daniel, Jace. “Fibonacci Fingers.” Jaced.com, 15 Oct. 2013, jaced.com/2013/10/15/fibonacci-fingers/.

Orientation Sensitivity

A visual processing phenomenon in which some line orientations are more quickly or easily parsed than other line orientations.

Two factors affect orientation sensitivity: the oblique effect, and the pop-out effect. The oblique effect is a person’s ability to judge and percieve line orientations that are along the traditional vertical and horizontal orientations better than they do any sort of angled and horizontal orientation. This is caused by neurons having greater sensitivity to stimuli along the horizontal and vertical orientations.

The pop-out effect is a visual processing phenomenon in which elements tend to stand out when compared against a background of common orientation. This is caused by neurons that are able to detect visual stimuli that activate more neurons in order to discern pattern and orientation differences. The pop-out effect is most easily detected when the differing element differs by 30 degrees or more. It is also easier to detect element differences against vertical and horizontal lines than against slanted or oblique orientations.

Example 1: Analog Clocks

Our book uses two analog clocks with 30 and 15 degrees of separation to show that 30 degrees of separation is easier for the user to parse information.

Example 2: Compass

The compass makes use of our natural tendencies to process along the x and y axes in order to quickly parse information; in this case, navigation. What does make this hard to read is that there is less than a 30 degree of separation amongst the many degrees, so it isn’t a cursorarily distinguished as say, a 12-hour clock like above.

Example 3: Car meter

The car meter makes use of the pop-out effect so that drivers can easily distinguish what speeds. In my picture, even though the speedometer is fairly hazy, notice how the speeds pop out – it makes use of the pop out effect with stark black/white contrast so the user can quickly get the information they need.

Resources

1. Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
2. “Get Compass Rose Png Pictures #29390 – Free Icons and PNG Backgrounds.” Freeiconspng.com, www.freeiconspng.com/img/29390.

Interference Effect

Objects and things that cause a conflict in the thought process and increase cognitive load are known as the “interference effect.”  When information is sending mix messages or different signals all at the same time, it is hard for the user to understand and comprehend. This inability to make decisions quickly is one of the many byproducts of interference within a user experience.

---

Example  1: The Pocket Universal Principles of Design

This depiction in the book of highway and traffic signs illustrates very clearly the Interference effects.  Example  2: Online Example of Interference Effects from The International Design Foundation

Example  3 :  Parking signs near me in downtown San Jose, California

 

Layering

The idea of layering is organizing and grouping the related information together in order to manage complexity and strengthen relationships in information. There are two main types of layering: two-dimensional and three-dimensional layering.

Two-dimensional layering divides information into layers in such a way that only one layer can be seen at a time. There are two types of two-dimensional layers: linear and nonlinear layers. Linear layers are used for information that has a clear start, middle and end sequence. Nonlinear layers are used when one is reinforcing the relationships between layers. These are 3 types of nonlinear layers: hierarchical, parallel and web. An organizational chart is a good example of a hierarchical layer, which is useful when the information has a relationship between subordinates and superiors. Parallel layer is used when the information is based on the organization of other information, such as a thesaurus. Hypertext is a good reference for web layers that is useful when the information includes diverse relationships. The layers are revealed through linking to other layers.

Three-dimensional layering separates information into layers in such a way that multiple layers can be viewed at a time without switching context. The 3-dimensional layers can be revealed through opaque and transparent layers. Opaque layers are useful for presenting elaborate information or additional information to a particular item. A software pop-up window is a good reference for opaque layers. Transparent layers are used to combine overlaying information to illustrate concepts and highlight relationships in information.

Example 1 (Cited by Original Source)

This is example of two-dimensional layering. Linear layers are used when information has beginning, middle and end sequentially, while nonlinear layers are used for reinforcing the relationships between each layer. There are three different nonlinear layers: hierarchical, parallel, and web.

Example 2 (Found Online)

The map and navigation UI provide the aspect of three-dimensional layering. The layers of information, such as search box, direction information and location pin, overlay on top another and highlight information.

 

Example 3 (Found in Real Life)

In these days, many Augmented Reality (AR) apps and products have been created. AR is a technology that layers virtual images and information onto the real world. With using both opaque and transparent layers, AR enhances the connections between digital information and real life and allows the user to have positive experiences.

References:

Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.

ThinkMobiles. What is Augmented Reality (AR) and How does it work, 2018, Retrieved from https://thinkmobiles.com/blog/what-is-augmented-reality/ .

 

Ockham’s Razor

The key point of Ockham’s razor is that simplicity is preferred over complexity. The idea is to avoid unnecessary information and elements that decrease the design’s efficiency and cause problems. There is a pleasing aesthetic with simpler, cleaner and purer results by removing the unnecessary elements from a design. If there are multiple possible selections with the same functionality, Ockham’s razor indicates that it would be better to choose the simplest one. Minimize the elements as much as possible and make the design as simple as possible; however, the design and function should still be clear and effective.

Example 1 (Cited by Original Source)

Google keeps its design simple. This minimalist design helps it be the most popular search service, as it is efficient and easy to use and performs best among other search services.

 

Example 2 (Found Online)

A strong and impactful message can be created by minimal elements. This Heinz ad is visually simple, but the main point is still clear and effective.

The Print Ad titled BOTTLE BOTTOM was done by McCann London advertising agency for product: Heinz Tomato Ketchup (brand: Heinz) in United Kingdom. (Apr 2007)

 

Example 3 (Found in Real Life)

IKEA’s products and furniture have a minimal look compared to other furniture, but its functionality is still efficient and enjoyable.

 

References:

Lidwell, William, Kritina Holden, and Jill Butler. Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub, 2010.

Coloribus. Heinz Print, Outdoor BOTTLE BOTTOM by McCann London, 2007,  Retrieved from https://www.coloribus.com/adsarchive/prints-outdoor/heinz-tomato-ketchup-bottle-bottom-9628905/ .

Gamification

The principle of gamification is the method of designing an experience that would not usually be experienced in a game like way.  Applying a gaming experience to a non-game context is done to help “enhance the user experience and modify behavior”.  Most importantly it helps with users overall engagement.  Some examples of gamification are scorekeeping, showing progress,  coaching along with a process, and motivating the user.

---

Example 1:  The Pocket Universal Principles of Decision

In order to increase the number of people and motivate them to use the stairs instead of the escalator, a Swedish team created this “Stair Piano” in a busy transit area in Stockholm. They turned each stair into a piano key that would play once someone would step on it.

Watch the video of the experiment here.

 

Example 2:  Online Careers Page: Ueno.com

One of my favorite examples of gamification is from the design agency, Ueno. They created a very engaging and fun applicant experience as part of their career’s page.  Through playful animations, storytelling, sounds, and illustrations, the user is taking through an adventure, meeting characters who represent the people who are part of the team and hiring process.  This experience is much different than most career pages and the gamification helps to tell a story about who the company is and helps to keep the user highly engaged.

 

Visit the website to experience the gamification career page here.

 

 

 

Example 3:  My You Version Bible App

I have an app on my phone that allows me to read the bible daily. Some of the features include sending me push notifications with daily scriptures that take me to the full bible book and verse(s).  One of the gamification elements of the app is a status notification that lets me know how many consecutive days have I read and engaged with the app. It’s a great way to remind me of how consistent I have been as well as it serves as an encouragement to not break the streak and also plays to my competitiveness.

 

References

William Lidwell, Kritina Holden, Jill Butler (2015),  The Pocket Universal Principles of Design, Beverly, MA: Rockport, 2015

 

Confirmation

People often accidentally find themselves performing a different action than what they initially intended. Some events could have a severe negative impact if not done correctly. For example, deleting a software project that took a couple of months of a small team of developers will affect the bottom line of a company. Confirmation is not only an authorization message that is nice to have. Confirmation is a design principle that helps in preventing unintentional actions with potentially severe adverse results. In other words, the confirmation design principle uses verification to ensure that a performer of action has selected the intended action correctly before execution.

Example #1 cited by the original source:

The above examples are from the book. One example of a confirmation design is to ask users to re-enter a required input such as a password or an account number as a way to prevent slips. Another example is confirming that an email with a blank subject is intentional.

Example #2 found online:

This is a confirmation example that I saw while using the Venmo mobile app. The Venmo app is used to send money to someone using their cell phone number or a user ID. When I click the call to action button (Send), the app requires me to confirm the transaction information such as the amount to be transferred, the receiver of the money, and a description for the transaction before performing the command.

Example #3 found in real life:

I always get a confirmation to authorize the total amount of order when using my credit card to make a purchase. The credit card readers that are connected to a store’s point of sale solution show a message to customers to approve the amount that will be deducted from their accounts.

Citation:
1. Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.

The principle of consistency enables people to learn new systems faster and efficiently deliver knowledge to new frameworks. The systems are more usable and learnable when they are presented in similar ways. Consistency helps people focus their attention on the task at hand. There are four categories of consistency: aesthetic, functional, internal, and external.

Aesthetic consistency means consistency in style. Aesthetic consistency helps things easily identifiable for people.  As an example, a company logo is great identifier of who the company is and what the company does. When the logo is used consistently (same font, color, graphic, and tagline), then a brand is born. Aesthetic consistency enhances recognition and communicates emotional connection between brand and people.

Functional consistency improves usability by formulating existing knowledge of how designs functions. When similar controls function the same way, it is called functional consistency. The consistent use of symbols on a new device increases predictability of the product, which makes the new device easier to use and learn.

Internal consistency relates to correlation of elements in the system. This is a blend of both visual and functional consistency. As an example, if updating a webpage with new elements, you should also update other older webpages in the website with same elements.

External consistency refers to consistency across multiple independent systems. Adobe products are good examples of external consistency. Adobe Photoshop and Adobe Illustrator have similar tools and features that is recognizable to the users. Therefore, if you know Photoshop you can apply that knowledge to learn Adobe Illustrator.

---

 

Visual depiction from Universal Principles of Design

“Bob Evans uses the same logo, typefaces, color, schemes, menus, staff uniforms, interior design, and architecture across its restaurants. The consistency improves brand recognition, reduces costs, and establishes a relationship with customers that extends beyond any single restaurant.” (Lidwell, Holden, Butler 2010, p.57)

Online visual depiction

Elements of website designs to include Aesthetic consistency, Functional consistency, Internal consistency, (https://gofishdigital.com/guide-design-consistency/) and External consistency. (https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f)

Real life visual depiction

Aesthetic consistency: Apple logo on MackBook Pro, iMac, Magic Mouse in Silver and in Space Gray

Functional consistency: Roku remote control, Samsung LED remote control, Samsung Blue-ray remote control (play, pause, fast-forward and rewind buttons)

Internal consistency: In the city of Irvine, street signs are brown with white letters

External consistency:  Ubiquitous and recognizable restroom signs

References:

William Lidwell, Kritina Holden, Jill Butler (2010), Universal Principles of Design, Beverly, MA: Rockport, 2010

Matt Burt (2017) A Beginner’s Guide to Achieving Web Design Consistency, Go Fish Digital, https://gofishdigital.com/guide-design-consistency/

Anton Nikolov (2017) Design principle: Consistency, The most known and the most fragile design principle., UX Collective, https://uxdesign.cc/design-principle-consistency-6b0cf7e7339f

Comparison

Comparison is a design method through which one can understand how a particular circumstance or situation can have different effects on two or more systems. This method reveals relationships and patterns among systems. Comparison is a useful method for measuring differences among systems which are similar or in the same context.

Example #1 Cited by the original source:

This is the Diagram of the Causes of Mortality in the Army in the East. Comparison is easier when diagrams are located next to each other on the same page. These diagrams compare the causes of army’s mortality in different years. The graph has 12 wedges representing each month, and three colors showing causes of death.

Example #2 found online:

This illustration is the comparison of countries population in the world. Each circle represents a country, and each continent is represented by different color. This data visualization has made the information appear simple.

https://www.businessinsider.com/heres-a-comparison-of-the-population-of-every-us-county-using-bubbles-2017-3

Example #3 found in real life:

Today was really windy. I was walking outside when I noticed a loud noise. I looked back and saw these outdoor chairs were blown away by the wind. I was wondering why only some of these chair has blown away and rest are set in their place. However, they are all the same regarding material and environment. This is an example of apple to apple comparison. The chairs are the same in the same situation. The only variable is their position to the wind.

Citation:
Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.

The 80/20 rule also known as Pareto’s Principle state that 80% of output is produced by 20% of its inputs.  The exact measurement in percentages are not crucial as it varies between 10 percent and 30 percent. The 80/20 rule has practical implications for interface design, engineering, and economics to name a few.  The Pareto’s Principle is useful when assessing value of elements, target features, and concentrate resources for optimization. For example, when critical 20 percent of a product’s features are used by 80 percent of the time the focus should be applied to the critical 20 percent.  When redesigning systems that make them more efficient, focusing on noncritical functions that are part of the less valuables 80 percent should be minimized or removed from the design.

Examples of 80/20 rule:

“80% of town’s traffic is on 20% of its road.
(Lidwell, Holden, Butler 2010, p.14)
“80% of a company’s revenue comes from 20% of its products.”
(Lidwell, Holden, Butler 2010, p.14)
“80% of errors are caused by 20% of code”
(Lidwell, Holden, Butler 2010, p.14)

---

Visual depiction from Universal Principles of Design

“Graphical user interfaces conceal most of their functions in drop-down menus (bottom image).  Identifying the critical 20% of the functions and making them readily available in toolbar solves the problem (top image). ” (Lidwell, Holden, Butler 2010, p.15)

Online visual depiction

It is common that in certain areas of the website will fall under 20% of most–used functions. When designing a mobile version of the website, design focus is channeled on that very 20%.  As an example, a mobile version of Petco.com shows us that 80% of functions that are least used in the full website is not included in the mobile version.
(https://www.webdesignerdepot.com/2011/02/the-8020-rule-applied-to-web-design/

Real life visual depiction

There are 10 players in my son’s soccer team. The 80% of the goals are scored by 20% of the players.

References:

William Lidwell, Kritina Holden, Jill Butler (2010), Universal Principles of Design, Beverly, MA: Rockport, 2010.

80/20 Rule Applied to Web Design (2011) Mobile Design Trends and the 80/20 Rule https://www.webdesignerdepot.com/2011/02/the-8020-rule-applied-to-web-design/

Alignment allows us to create order and organization among elements.

Alignment is one of the most basic principles in design, together with contrast, hierarchy, balance, proximity, repetition, simplicity and function. In general design, alignment helps connect all the visual element together, make the design more cohesive.

In graphic design and web design, there are many good and bad alignment examples. Good alignment brings proper visibility, guiding the user’s eyes to the information they are looking for. It also helps to balance the design and helps provide the overall structure of the entire object. Bad alignment makes the content more complex and difficult to read, and therefore provides bad feedback to the user.

Usually, alignment is defined by the rows and columns or along its center line. Alignment can be archived with a grid to help with more accurate alignment.  The grid is an invisible line system, which helps organize elements from simple to complex content.

Below is an example of the different technique of alignment on Maddison Design website. Elements usually are aligned by rows and columns. However, designers have been experienced with different layouts, which aligns along diagonals, as above samples.

Alignment helps articles with complex contents easier to read. This is an example of using grid system to align various elements. With grid system, it is much easier for the user to read the article, although there is a lot of information on the page. 

This photo of the stadium I took during my trip to Toronto is an example of how alignment connects elements together in architecture. All the seats were aligned to create a form of the stadium.

Citation and References:

1. https://maddisondesigns.com/2009/03/the-5-basic-principles-of-design/https://254-online.com/alignment-principle-design/
2. https://www.cnn.com/
3. Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.

 

 

Objects grouped together are seen as a whole

According to Gestalt psychology, our brain perceives forms and shapes as one whole object even though there are some parts missing. When looking at a visual design, our brain will automatically fill in the gaps of what is missing in what our eyes see. While using the Closure principle, we play with the negative and positive of the space to create the object. We can also apply the Closure Principle by grouping individual elements into a special arrangement or create patterns that trigger our brain into forming an object.

The principle of closure was used wisely in design and graphical elements. It helps simplify the details that are not needed to make it a stronger image.  It also combines with other shapes to bring out deeper meaning or hidden messages of the design. This makes the design more appealing and interesting and invites the viewer to spend more time studying the design in more depth.

This is the sample from Universal Principle of Design book. The shape of the penguin was created by different shapes and colors.  Although several parts of the penguin are missing and lacks enough details, our brain was still able to form and associate the various elements into the shape of a penguin.

Unilever created their logo by putting different smaller objects into a shape of the letter “U”. All of the elements are stand alone and have different meanings.  But when they are formed into the shape of U, they are acting as a pattern, which is easily recognizable.

This is a set of wooden chopsticks I got in from Vietnam. If we glance through the object, we can see it has a shape of a fan. However, when we take out any part of the object, it can also act as a practical element.

Citation and References:

1. Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
2. https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2/
3. https://www.unilever.com/

Wayfinding is the process in which people understand, orient and guide themselves through a physical environment by use of information and visual cues. Orientation, Route Decision, Route Monitoring and Destination Recognition are the four stages that are used in wayfinding.

First, orientation refers to establishing one’s location in relation to nearby landmarks and objects within the space. Signage and ‘you are here’ markers plays a major role in helping one determine their location and direction. After someone orients themselves in an environment, the second stage is determining which route to take to arrive at their destination, called route decision. The easiest way of visually deciding which route is fastest is by use of a map. While en route to the destination, the person will detect their route along the way to make sure they are going the right direction. This stage is called route monitoring. The last stage is called destination recognition, and refers to the person being able to determine that they have reached their final destination. The destinations should be made clear by identities and signage.

EXAMPLE 1 (CITED BY ORIGINAL SOURCE):

 

This map and map key are examples from the book. It shows the wayfinding system within the Pittsburgh Zoo, with landmarks, symbols and areas that are easily identifiable.

EXAMPLE 2 (LOCATED ONLINE):

This example is wayfinding within the Seattle Children’s Hospital.  It has clear zone identification by means of different themes and colors for each particular level. The graphics give the environment a playfulness directed towards furthering children’s imagination and helps make them feel at ease. The signage is clear and easy to understand, using small logos to help indicate areas (for those who can’t read English).

Example 3 (Found in real life):

 

 

 

 

 

 

 

 

 

 

 

 

 

This is an example of wayfinding at the Third Street Promenade in Santa Monica, California. There is a plethora of restaurants and retail shops within just a few blocks, and the map located at the intersection of each main street shows where the person is in relation to the entire walkway. There is consistency in color, font, and shape of all signage, which helps with route monitoring and destination recognition. The map also shows the person in relation to the beach, public transit and parks that are within walking distance.

References:

1. Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
2. Knapp, Pat. “Seattle Children’s Hospital.” SEGD, Society for Experiential Graphic Design, 6 June 2015, segd.org/seattle-children%E2%80%99s-hospital.
3. Roux, Clive. “What Is Wayfinding?” SEGD, Society for Experiential Graphic Design, 23 Mar. 2014, segd.org/what-wayfinding.

 

 

 

 

 

 

Wabi-sabi is a traditional Japanese philosophy that embraces the “impermanent, imperfect and incomplete.” Wabi is a concept that refers to beauty in the unique and unrepeated, while sabi refers to beauty that can be found after time has passed and worn an object. In design, it can be applied to singular objects as well as interior design and architecture. Wabi-sabi is seen as a ways to appreciate weathered materials, natural processes and simplicity. It opposes traditional Western ideals of symmetry and flawless durability, and values the organic forms and materials found in nature.

Example 1 (cited by original source):

This example is from the book… it showcases unfinished wood materials and asymmetrical but modern forms on the exterior of the house. The interior shows the raw aesthetic of the rope alongside the staircase and organic, natural shapes of the decor.

Example 2 (located online):

This example shows the interior of The Musket Room, a New Zealand-inspired restaurant located in New York, New York. One of the walls features “lime-washed exposed brick” and wishbone dining chairs, each made to look unique and hand-carved. The details show weathered materials to enhance its beauty.

Example 3 (Found in real life):

This is an example of Tiffany’s bowl that reflects the ideas of wabi-sabi. It’s finished, decorative glaze is asymmetrical in design, and seems intentionally unintentional and natural in gesture. It features a muted dark brown often found outside. The table it’s sitting on could also be considered of the same aesthetic, as it is an unfinished, natural wood.

references:

1. Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
2. “Top Interior Design Trends 2018: Wabi-Sabi 7.” D.Signers, www.dsigners.net/wp-content/uploads/2018/01/Wabi-Sabi-7.jpg.
3. https://www.musketroom.com/about/
4. Lawrence, Robyn Griggs. “Wabi-Sabi: The Art Of Imperfection.” Utne, Ogden Publications, Inc., 2001, www.utne.com/mind-and-body/wabi-sabi.

 

 

 

 

Contour Bias is a design principle that states people prefer objects with contoured surfaces over objects with sharp angles or pointed features (Lidwell, Holden, and Butler, Universal Principles of Design, p 62).

The empirical evidence supporting this principle comes from the primary work of Moshe Bar and Maital Neta in their article, “Humans Prefer Curved Visual Objects” published in Psychological Science, in 2006. It even appears the preference for rounded objects is exhibited by other primates.

From a design perspective, the general rule of contour bias calls for using angular features when the intent is to sharpen attention and using contoured features when attempting to create a positive first impression. (Lidwell, et. al.)

Example 1. Emotion-free kettle used to test for contour bias

This example from Universal Principles of Design recalls the Bar and Neta experiments, in which “emotionally neutral” objects were used to test for contour bias. These “emotion-free” shapes were used to mitigate confounding factors, such as using baby-shapes or knife-shapes. Which is to say, people prefer soft shapes to stabby features, in a setting free of other signals that tell you something is cuddly or dangerous.

Example 2. Rounded fonts

This second example looks at the discussion of font shapes, their personas, and the use of rounded ones to convey comfort, softness, and femininity. I wanted to use Comic Sans in this section, but decided not to, because of the confounding factors of its use being tied to a trend, and also the hatred of it also being tied to that trend.

Example 3. Museum of Pop Culture, Seattle

This is the exterior of the Museum of Pop Culture in Seattle, designed by Frank O. Gehry. It is one of several examples of museums designed by Gehry that feature extensive curving on surfaces where one might expect an angular, boxy building.

Was Gehry specifically considering the notion of contour bias, I suspect not. He likely was working within a larger context, but I was reminded of his work when researching contour bias, so I  have presented it here.

As internet research can do, including Gehry in this post reminds me of this cat scratcher as it seems to have been designed after Gehry’s Easy Edges furniture. Perhaps cats have contour bias too.

Biophilia effect is the name given to describe the emotional, cognitive and physical benefits conferred by exposure to natural environments (William James Holt, Psychology, The Briefer Course). On its own, the term biophilia was first coined to describe being attracted to life and vitality, in the sense of a psychological orientation (The Anatomy of Human Destructiveness by Erich Fromm, and Biophilia by E.O. Wilson). In the context of design, biophilia effect refers to the use of people’s attraction to nature as a means of increasing aesthetic value of environments (Lidwell, et. al, Universal Principles of Design, p 36).

Example 1. Biophilia effect and the digital representation of nature

 

This example, cited in Universal Principles of Design, came from a redesign proposal for a hospital hallway. As an observer of just these images, I find this to be an example of the finding by Stephen Kaplan,  that the biophilia effect does not require a real environment, rather, that imagery of such views – such as these digital renderings in a design proposal – can suffice. (“The Restorative Benefits of Nature: Toward an Integrative Framework”, Journal of Environmental Psychology, 1995, vol. 15, p. 169–182.) Imagine the thrill of this client to learn they would not have to rebuild their hospital to take advantage of these ideas!

Example 2. Biophilia effect in the wild, Washington state

Now look closely at the photos below. These photos depict the everyday office views at Microsoft Corporation in Redmond, WA.

What’s astonishing to me is these are snapshots I took at work, and are 100% real world, 24/7 nature bonanza.

Further on the subject of nature views, Don Norman says of the notion of Zen View, “If there is a beautiful view, don’t spoil it by building huge windows that gape incessantly at it. Instead, put the windows which look onto the view at places of transition-along paths, in hallways, in entryways, on stairs, between rooms.” (Don Norman, Emotional Design, Why We Love or Hate Things, 2003, pp 110-113).  But Norman seems to taken in by the biophilia effect himself instead describing what I’ll call biophilia payoff: gazing at the forever pleasure of nature’s ever-changing visage.

Example 3. Biophilia as a source of inspiration

Biophilia in human creativity is broader than the biophilia effect in design. Here is a different interpretation of biophilia from the great musician and artist Bjork.

Bjork releases her ‘Biophilia’ album in 2011, along with a  digital interactive experience. The New York Times reviewed the experience and described it as breaking new ground: “essentially turns an album into a sort of audiovisual game, delivering a miniature production studio into the world’s willing hands.”

Ever ambitious as an artist, the album and accompanying digital work centers on the idea that biophilia is “the love for nature in all her manifestations from the tiniest organism, to the greatest red giant floating in the farthest realm of the universe”, as introduced by David Attenborough. “With biophilia, comes the restless curiousity, an urge to investigate and discover the elusive places where we meet nature.”

Symmetry adds balance to a design. When elements are the same on both sides of an axis, the design feels harmonious. A perfect symmetry occurs when two mirrored sides are exactly the same. Symmetry is found everywhere in natural. A butterfly’s right and left sides are identical. Our left hand and right hand are highly similar (although never identical). “Symmetric faces are perceived more attractive than asymmetric faces [Universal Principles of Design].”.

Symmetry is categorized into three major types:

Rotational Symmetry – It requires a central point. The object is designed to be rotated around the center point and appears the same, which creates rotational symmetry.

Translational Symmetry – Translational symmetry occurs whenever we can move (translate) an element in a design without causing it to lose its symmetric properties.

Reflectional Symmetry – If one half of the image is a mirror image of the other, you’ll be looking at a case of reflectional symmetry. This is the strictest kind of symmetry.

From a design point of view symmetrical design does not depend on identical mirroring. It’s only important to get close to the effect; a designer can manipulate the user’s eye to have a symmetric effect in his or her design by utilizing the design rules of symmetry and balance.

A visual depiction from my cited source

Different types of symmetry effects

An example image was found online but Not from my cited source

This woman from a small town of UK was claimed by the scientists the most beautiful woman in the world. How did these scientists decide that she was the fairest in all the land? Symmetry is their answer. That was the science used to determine that she has an almost perfect face.

My realistic drawing in life is a symmetric reflection of what I see in the face of the real person

Citation and References
http://iggyjingles.com/design-principle-symmetry/
https://www.interaction-design.org/literature/article/symmetry-vs-asymmetry-recalling-basic-design-principles

 

The ratio of face to body in an image that influences the way the person in the image is perceived. When the person’s face taking up most of the image, the attention of the perceiver is drawn to the person’s intellectual attribute. This is what we call high Face-ism Ratio. When the Face-ism ratio is low, the message of the image intends to deliver physical and sensual affects from the image.

So what does this mean for you? Well, if you’re designing a flyer for a graduate school program, you probably don’t want to use full body shots of students (although this happens a lot). Intelligence and personality won’t shine through to your viewers; you’ll want a larger face-ism ratio. It isn’t that the full body shot will necessarily be anything sexual, but it won’t deliver a message about intellect and getting to know students. If, however, you are creating a flyer to advertise a gym, larger body shots, a small face-ism ratio, is probably your best bet.

Let’s take a look at the cover image from the Time Magazine and the cover photo from Vogue. When the cover photo is just a face, the photo editor is trying to tell you an insightful story that reflects the character’s personality, intelligence and ambitions. If the cover photo is mostly body, the story is about how cute the person looks in that dress. How physically attractive she or he is and how active that character is.

 

The example images from my cited source:

The example images not from my cited source but precisely applied the design principle of Face-ism Ratio:

LinkedIn is a business networking website where people offers their skills and knowledge in reflection on their intelligence to connect with others. Whereas, the VS site promotes the sales on lingerie and other intimacy wears which often connects to sensual effect.

The example of a kid’s drawing unintentionally applied Face-ism Ratio 

The drawing on the left has a higher face-ism ratio which shows more innocence of the character.

Citation and References:
https://candacecrowe.com/blog/about-design/

Hierarchy is a principle that organizes complex relationships into simple and visual structures. When information is grouped together and related, several ways to visualize these relationships is through tree, nest, and stair structures. This allows the user to understand the structure of a system by seeing the relationship between the parent element and children elements. Tree structures represent high-level views of relationships. Nest structures show information grouped by function and hierarchy. Stair structures reveal hierarchies in systems that are growing and unpredictable (Lidwell, Holden, & Butler, n.d., p. 122).

Example 1: Tree, Nest, and Stair Structures

The Universal Principles of Design illustrates the 3 structures of hierarchy. Source: Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler

---

Example 2: Mac OS Nested File Structure

Mac OSX does nested file a different way. You can see the hierarchy between parent and child in a horizontal fashion. Source: Mac OS

---

Example 3: Hand drawn hierarchy

I drew another representation of how I organized different files for Project 1. I had little blurbs written as documents and I put them in a folder with the images I wanted to attach.

---

Resources:

Lidwell, W., Holden, K., & Butler, J. (n.d.). Universal Principles of Design. Rockport.

The Gutenberg Diagram is a principle that describes the Western reading orientation of homogenous and evenly distributed content. Content is separated into 4 different quadrants: primary optical area (top left), terminal area (bottom right), strong fallow area (top right), and weak fallow area (bottom left). The reading gravity begins at the top left and gravitates towards the bottom right (Lidwell, Holden, & Butler, n.d., p. 118). Research by Pernice (2017) shows that Western readers still read this way, even on mobile devices. Using eye tracking software, Pernice found that the pattern is shaped like an “F.”

Example 1: Wall Street Journal

The Wall Street Journal divides it’s content by sections. The sections allow for reading in from left to right, top to bottom. Source: Wall Street Journal

---

Example 2: Eye Tracking Heatmap

Pernice (2017) found that users read websites in an F-shaped pattern using eye tracking software. Source: F-Shaped Pattern Reading Web Content

---

Example 3: Textbook

This is a real world example of Gutenberg Diagram in a textbook given to us for our MHCID program at UC Irvine. Source: Contextual Design by Karen Holtzblatt and Hugh Beyer

---

Resources:

Lidwell, W., Holden, K., & Butler, J. (n.d.). Universal Principles of Design. Rockport.
Pernice, K. (2017, November 12). F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). Retrieved from https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Progressive disclosure is the act of showing a person only the most important, relevant, or user-requested information to accomplish their task, while leaving other information available but concealed. In interaction design, it is an attempt to balance the user’s competing desires for simplicity in use and robustness in features. Progressive disclosure can also be used in the physical world to have someone perceive a complex system or activity more simply such as labyrinthine attraction lines at Disneyland concealing the full length of the line.

Progressive disclosure is particularly useful for efficient learning, as less relevant information is concealed, while more relevant and timely information is revealed when needed.

Examples

Works Cited

Signifiers use marks, sounds and other indicators to communicate appropriate actions or behavior for a user to take. Signifiers can be intentional on the part of the designer (like highlighting an important button) or unintentional (like plates stacked the sink communicating that is a place people can leave them).  

Many people confuse affordances for signifiers. Whereas an affordance describes all possible actions a user may take based on his relationship to the object, a signifier communicates an appropriate behavior. As Norman sums it up,  “Affordances determine what actions are possible. Signifiers communicate where the action should take place.”

Examples

Works cited

1. Norman, D. A. (2013). The design of everyday things (Revised and expanded edition). New York, New York: Basic Books.
2. Signifiers, not affordances – jnd.org. (n.d.). Retrieved October 17, 2018, from https://www.jnd.org/dn.mss/signifiers_not_affordances.html

Highlighting is a way of calling attention to a specific area of content. Since users favor scanning over reading, highlighting can actually help guide users through the content.¹ But to be effective, highlighting methods should be used sparingly (10% or less of the overall content), otherwise the content will become noisy and ineffective.² Popular methods include using a different color, bold typeface, or all uppercase letters.

This article from the Baymard Institute uses bold typeface sparingly to add emphasis to important words and enable users to quickly scan the content and glean its main takeaways.¹

 

The homepage of the Harvard Business Review‘s website uses color sparingly to draw the user’s eye to the headline of the featured article.³

 

This cover of The Atlantic uses color sparingly to draw the user’s eye to the focal point of the issue’s main story.

 

¹Holst, Christian. “Scannability: How to Highlight Text on the Web.” Baymard Institute, Baymard Institute, 30 Nov. 2010, baymard.com/blog/highlighting-text-online.

²Whitenton, Kathryn. “Decision Frames: How Cognitive Biases Affect UX Practitioners.” Nielsen Norman Group, Nielsen Norman Group, 11 Dec. 2016, www.nngroup.com/articles/decision-framing-cognitive-bias-ux-pros/.

³Harvard Business Review, Harvard Business Publishing, 29 Sept. 2018, hbr.org/.

Framing is a technique of using words, images, and context to present information in a way that influences the thoughts and decisions of users. Framing information in a positive light tends to get users to do something, while framing information in a negative light tends to prevent users from doing something.¹ In fact, depending on the frame used, the exact same information can lead to opposite conclusions.² To neutralize the effects of framing, both the positive and negative aspects should be mentioned so that users can use their own thought processes to make a decision.¹

 

An example of negative framing. By associating alcohol with crime, poverty, and waste, this cartoon attempts to dissuade voters from opposing the prohibition of alcohol.¹

 

An example of negative framing. By referring to the Kavanaugh hearings as disgusting and a ‘travesty,’ the author hopes to persuade members of Congress to put an end to them.³

 

An example of positive framing. By showing smiling dogs and encouraging users to ‘be kind,’ the community hopes to convince residents to pick up after their dogs.

 

¹Lidwell, William, et al. Universal Principles of Design. Rockport, 2010.

²Whitenton, Kathryn. “Decision Frames: How Cognitive Biases Affect UX Practitioners.” Nielsen Norman Group, Nielsen Norman Group, 11 Dec. 2016, www.nngroup.com/articles/decision-framing-cognitive-bias-ux-pros/.

³Gingrich, Newt. “Newt Gingrich: Is There Even One Democrat Decent Enough or Disgusted Enough to End This Kavanaugh Travesty?” Fox News, FOX News Network, LLC, 28 Sept. 2018, www.foxnews.com/opinion/newt-gingrich-is-there-even-one-democrat-decent-enough-or-disgusted-enough-to-end-this-kavanaugh-travesty.

Two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger two quantities.

This ratio can be found throughout history in art, architecture, and even nature. The Great Pyramid of Giza, The Parthenon, and Leonardo da Vinci’s famous Vitruvian Man all illustrate the golden ratio. Whether this ratio is a subconscious preference or a beloved design tradition has yet to be proven. There’s no question that the golden ratio still influences design today; however, designers should not design with the golden ratio as a priority. Instead, designers should only consider the golden ratio if it doesn’t compromise other, more critical, aspects of the design.

Examples of the Golden Ratio:

 

 

 

Reference:

Lidwell, W., Holden, K., & Butler, J. (n.d.). Universal Principles of Design. Rockport.

Image Sources:

https://medium.com/i-math/what-is-the-golden-ratio-d3cc17c

https://www.topsimages.com/images/parthenon-golden-ratio-f6.html

http://cs.astronomy.com/asy/b/astronomy/archive/2018/03/12/go-figure-nature-39-s-numbers-are-the-keys-to-the-cosmos.aspx

 

Color can be used to improve the aesthetics of a design, create visual interest, and even assign meaning. Color may aid in creating a visual hierarchy, or in drawing attention; however, if used improperly color can detract, distract, and cause confusion within a design. When designing with color, consider using a limited color palette—using too many colors may detract from the design. Instead, a designer may consult a color wheel to find aesthetic color combinations. These color choices should not, however, communicate information, as a large portion of the population has limited color vision [1].

The saturation of chosen colors should also be considered. Saturated colors­—or pure hues­—can be used to attract attention and create visual excitement, whereas desaturated colors may create a more serious aesthetic. When choosing appropriate colors, consider that certain colors may have different connotations in different cultures; consider the audience and what significance each color may have for its members. For example, in Western cultures the color yellow is generally associated with warmth, summer, and hospitality; in Eastern and Asian cultures, members of the ruling class frequently wear yellow and it is considered sacred or imperial; in Latin America many times yellow is associated with death and mourning. Consider the implied meaning of the chosen color in relation to the audience [2].

Cultural Significance of Yellow:

 

 

 

 

 

 

Color Used to Draw Attention:

 

 

 

 

 

 

 

 

Color Combination in Nature:

References:

[1] Lidwell, W., Holden, K., & Butler, J. (n.d.). Universal Principles of Design. Rockport.

[2] Cousins, C. (2012). Color and cultural design considerations | Web Designer Depot. Retrieved October 12, 2018, from https://www.webdesignerdepot.com/2012/06/color-and-cultural-design-considerations/

Image Sources:

https://commons.wikimedia.org/wiki/File:Xuanzong_of_Ming.jpg

https://pixabay.com/en/buddhist-monk-sitting-meditation-1807526/

https://nowresortsblog.com/2012/10/19/now-resorts-spas-celebrates-dia-de-los-muertos/

Constraints are design restrictions, necessary for the focused and controlled performance of work in a system. Examples vary between two types of constraints: Psychological (e.g. warning sign) and Physical (e.g. train track). The main purpose of any constraint is to frame any force or work, preventing unnecessary actions and errors, and redirecting these in specific ways.

Physical Constraints:

This type of constraint physically limits the range of motion using the following elements: Paths, Axes, and Barriers

Online Images Courtesy of: Pixbabay

Paths: Such as a narrow walkway across a park, train tracks, or the grooves in a progressive light switch, providing a unique direction to a moving force.

Axes: Just like the spinning wheel on a computer mouse provides infinite scrolling mobility and control with minimum user effort and reduced space.

Barriers: Prevent undesired actions and stop, redirect, or slowdown forces from continuing in the wrong direction. The retaining wall in my garden

Psychological Constraints:

This form of constraint influences behavior by using intellectual, cultural, or learned perceptions such as symbols, conventions, and mappings.

Online Images Courtesy of: Pixbabay

Symbols: These are represented by contextual labels and icons with clear affordances to help guide desired behaviors.

Conventions: Are used to elicit behavior through the known commonalities and ways in which people interpret or do things. This adds a level of intuitiveness and system consistency.

 Mappings: Defined by the position, visibility, and grouping of elements and controls that are related in function and purpose.

References

Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design,  Rockport Pub. PP. 60-61.

 

It refers to the state of intellectual/emotional discomfort. This happens when our thoughts and expectations about something are met by something different. Things that surprise, scared, or conflict us, where what we experience doesn’t match our values or believes. A clear example includes the use of rewards, salaries and benefits, commissions, and special gifts to move us to do things that require effort. The internal mental/emotional state, in most cases, move us to stay within the confines of comfort and leisure. It’s the greater need and reward that reduces dissonant cognition in our minds. Helping us rationalize and reduce tension by adding consonant cognition, and diminishing the relevance of dissonant cognition, such as our ability to delayed gratification.

This principle is also heavily used and observed in common pranks and skits. The cognitive discomfort can be used to enact our feelings of euphoria, flight and fight, and laughter.

Example From The Readings

AOL Gave customers a free 30 day trial. Customers had to endure a lengthy set up process, providing personal information such as email, passwords, etc.  The cognitive dissonance at the time of trial expiration made people rationalized it was better to paid for the service they had with AOL than having to redo the set up with another company.

Example From The Web

Dramatic use of cognitive dissonance in advertising campaign against tobacco. This is not a cognitive pleasant image. It defies our core values and believes. It is shocking. It contradicts human reasoning and expectations. Hence the powerful message delivered, by the proper use of Cognitive Dissonance.

Image courtesy of: Ads of the world

 

Example From The World

Choosing to do a Master at this stage in my life was a decision that required overcoming a level of Cognitive Dissonance. The expected reward helped me rationalize the discomfort of applying to the program. And it’s helping me right now push through the moments of sacrifice to succeed in the program.

References

Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design,  Rockport Pub. PP. 46-47.

Performance Load

Performance load is the amount of effort required to complete a task. So, if the performance load is high, the task is more likely to take longer and/or fail than if the performance load were low. This seems like common sense that if something is hard to do, that you might take longer to do it or possibly fail, but often this isn’t considered in design. In my experience at work, I’ve found that having a name to describe this really helps make it a legitimate topic to discuss and explore with research.

There are two types of performance load: cognitive load and kinematic load. Cognitive load is the amount of mental effort it takes. For example, remembering a password to log into a website or application is an example of cognitive load. How many times have you been frustrated by that or just given up? Most of the time my laptop remembers my passwords for me so my cognitive load has been reduced. Kinematic load is the amount of physical effort required to complete a task. For example a manual transmission has a higher kinematic load than an automatic due to the effort required to operate the clutch and the gear shift.

Good design can help decrease performance load and increase the likelihood of people accomplishing their goals. Cognitive load can be reduced by organizing layouts, way-finding, and controls in ways that make sense to people. Chunking can also be used to organize information so users can find it more easily and intuitively. By reducing the physical force and number of steps required to accomplish a task, the kinematic load is lessened and people are more likely to complete the task successfully.

Examples from the readings

 

Examples from the Web

 

Examples from the World

 

Works Cited

Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub. PP. 178-9.

Discoverability

Discoverability refers to how easy it is to determine possible actions, and how to complete those actions when a system or object is unfamiliar. Think about objects you have interacted with for the first time like a coffee maker in a hotel room. Did you know how to use it by looking at it for the first time or did you struggle? Often, people blame themselves when they don’t immediately understand how to use something, but it’s not their fault. If it’s a common object like a phone or coffee maker, it should be intuitive to use, even if it’s the first time. The way to achieve this is to make the actions of the system discoverable.

Discoverability is not a single principle all on its own because depends on several design principles working together: affordances, signifiers, mapping, and conceptual models. Affordances are the relationship between the properties of an something and the ability for the user to determine how to use it. Often, affordances have signifiers that demonstrate how to use it, thus giving the object affordance. Mapping helps the user understand the relationship between different elements, and conceptual models display how a system works. Having a conceptual model of how the system works and being able to see how the various elements connect to each other help the user understand the system and how to operate it. When all of these elements are working properly, the user is able to discover what to do to achieve their goal. It just feels easy and intuitive to use without a lot of effort or understanding.

Example from the readings

Examples from the Web

2011

2012	2015

2017	2018

Example from the World

Works Cited

[1]Norman, D., & Tognazzini, B. (2015). How Apple is giving design a bad name. Retrieved from: https://www.fastcompany.com/3053406/how-apple-is-giving-design-a-bad-name

Classical conditioning is a well-known psychological approach that uses positive or negative stimuli to either create an association or influence behavior [1]. The most famous instance of classical conditioning was Ivan Pavlov’s experiments with dogs. He created an association between the sound of a bell (or other stimuli) and the arrival of food, and over time the dogs began salivating every time they heard the bell, whether or not food was present [2]. We can see classical conditioning all around us in marketing and ads, technology, our own behavior, and nature.

Examples from Our Text

1. Olive Garden ad
This TV commercial uses several conditioned associations and emotional reactions to evoke an emotional response from the viewer. The positive stimuli of upbeat music, freshly prepared food, friendly narration, and the inclusion of “real” people enjoying that food and each other’s company all combine to elicit action from potential customers. Ideally, this action results in spending money at Olive Garden in order to experience these stimuli first-hand. [3]

 

 

Examples Online

Examples Around Us

---

References:

[1] Lidwell, William, Kritina Holden, and Jill Butler. Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub, 2010. 42-43.

[2] Pavlov, P. Ivan. Conditioned reflexes: an investigation of the physiological activity of the cerebral cortex. 1927. Translated and edited by G. V. Anrep. Dover Publications, 1984.

[3] “Enjoy more of what you love. All day long. At Olive Garden.” YouTube, 8 Jan. 2018, www.youtube.com/watch?v=OkC9U7oEFYg. Accessed 12 Oct. 2018.

[4] “Nasty Effects.” Stanford Research into the Impact of Tobacco Advertising, tobacco.stanford.edu/tobacco_main/main_anti.php, http://tobacco.stanford.edu/tobacco_main/images_anti.php?token2=fm_anti_st350.php&token1=fm_anti_img12464.php&theme_file=fm_anti_mt010.php&theme_name=Disgusting&subtheme_name=Nasty%20Effects. Accessed 12 Oct. 2018.

[5] “What’s in a Name: The Power of Plus Size.” ModCloth Blog, 16 Apr. 2018, blog.modcloth.com/behind-the-scenes/news/whats-name-power-plus-size. Accessed 12 Oct. 2018.

[6] “iOS 12.” Apple, 2018, www.apple.com/ios/ios-12/. Accessed 12 Oct. 2018.

[7] Kim, Meeri. “Sounds of slot machines can manipulate players, researchers say.” The Washington Post, 6 July 2013, www.washingtonpost.com/national/health-science/sounds-of-slot-machines-can-manipulate-players-researchers-say/2013/07/06/bfbd34ec-e3f8-11e2-80eb-3145e2994a55_story.html. Accessed 12 Oct. 2018.

Mimicry is the imitation of familiar things in order to take advantage of that familiarity and recognizability. There are three types of mimicry. Surface mimicry is the imitation of visual appearance, including colors, patterns, and/or shapes. Behavioral mimicry is the imitation of an action, usually of a living thing. Functional mimicry is the imitation of a physical process [1]. Mimicry can be used to help people understand and use objects quickly through recognition of these common traits, to elicit a desired emotional reaction, or both. All three types often–but not always–fall under the umbrella of biomimicry, which is the imitation of living things, objects, or phenomena from the natural world [2].

Examples from Our Text

1. Mimic octopus
The mimic octopus imitates both the appearance and behavior of things within its environment. It stays safe by blending into the background or disguising itself as a more dangerous animal. (Surface & behavioral mimicry.) [3]

Examples Online

4. “Old Phone” iPhone ringtone
The iPhone’s “old phone” ringtone mimics the sound made by an old fashioned telephone. Though it does not look or function like a mid-20th century phone, the iPhone uses the same ringtone to improve usability. (Behavioral mimicry.) [6]

 

5. Siri
Siri uses mimicry in a few ways to improve likeability and usability for iPhone users. First, Siri’s voice mimics a human voice, which elicits emotional and empathetic reactions. Second, Siri’s function mimics that of a real-life personal assistant, and this aids discoverability because we have preconceived notions about what a personal assistant should do for us. (Behavioral & functional mimicry.) [7]

 

Examples Around Us

---

References:

[1] Lidwell, William, Kritina Holden, and Jill Butler. Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub, 2010. 156-157.

[2] Benyus, Janine M. Biomimicry: Innovation inspired by nature. William Morrow, 1997.

[3] “Mimic Octopus: Master of Disguise.” YouTube, 11 Oct. 2017, www.youtube.com/watch?v=Wos8kouz810. Accessed 12 Oct. 2018.

[4] “Express Yourself with New Face Filters.” Instagram, 18 Aug. 2017, instagram-press.com/blog/2017/08/31/express-yourself-with-new-face-filters. Accessed 12 Oct. 2018.

[5] “Know Your Icons Part 1 – A Brief History of Computer Icons.” Envato Tuts+, 18 July 2010, design.tutsplus.com/articles/know-your-icons-part-1-a-brief-history-of-computer-icons–psd-9805. Accessed 12 Oct. 2018.

[6] “SOUND EFFECT | APPLE iPhone X Ringtone | OLD PHONE ( RINGING).” YouTube, 8 Oct. 2017, www.youtube.com/watch?v=C_Vyas266Lk. Accessed 12 Oct. 2018.

[7] “Cookie Monster Siri Commercial.” YouTube, 2 Apr. 2017, www.youtube.com/watch?v=MF6OYq_2Ooc. Accessed 12 Oct. 2018.

“Nudge” is the technique of using gentle reminders or instruction to lead a user to a desired action. Common nudging techniques include defaults, feedback, incentives, structured choices, and visible goals. Desired actions are reinforced by providing positive feedback and reducing friction. A nudge would ideally be used to benefit all the stakeholders involved but can be strategically used to advance business goals.

Example 1 – Original Source

Urinals with an image of a fly etched into it help people aim.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).

Example 2 – Online

Most registration forms on websites will have the option to subscribe to newsletters checkmarked by default to encourage subscriptions.
Source: www.modcloth.com

Example 3 – In Person

Stamp cards incentivize people to keep returning to businesses in hopes of reaching a point of receiving a freebie.

“Stickiness” is a principle that refers to the virality of certain ideas. The six variables that can cultivate stickiness are simplicity, surprise, concreteness, credibility, emotion, and story. When the idea has one or more of these variables initially, it can gain traction within society and build upon itself. This snowball effect can further increase an idea’s stickiness and persistence causing it to become a cultural phenomenon.

Example 1 – Original Source

This poster in support of Obama became a symbol for his campaign and the change he would bring if elected.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).

Example 2 – Online

Memes are perfect examples of stickiness. Even when someone does not know the origin of the image, if it enters the cultural consciousness, almost everyone will recognize it.
Source: https://www.thoughtco.com/science-of-memes-4147457

Example 3 – In Person

This is a link to the Friends intro song. Similarly commercial jingles and slogans are examples of sticky ideas.

“Figure-ground relationship” is a Gestalt principle that addresses the separation between the visual focus and the rest of the visual field. The relationship between figure and ground can be manipulated to either contrast the figure from the ground, or leave the focus up to the viewer’s interpretation. It is used in modern-day design to emphasize affordances or a call to action.

Example 1 – Original Source

The Rubin Vase shows an ambiguous subject using the design principle of figure-ground relationship. Either a vase, or 2 faces can easily be the subject with the other being the background.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).

Example 2 – Online

Helvetica, as explained in the documentary, is an example of using the figure-ground relationship principle to become such an iconic and commonly used font.
Source: https://creativepro.com/typetalk-good-looking-helvetica-size/

Example 3 – In Person

This is a fake speed bump that is painted on a flat road to trick people into slowing down.

“Recognition over recall” is a principle that induces a sense of familiarity in design to reduce the cognitive load required to accomplish a goal. Recognition memory relies on cues whereas recall memory requires more cognitive effort. Since recall memory is not always accurate, designing to take advantage of recognition and familiarity of certain objects can cue a person to take an action.

Example 1 – Original Source

This difference in the command line interface vs graphical user interface shows the ease of use between recognition amongst presented options and recalling naturally.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).

Example 2 – Online

This is how Google’s autocomplete function provides recognition cues to help people after the first recall word.
Source: www.Google.com

Example 3 – In Person

This is a voting ballot with the names of the candidates written for the ease of recognition as opposed to recalling the names naturally.

“Proximity” is a Gestalt principle that explains how distance affects a person’s instinct to group objects together. Less distance between objects suggest a relationship between them, compared to objects that are further apart. People’s ability organize groups using proximity is inherently ingrained and is not part of a conscious thought process.

Example 1 – Original Source

The spacing between the words on the Big Bend National Park sign imply that they are separate words/phrases.

Example 2 – Online

The spacing between words are how we recognize words as words and not one single long sequence of letters.

Example 3 – In Person

Remote controls often group buttons using proximity. For example, +/- Volume is usually grouped together but away from +/- Channel buttons.

 

References:
-Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010)
-https://medium.com/logomachine/the-proximity-principle-the-main-rule-of-design-which-makes-it-loud-and-simple-9a8e59f13f7b

The “cathedral effect” is a spatial principle pertaining to the influence of ceiling height on people. Close proximity to the physical features that define the space can affect people’s focus and behavior by generating feelings of confinement or freedom. Smaller spaces can cause people to feel a sense of urgency to complete the task at hand, while larger spaces encourage more creative and theoretical thinking.

Example 1 – Original Source

This image shows the effect of the ceiling height on a person’s creativity versus focus.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).

Example 2 – Online

This is an section of a space that changes in ceiling heights to reflect the programs and need for creativity/focus.
Source: https://quininedesign.com/perspectives/design-principles-cathedral-effect

Example 3 – In Person

This is an example of an escape room, which are designed to be small and confined. It stimulates focus, interaction with surroundings, and sense of urgency to get out.
Source: https://nmescaperoom.com/scenarios/

Jesse’s note: I’m making this post “sticky” so that it’s top of mind as you make your Project 1: Principles posts. Thank you, Serena, for putting this material together.

—

Hey all! Since we’ll be using this WordPress site for many of our assignments this quarter, I thought it might be helpful to talk briefly about accessibility within WordPress.

Here are some basic best practices you can follow if you want to ensure that your posts are accessible:

Alt text
People who are blind or have visual impairments often use screen readers to access content, so it’s important to provide alt text describing each image you post. Here’s how…

• When adding a new image: After uploading, you’ll see some options on the right side, below the image title. Be sure the alt text field is filled out with a brief but accurate description of the image’s content.

• Add to an existing image: You can click on the image itself, then the edit button, OR go to Media in the left menu to access older images. Fill in the alt text field.

Headings
Headings are used to tell screen reading software how to navigate a website. Make sure you are only using headings in a post to indicate hierarchy. Never use headings for visual effects, because screen reading software will assume it’s the next organizational section of the webpage.

• If you need to make text bold or enlarge it, add pull quotes, etc, you can do it by clicking on the “text” tab and manually writing inline CSS.

The blockquote function (quotation mark icon in your rich text editor) is a great alternative.

• You can also take advantage of post formats. In the currently used theme (Twenty Seventeen), there are eight different post formats that provide different styling options. You can view them here by clicking on “Open Live Demo” and then “News”.

Carousels
Avoid carousels (also called sliders or slideshows) to display images. Most are awful for accessibility and fail to increase engagement with content. Consider an image gallery or use images within/between text paragraphs instead. Learn more at shouldiuseacarousel.com.

That’s it from me! Want to learn more about accessibility in WordPress? This handbook is a good place to start. Need help writing effective alt text? WebAIM has a great guide.

Want to experience navigating websites with screenreading software on your phone?
iOS: Settings > Accessibility > Voiceover
Android: Settings > Accessibility > TalkBack

If you have anything to add to this post, feel free to comment below, email me, or message me in Slack. 🙂

Simply put, Attractiveness Bias is the tendency to find people who are physically attractive to be more intelligent, trustworthy, and competent than unattractive people.  In the real world, for those who are considered attractive, attractiveness bias can lead to preference in hiring, more leniency during sentencing, and more being paid more for the same work.  It is thought that the roots of attractiveness bias lie in biology and evolution, where a healthy and fertile person is seen as attractive because they will be able to provide stronger offspring to continue the species.   There are certain aspects that make a person “attractive”, including symmetrical facial features and a desirable waist-to-hip ratio, which is .70 for women and .90 for men.

One example given in Universal Principles of Design is the presidential debate between Richard Nixon and John Kennedy, pictured below.  Nixon appeared ill, pale, and tired during the debate while Kennedy was tan, well-rested, and believed to be better prepared.  Those who watched the debate thought Kennedy had won whereas those who only heard the debate believed Nixon to have won.

Another example, the image below shows a man’s face that is symmetrical (a) and has been manipulated to be more asymmetrical (b).  Image B is found to be less attractive because of the lack of symmetry that humans normally attribute to being attractive or beautiful.

Finally, an example from the “real world”.  Below is a package of Mr Clean Magic Erasers.  Note the symmetry displayed for Mr Clean’s face and the muscles clearly visible that display strength and good health.  While perhaps not what you would immediately think of as “beautiful”, Mr Clean certainly applies the principles of Attractiveness Bias in order to entice customers.

 

References

Lidwell, William, Kritina Holden, and Jill Butler. 2010. Universal Principles of Design. Rockport.

Talamas, Sean N, Kenneth I Mayor, and David I Perrett. 2016. “Blinded by Beauty: Attractiveness Bias and Accurate Perceptions of Academic Performance.” PLOS.

The Law of Pragnanz refers to how humans tend to recognize complex shapes in as simple of terms as possible.  That is, the human mind recognizes pieces as a whole in order to better understand them.  The mind is able to connect unseen parts with the rest of the object in order to create a “whole” view, which is how we are able to perceive the wholeness of an object while it is partially blocked by another object.  The Law of Pragnanz also explains what happens when we look at several shapes overlapping one another, our brain looks and sees those whole and complete simple shapes instead of seeing a bunch of different lines that intersect, as shown below.

Similarly, the image below of the Olympic rings shows 5 overlapping circles – or at least that is what the brain perceives it as instead of multiple curved lines intersecting.

Finally, pictured is a backpack from my home with an equestrian company’s logo on it.  When looked at, the lines in the middle are seen as overlapping horse shoes instead of curved lines that intersect because that is simpler and easier for the brain to understand.

References

Kerti, Erkan. 2018. The Designer’s Guide to the Law of Prägnanz. April 10. Accessed October 15, 2018. https://blog.prototypr.io/law-of-pr%C3%A4gnanz-bdb2fcf349b8.

n.d. Pragnanz. Accessed October 15, 2018. http://changingminds.org/explanations/perception/gestalt/pragnanz.htm.

von Restorff Effect

The von Restorff Effect is basically the increased recognition and recollection of things that are different. This can be both something you see, or something you do.  It is why we remember those old spice commercials, or why red cars get pulled over more often. Because they stand out, they are remembered.

Example #1: Chick-Fil-A Billboard

This billboard accurately depicts the von Restorff effect, because its striking, has actual 3D models of cows, and is amusing which helps it draw attention in visually noisy environments.

Example #2: This handy poster

The circle stands out and is easy to remember because it is the only one in a field of squares.

Example #3: This bottle

Even obscured, the difference stands out and draws attention. When thinking back to the picture of all of the bottles on my counter top, will you remember “he had this blue one” or will you just remember a lot of empty tea bottles?

 

Sources:

Chick-Fil-A example:
Lidwell, William, et al. Universal Principles of Design. Rockport, 2010.

Chick-Fil-A Billboard image:
http://lakeworth.cfalocal.com/do-you-know-when-and-where-the-first-chick-fil-a-cow-billboard-was-erected/

Law of UX Poster:
https://lawsofux.com/von-restorff-effect.html

Veblen Effect

The Veblen Effect is an interesting inversion of supply and demand, where instead of demand driving the price, the price drives the demand. Intentionally making something more expensive and therefore more exclusive drives the demand of the product. There is even an entire category to these products, called “Veblen Goods”

Example #1: Tesla Roadster

The Tesla Roadster was the first highway legal all electric car to use lithium-ion battery cells, and its high price and limited availability drove its demand. Once the concept of the Tesla all electric vehicle took off, they expanded their product line to include lower priced models.

Example #2: Johnnie Walker Blue Label

Johnnie Walker Blue Label. At over $150 a bottle, this whisky is supposed to be “an unrivaled masterpiece – an exquisite combination of Scotland’s rarest and most exceptional whiskies. Only one in every ten thousand casks has the elusive quality, character and flavor to deliver the remarkable signature taste.” Honestly to me, it tastes the same as the Black Label for 10 times the price.

Example #3: Oakley Sunglasses

Compare the two sunglasses here, one is clearly superior, no? Oakley has built a brand as a luxury sunglasses and other sporting goods brand, and is generally associated with a certain status.

 

Sources:

Veblen Goods:
https://www.economicshelp.org/blog/1164/economics/veblen-goods/

Tesla Roadster Example:
Lidwell, William, et al. Universal Principles of Design. Rockport, 2010.

Facts about the roadster:
Shahan, Zachary (2015-04-26). “Electric Car Evolution”. Clean Technica. Retrieved 2016-09-08. 2008

Johnny Walker Blue Label (image and quote):
https://www.johnniewalker.com/en-us/our-whisky/johnnie-walker-labels/blue-label/

Visibility

The principle of visibility relates to a system’s improved usability when its function, status, and feedback is clearly indicated for the user (Lidwell 250). This provides queues to the user (whose memory is limited) to help them complete tasks. Visibility to only essential information is important as providing every condition, control, etc. of a complex system can be overwhelming to the user.

 

Example 1: Three Mile Island Nuclear System

There was little visibility to critical parts of the system that regulated water flow at Three Mile Island Nuclear Generating Station (Lidwell 251). As a result, operators were unaware of the status of problematic areas which led to the most significant nuclear accident in United States history.

Example 2: Instagram vs. Snapchat

The design differences between Instagram and Snapchat highlight the importance of visibility as a strategic factor for mobile applications. Instagram’s user interface provides visibility to most features on the main screen. It does this through the use of understandable icons, attention-grabbing notification badges, and expanded detail on the most important feature of the app– the feed.

Snapchat on the other hand drops users straight into a camera view to share, but does not make any other features notably visible. The feed for user content and news are hidden on separate screens under ambiguous icons. Additionally, certain features are not discoverable on first sight at all and require gestures to access. Most notably the map feature requires a pinch gesture to view it; however, there is not indication in the UI on how to access this feature.

One may argue that Instagram’s ability to make the most important features visible has made it a superior app over Snapchat in the marketplace.

 

Example 3: Massage Chair Remote

This remote control provides visibility to all functions and status of a massage chair. Text provides an simple understanding of functions. The icons are clear signifiers of position, massage technique, recline, and adjustment of the massage “spot”. Raised buttons indicate that they can be pressed for said functions and lights next to the icon indicate what is currently selected. A large red “stop” button makes it easy to turn off the system.

 

Sources:

Lidwell, William, et al. Universal Principles of Design. Rockport, 2010.

Instagram, Inc. Instagram. Version 66.0. https://itunes.apple.com/us/app/instagram/id389801252?mt=8

Snap, Inc. Snapchat. Version 10.42.11. https://itunes.apple.com/us/app/snapchat/id447188370?mt=8

Redirect

Immersion

The principle of Immersion refers to a mental state where an individual loses sense of the world and experiences “joy and satisfaction” from the environment or activities in which they participate (Lidwell 134). Perception and cognition is at a level in which the individual is neither overtaxed nor undertaxed, so that they don’t lose interest or experience frustration. As a result, the user is more susceptible to enjoying and getting lost in the experience.

 

Example 1: Titanic Museum Exhibit

The R.M.S. Titanic museum exhibit employs immersion by putting visitors into the story of the Titanic’s maiden voyage (Lidwell 135). From the excitement of its departure to the tragedy of its sinking, visitors guide themselves through a self-guided exploration of the exhibit. They receive identities as either high, middle, or lower class passengers/crewmen and given a boarding pass for one of these individuals at the beginning. Throughout the exhibit reality slips away as visitors envision themselves on certain locations and stories aboard the Titanic. Highlights include true-to-life sets of areas on the ship, real artifacts from the wreckage, and a giant iceberg that visitors can touch.

 

Example 2: Pokemon Go

Pokemon Go uses augmented reality to simulate a hunt for Pokemon in real world locations. Immersion was employed skillfully and users rushed to locations to find rare Pokemon. However, designers did not take into account negative outcomes due to immersion. There have been reports of traffic accidents due to users being distracted while playing the game. For instance, a study performed by Purdue University’s Krannert School of Management, accidents in Indiana’s Tippecanoe County increased 26.5% at Pokestops (hubs where pokemon can be caught) (Faccio).

 

Example 3: Old Navy HQ Mock Store

Old Navy HQ uses a mock store to immerse employees in an experience to understand what future seasons’ assortments and store layouts will look like. Merchandising, design, production, store operations, marketing, and strategy teams are involved with preseason planning and must understand if the assortment will make things easy for the customer to find, be visually appealing, and tell a cohesive story. The mock store allows them to put themselves in the shoes of a customer. It simulates a real Old Navy store experience, complete with mannequins wearing clothes, dedicated sections for the family, and signage and decorations.

 

Sources:

Lidwell, William, et al. Universal Principles of Design. Rockport, 2010.

Faccio, Mara, and John J. McConnell. Death by Pokémon GO: The Economic and Human Cost of Using Apps While Driving. 21 Nov. 2017, ssrn.com/abstract=3073723.

Redirect

Archetype

Definition in my words:

Cultural and other unconscious biases that have been embedded into us over time. In some way, they are a shorthand to many social realities we live with. They also help us in making sense of things around us.

Note: Sometimes this principle can intersect with other principles like stereotypes and concepts like learned conventions.

Example from Universal Principles of Design (my source):

Harley Davidson motorcycles. The motorbike designs and positions its motorcycles as an outlaw, living outside the society. They have even built a community around the outlaw archetype.

Harley Davidson Imagery (observe no helmet)

Image Source: https://www.flickr.com/photos/shfrazierpics/6886086359/

Example of Archetype from a source online:

Apple uses archetypes very effectively. It positioned itself as the ‘The Rebel’ in its famous 1984 Macintosh launch commercial:

https://www.youtube.com/watch?v=OYecfV3ubP8

Apple used archetypes again in early 2000s in its famous “I’m Mac and I’m a PC.” The brand highlighted its personality by contrasting itself against the dullness of a generic Microsoft PC.

Mac showcased itself as an individualist, easy going and a symbol of openness and self-expression. It was not a rebel anymore but it sure was not the establishment.

https://www.youtube.com/watch?v=0eEG5LVXdKo

This subtle but important change in stance might have had to do with the fact that Apple was not as small as it was back in 1984 and thus it had to evolve its image accordingly.

Example of archetype from everyday life:

Land Rover Discovery – the explorer archetype

Land Rover Discovery and Range Rovers is an example of an explorer archetype in action. The car is designed to explore, and it connects with the explorer in all of us. Its high ground clearance, four-wheel drive, powerful engine, head lamp vipers are just some of the many features that are designed to help it wade through water, drive through deep snow and climb a sand dune in the middle of a desert. All this so that it can enable you to explore freely. (Jeep’s Wrangler does this too, for much less).

Watch this to see Land Rover capabilities in action https://www.youtube.com/watch?v=dU6a9oIAP6M

Watch this for fun

https://www.youtube.com/watch?v=-wKfpPrRVIo

Accessibility

Definition in my words:

Designing in a way that the product/artefact can be used by all without a need for modification.

(This includes product’s usability among people with limited sensory abilities, limited physical abilities, people with limited or no experience of having used the product or people who make mistakes while using the product.)

Example from Universal Principles of Design (my source):

Position of buttons in an elevator for wheelchair access

Image source: http://michelleli.ca/wp-content/uploads/2009/10/jp_elevator.jpg

Example from an online source:

Sidewalk markings for the visually impaired

Image Source: https://www.slideshare.net/UXAndrew/universal-design-26013302

Example from everyday life:

Bus stop sign in braille, for the visually impaired.