Web UI Design for the Human Eye: Principles of Visual Consistency — Part 2
This is an excerpt from the Web UI Design for the Human Eye: Principles of Visual Consistency ebook, written by Jerry Cao, Kamil Zięba, Krzysztof Stryjewski, Matt Ellis, and originally published on UXPin.com.
Practical Approach to Visual Consistency
Humans are visual creatures.
Compared to the rest of the animal kingdom, our other senses are, to put it politely, “lacking.” So we rely heavily on our sight to assess, process, and interpret the world around us. Considering that Google determined it only takes about 50 milliseconds for users to judge your website, visual interactions are usually the strongest (and most lasting) interactions.
In this chapter we’ll explain exactly why visual consistency is so important, outline a couple criteria for consistency, and tie it all together with live design examples.
Why Visual Consistency Matters for UI Design
Because vision is our dominant sense, the visuals on your interface will have the biggest impact on interaction. Just how much bigger might surprise you. To reiterate some points from Interaction Design Best Practices, David McCandless, Data Journalist, explains in a compelling TED Talk that a vast majority of our brain-power goes into sight, though nearly all of it is subconscious.
“Your sense of sight is the fastest. It has the same bandwidth as a computer network. Then you have touch, which is about the speed of a USB key. And then you have hearing and smell, which has the throughput of a hard disk. And then you have poor old taste, which is like barely the throughput of a pocket calculator. And [then the] naught .7 percent, that’s the amount we’re actually aware of. So a lot of your vision — the bulk of it is visual, and it’s pouring in — it’s unconscious.”
Why does this matter for web UI design?
Because so much of visual design affects the user on a subconscious level, your site must first feel familiar. When users encounter a new design, they are armed only with their prior experiences as they make a snap judgment. As Google’s original research suggests, this gut feeling is influenced exclusively by the visual design: hierarchy, symmetry, line spacing, fonts, etc.
Google found that simpler, familiar websites persuaded users to stay. As the design became more complex, users felt it looked less beautiful, even if the design felt familiar. Likewise, if the design was simple and clean but unfamiliar, users felt the site was also uglier. Externally consistent design helps you pass the user’s “gut test” since you meet their expectations. Meanwhile, internal consistency then provides logic to your interface, while slight inconsistencies keeps users curious and engaged.
A clean, visually consistent site gives users feelings of comfort, control, and familiarity, whether consciously or not. Some designers attribute these benefits to properly designed visual flow.
In terms of interaction design, visual flow is the path your users’ eyes take as they interact with your site or app. Experienced designers know how to manipulate their users’ visual flow through eye-pattern strategies, contrasting colors, varying sizes, and other methods (outlined in our free ebooks, Web UI Design for the Human Eye I & II).
The goal of visual flow is creating a harmony and rhythm to all the on-screen UI elements. Laura McGuigan, VP of Design at TrackMaven, explains that repeating elements create a pleasant visual pattern — a rhythm — that you can break up with smart variations to capture user interest. This reflects what we said in the previous Consistency in IxD book about knowing when to be inconsistent. But if you’ll remember, the potency of inconsistency relies on a pre-established, overarching consistency.
Take, for example, web designer Neil Carpenter’s site. You can’t tell from the screenshot above, but the colored shapes are in motion from the top-right corner to the bottom-left — literally creating a visual flow for the page. This colorful animation is a deviation from the norm (making it externally inconsistent), which actually sets Carpenter apart.
Take note, though, that he remains externally consistent where necessary. He keeps a top, horizontal navigation bar with the standard “About,” “Work,” and “Contact” pages you’d expect from a portfolio site. His “brand,” in this case his name, is in the upper-left.
Internally, the white text stands out against the black background and color of the animation. This breaking of internal consistency allows the importance message of the text, including links, to be clearly visible even amidst a visually competitive landscape. Other pages retain this black background/white text color scheme, and even play on the basic shape theme with the site’s loading icons.
Areas of Visual Consistency
When it comes to visual consistency, there are certain areas warranting extra attention. We can divide them into typography, UI elements, and color.
1. Typography
Feel free to experiment with different fonts and styles — but don’t go overboard.
You’ll want enough diversity to keep your text interesting, while also differentiating the categories of text (heading, content, links, etc.). While you can select different typefaces, styles, and weights for different categories, your treatment must remain consistent. If you use a bold serif font for all H1 headers, make sure all H1 headers reflect the treatment.
To ensure consistency, you should actually set font properties globally through CSS. Font family, size, color, line height, and weight can all be set as in the following example for body text:
body { font: 1em/1.5em Cambria, Arial, serif; color: #151; }
Beyond consistent typefaces, make sure the alignment is consistent and that you’ve set proper line spacing (roughly 1.4–1.6x your font size). Creating this vertical rhythm instills harmony between all your content, improving readability and familiarity.
For one potential redesign of the UXPin website, we decided on a minimalist sans-serif typeface. Let’s take a look at the site-wide consistencies:
• Headers — Large font size, with bold applied to select words
• Subhead — Mixed-case, regular weight
• Primary Navigation — Mixed-case, bolded weight
• Secondary Navigation — All caps, regular weigh
2. UI Elements
A site’s use of graphics, icons, textures, layout spacing, and images all work together to set the visual atmosphere of the interface.
Aside from thematic consistency, pay attention to the mechanics of graphics:
• Spatial Relationships — Make sure that the padding around elements is consistent, otherwise you’ll break the visual flow. Also check that you’ve purposefully inserted space to separate elements with different functions (Fitts’ Law as described in Interaction Design Best Practices).
• Images — Visually, your images should reflect the same look, feel, and texture. In terms of implementation, make sure that you don’t make some images open in new tabs while others appear in lightboxes. Pick a style and stick with it.
• Size — Related elements should be the same size and look similar (i.e., all circular or all square). According to Gestalt Principles, any variation in appearance will suggest a different function. Larger elements appear more important, so if two elements are related, they should be closer in size.
As we described in Web UI Patterns, the cards pattern is great for maintaining consistency across different pages. Once you hit a secondary page like Technologies or Services & Support, the close spacing and identical size of the features pages all suggest that they relate to each other.
Meanwhile, site search and account settings are shuffled away to the top-right corner, but they are clustered together. This tells the user that these are all a group of secondary actions. Also, notice how the background image has the same industrial feel, but differences in shading and color keep the site from feeling like a template. The circular icons are also consistently designed with their white outlines against a red background.
3. Color
Take great care in choosing your website’s colors — each hue, where it appears, and the other colors it interacts with will all have a great emotional impact on your user. We explain each color and their psychological significance in our Web UI Design for the Human Eye I, but suffice to say, different colors evoke different emotions in your users (green suggests prosperity and serenity, blue suggests trust, red suggests passion, etc.).
Select a fixed palette of colors for your site and stay consistent. Which colors you choose are up to you, based on the mood you’d like to set. Unless you’re highlighting specific elements, the colors on each page should complement each other.
For an example of color consistency, we’ll look to the website for the art store Michael’s.
Their creamy background accents the dominant black for their logo and menus — this repeated use of black itself adhering to color consistency. The simple black-white(ish) color scheme also causes their consistent use of green to really stand out, emphasizing their sales deals. The occasional use of red (the search button, the location of the image carousel) draws attention to itself, but it’s sporadic use keeps it mostly in the background.
Putting It All Together
Let’s take a look at a site that uses visual consistency well across the board. With their fine eye for visuals, the landing page for the website-building firm Squarespace flaunts their skills on the very face of their site.
The microsite for Squarespace’s super bowl ad is consistent in its treatment of UI elements, playful typography, and rich colors.
Let’s start with the top of the page. They only use two typefaces: a decorative font for the header and sans-serif for the rest. To distinguish calls-to-action, all button typefaces are capitalized. Notice how inconsistency is smartly applied to distinguish the two calls-to-action: the primary CTA is filled in white, while the secondary CTA (which redirects you) is muted, but underlined.
As you scroll down the page, secondary actions appear in the bottom-right corner, capitalized to signal interactivity, but more subdued in color. The generous line spacing and paragraph spacing create a nice vertical rhythm, while the white typeface accents the grayish outline of Jeff Bridges.
In the middle of the page, the design transitions to more of a skeuomorphic look to reflect a dark table. But it’s applied tastefully, so the design still feels dark and bold without feeling tacky. We still feel a part of the nocturnal experience.
The play buttons are all the same, and the color yellow is used consistently: the yellow border around the playlist complements the other yellow elements like the cassette border, play progress bar, and bottom-left logo.
Once you scroll to the bottom, the transition to white immediately communicates this section is different from the rest. And it certainly is — Squarespace is now providing their value propositions.
The background, however, is the only area of inconsistency. The video players are the same size, while the call-to-action treatment is the same as the rest of the site. The shade of white is also the same as the white accents used in previous sections, making the design feel different yet still familiar. Instead of feeling out of place, this section feels more like a separate dimension of the same site thanks to the consistent elements.
Takeaway
As we explained, the sense of sight largely governs how humans interact with their world, even more-so on a subconscious level. Any interaction design that hopes to be successful must prioritize visual interaction, especially in the three main fields we outlined.
Just because a user isn’t clicking on your site elements doesn’t mean they aren’t interacting. Run through the visual consistency checklist — typography, UI elements, and colors — to give your interactions a visible sensibility that your users will appreciate, whether they’re aware of it or not.
