User experience: Usability has always been the start of interactive design

Usability has always been the start of an interactive design. Here's your understanding, write about Nielsen's ten usability principles. See resources for the original of the Ten.

In this paper, the principles of a further understanding and transliteration, and the common version of the translation is different; this is one of my important efforts to encourage and promote the popularization and standardization of internet Chinese.

The principle of State visibility

Whatever the user does on the Web page, whether clicking, scrolling, or pressing the keyboard, the page should give feedback immediately. "Instant" means that the page response time is less than the waiting time that the user can endure.

Case 01:gmail

Enter the Gmail home page, click "Compose Mail", the page on the right switch to the waiting time for the form is "immediate", "without Waiting" ", and click" Address Book ", the program in the background asynchronous loading time exceeded the user expected (estimated 0.5 seconds or more), so Gmail at the top of the" Loading ... ".

Example 02: A Mocking Thrush blueprint

The Mocking Thrush Blueprint is an online frame diagram tool. Any changes that the user has made to the document will be saved immediately. Tip information to the top of the page.

Example 03:QQ mailbox

The mailbox can automatically save the draft, but the performance of the save state is in example 01 of this "flash" form, the user can not determine whether the program in time to save the latest version.

Ii. the principle of environmental relevance

All representations and representations of the Web page should be as close to the user's environment as possible (age, education, culture, background), rather than using the language of the Second world. Metaphor and materialization in the iphone's human-computer Interaction guide are good practices. In addition, the use of understandable and conventional expressions should be used.

Case 04:photoshop

The word "copy" has been replaced by "copy" in the Simplified Chinese environment.

The word "feather" is translated from English "feather", which means "to make the part of the inner and outer boundary of the constituency empty, to play the role of gradual change to achieve the effect of natural cohesion", which is apt and poetic.

Third, the abolition of the principle of redo

In order to avoid misuse and misoperation of users, web pages should provide undo and redo functions.

Example 05: Google Calendar

After adding/updating a schedule, the function of "undo" is prompted at the top of the page.

Case 06:QQ Space

Logs and albums provide the Recycle Bin feature.

Iv. Principle of consistency

Consistency of the same language, function and operation.

Case 07:flickr

The traditional version of the main navigation on the expression is "community", to the "management and establishment" of the page, but it says "group."

Example 08: Sina Weibo open platform

In the "Document First" page, the page title is "Sina Weibo API", inconsistent with user expectations. Not only that, the page in the interface (API) and Development Kit (SDK) in the copy is not unified, it is not standardized and rigorous.

V. Principle of error prevention

Prevent users from making mistakes through design, reorganization or special arrangement of Web pages.

Example 09: Sina Weibo

The text on the Weibo publisher is saved instantly, even if the user closes the page and does not lose content.

Vi. Principles of Easy access

A good memory is better than a bad pen. Minimize the user memory burden, the need to remember the content on the table.

Example 10: Sina Weibo

Automatically type the pop-up list when the user needs "@ someone." However, the handset client, the first to achieve this function is Tencent Weibo.

Vii. flexible and efficient principles

The number of intermediate users is much higher than the number of primary and advanced users. Designed for most users, do not underestimate, also can not despise, to maintain flexibility and efficiency.

Example 11: Blog bus

Long time ago, the bus revision, the new Template adjustment module mode appears flexible; But in the fast-iterative world of the Internet, the "new" way of the bus has been out of date for years.

Case 12:wordpress

remain efficient and do not explain.

Example 13:QQ mailbox

Login, if you enter a digital account in the account (that is, QQ number), the focus moved to the Password box, will pop up the verification code form, if the input is detected in English account, then hide the verification code form. The tricky part is that English accounts are far less likely to have a malicious exploratory login (attack) than a digital account.

When you delete a message in bulk, if you do not select a message, a prompt that does not have to respond (must respond, such as the alert () method) is ejected to avoid meaningless clicks by the user.

Example 14: Renren

Delete the confirmation screenshot of the album. Note that this is not a pop-up layer, but a new page. Clumsy and inefficient.

Example 15: Tencent Weibo

Cosmetic version of alert (), to increase the trouble.

Viii. the principle of easy sweep

Internet users browsing the web is not reading, not looking, but sweeping. Easy sweep means highlighting the focus, weakening and eliminating irrelevant information.

Example 16: Baidu Search

The number of search results is less helpful to users, and the number is not accurate enough. Baidu Search will take it to the bottom of the page, so that the first screen visible area to increase the height of 20 pixels.

Example 17: Weibo line-up

According to the author's conclusion, most of the forwarded PostScript is meaningless and therefore hidden away. Because some users see "forwarding" as a "reference" feature, the PostScript is a high-value comment and therefore provides a way to hover.

Example 18: Google Webmaster help tools

Differentiate between body and code, and because it is not intended for professional developers, there is no highlighting code.

Ix. the principle of fault tolerance

Help users recover from errors and minimize losses. If it is not automatically retrieved, provide detailed instructions and directions rather than code, such as 404.

Example 19: Watercress

After the topic of the group is deleted, the watercress will send a message to each post, telling the reason for deletion and the original thread.

Revert to the initial layout. It is worth mentioning the copy of watercress, pay attention to the word "toss" ~

X. Humane Help Principle

The best way to help tips is: 1, no prompts, 2, one-time tips, 3, resident tips; 4; Help documentation.

Example 20: Tencent Weibo

A one-time hint.

Example 21: Google keyword ads

Resident tips.

Resources

01 Nielsen "Ten Usability Principles" (English) http://www.useit.com/papers/heuristic/heuristic_list.html

02 Liu Xi The Nielsen Web Usability Evaluation Ten Principles (bilingual) http://blog.sciencenet.cn/home.php?mod=space&uid=333718&do=blog&id= 292283

03 Expert Assessment: Beyond heuristic assessment http://www.userfree.cn/?p=840