More than being creative, a good artist must also consider subtleties like composition, colors, size, what to include, and — perhaps more importantly — what to leave out. That’s no easy feat, which is why we hold the masters like da Vinci and Van Gogh in such high regard.

Web UI designers must do the same. A website is a form of Visual art in its own right, and follows many of the same rules as more traditional artforms. It is the science of aesthetics, mixed with the principles of business, and an extraordinary website Interface must feel effortless yet enticing. We’ll explain how to create a visual hierarchy and use UI patterns as a starting point.

“A website is the science of aesthetics mixed with the principles of business.”

Creating Visual Organization

In his paper Communicating with Visual Hierarchy, Luke Wroblewski, author and Senior Principal of Product Design at Yahoo!, explains that the visual presentation of a web interface is essential for:

• Informing users — Like an invisible hand, the interface should guide users from one action to the next without feeling overbearing. For example, payment processor Square leads you through its value propositions as you scroll down, with relevant calls to action each step of the way.

• Communicating content relationships — The interface should present content in a way that matches how users prioritize information. For example, popular design website Abduzeedo includes broad categories at the top, featured content in the middle, and detailed categories in the footer.

• Creating emotional impact — People visit restaurants for more than just an edible meal. They want taste, texture, presentation, and a memorable ambiance. Interface design is no different, and people may actually be more prone to forgive your site’s shortcomings if you produce a positive emotional
  response. For example, Wufoo is a perfect example of a site with an interface that’s usable and pleasurable.

The end goal of your UI design is to answer three questions:

1. What is this? (Usefulness)
2. How do I use it? (Usability)
3. Why should I care? (Desirability)

1. Scanning Patterns: The Predictability of the Human Eye

Just as with a scurrying movement in the corner of your eye or a sexy walk from someone across the street, the human eye is drawn automatically to certain points of interest. While some of this depends on the person, the majority of people tend to follow definite trends — including how they view a web page.

In an article on visual principles, Alex Bigman, Design Writer for 99Designs, talks about the two predominant reading patterns for cultures who read left to right.

How Hierarchy Works in UI Design

1. F-Pattern

Typically for text-heavy websites like blogs, the F-Pattern comes from the reader first scanning a vertical line down the left side of the text looking for keywords or points of interest in the paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines. The end result is
something that looks like the letters F or E. As shown in Web UI Patterns 2014, CNN and NYTimes both use the F Pattern.

Jakob Nielson of the Nielson Norman Group conducted a readability study based on 232 users scanning thousands of websites and elaborates on the practical implications of the F-Pattern:

• Users will rarely read every word of your text.

• The first two paragraphs are the most important and should contain your hook.

• Start paragraphs, subheads, and bullet points with enticing keywords.

How could this impact the interface design of your website? Take a look below.

You can see in the above image that the most important content can be seen in a few seconds, with more detailed content (and a call to action) presented immediately below for quick scanning. The F-pattern can be very helpful for sites that want to embed advertising or calls to action in a way that doesn’t overwhelm the content. Just remember that content is always king, and the sidebar exists to get users involved in a deeper level.

As with all patterns, the F-Pattern is a guideline — rather than a template — because the F-pattern can feel boring after the top rows of the “F”. As you’ll see below, Kickstarter adds in some widgets (laid out horizontally) to keep the design visually interesting beyond the first 1000 pixels.

2. Z-Pattern

Z-Pattern scanning occurs on pages that are not centered on the text. The reader first scans a horizontal line across the top of the page, whether because of the menu bar, or simply out of a habit of reading left-to-right from the top. When the eye reaches the end, it shoots down and left (again based on the reading habit), and
repeats a horizontal search on the lower part of the page.

The Z-Pattern is applicable to almost any web interface since it addresses the core website requirements such as hierarchy, branding, and calls to action. The Z-pattern is perfect for interfaces where simplicity is a priority and the call to action is the main takeaway. Forcing a Z-pattern for a website with complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of order to simpler layouts (and increase conversion rates). Here’s a few best practices to keep in mind:

• Background — Separate the background to keep the user’s sight within your
  framework.

• Point #1 — This is a prime location for your logo.

• Point #2 — Adding a colorful secondary call to action can help guide users along the Z-pattern.

• Center of Page — A Featured Image Slider in the center of the page will separate the top and bottom sections and guide the eyes along the Z path.

• Point #3 — Adding icons that start here and move along the bottom axis can guide the users to the final call to action at Point #4.

• Point #4 — This is the finish line, and an ideal place for your primary Call to Action.

