How to get the Web page to catch your eye?

"To create the right level of vision, you need to understand how our eyes collect information." ”

--chris Bank

In this article, Chris Bank, from Uxpin, describes the visual hierarchy in Web page UI design from two perspectives of theory and practice. Want UI analysis for more than 33 corporate pages, please stamp link: Web UI best Practices (Web UI design practice, this is an ebook).

A good artist needs not only creativity, but also a lot of details like themes, colors, sizes, content, and perhaps a more important thing-how to stay white. This is not an easy thing to do and why we worship Leonardo da Vinci's Van Gogh.

Web UI designers also need to consider these issues. As I said in the ebook I recommended to you, the Web page, as a new visual form, has its uniqueness, but it must also adhere to the rules of the traditional art form, which is the unification of aesthetic principles and business needs. An outstanding web interface must look relaxed and appealing.

In this article, I will first describe what the visual hierarchy is and how to implement it, and then we will see how it works according to the natural movement of the human eye.

Small Series recommended: teach you to use hotspot map to optimize web design

Visual organization

In this paper communicating with visual hierarchy (dialogue with the visual hierarchy), Luke Wroblewshi, the author of the book and the director of product design at Yahoo, explains what elements are necessary for the visual presentation of a Web page:

Remind the user-to do an invisible hand, the layout of the Web page should be able to guide viewers to browse while avoiding making the reader feel unbearable. For example, the online payment site square, by guiding you through the scrolling mouse, completes the payment process while using the appropriate components to remind you of the current steps.

Interactive Content Link-the content of the Web page should be presented according to the information priority of the viewer. For example, in the popular design website Abduzeedo, the top is the general classification, the middle is a detailed case show, the bottom is a detailed classification of the directory.

Create emotional impressions-people go to restaurants to eat not just to fill their stomachs, they also have a demand for food, taste, and even a good dining atmosphere. This is also true of web design, especially if you are able to convey a positive emotion, particularly if you are likely to forgive some of the drawbacks of your Web site. Look at the Wufoo interface.

In fact, the goal of UI design boils down to solving these three problems:

What is this (usefulness)

How I should use (usability)

Why should I care about this (use of desire)

The movement of the eyes is predictable.

Whether it's a flashing thing in a corner or a beautiful woman walking in front of you in the street, your eyes will naturally focus on where it is (perhaps you are) interested, right? While there are situations where people are different, most of them have a clear tendency to shift their attention, as they do when browsing the web. (You can clearly see how people's attention is shifted in the following visual hotspot map.)

Source: Nielson Norman Group

www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

In an article on the principle of vision, Alex Bigman,99design, the author of the design, discusses two dominant ways of reading, but the two ways discussed here are only for people who write habits from left to right (the Albanian people protest), let's take a look at each one.

F-shaped layout (tree mode)

For a typical text to occupy the main position of the Web page (such as blog), the design will adopt the F-type layout mode. Viewers will first scan the left side of the page, the vertical direction of text information, to find the topic of interest to them or the beginning of the paragraph sentence.

When the viewer finds something he likes, they start reading, and their eyes shift horizontally. The final result is that they are looking at a hotspot map that renders the shape of the letter F or E. CNN and NYTimes Two news sites use the F-shaped layout.

Nielson Norman Group's Jakob Nielson completed a test based on 232 viewers and thousands of page visits, and listed the following practical essentials for F-type layouts:

Viewers rarely read verbatim.

The first two paragraphs are the most important, should be enough to Bo people's eyes.

Start paragraph, small title enough to be a gimmick.

How do these tips help you complete the interface design? See below:

Source: Understanding F Layout

Www.webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-de

You can see in this picture that the most important information can be seen at a glance, and the more detailed things can be positioned immediately through the guidance.

The F-type layout structure works well for pages that contain ads, or that don't have much to do with content. Remember, the content is king. The F-shaped layout is a guide rather than a drug--the viewer will soon start to feel bored after seeing several of these F-page layouts, using Content--not the layout--to grab them.

Z-type layout (diagonal mode)

Z-type layouts are mainly used for text-driven page reading. The viewer first browses to the horizontal header at the top of the page (whether it's a menu bar or a reading habit from left to right). When you reach the end of the line, it shifts to the left (also based on your reading habits) and then horizontally reads the bottom section.

Source: Understanding Z-type layout

Http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web

This z-style layout format can be applied to almost any web interface because it highlights the core requirements of web design today, such as layering, branding, and interaction. Z-type layout for those who require simple and crisp interface, Web page jumps by Interactive design is responsible for implementation of the Web page, is very suitable.

If you want to cram complex information into the Z-shaped layout interface, it's better to use the F-type layout instead. But the advantage of the Z-shaped layout is the simplicity and order of the structure. Here are a few practical experiences, and you'd better keep them firmly in mind:

Background: Compare the background to the content you want to present so that viewers can focus on your content framework.

Point 1: Find a prominent position for your logo, such as here.

Point 2: Add some links or interactive components to help visitors better navigate the web.

In the middle of the page: a fine picture with a few lines of text separates the top and bottom of the page and ensures that the viewer's attention is shifted to the Z-word line we envision.

Point 3: Add the Essentials (content) and expand along the horizontal axis, directing the viewer's gaze to the main call you placed in point 4.

Point 4: Here is the focus, an ideal location reserved for your main call (donation, join, registration, etc.).

Being able to predict what the viewer is looking for can bring you great benefits. Prioritize the elements on your page before you organize them. Once you have identified what you want to present to the viewer, the rest of the work is simply to place them in the hot spots of both modes.

If you feel the need to provide more information to your users before presenting your main call, you can even extend the z pattern to the entire page and repeat the steps I have enumerated several times, in fact, many pages are doing so now.