Interactive design case: Highlight the focus at a glance, simple but not shabby

Article Description: Interactive design Case: Highlight the focus at a glance, simple but not shabby.

Seeing this picture, we can see the eye of the Sky macro (the ued handsome Man) at a glance. We can read some of his character from his face. A good photographic work, the most important point is whether the photo has the focus, the subject of the photo is at a glance. and photographic works of light, composition, depth and so on, in fact, is to allow a photo to have its focus, and use these artistic techniques to foil the atmosphere, enhance the theme. A good page is also the case: should highlight the focus, at a glance. I believe you also know that a user in the process of browsing the page, just scan the page, and not like reading in every place, every line of text. When a Web page is presented to the user, it should be within 5 seconds to understand: What is this page? What do I basically do with this page? Where should I go next? Each page on our site can be a point on the task stream. This point contains the information the user needs, perhaps the next point of the task flow (such as navigation), perhaps the final content the user wants to find. and a page on the existence of hundreds or even thousands of links (Taobao Baby details page usually has more than 700 links), in such a vast sea to find the user needs of the link, visible, "highlight the focus, at a glance" is how important.

To test your page

Testing whether your page is "focused, visible," and allowing users to find the information they need in a short time can be a low-cost, small test. Fivesecondtest.com This interesting site is a dedicated 5-second Test site. The tester uploads a screenshot of the site, then tries to watch the screenshot for 5 seconds, and then say what you just saw. Another way is to see the screenshot, in 5 seconds, click on all the focus he's focused on, and finally give the description of each focus he thinks.

The following figure is the test result for 8 users at the outset of this article:

This test is much less expensive than a modest motion, and it is clear that the viewer of your page will be able to find out what they need at the first time and compare it with the original design.

To achieve "outstanding focus, at a glance"

So, how to achieve such a "prominent focus, at a glance"? As far as I am not fully summarized, the following methods can be used:

Designed for scanning, not reading

You almost need to think of every user as a busy person--they don't have time to stay on your well-designed pages, read each line of your hard work, and admire your well-designed high light and rounded corners--all they want is to find useful information as quickly as possible. If you can't find it, there may be a lot of alternatives on the Internet, maybe your competitors, and users can easily go to other sites to find the information they need. The "Midas Touch" book also describes this point in more detail. I believe we all should have read it. When it comes to "turning into gold" about "designing for scanning, not reading",

Several methods are given:

Try to conform to the design of the user's custom, let the person accept the strange thing to need the price, unless we think this price is necessary.

The more important things in the page the more prominent, establish a clear visual level.

You can click on the place that must be highlighted to make it obvious that you can click.

Divide a page into well-defined areas

Omit the extra text

Yahoo Small Bussiness's page revision is very representative. Before the revision:

Two times after the revision:

We can find that after the revision of the page visual level has been greatly improved. The white content area, the light blue right column and the dark blue registration area gradually progressive, with the strong contrast yellow button "Sign up" on the dark blue background, which guides the main purpose of the page and is also the focus. In addition, you can find that the content of the text part of the previous version is less than half half and half again ... Accordingly, the same information is passed in the form of column points and large graphs. "Sign up" is obvious, and the visually elevated gradient is immediately known to be a button.

[1] [2] Next page