Predicting where the user’s eye will go can be a huge advantage. Before arranging the elements on your page, prioritize the most and least important ones. Once you know what you want your users to see, it’s just a simple matter of placing them in the pattern’s “hot spots” for the right interactions.

You can even extend the Z Pattern throughout the entirety of the page, repeating Points 1-4 if you feel that more value propositions are needed before the call-toaction. As you’ll see below, this is exactly what Evernote does by starting with a “Sign Up Now” call-to-action, guiding users through a few selling points, and finishing their “repeated Z pattern” with payment option calls-to-action.

2. Contrast: Generating Interest

To best explain the use of contrast, let’s go back to Luke Wroblewski. Plainly put, contrast is the occurrence of two different elements positioned close together. In web UI design, these elements can be colors (more in Chapter 5), textures, shapes, direction, or size, to name the important ones.

Alternating between different sized fonts and colors creates an instant hierarchy to your interface. For instance, as you can see below for Constant Contact, changing from a light background to dark background immediately separates the primary call to action of “Try it FREE” from the navigation menu and secondary “Call Us” call to action. Combined with the Z-pattern of the site, the treatment provides a clear visual hierarchy that highlights the email submission form followed by the mid-page navigation menu.

Brandon Jones, looks at how the use of color and size affect first impressions of objects in an interface. Using the below image as an example, most people won’t just see two circles on first glance — instead, they’ll likely see “a black circle and a smaller red circle”. In this sense, contrast in interface items is very powerful since differentiation is the default human response.

“differentiation is a default human response.”

3. Tools of The Trade: Color, Size, and Space

When “painting” the web interface, don’t forget to use your most powerful visual tools: color, size, and space. Alex Bigman believes that colors and size manage attention, while spacing helps manage visual relationships.

1. Color

In a nutshell, bright colors stand out from muted colors. This may seem obvious, but the important takeaway is its application: you can exploit this to draw your user’s attention where you want. Additionally, certain colors can help set the mood of the entire site (blues are tranquil, reds are aggressive, etc.).

Psychology of Colors in UI Design

Fitbit’s use of color in their Z-pattern interface above is especially clever. The bright use of magenta immediately places the calls to action near the top of the visual hierarchy, but also matches the color of the “Get Active” button — subconsciously signaling that the two concepts are related. Similar shades of blue are also used in the fitness goals and product sections, which cleverly creates an association between the two (and draws clicks to the most valuable parts of the interface).

2. Size

Size, particularly for text, is a powerful tool in that it circumvents the traditional rules of left-to-right and up-to-down reading. That means a large word or phrase in the bottom right-hand corner might be the first thing a person reads. Moreover, size can add emphasis to the actual message or content, making it more significant.

When it comes to the size of text, a typography study conducted by Smashing Magazine on 50 popular website interfaces found that headings usually stay between 18 and 29 pixels with body copy ranging between 12 and 14 pixels. Of course, this is just a guideline (and will apply more to content-heavy sites), but shows that you still want to maintain a sense of proportion.

The Art of Choosing Typefaces in UI Design

3. Space

One of the most important tricks in making something pretty is the absolute absence of something pretty. Cluttering too many attractive images together is a quick way to ruin them all. It’s important that your web interface has breathing room and that you space everything out. Reducing the amount of “visual noise” will
make the points you want to keep even stronger.

“One of the most tricks to making something pretty is the absence of somthing pretty.”

In fact, Dmitry Fadeyev, founder of Usaura, advises that white space actually improves comprehension. A 2004 study found that strategic use of white space improved comprehension by almost 20%. While spacing didn’t affect how people performed on the website, it did affect user satisfaction and experience (which is equally, if not more, important). As you can see above, the large content margin, padding, and paragraph spacing used by Houzz makes the content easier to read (and encourages interaction with links and sidebars).

Spacing in UI Design

4. Test Your Visual Hierarchy: Blur Technique

Now that we’ve discussed how different interface elements affect visual prioritization, let’s look at a simple way to test your hierarchy. Designer at Rackspace Lee Munroe offers a great method we’ll call the Blurring Technique.

Basically, look at a blurred version of your site and see what elements stand out. If it’s not what you want to stand out, it’s time to go back and make some revisions. The blurred version will present a bare bones representation of your visual hierarchy, allowing you to evaluate your interface fresh without any distractions. To spare your eyesight (or a trip to the bar), take a screenshot of your site and add a 5-10 px Gaussian blur in Photoshop.

Wufoo’s homepage passes the blur test because the prominent items are the sign up and product feature buttons, both of which should be priorities on any homepage. The shape of the sign up bar makes it stand out, while the white space around the features buttons draws the eye by creating “breathing room”.

