Interactive Design Guide: Focus on making the user at a glance

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 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.

"Hide" the function.

Some product managers have such a common problem, they often make a new function, love to show users the new work results. It looks like this is good, one way to let users know that the site is not dead, but also for them to continue to make new features, and then hard to develop a few days or even months of function if no people use, that should be more "cups" Ah! As a then, you will find that there are more and more elements in the interface for the long term "persistence". If one day, such product managers are all dug away by Google, then Google's home page will be filled with a "cup" table:

Another example comes from a BSP that has a toolbar at the top of its blog with 30 or so links. And this toolbar was 4 years ago when his user's high growth period did not actually exist.

If you understand the 20-80 principle, you should know that 80% of users will only use 20% of the functionality. So why is it that 80% of the features that are used by less people are always in a conspicuous position, disrupting most users who only need 20% of the functionality? (This sentence is a bit clumsy, I admit, trouble reader may have to read several times.) In fact, those 80% functions are mostly expert users like, we should be these functions "hidden", the purpose is not to affect novice and intermediary users, and wait for them to find, and then shout: "Oh, incredibly this site has this function, it's great!" "Let's take a look at Google Reader iphone/android version of the latest minor revision:

Before the revision:

After the revision:

You can find that the original occupy vertical space of the new items/all items of the switch, mark all as read and other functions, all hidden in the upper right corner of the Drop-down button. The refresh is replaced with an easily understandable refresh icon, and links to other products on top are underlined. About "hiding" the function, functional obesity is an endless topic, "Harvard Business Review" as early as 06, also discussed this issue in detail, this part of the content, I have a period of time also finishing, for everyone to serve it, this article, do not make in-depth discussion.

Focus on the user's main task flow

Focusing on what users want, and not forcing users to view and understand things that are not relevant to the operation, is an extension of the UCD methodology of "HIGHLIGHTING priorities and at a glance". This idea solves the problem of what elements should be "highlighted" to reach the interface "at a Glance". From the user role to the scene, to the task flow, you can determine what the most important elements are for each interface-that is, the node on the task stream. Plus the integration of business objectives, that is, the focus of the page. Other elements that are not important should be "hidden" or "dimmed". Let's look at an example from Magic Ink (by Bret Victor): This is the search results page for a book.

We can find that this page feels messy. A variety of sizes, various colors, various weight of the font mixed together, dazzling. It's like the song of the "Balloon":

Black, white, red, yellow.
Purple, green, blue, gray.
Yours, mine, his, hers.
Big, small, round, flat.
Good, bad, beautiful, ugly.
A variety of new and old styles for you to choose from

To tell the truth, so many kinds of balloons really don't know which to choose. If we can analyze the result page of this book through UCD (or otherwise), the user needs this information:

Book content. What is the title of the book and what is it about? Book evaluation. Is this book all right? How do people evaluate it, and are these comments believable?

Based on this objective, the redesign results are as follows:

We can see that the content and evaluation of this book are at a glance, the information structure facilitates scanning and comparison. Important information is large and has color, secondary information into the gray small print. A more detailed description of these can be found in the original.

Summarize

This article describes what is "prominent focus, at a glance." How to test whether the page "highlights the focus, at a glance", and how to achieve "outstanding focus, at a glance." There is a word I like, as the end bar. In the What ' s Next in Web design:

"Simplicity is someone takes care of the details."

"Simple but not shabby!" (Thanks for the translation of Qingyun!) )

The interface or function we seek is simple, not shoddy, but rather a shift to the details of the existing functionality in the effort to create more useless functions. It is easy to make things, but it is difficult to do things well!