How people look at web sites

To create the right visual hierarchy, you need to understand how our eyes handle information, Uxpin's Chris Bank said.

Chris Bank, from uxpin--, a wireframe, prototype app, explains the principles and conventions of creating visual levels in Web UI design. In this free ebook Web UI best Practice, see more than 33 companies in the UI case Analysis report.

In addition to being creative, an artist should consider some details, such as writing, color, size, content, and perhaps more importantly, what to discard. This is not easy, so we will be able to praise Leonardo da Vinci van Gogh such a master.

So should web UI designers. This free ebook Web page has been discussed in best practice, and the site is also a form of visual art that, in its unique way, follows the rules of many traditional art forms. This is aesthetic science, mixed with some business principles, unusual web interface, must make people feel no pressure, fascinating.

In this article, we first look at what the visual hierarchy is, how to create it, and then we understand how it works in the natural motion of sight.

Organizational Vision

Luke Wroblewski, columnist and senior executive of Yahoo product design, explains in his article The importance of visual representation of the Web interface in the following areas through visual level communication:

Notify users--like an invisible hand, the interface should guide users to take action, but will not let the user feel oppressed. For example, when you scroll down, the payment provider square guides you through the value of it, and each step has a relevant guide calling you to take action.

Communicate the relationship between content-the way the interface exhibits content should conform to the user's priority understanding of the information. For example, the popular design website Abduzeedo contains a clear classification at the top, a recommended content in the middle, and a detailed classification at the bottom.

Affect emotions-people go to restaurants not just for food. They want a taste, texture, look, and an unforgettable environment. Interface design is also the same, and if you build a positive emotional response, people may be more likely to understand the shortcomings of the site. For example, Wufoo is a perfect case, and the interface is very practical and enjoyable.

Your UI design, the ultimate goal is to answer the following three questions:

What is it? Useful

How to use it? Ease

It's none of my business. Desire

Predictability of human eyes

Whether it is a hurried glimpse of a corner, or a careful look at a passer-by, the sight of a person is always automatically gathered at some particular point of interest. While this varies from person to person, most people are more likely to follow a certain direction--including how to browse the site.

Source: Nielson Norman group;www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

In an article on visual principles, the 99Designs design columnist, Alex Bigman, talked about two dominant reading patterns in people reading on the left and right. Let's take a look in turn.

Model F Mode

Usually reflected in the text-intensive sites, such as blogs, the reader first along the left side of the text vertically down, from each paragraph in the first few words to find his interest in keywords or points, F model from this.

When readers find something they like, they begin to read normally, forming a horizontal line. The result is a path that looks like the letter F or E. Both CNN and Nyttimes use the F model.

Nielson Norman Group's Jakob Nielson conducted a readable study of thousands of websites based on 232 users, as well as a detailed description of the F model involving practice

Users rarely read verbatim.

The first two paragraphs are most important and should include your marketing punch line.

Start segment, subtitle, and focus list with tempting keywords.

How will it affect the interface design of the website? Look at the picture below.

Source: Understanding F-type layout; Www.webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-de ...

As you can see in a few seconds, you can see the most important content, immediately below the more detailed content (and call to action) to facilitate quick browsing.

F mode is very helpful for websites that want to embed ads and action calls and don't want content to drown. Remember, always is the content of the king, Sidebar exists to deepen the user's participation. Like all other modes, the F pattern is a set of guidelines--not a template--because after reading the first few lines in F, the F pattern may feel boring.

Z-mode

Z-mode browsing occurs in sites that are not text-focused. The reader first browses to a horizontal line at the top of the page, either because of the menu bar or from the habit of browsing from left to right at the top. When the line of sight reaches its end, it moves rapidly to the left (which is also out of the reading habit) and repeats the search in the horizontal direction at the bottom of the page.

Source: Understanding Z-type layout; Http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web ...

Z-mode can be applied to almost any web interface because it meets the core needs of the site, such as hierarchy, branding, and call to action. Z mode is the best interface for simplicity and the core of action call.

Using Z mode in a complex web site may not be as effective as the F model, but the Z model helps bring order, simplifying the layout (and increasing the conversion rate). Keep in mind the following points:

Background-separate backgrounds, allowing users to stay within the site structure.

Number 1th-This is the best place for your logo.

Point 2nd-Add a color to the secondary action call to help guide the user along the z-mode.

The center of the page-the focus of the center of the page can be divided between the top and bottom areas, leading the line of sight along the z-mode flow.

Number 3rd--add icon, start from here, move along the horizontal axis, can guide the user to the final action call of 4th point.

Number 4th-This is the end point and is the ideal location for your main action call.

Predicting how a user's vision moves can bring a huge advantage. The most important and insignificant elements are identified by priority before the elements are arranged on the page. Once you know what to give to your users, it's easy to put them in the "hot zone" of the various modes and create the right interaction.

You can even extend the z pattern throughout the page, and if you feel that there are more valuable propositions before the call to action, you can use number 1-4 again.