Lightweight design, 6 tips for making your site sensitive and lightweight

In the process of planning and designing a website or software, we often hear this discussion: "This function is designed too much" or "we want to be able to handle it more lightly". It seems that light design is a hot topic today, but also in the ascendant Web2.0 of the designer's favorite (see Those in the world everywhere SNS site, whether visual elements or interactive process can be light light). This paper, from the point of view of practice and summarization, puts forward 6 techniques to make the design lighter.

What is a lightweight design:

Before you start, you need to be clear about what a lightweight design is. Here does not want to give light design the next professional definition, just summed up the light design should have the characteristics of understanding.
　　with sensitive interactive elements: the links on the page, text boxes, buttons and other interactive elements can respond sensitively to the operation and immediate feedback.
　　lightweight process and tips, do not interrupt the user's current task: a task as far as possible with less and clear steps to complete, tips and temporary tasks as far as possible without interruption of user main tasks, do not allow users to do unnecessary confirmation and operation.
　　do not interfere with the user's attention: the user is to use products and services, rather than to appreciate the exquisite design, if the use of the design elements will be distracted by the design is too heavy. Try to use less useless decorations and details.

　

6 Tips for Lightweight design:

1. Flexible Logo Response Area
Clicking on a website's logo usually brings us back to the homepage. From this point of view, logo not only plays the role of brand identity, but also assume an important navigation function. Even the common link when the mouse across the line is underlined or color hint, then the logo as a more important interactive elements, should also be in the mouse to provide appropriate feedback?
Here are a few logo areas to respond flexibly to the mouse example, in the use of the process found that small changes not only enhance usability, but also make the site appear sensitive and angry.

2. Sensitive and interactive elements
Navigation for the importance of the site is self-evident, navigation elements to immediately respond to mouse operations.

Important operation and Guide buttons should be designed more carefully, including three-state (normal, hover,active) or even four-state (add a disabled state) of the button. This is also to make important interactive elements to the different operations in time to give feedback, make it appear sensitive and efficient.

The state of the text box is also an easily overlooked detail, mainly when the focus is not prompted or the hint is not obvious enough.

In addition, for some operations with a slightly longer response time, progress feedback should be given. Seems to be obvious, but it's often easy to overlook in design.

3. Clear and gentle hints
Tips are usually to provide ancillary information, since it is auxiliary, it should not be excessive reinforcement. Unless necessary, it is also best not to bring additional actions to the user (such as requiring the user to actively shut down, confirm, etc.). The content of the hints is also to help or provide feedback, so it is important to be concise.

Twitter to replace the personalized theme of the prompts, from the top of the page appear soft, stay a moment and automatically disappear.

The follow hint in meme appears in the Operation Place.

4. Hide or weaken infrequently used operations
Infrequently used operations can be weakened, or hidden, and appear when the mouse passes. This is based on the above mentioned not interfering with the user's attention point of view.

Twitter hides the operation of each microblog entry and reduces the distraction of reading. And when the mouse passes the entry response area and the operation, there are corresponding changes for feedback.

Flickr is also used for photos in light gray, minimizing and minimizing interference with photo browsing.

5. Guide and enhance the recommended operation
Strong and clear guidance is very necessary, research shows that users browsing the page is jumping, non-linear, users do not like in many operations to choose and find the best option. So clear guidance becomes more important. Important and common operations can also be specifically processed to facilitate the search and click.

Large and Easy-to-use forms and Registration buttons

The arrow and the red button together provide a clear guide to the visual path.

Special treatment of common operation. Some browsers have similar processing for back operations.

6. Light handling of temporary tasks
If you want to drink water when you are watching a wonderful movie, do you want to go to the kitchen to pour it or do you wish to have a cup and kettle handy? Obviously people are not willing to interrupt the main task and attention to deal with temporary tasks, page design is the same, can be completed on the current page as far as possible on the current page. Modal window, jump page, pay layer, etc. are not let users feel comfortable practice. Use this approach sparingly unless you really need to.

The immediate editing of the name of the photo in Flickr is very lightweight when the page is finished.

The deletion of the favorites item in the delicious is also done in the same way as the page is completed, lightweight and very well reduced harassment.

Summary:
This paper presents several techniques for lightweight design from the perspective of usability:
1. Flexible logo response area;
2. Sensitive and interactive elements;
3. Clear and gentle hints;
4. Hide or weaken infrequently used operations;
5. Guide and strengthen the recommended operation;
6. Light handling of temporary tasks
The above is only a personal practice and experience Summary, welcome to point out the deficiencies and provide more light design suggestions.