Learn from Google to create a smart Web experience

Google's design has always been known as simple, so that the page relaxed and elegant rendering, on the one hand, save the page load time, reduce user waiting, on the other hand, also reduce the user's distraction when browsing the page. However, behind this simple design, designers are not lazy, but more sensitive, meticulous, lightweight interactive experience design. Google +, another masterpiece of social networking, has made a big breakthrough in how to be lighter, faster and more humane, following the company's famous ten design guidelines. This article mainly takes the social network as an example, analyzed and summed up six to make the Web experience more clever design method, for everybody reference.

1. Graphical navigation

The information of social networks is very complicated, so navigation guidance is very important. No company more daring than Google, will be the Navigation tab all simplified to icon, only the mouse hover up when the note will show this tab. Obviously, this for novice users, there is a certain threshold of learning, but we all feel the strength of the concise, graphical navigation to make the entire column appears clean and tidy, functional focus, switching convenience.

The navigation of several major social networks at home and abroad most of the navigation is the text, although from the functional view at a glance, but because the text itself is not concise, the arrangement has limitations, then had to be in the design, but also to consider the function of inductive distribution and priority display, hide the function of not commonly used.

2. Use the gray button

People who often do the design know that the gray button represents a disabled function and is not clickable. However, Google + is bold to use the gray button, through the mouse hover to tell users that this is a point. Think carefully, this is used for the following two reasons: First, balance the color of the page. Because of Google's logo theme color has four, if the button to show the default color, the page will look very flower, no focus. Such a gray processing, so that the selected tab more prominent, and will not bring interference. Second, the button by the gray point of the way to color to give people a hint of light icon, enhance the user clicks the button desire.

From the development trend of the icon, regardless of color or shape is to go in a concise direction, the past colorful icons have lost its original identity, the application of solid color icon will appear more high, more high-end. A more elegant, more cordial sense of technology.

3. All the places where the mouse is there are feedback

Most of the elements on the Web page should have their corresponding feedback when the mouse is slipping. Whether it's just a change in the mouse pointer, an underscore, or an action or comment that combines some simple features. Designers can easily ignore these design details when doing static design drafts, but this is a critical moment for a product to demonstrate good interactive performance. It's like talking to people, and if he doesn't have any reaction to my words, I'm less interested in him, and if he nods, smiles and approves, then I might have more interesting things to tell him. Therefore, even if only the color of the border becomes darker, it can also express that the page is friendly to the user, not ignored.

Hover state is the best time to show what the user wants to know about the current page. For example, when the mouse is drawn to the avatar, the relevant information of that person will appear. Hover can also be a strong guide to a module, for example, Google will emphasize its search function. In addition, it can be used to hide some of the less common operations, such as deletions.

4. Simple tasks completed on the current page

The best thing to mention here is the process optimization of Google + Plus friends and grouping. Originally add friends and group is two separate tasks, the group is in the other agreed to add friends to do, because Google + is the introduction of one-way relationship chain, so the group can advance to add friends this step to do. Originally add Friend is need to click on the button, now only use hover up will appear group box, greatly reduced the addition of friends and grouped operating threshold. At least one click of the user can complete the two-step step. Now the social networks of some two-way relationships, such as Face book, are beginning to learn the quick way to add friends and groups.

5.feed Real-time rolling screen update

The feed is the new message we subscribe to every day. I believe that the following small yellow bar is not unfamiliar, most of the domestic sites are used to click the yellow bar to view new messages, and Google + is the automatic scrolling display of the latest news, and on the left a blue vertical line, said the latest update. One important reason why Google's design looks smart is that its state changes are accompanied by an elegant animation, rather than a naked appearance or disappearance. Comments and praise, including feeds, are updated in real time, with simple, gorgeous animations, just like watching live.

6. Instant System Feedback

Similar to the above, the tip bar in the entire Web site is consistent, they are automatically appear, automatically disappear, and some also shoulder a simple operation, such as the undo in the diagram. With such a lightweight system feedback, there will be no window and so heavy feedback, the interaction of the page appears to be light and smooth many, all the times in the comfort of users anxious mood.

To sum up, this article from the sensitive and lightweight angle, the experience of Google + analysis, summed up above six points to make the web more lightweight and sensitive design method, hoping to bring some references.

Author: Sharon

Article Source: Tencent CDC