Difference between revisions of "Category:Design Principles"

From perpendicular angel knowledgebase
Jump to: navigation, search
(General principles)
(anne's "Let's Not Be Cruel" Principles)
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[Category: Design]]
+
[[Category: User Experience Design (UX)]]
 
Design principles codify the behavioral research and/or design research known about specific User Experience topics. 
 
Design principles codify the behavioral research and/or design research known about specific User Experience topics. 
  
Line 10: Line 10:
  
 
* [[Rough consensus and running code]] - If everyone agrees we need images, for example, and someone gets images up and running, whoever gets there first will probably be the one setting the direction for the structure.
 
* [[Rough consensus and running code]] - If everyone agrees we need images, for example, and someone gets images up and running, whoever gets there first will probably be the one setting the direction for the structure.
* [[Postel's Law]]- "Be liberal in what you accept and conservative in what you send". In other words, assume that the people who are sending you things don't know the protocol, but stick to the protocol when you send out to someone else.  
+
* [https://lawsofux.com/postels-law.html Postel's Law]- "Be liberal in what you accept and conservative in what you send". In other words, assume that the people who are sending you things don't know the protocol, but stick to the protocol when you send out to someone else.  
* [[Priority of Constituencies]] - "In case of conflict, consider users over authors over implementers over specifiers, over theoretical purity." According to ''[https://abookapart.com/products/html5-for-web-designers HTML for Web Designers (1st edition)]'' by Jeremy Keith, this is one of the design principles used by the WHATWG to decide what changes in the HTML specs.  
+
* [https://www.w3.org/TR/html-design-principles/#priority-of-constituencies Priority of Constituencies] - "In case of conflict, consider users over authors over implementers over specifiers, over theoretical purity." According to ''[https://abookapart.com/products/html5-for-web-designers HTML for Web Designers (1st edition)]'' by Jeremy Keith, this is one of the design principles used by the WHATWG to decide what changes in the HTML specs.  
* [[Small pieces loosely joined]] describes how avoiding monoliths provides flexibility and paves the ways for APIs.
+
* [https://www.smallpieces.com Small pieces loosely joined] - A book that explains the internet is not a monolith. This has been extended by others to posit that avoiding monoliths provides flexibility and paves the ways for APIs.
* [[Information wants to be free]] - it may not always be in our best interest for information to want to be free, but for good and for bad this is definitely a founding principle of the web.
+
* [https://en.wikipedia.org/wiki/Information_wants_to_be_free Information wants to be free] - it may not always be in our best interest for information to want to be free, but for good and for bad this is definitely a founding principle of the web. As a result, you have to plan for the consequences.
  
 
== Content Strategy principles ==
 
== Content Strategy principles ==
 
These principles are taken from ''[https://abookapart.com/products/the-elements-of-content-strategy The Elements of Content Strategy]'' by Erin Kissane.
 
These principles are taken from ''[https://abookapart.com/products/the-elements-of-content-strategy The Elements of Content Strategy]'' by Erin Kissane.
* Good content is appropriate. Publish content that is right for the user and for the business.
+
* Good content is '''appropriate'''. Publish content that is right for the user and for the business.
* Good content is useful. Define a clear, specific purpose for each piece of content; evaluate content against this purpose.
+
* Good content is '''useful'''. Define a clear, specific purpose for each piece of content; evaluate content against this purpose.
* Good content is user-centered. Adopt the cognitive framework of your users.
+
* Good content is '''user-centered'''. Adopt the cognitive framework of your users.
* Good content is clear. Seek clarity in all things.
+
* Good content is '''clear'''. Seek clarity in all things.
* Good content is consistent. Mandate consistency, within reason.  
+
* Good content is '''consistent'''. Mandate consistency, within reason.  
* Good content is concise. Omit needless content.  
+
* Good content is '''concise'''. Omit needless content.  
* Good content is supported. Publish no content without a support plan.
+
* Good content is '''supported'''. Publish no content without a support plan.
  
 
== General principles==
 
== General principles==
 
+
* [https://lawsofux.com/doherty-threshold.html Doherty Threshold] - Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
* [Aesthetic-Usability Effect] - Attractive things actually work better.
+
 
* [https://lawsofux.com/fittss-law Fitt's law] - The time to acquire a target is a function of the distance to and the size of the target.
 
* [https://lawsofux.com/fittss-law Fitt's law] - The time to acquire a target is a function of the distance to and the size of the target.
 
* [[Hick's Law]] - The time it takes to make a decision increases with the number and complexity of choices.&nbsp;
 
* [[Hick's Law]] - The time it takes to make a decision increases with the number and complexity of choices.&nbsp;
Line 36: Line 35:
 
* [[Pareto Principle]] - For many events, roughly 80% of the effects come from 20% of the causes.&nbsp;
 
* [[Pareto Principle]] - For many events, roughly 80% of the effects come from 20% of the causes.&nbsp;
 
* [https://lawsofux.com/parkinsons-law.html Parkinson's Law] - Any task will inflate until all of the available time is spent.
 
* [https://lawsofux.com/parkinsons-law.html Parkinson's Law] - Any task will inflate until all of the available time is spent.
* [[Progressive Disclosure]]
+
* [https://lawsofux.com/peak-end-rule.html Peak-End Rule] - People judge an experience largely on how they felt at its peak and its end, rather than the total sum or average of every moment of the experience.
 +
* [https://www.nngroup.com/articles/progressive-disclosure/ Progressive Disclosure] - Advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.
 
* [[A Sense of Place]] - Humans need to have a sense of environment, direction, and available tasks to accomplish their goals.  
 
* [[A Sense of Place]] - Humans need to have a sense of environment, direction, and available tasks to accomplish their goals.  
 
* [https://lawsofux.com/serial-position-effect.html Serial Position Effect] - Users have a propensity to best remember the first and last item in a series.
 
* [https://lawsofux.com/serial-position-effect.html Serial Position Effect] - Users have a propensity to best remember the first and last item in a series.
* [[Set users up for success]]
+
* [[Set users up for success]] - Provide users the ability to avoid errors; don't provide them an interface that invites failure then chides them for failing.
* [https://lawsofux.com/teslers-law.html Tesler's Law] (The Law of Conservation of Complexity) - For any system, there is a certain amount of complexity that cannot be reduced.&nbsp;
+
* [https://www.nngroup.com/articles/progressive-disclosure/ Staged Disclosure] - Staged disclosure is a variant in which users step through a linear sequence of options, with a subset displayed at each step. Wizards are the classic example of staged disclosure.
* [https://lawsofux.com/von-restorff-effect.html Von Restorff Effect] (Isolation Effect) - When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
+
* [https://lawsofux.com/teslers-law.html Tesler's Law] (The Law of Conservation of Complexity) - For any system, there is a certain amount of complexity that cannot be reduced.
 +
* [https://lawsofux.com/von-restorff-effect.html Von Restorff Effect] (The Isolation Effect) - When multiple similar objects are present, the one that's the most different will be most likely to be remembered.
 
* [https://lawsofux.com/zeigarnik-effect.html Zeigarnik Effect] - People remember uncompleted or interrupted tasks better than competed tasks.
 
* [https://lawsofux.com/zeigarnik-effect.html Zeigarnik Effect] - People remember uncompleted or interrupted tasks better than competed tasks.
  
 
==Human-Computer Interaction Principles==
 
==Human-Computer Interaction Principles==
 +
These are principles for display design originally introduced by Christopher Wickens et al. in ''[https://amzn.to/2ngkNok An Introduction to Human Factors Engineering]'' and are listed in the [https://en.wikipedia.org/wiki/Human–computer_interaction Human-Computer Interaction] article on Wikipedia.
  
* [[Avoid absolute judgement limits]]
+
The principles are divided into four categories. The bulk of the content below comes directly [https://en.wikipedia.org/wiki/Human–computer_interaction#Thirteen_principles_of_display_design from Wikipedia].
* [[Make displays legible (or audible)]]
+
* [[Minimizing information access cost]]
+
* [[Principle of consistency]]
+
* [[Principle of Multiple Resources]]
+
* [[Principle of Pictorial Realism]]
+
* [[Principle of Predictive Aiding]]
+
* [[Principle of the moving part]]
+
* [[Proximity Compatibility Principle]]
+
* [[Redundancy gain]]
+
* [[Replace memory with visual information - knowledge in the world]]
+
* [[Similarity causes confusion]]
+
* [[Top-down processing]]
+
  
==Gestalt Principles==
+
===Perceptual principles===
 +
* '''Make displays legible (or audible)'''. A display's legibility is critical and necessary for designing a usable display. If the characters or objects being displayed cannot be discernible, then the operator cannot effectively make use of them.
 +
* '''Avoid absolute judgment limits.''' Do not ask the user to determine the level of a variable on the basis of a single sensory variable (e.g. color, size, loudness). These sensory variables can contain many possible levels.
 +
* '''Top-down processing.''' Signals are likely perceived and interpreted in accordance with what is expected based on a user's experience. If a signal is presented contrary to the user's expectation, more physical evidence of that signal may need to be presented to assure that it is understood correctly.
 +
* '''Redundancy gain.''' If a signal is presented more than once, it is more likely that it will be understood correctly. This can be done by presenting the signal in alternative physical forms (e.g. color and shape, voice and print, etc.), as redundancy does not imply repetition. A traffic light is a good example of redundancy, as color and position are redundant.
 +
* '''Similarity causes confusion: Use distinguishable elements'''. Signals that appear to be similar will likely be confused. The ratio of similar features to different features causes signals to be similar. For example, A423B9 is more similar to A423B8 than 92 is to 93. Unnecessarily similar features should be removed and dissimilar features should be highlighted.
 +
===Mental Model Principles===
 +
* '''Principle of pictorial realism.''' A display should look like the variable that it represents (e.g. high temperature on a thermometer shown as a higher vertical level). If there are multiple elements, they can be configured in a manner that looks like it would in the represented environment.
 +
* '''Principle of the moving part.''' Moving elements should move in a pattern and direction compatible with the user's mental model of how it actually moves in the system. For example, the moving element on an altimeter should move upward with increasing altitude.
 +
===Principles based on attention===
 +
* '''Minimizing information access cost or interaction cost.''' When the user's attention is diverted from one location to another to access necessary information, there is an associated cost in time or effort. A display design should minimize this cost by allowing for frequently accessed sources to be located at the nearest possible position. However, adequate legibility should not be sacrificed to reduce this cost.
 +
* '''Proximity compatibility principle.''' Divided attention between two information sources may be necessary for the completion of one task. These sources must be mentally integrated and are defined to have close mental proximity. Information access costs should be low, which can be achieved in many ways (e.g. proximity, linkage by common colours, patterns, shapes, etc.). However, close display proximity can be harmful by causing too much clutter.
 +
* '''Principle of multiple resources.''' A user can more easily process information across different resources. For example, visual and auditory information can be presented simultaneously rather than presenting all visual or all auditory information.
 +
===Memory Principles===
 +
* '''Replace memory with visual information: knowledge in the world.''' A user should not need to retain important information solely in working memory or retrieve it from long-term memory. A menu, checklist, or another display can aid the user by easing the use of their memory. However, the use of memory may sometimes benefit the user by eliminating the need to reference some type of knowledge in the world (e.g., an expert computer operator would rather use direct commands from memory than refer to a manual). The use of knowledge in a user's head and knowledge in the world must be balanced for an effective design.
 +
* '''Principle of predictive aiding.''' Proactive actions are usually more effective than reactive actions. A display should attempt to eliminate resource-demanding cognitive tasks and replace them with simpler perceptual tasks to reduce the use of the user's mental resources. This will allow the user to focus on current conditions, and to consider possible future conditions. An example of a predictive aid is a road sign displaying the distance to a certain destination.
 +
* '''Principle of consistency.''' Old habits from other displays will easily transfer to support processing of new displays if they are designed consistently. A user's long-term memory will trigger actions that are expected to be appropriate. A design must accept this fact and utilize consistency among different displays.
  
* [[Closure]]
+
==Visual Design Principles==
 +
===General Design Principles===
 +
* [[Aesthetic-Usability Effect]] - Attractive things actually work better.
 +
* [[Face-ism Ratio]] - The closer to a face you crop an image, the more you emphasize their personality over their physical appearance.
 +
* [https://lawsofux.com/von-restorff-effect.html Von Restorff Effect] (Isolation Effect) - When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
 +
===Gestalt Principles===
 +
* [https://en.wikipedia.org/wiki/Principles_of_grouping#Closure Closure] - The mind sees complete figures or forms even if a picture is incomplete or partially hidden
 
* [https://lawsofux.com/law-of-uniform-connectedness.html Connectedness] - Elements that are visual connected are perceived as more related than elements with no connection.
 
* [https://lawsofux.com/law-of-uniform-connectedness.html Connectedness] - Elements that are visual connected are perceived as more related than elements with no connection.
* [[Continuation]]
+
* [https://en.wikipedia.org/wiki/Principles_of_grouping#Good_continuation Continuation] - When two objects intersect, people tend to perceive them as uninterrupted objects that overlap
* [[Figure & Ground]]
+
* [https://en.wikipedia.org/wiki/Principles_of_grouping#Common_fate Common Fate] - When visual elements move in the same direction at the same rate, we assume they have the same stimulus
* [[Proximity]] - Objects that are near, or proximate to each other, tend to be grouped together
+
* [https://en.wikipedia.org/wiki/Figure_and_ground_(media) Figure & Ground] - The medium is the message. A communication technology (the medium or figure) necessarily operates through its context (or ground)
 +
* [https://en.wikipedia.org/wiki/Principles_of_grouping#Good_form Form] - We tend to group together forms of similar shape, pattern, color, etc.
 +
* [https://en.wikipedia.org/wiki/Principles_of_grouping#Proximity Proximity] - Objects that are near, or proximate to each other, tend to be grouped together
 
* [https://lawsofux.com/law-of-similarity.html Similarity] - The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
 
* [https://lawsofux.com/law-of-similarity.html Similarity] - The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.
 +
====Related====
 +
These principles are produced by combining the Gestalt Principles
 +
* [https://lawsofux.com/law-of-common-region.html Law of Common Region] - Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary
 +
==anne's "Let's Not Be Cruel" Principles==
 +
Some of these principles sum up items from the [https://accessibility.18f.gov/index.html 18F Accessibility Guide]. Others are a result of unfortunate hands-on education on my part. Most have to do with, or result in, [[:Category:Accessibility | Accessibility]].
 +
* [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Accessibility_concerns Title your iFrames]. If an iFrame isn't named, a screen reader user must navigate into it to find out what the embedded content is. That's time-wasting and confusing. This ties back to [[WCAG guideline 2.4.1]].
 +
* '''Operating system assistive technology should work'''. If the user buys an operating system that has [https://www.atia.org/at-resources/what-is-at/ Assistive Technology] built in, such as a screen reader or screen zoom, your site shouldn't break it such that they have to seek out a second assistive technology.
 +
* '''Don't make me work'''. Choose fonts and font sizes that are legible so that the end user doesn't have to use resizing technology or a separate CSS file to make your site usable.
  
 
==Characters and Principles of UX==
 
==Characters and Principles of UX==
 
 
Richard Dalton put together a list of [https://charux.files.wordpress.com/2012/12/chars-and-principles.pdf characteristics and principles of UX]
 
Richard Dalton put together a list of [https://charux.files.wordpress.com/2012/12/chars-and-principles.pdf characteristics and principles of UX]
  
 
For Richard, Characteristics are a vector between two points, and a user may be closer to one side or another. For each of those items we've listed the characteristic, its explanation, and the range from one side to the other. Richard lists only three principles: Relevant, Comprehensible, and Aesthetic. For a deeper explanation of each, [https://charux.files.wordpress.com/2012/12/chars-and-principles.pdf access the PDF] or [https://charux.com visit the website].
 
For Richard, Characteristics are a vector between two points, and a user may be closer to one side or another. For each of those items we've listed the characteristic, its explanation, and the range from one side to the other. Richard lists only three principles: Relevant, Comprehensible, and Aesthetic. For a deeper explanation of each, [https://charux.files.wordpress.com/2012/12/chars-and-principles.pdf access the PDF] or [https://charux.com visit the website].
 
 
==Other examples of design principles==
 
==Other examples of design principles==
 
 
* [https://principles.design/ Design Principles] - Hands-down the best resource for design principles.
 
* [https://principles.design/ Design Principles] - Hands-down the best resource for design principles.
 
* [https://medium.com/etsy-design/creating-etsys-design-principles-4faf31914be3?_hsenc=p2ANqtz-8w53ryWlgbvkCepHooaEjkmoqllRVkFCs_UjEEeAGPzFBVTxnj-MzCLX1UjZ1HAlq13DS64MVzSOgDlwzt4nF2TtH9GA&_hsmi=52544769 Creating Etsy's Design Principles] by Magera Moon
 
* [https://medium.com/etsy-design/creating-etsys-design-principles-4faf31914be3?_hsenc=p2ANqtz-8w53ryWlgbvkCepHooaEjkmoqllRVkFCs_UjEEeAGPzFBVTxnj-MzCLX1UjZ1HAlq13DS64MVzSOgDlwzt4nF2TtH9GA&_hsmi=52544769 Creating Etsy's Design Principles] by Magera Moon
 
* [https://lawsofux.com/ Laws of UX] by Jon Yablonksi
 
* [https://lawsofux.com/ Laws of UX] by Jon Yablonksi
 
* [https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9 The ultimate guide to proper use of animation in UX] covers principles specific to animation
 
* [https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9 The ultimate guide to proper use of animation in UX] covers principles specific to animation

Latest revision as of 14:47, 27 September 2019

Design principles codify the behavioral research and/or design research known about specific User Experience topics. 

The term can also be used to describe the driving behavior behind a design or a design group. In other words Fitt's Law is a design principle that explains the relationship between an object and its target. "Set users up for success" is a design principle that describes one of any good company's design goals.

It's worth noting that many of the design principles listed below are Heuristics- that is to say, they're practical methods to decision making sufficient for immediate goals, but not always appropriate for in-depth or complex decisions.

Web Principles

These are the principles that drive how the web functions at the hardware and software level. The closer our designs come to aligning with these principles, the more "native" to the web our designs will be, and the more effective they will be.

  • Rough consensus and running code - If everyone agrees we need images, for example, and someone gets images up and running, whoever gets there first will probably be the one setting the direction for the structure.
  • Postel's Law- "Be liberal in what you accept and conservative in what you send". In other words, assume that the people who are sending you things don't know the protocol, but stick to the protocol when you send out to someone else.
  • Priority of Constituencies - "In case of conflict, consider users over authors over implementers over specifiers, over theoretical purity." According to HTML for Web Designers (1st edition) by Jeremy Keith, this is one of the design principles used by the WHATWG to decide what changes in the HTML specs.
  • Small pieces loosely joined - A book that explains the internet is not a monolith. This has been extended by others to posit that avoiding monoliths provides flexibility and paves the ways for APIs.
  • Information wants to be free - it may not always be in our best interest for information to want to be free, but for good and for bad this is definitely a founding principle of the web. As a result, you have to plan for the consequences.

Content Strategy principles

These principles are taken from The Elements of Content Strategy by Erin Kissane.

  • Good content is appropriate. Publish content that is right for the user and for the business.
  • Good content is useful. Define a clear, specific purpose for each piece of content; evaluate content against this purpose.
  • Good content is user-centered. Adopt the cognitive framework of your users.
  • Good content is clear. Seek clarity in all things.
  • Good content is consistent. Mandate consistency, within reason.
  • Good content is concise. Omit needless content.
  • Good content is supported. Publish no content without a support plan.

General principles

  • Doherty Threshold - Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
  • Fitt's law - The time to acquire a target is a function of the distance to and the size of the target.
  • Hick's Law - The time it takes to make a decision increases with the number and complexity of choices. 
  • Jakob's Law- Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the sites they already know. 
  • Law of Prägnanz- People will perceive ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us. 
  • Miller's Law (Seven plus or minus two) - The average person can only keep 7 (plus or minus 2) items in their working memory. 
  • Occam's razor - Among competing hypothesis that predict equally well, the one with the fewest assumptions should be selected.
  • Pareto Principle - For many events, roughly 80% of the effects come from 20% of the causes. 
  • Parkinson's Law - Any task will inflate until all of the available time is spent.
  • Peak-End Rule - People judge an experience largely on how they felt at its peak and its end, rather than the total sum or average of every moment of the experience.
  • Progressive Disclosure - Advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.
  • A Sense of Place - Humans need to have a sense of environment, direction, and available tasks to accomplish their goals.
  • Serial Position Effect - Users have a propensity to best remember the first and last item in a series.
  • Set users up for success - Provide users the ability to avoid errors; don't provide them an interface that invites failure then chides them for failing.
  • Staged Disclosure - Staged disclosure is a variant in which users step through a linear sequence of options, with a subset displayed at each step. Wizards are the classic example of staged disclosure.
  • Tesler's Law (The Law of Conservation of Complexity) - For any system, there is a certain amount of complexity that cannot be reduced.
  • Von Restorff Effect (The Isolation Effect) - When multiple similar objects are present, the one that's the most different will be most likely to be remembered.
  • Zeigarnik Effect - People remember uncompleted or interrupted tasks better than competed tasks.

Human-Computer Interaction Principles

These are principles for display design originally introduced by Christopher Wickens et al. in An Introduction to Human Factors Engineering and are listed in the Human-Computer Interaction article on Wikipedia.

The principles are divided into four categories. The bulk of the content below comes directly from Wikipedia.

Perceptual principles

  • Make displays legible (or audible). A display's legibility is critical and necessary for designing a usable display. If the characters or objects being displayed cannot be discernible, then the operator cannot effectively make use of them.
  • Avoid absolute judgment limits. Do not ask the user to determine the level of a variable on the basis of a single sensory variable (e.g. color, size, loudness). These sensory variables can contain many possible levels.
  • Top-down processing. Signals are likely perceived and interpreted in accordance with what is expected based on a user's experience. If a signal is presented contrary to the user's expectation, more physical evidence of that signal may need to be presented to assure that it is understood correctly.
  • Redundancy gain. If a signal is presented more than once, it is more likely that it will be understood correctly. This can be done by presenting the signal in alternative physical forms (e.g. color and shape, voice and print, etc.), as redundancy does not imply repetition. A traffic light is a good example of redundancy, as color and position are redundant.
  • Similarity causes confusion: Use distinguishable elements. Signals that appear to be similar will likely be confused. The ratio of similar features to different features causes signals to be similar. For example, A423B9 is more similar to A423B8 than 92 is to 93. Unnecessarily similar features should be removed and dissimilar features should be highlighted.

Mental Model Principles

  • Principle of pictorial realism. A display should look like the variable that it represents (e.g. high temperature on a thermometer shown as a higher vertical level). If there are multiple elements, they can be configured in a manner that looks like it would in the represented environment.
  • Principle of the moving part. Moving elements should move in a pattern and direction compatible with the user's mental model of how it actually moves in the system. For example, the moving element on an altimeter should move upward with increasing altitude.

Principles based on attention

  • Minimizing information access cost or interaction cost. When the user's attention is diverted from one location to another to access necessary information, there is an associated cost in time or effort. A display design should minimize this cost by allowing for frequently accessed sources to be located at the nearest possible position. However, adequate legibility should not be sacrificed to reduce this cost.
  • Proximity compatibility principle. Divided attention between two information sources may be necessary for the completion of one task. These sources must be mentally integrated and are defined to have close mental proximity. Information access costs should be low, which can be achieved in many ways (e.g. proximity, linkage by common colours, patterns, shapes, etc.). However, close display proximity can be harmful by causing too much clutter.
  • Principle of multiple resources. A user can more easily process information across different resources. For example, visual and auditory information can be presented simultaneously rather than presenting all visual or all auditory information.

Memory Principles

  • Replace memory with visual information: knowledge in the world. A user should not need to retain important information solely in working memory or retrieve it from long-term memory. A menu, checklist, or another display can aid the user by easing the use of their memory. However, the use of memory may sometimes benefit the user by eliminating the need to reference some type of knowledge in the world (e.g., an expert computer operator would rather use direct commands from memory than refer to a manual). The use of knowledge in a user's head and knowledge in the world must be balanced for an effective design.
  • Principle of predictive aiding. Proactive actions are usually more effective than reactive actions. A display should attempt to eliminate resource-demanding cognitive tasks and replace them with simpler perceptual tasks to reduce the use of the user's mental resources. This will allow the user to focus on current conditions, and to consider possible future conditions. An example of a predictive aid is a road sign displaying the distance to a certain destination.
  • Principle of consistency. Old habits from other displays will easily transfer to support processing of new displays if they are designed consistently. A user's long-term memory will trigger actions that are expected to be appropriate. A design must accept this fact and utilize consistency among different displays.

Visual Design Principles

General Design Principles

  • Aesthetic-Usability Effect - Attractive things actually work better.
  • Face-ism Ratio - The closer to a face you crop an image, the more you emphasize their personality over their physical appearance.
  • Von Restorff Effect (Isolation Effect) - When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

Gestalt Principles

  • Closure - The mind sees complete figures or forms even if a picture is incomplete or partially hidden
  • Connectedness - Elements that are visual connected are perceived as more related than elements with no connection.
  • Continuation - When two objects intersect, people tend to perceive them as uninterrupted objects that overlap
  • Common Fate - When visual elements move in the same direction at the same rate, we assume they have the same stimulus
  • Figure & Ground - The medium is the message. A communication technology (the medium or figure) necessarily operates through its context (or ground)
  • Form - We tend to group together forms of similar shape, pattern, color, etc.
  • Proximity - Objects that are near, or proximate to each other, tend to be grouped together
  • Similarity - The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.

Related

These principles are produced by combining the Gestalt Principles

  • Law of Common Region - Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary

anne's "Let's Not Be Cruel" Principles

Some of these principles sum up items from the 18F Accessibility Guide. Others are a result of unfortunate hands-on education on my part. Most have to do with, or result in, Accessibility.

  • Title your iFrames. If an iFrame isn't named, a screen reader user must navigate into it to find out what the embedded content is. That's time-wasting and confusing. This ties back to WCAG guideline 2.4.1.
  • Operating system assistive technology should work. If the user buys an operating system that has Assistive Technology built in, such as a screen reader or screen zoom, your site shouldn't break it such that they have to seek out a second assistive technology.
  • Don't make me work. Choose fonts and font sizes that are legible so that the end user doesn't have to use resizing technology or a separate CSS file to make your site usable.

Characters and Principles of UX

Richard Dalton put together a list of characteristics and principles of UX

For Richard, Characteristics are a vector between two points, and a user may be closer to one side or another. For each of those items we've listed the characteristic, its explanation, and the range from one side to the other. Richard lists only three principles: Relevant, Comprehensible, and Aesthetic. For a deeper explanation of each, access the PDF or visit the website.

Other examples of design principles

Pages in category "Design Principles"

The following 9 pages are in this category, out of 9 total.