电商用户体验(微信号ec-ued)
汇聚电商和用户体验精彩内容
Summary of Don Norman's Design Principles
Visibility – The more visible functions are, the more likely users will be able to know what to do next. In contrast, when functions are "out of sight," it makes them more difficult to find and know how to use.
翻译：可视性，功能拥有足够的可视性，用户就能清楚认识流程中下一步做什么。反之，如果功能隐藏的比较深，用户会难以发现这个功能并使用它。
Yoyo注解：简单来说，这就是交互设计中常见的“不要把某某功能层级藏太深”的说法。这只是一个指导意见，现在的系统功能比较繁琐的时候，反而需 要挑选出核心功能足够展示，而把一些次要功能聚合起来隐藏。简单的例子，Facebook移动软件中打包功能放右上角，让用户记忆住功能群在一个区域，然 后进行操作。
Feedback – Feedback is about sending back information about what action has been done and what has been accomplished, allowing the person to continue with the activity. Various kinds of feedback are available for interaction design-audio, tactile, verbal, and combinations of these.
翻译：反馈，用户每完成一个操作，需要系统给出反馈，然后用户才能感知并进入下一步操作。反馈有很多类型，例如声音提示，触摸感，语言提示，以及各种类型的组合。
Yoyo注解：任何产品设计都要注重反馈这个因素，所谓互动系统，就是要系统与用户进行充分互动，用户得知系统的信息方式之一就是来自反馈。现在的 反馈需要越自然越好。一个例子，注册的时候，系统提示你输入你的注册邮箱或者密码，一个呆板的系统会需要你输入完成，点击确认后，再告诉你输入的信息不符 合标准，然后全部重新填写一次，诸多政府类系统就是这样。好的系统应该在你输入信息，换到下一个信息输入的时候，就即使提示你上一次输入信息的状态，这样 就能很自然完成一个复杂的注册信息填写。很好的是，现在大部分新的注册系统都有这个功能特性。很喜欢Turbo Tax报税的体验，反馈做的非常好。
Constraints – The design concept of constraining refers to determining ways of restricting the kind of user interaction that can take place at a given moment. There are various ways this can be achieved.
翻译：限制，设计的设限可以控制用户与系统交互的行为方式。
Yoyo注解：每个设计师都应该知道不能让用户天马行空的使用产品，少的操作空间可以更好地控制用户使用产品行为，并让用户体验在预期的流畅度之 内。但是要注意的是，减法是很难做的，所以精简选择的时候，需要精准了解用户的需求，用户场景的定义，以及流程中可控的区域，这样才能帮助用户更轻松地使 用产品。选择越少，烦恼也就越少。一个好的系统应该是满足用户的核心场景，提供有限的功能选择，但是在次要重要区域提供给用户自由全局操作的可能。这是一 个交互难点。
Mapping – This refers to the relationship between controls and their effects in the world. Nearly all artifacts need some kind of mapping between controls and effects, whether it is a flashlight, car, power plant, or cockpit. An example of a good mapping between control and effect is the up and down arrows used to represent the up and down movement of the cursor, respectively, on a computer keyboard.
翻译：映像，操作与其所产生的效果应该产生清晰的映象。
Yoyo注解：还是讲的设计中的自然，有些产品不用任何教育就能让用户清晰上手，就是自然的映象的好处。一个例子，看Word文档时，用户用键盘按 下，文档就会慢慢往下走，就是很经典的映像。再说一个例子，用Mac的时候，两根手指滑动触屏，电脑上的网页上下滑动，改版前后两次方向是截然相反的，你 喜欢哪种？
Consistency – This refers to designing interfaces to have similar operations and use similar elements for achieving similar tasks. In particular, a consistent interface is one that follows rules, such as using the same operation to select all objects. For example, a consistent operation is using the same input action to highlight any graphical object at the interface, such as always clicking the left mouse button. In consistent interfaces, on the other hand, allow exceptions to a rule.
翻译：一致性，系统中所有类似的功能，操作，界面都应该具有一致性。
Yoyo注解：一致性现在已经到一个广义的层面。不仅仅是一个系统，现在甚至是一个生态。例如苹果，Mac，iPhone，iPad等等，都做到了 高度的统一，用户体验易懂流畅。设计师应该对一致性产生强迫症，看到一个系统里有些界面导航在上面，有些界面导航在下面，如果没有明确理由，应该是立马就 意识到问题且去改进。
Affordance – is a term used to refer to an attribute of an object that allows people to know how to use it. For example, a mouse button invites pushing (in so doing acting clicking) by the way it is physically constrained in its plastic shell. At a very simple level, to afford means "to give a clue" (Norman, 1988). When the affordances of a physical object are perceptually obvious it is easy to know how to interact with it.
翻译：认知，让用户自然了解这个功能的特性并容易使用它。
Yoyo注解：人看到按钮就会去按一下，看到旋钮就会去扭一下，已经是不需要任何指引就可以操作的行为。记得在研究生时，老师让大家做了一个项目， 让大家做一个实体产品，要求就只有三个“可以按，可以扭，可以响”，而且让用户不需要思考就可以操作。我和一个美国小帅哥做了一个巧克力豆发放盒…… 放巧克力豆需要按一下，想吃需要扭出来，且扭的时候盒子会响一下…… 项目在期末考试非常受欢迎，因为巧克力豆太好吃了。
The 10 Rules:
1. It is all about the experience
2. Design systems
3. Everything is a service
4. Everything is a product
5. Don’t be too logical
6. Memory is more important than actuality
7. Complexity is okay
8. Design for the real world
9. Design for people
10. It is all about the experience
翻译：不要太注重逻辑；用户的记忆比真实重要；可以适当复杂。
Yoyo注解：这三点说的太好了。作为一个设计师，不能走纯逻辑路线，我们做的产品是与人交互的产品，人的心理模型把握非常重要。第一点和第二点是 一致的。我们做一个产品，按照最严格最真实的逻辑思考做出的功能，不一定是用户心中好使用的方式。用研的重要性也就不言而喻了，我们设计师需要用研帮助， 提供完整的用户心理模型，建立核心用户场景，才是做好交互设计的第一步。最后一点，是想强调复杂的信息架构的产品，例如面商软件，例如大型网站服务，都是 不能走至简路线的。因为这个时候用户也许要的不是简洁大气国际化，而是实用，能解决实际问题。总之，不清晰了解目标用户的心理模型和行为模式，是无法精准 定义交互逻辑的。
Display design is a large topic with many special cases. Smith and Mosier (1986) offer five high-level goals as part of their guidelines for data display:
1. Consistence of data display. During the design process, the terminology, abbreviations, formats, colors, capitalization, and so on should all be standardized and controlled by use of a written (or computer-managed) dictionary of these items.
Yoyo注解：这里对一致性加了一种记录方法，文档。设计文档在流程中是非常重要的，可记录，可传播，可沉淀。
2. Efficient information assimilation by the user. The format should be familiar to the operator and should be related to the tasks required to be performed with the data. This objective is served by rules for neat columns of data, left justification for alphanumeric data, right justification of integers, lining up of decimal points, proper spacing, use of comprehensible labels, and appropriate measurement units and numbers of decimal digits.
3. Minimal cognitive load on the user. Users should not be required to remember information from one screen for use on another screen. Tasks should be arranged such that completion occurs with few actions, minimizing the chance of forgetting to perform a step. Labels and common formats should be provided for novice or intermittent users.
翻译：用户的认知负担越少越好。用户需要记忆的东西越少越好。系统应该适当提示用户信息。
Yoyo注解：设计师的工作就是让用户更轻松。因为技术原因让用户增加负担的设计都是不合理的。例如，注册填写验证码，是一个技术需求，但是现在给 用户带来的认知压力巨大。我见过几个极端的，一个是让你输入至少10个字母和数字，还有一个是4个字母已经艺术化到无法识别了，还有，最近一些团购网站的 验证码是中文的，更大的增加了用户的第一次输入成功难度。
4. Compatibility of data displayed with data entry. The format of displayed information should be linked clearly to the format of the data entry. Where possible and appropriate, the output fields should also act as editable input fields.
5. Flexibility for user control of data displayed. Users should be able to get the information from the display in the form most convenient for the task on which they are working. This compact set of high-level objectives is a useful starting point, but each project needs to expand these into application-specific and hardware-dependent standards and practices. For example, these generic guidelines, which emerged from a report on design of control rooms for electric-power utilities (Lockheed, 1981), remain valid:
• Be consistent in labeling and graphic conventions.
• Standardize abbreviations.
• Use consistent formatting in all displays (headers, footers, paging, menus, and so on).
Shneiderman's "Eight Golden Rules of Interface Design"
These rules were obtained from the text Designing the User Interface by Ben Shneiderman. Shneiderman proposed this collection of principles that are derived heuristically from experience and applicable in most interactive systems after being properly refined, extended, and interpreted.
To improve the usability of an application it is important to have a well designed interface. Shneiderman's "Eight Golden Rules of Interface Design" are a guide to good interaction design.
1, Strive for consistency.
Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout.
Yoyo注解：还是在讲一致性。更多的规范文档可以帮助大产品更有效发展，控件库，措辞规范，交互流程规范等。
2, Enable frequent users to use shortcuts.
As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations function keys, hidden commands, and macro facilities are very helpful to an expert user.
翻译：让老用户有使用快捷操作的机会。
Yoyo注解：产品最好提供两套路径，一套是标准路径，一套是快捷路径。例如在Windows下，用户可以选择右键点击文件夹，选择复制，再去目的文件夹粘贴，也可以使用Ctrl+C与Ctrl+V。我喜欢Mac就是因为它强大的键盘快捷操作，得心应手，欲罢不能。
3, Offer informative feedback.
For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial.
Yoyo注解：这里继续讲反馈，但是提出需要有度。大的状态重反馈，小的节奏轻反馈，设计要给与一个产品生命力，轻重缓急，需要让用户在尽量少受干扰的情况下得到最优价值的信息量。
4, Design dialog to yield closure.
Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions.
翻译：设计流程需要设计一个结尾。
Yoyo注解：用户进行一系列操作后，需要看到一个结尾，才能从心里上得到满足，完成，轻松的情绪。例如，一个支付流程，需要已支付完成这个状态来结束。
5, Offer simple error handling.
As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error.
翻译：需要给用户提供简单的错误解决方案。
Yoyo注解：最完美的产品是不给用户犯错的机会。但是真实世界中，很难做到。用户犯错后，需要给用户提供简单，容易理解，且有效的解决方案指导。 提供冗长的解决方案，提供生涩的解决方案，或者只是报错不提供解决方案，都是极大影响用户体验，让用户沮丧的关键原因。太多系统有这个问题，很多次在一个 系统中发现不能进入下一步，但是又不知道错误在哪儿或者如何解决，就很沮丧，如果是有可以替代的产品，肯定就不会使用这个产品了。
6, Permit easy reversal of actions.
This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions.
翻译：提供反操作。给用户犯错的机会，提供功能让用户恢复之前的状态，可以让用户在系统中可以更勇敢地探索。
Yoyo注解：想象一下Photoshop如果不能反操作，设计师将是一个多么困难的行业…… 打印机为啥只能当古董用，因为你不能犯错。
7, Support internal locus of control.
Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders.
翻译：（太难翻译了，意译）让用户觉得自己可以改变一切。
Yoyo注解：设计师设计的产品与用户互动的过程中，在与用户情感的交流和绑定中，要让用户感觉自己能做主，虽然大多时候是系统的局限性更多。设计师应该把产品设计成用户主动去使用，且感觉能主导，而不是让用户被动接受。
8, Reduce short-term memory load.
The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.
10 Usability Heuristics for User Interface Design
by Jakob Nielsenon January 1, 1995
Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
Yoyo注解：还是在讲映像，但是更强调用户的真实生活场景。一个简单的例子，2009年在雅虎，公司开始做沙特的网页设计，因为沙特的语言是从右 往左，所以网页设计的界面要反过来，这样才能让沙特用户使用产品更自然，更流畅。其实不像想象中那么简单，例如当时的UED总监让大家把自己身上左右的东 西全部互换，你能想起几样？………………（你肯定想不到袜子lol）
User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
翻译：用户需要有自由的操作空间。
Yoyo注解：“逃生舱”这个概念就是这么来的。用户在一个流程中卡住了，有时需要立即逃离回到第一个步骤。
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Yoyo注解：还是讲错误控制的场景。这里强调的是对重大操作需要清晰提示用户。现在大多系统都已经在使用这个理论。例如你要删除一个账户，或者转账一笔钱，都会各种反复确认。有些操作一旦失误，很难反操作。人生也是这样。
Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
翻译：美观与设计最简化。
Yoyo注解：这个与信息可视化的数据墨水理论相同，无关的信息少放或者不放，界面里每一个无关的信息都会让用户偏离产品的核心内容。
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
Summary of Usability Inspection Methods
by Jakob Nielsenon January 1, 1995
• Heuristic evaluation is the most informal method and involves having usability specialists judge whether each dialogue element follows established usability principles (the "heuristics").
Yoyo注解：Heuristics一定要常用，特别是偏小的，还没有完整用研团队支持的团队。Heuristics的好处，快速，有效，剔除核心问题，保证设计大方向，准确。坏处，主观，片面。
• Heuristic estimation is a variant in which the inspectors are asked to estimate the relative usability of two (or more) designs in quantitative terms (typically expected user performance).
• Cognitive walkthrough uses a more explicitly detailed procedure to simulate a user's problem-solving process at each step through the dialogue, checking if the simulated user's goals and memory content can be assumed to lead to the next correct action.
• Pluralistic walkthrough uses group meetings where users, developers, and human factors people step through a scenario, discussing each dialogue element.
• Feature inspection lists sequences of features used to accomplish typical tasks, checks for long sequences, cumbersome steps, steps that would not be natural for users to try, and steps that require extensive knowledge/experience in order to assess a proposed feature set.
• Consistency inspection has designers who represent multiple other projects inspect an interface to see whether it does things in the same way as their own designs.
Yoyo注解：这是一个好方法，一个团队的各自负责不同业务的设计师可以交叉检查，看其他人的设计作品是否符合公司商业价值，团队设计氛围等。
• Standards inspection has an expert on an interface standard inspect the interface for compliance.
• Formal usability inspection combines individual and group inspections in a six-step procedure with strictly defined roles to with elements of both heuristic evaluation and a simplified form of cognitive walkthroughs.
Heuristic evaluation, heuristic estimation, cognitive walkthrough, feature inspection, and standards inspection normally have the interface inspected by a single evaluator at a time (though heuristic evaluation is based on combining inspection reports from a set of independent evaluators to form the list of usability problems and heuristic estimation involves computing the mean of the individual estimates). In contrast, pluralistic walkthrough and consistency inspection are group inspection methods. Many usability inspection methods are so easy to apply that it is possible to have regular developers serve as evaluators, though better results are normally achieved when using usability specialists.
Human Computer Interface Design Guidelines
By Comte de Dirac
Testing
"Don't Make Me Think: A Common Sense Approach to Web Usability," Steve Krug says the most important guideline is to test, test, and test again, right from the very beginning. He calls this "usability testing." Begin by looking at competitor web sites or web sites you like. Come up with a set of tasks particular to the web site you're building, like ordering a product. Then find someone who has never used the site, ask him or her to do a set of tasks, and watch and record how they do. Identify how the interface helps or confuses them. Next, design your own site on paper. Do usability testing on your prototypes, successively refining each prototype with new test subjects until you are satisfied they can complete the tasks as easily as possible.
Anticipation
When designing any software application, keep in mind that the interface should anticipate a user's needs. The best way to do that is not to expect users to have to play around or experiment in order to figure out how to do what they want to do. The interface should make all the information and user actions as easy and obvious as possible.
Consistency
While users need to do different tasks, it is usually the case that those tasks can be broken down into a set of common components. For example, when using a word processor, each main task starts by going to the same menu bar, and each part of the menu bar looks and acts similarly. In short, you want to keep, as best you can, a consistent look, feel and behavior throughout each level of the application.
Efficiency of the User
You measure the productivity of any computer application by the productivity of the user, not the application. For example, if a user takes, say, 10 seconds to do some task using one application but takes 15 seconds to do the same task in another design of the same application, the former is better than the latter, even if the latter application uses computer resources more efficiently than the former.
Visible Navigation
Always make the navigation system as simple and as easy to use as possible. Again, don't make users "think" about how to use the navigation; don't make them have to remember a lot of things to avoid getting lost in the application.
谢谢阅读！