Selecting and Applying Web UI Patterns

Once you’ve determined the overall visual hierarchy of the website, you still need to determine the fine details of your web interface such as how users can input data, how the site provides feedback, and many other functional and aesthetic factors. The best ways to consistently address these needs are UI patterns. You’ll rarely be able to create an interface just by stitching different patterns together, but they are a great foundation for customization.

In Web UI Design Patterns 2017, we explained the proper application of web UI patterns by looking at 63 examples from sites like Facebook or Pinterest. A UI design pattern is a reusable solution to a commonly occurring problem — not just a feature that can be plugged into your design or a finished design ready to be coded. It’s best to think of them as best practices for core site functions such as:

• Getting Input — How will users provide you data, and how will the site give
  them feedback?

• Navigation — What menus and tabs will guide the user along?

• Content Structuring — How is your content presented and accessed?

• Social Sharing — How can your site encourage more social sharing and
  interaction?

Anders Toxboe, designer at Benjamin Interactive in Copenhagen, theorizes that patterns can aid a site in three ways: context, flow, and implementation.

The broadest benefit of patterns, implementation, is the most cut-and-dry. A search box should be in the upper right-hand corner, form labels should be directly under the field box, etc. Instead of recreating the hierarchy for each page, a UI pattern ensures site-wide consistency.

When using patterns for flow, things get a bit more interesting. Patterns of this type force the designer to answer critical questions about their site. Would my site benefit more from lazy or account registration? What is the best way to get input from my users, given my target audience and the type of site? (Answering these questions will be easier by referencing your personas and scenarios from the previous chapter.)

Last (but in the grand scheme of things, first) we have patterns of context. This is basically choosing what type of site you want, and following patterns specific to that type. For example, let’s say you’re building a site for a professional entertainer: you’ll need to include things like an event calendar, biography, and portfolio. If you’re making a ecommerce site, you won’t get very far without a checkout system.

“UI Patterns help a site in 3 ways: context, flow, and implementation”

1. Selecting The Right UI Patterns

The process for selecting a UI pattern can be simplified as:

1. Figure out the problems that need to be solved.

2. Find out how others have solved it.

3. Examine a good example of its use on other sites.

4. Detail the patterns proper usage.

The criteria for determining the right pattern is elaborated on by Melissa Joy Kung, Editor-in-Chief of Technori, in her post about the topic. While the above process is focused on finding the right patterns, hers discusses how to decide whether or not a pattern is right for you. She illustrates her points through the example of a “ratings” style pattern used by Rotten Tomatoes:

 1. Define the pattern — Understand what the pattern does. As shown above, the ratings patterns gives users quick feedback and allows their voice to be heard, plus it is useful in collecting user data.

2. Find a strong example — Search the web and find a site that uses the pattern
well, in this case, Rotten Tomatoes.

3. List the problems the pattern solves — For the ratings example, it creates more reliable and direct feedback, it makes the site more interactive and fun, and it gives the users’ opinions more weight, which they appreciate.

4. Know when to use the pattern — Be aware of when the pattern is appropriate. A ratings pattern is used when your product requires additional feedback, or when you want to expand on existing feedback like a written review.

5. Know how to use the pattern — Know the technical details. A good use of the rating pattern will include an aggregated average of the user ratings, an option to change the rating later, a display that lights up when you hover on it, a cue to let the user know their rating is accepted, etc.

2. Pattern Libraries

Unless you’re a hardened UI designer with years of experience, it’s hard to keep track of all the patterns at your disposal. Missing out on a useful pattern can waste your time with finding a solution that others have thought of already. In order to stay up-to-date, below are some quick references for pattern libraries.

• UI Patterns — A convenient web pattern library with patterns organized by
  category; however, it has not been updated recently.

• Pattern Tap — A community of designers for web design education and
  resources.

• Web UI Kit — Collection of 30 patterns compatible for Axure, Omnigraffle,
  Photoshop and Sketch.

For a comprehensive source of UI patterns, you can check out this listing of over 40
online pattern libraries from Smashing Magazine.

Takeaway

Understanding visual hierarchy and applying design patterns are two of the most important skills in good web UI design. They are fundamental and interconnected: once you know how to visually prioritize information, you’ll have a better grasp of how to apply existing design patterns.

Prioritize your interface based on how people scan for information. Then, apply color, contrast, color, size, and spacing for further accentuation. In the next chapter, we’ll delve deeper into design principles, specifically more of the “why” behind the hierarchies and patterns we’ve discussed.

Reference: Web UI Design Best Practices