# Universal standards for specific designed elements Each design has to go through a *lot* of testing to make sure it works correctly. The organization designing the object will typically provide a [marketing](marketing.md)-driven [image](image.md) to: - Using "personas" of various types of people to rapidly define what [purposes](purpose.md) that user can use the interface for. - Creating an "information architecture" to visually inform users of their location relative to the rest of the interface. - People feel supported throughout the experience, often where they can summon [extra documentation](language-writing-documentation-cs.md) or contact a person. - Each person's task is an "iteration", which they will expect to repeat with the same results each time, to create a reproducible "user journey". Generally, combining elements and grouping them with optical illusions creates simplicity (at least until the user has to *use* it with too many controls), and most expert designers tend to find [creative](mind-creativity.md) ways to merge multiple seemingly unrelated elements. ## Colors Beyond [marketing](marketing.md), colors also communicate subtle information of their own: - Warm versus cold colors determines the mood of the experience. - Grey shades tend to imply an inhuman experience, but are necessary to offset a colored background. Colors create instant judgments and [feelings](mind-feelings.md) that bypass the conscious mind. - Literally *seconds* after someone sees a color, they've defined [beliefs](values.md) about that thing. Warm Colors (red, orange, yellow, gold, pink): - Tends to feel exciting - Can stimulate hunger, impatience, and aggression - Without other colors to dilute it, can agitate or overstimulate Cool Colors (green, blue, purple): - Gives a calming effect - Without other warm colors, can feel cold or impersonal Neutral Colors (white, grey, silver, brown, black): - Great for mixing and as a design background - Tones down other colors' intensity - Without other stimulating colors, might feel boring In general, it's a good idea to use a *lot* of neutral colors to wash out most of the experience, then focus attention with either warm or cool colors to evoke the correct feeling. Some colors in particular provide strange, counter-intuitive associations. - People usually dislike yellow, but people who prefer yellow adore it. - The shading of blue can make something feel either highly masculine or highly feminine. - Black is extremely bold and polarizing. - People calm down after thirty minutes of looking at pink, but bright pink is visually overwhelming. ## The object's structure The structure should reinforce the way the user should [understand](understanding.md) what's important and what they should "do": - A visual hierarchy that makes people focus on the most important piece of content first, then move to the next most important, and so on. You should easily see that dominance if you squint or take your glasses off. - Make the "[call to action](marketing.md)" as clear and distinctive as possible compared to the rest of the product. - Elements aligned with other elements to give a sense of order and to connect related concepts. - Handle sharp corners carefully because they create a harsh contrast from our associations within nature and point away from the elements *within* those boxes. - If the interface can use a low-tech solution that plainly communicates an elaborate concept (e.g., indicator light, dial), it's often superior to a more advanced element (e.g., touchscreen). Avoid "Z-patterns" across the flow of the information where the eye moves left-to-right, then back to left again: - Set a line length limit of 50-60 characters and never go past 70, meaning narrow and tall information blocks. - Place labels *above* input fields, not to the side. Human anatomy sets a general criteria of standards, which can be modulated for specific domains (e.g., plus-sized people): - Tables and chairs - A chair is designed to sit ~25-30 cm below its intended table. - Standard tables sit at ~28-30 in or ~70-75 cm. - Counter-height tables sit at ~34-35 in or ~85-90 cm. - Bar height tables sit at ~40-43 in ~105-110 cm. - Standing interaction - Typical interaction whil standing is ~36 in, but specific needs or regulations can move it ~34-48 in. - Generally, things meant to be pushed sit about a foot higher than things meant to be turned or pulled. - Overhead interaction - If the element is meant to be out of the user's way, make sure it's above the height of the tallest typical person (74 in). - For showers, the bottom of the shower head should come to 8 in above, or 82 in. ## Object selections A user must be able to quickly gather relevant information and [decide](people-decisions.md): - A "default" option or configuration the user will usually use. ## Conveying media Media (like images, video, and audio players) must be easily presented with the understanding that the user may not fully perceive it at all times, with clear fallback plans for when the media doesn't function correctly. All media should "prime" the user to what they should next expect. Set simple typography and color on complex backgrounds, and complex typography and color on simple. ## Typography Pay close attention to [font](engineering-graphics.md) choice. Text details like like text placement, font, heading size, and spacing will evoke *many* [feelings](mind-feelings.md), often [by saying *much* more than the designer may be aware of](engineering-design-font.png). The typography should fits the [emotional association](mind-feelings.md) the designer wants the user to experience. - Typically, only give up to 2 fonts per interface, though 1 font type is often ideal. - The font should have a serif to make it more authoritative, though it's much simpler if it's sans serif. Make sure to use a legible font size that allows *anyone* using the product to read it without squinting or magnification: - The font should typically be 20-point or more unless it's paragraph/content text. - The kerning should allow each of the letters to be close enough to identify as words, but far enough that they're not overlapping. White text with a black outline can read on *any* color background. Do *not* mix-and-match styles, and keep everything at least *somewhat* the same throughout the design.