一个自动补完的交互案例
自动补完列表是一个最早使用于搜索引擎的出色的 UCD 设计的案例。 闲话不说，来看这个案例： 这张图是一个略有缺陷的情况。(google.cn) 这张图是一个比较完美的解决方案。(google.com) 现在，我们来仔细分析，针对第一张图的缺陷提出相关建议： 1 去掉非必要信息。 建议条目的结果数对于用户意义甚微，它出现在这里构成了额外的关注焦点，对用户的干扰大于他起到的实际作用，所以即使去掉，用户也情绪稳定，影响不大。 2 提供更积极的交互反馈。 建议条目中，已输入文字和未输入文字没有区分（比如我输入了「忍」，条目「忍者」中「忍」是已输入文字，「者」是未输入文字），如果能够区分开，能带来更好的操作感。积极、正确地对用户的操作进行反馈，可以达到鼓励用户、消除疑虑的作用，在人机两者间搭建完整健康的交互循环，使用户的操作感受更流畅。 3 理清混淆的交互方式。 建议条目的列表是在 UI 上模仿了浏览器输入框的自动提示功能，自动提示功能是：输入部分文字、出现下拉框、点选正确的内容、该内容将替换输入框中的内容。在最后一步上，这个案例和自动提示略有不同，点选后将直接把你带至搜索结果的页面。而这个案例里对于鼠标悬停条目使用了反色效果，在视觉上过于形似自动提示（因为自动提示里就是反色效果），当鼠标悬停的反馈让人认为这就是自动提示功能时，点击之后却出现了不同的交互，所以提供不太一样的 UI 效果可以达到消除歧义的作用。 4 解决因设计该方案而产生的新问题。 列表遮挡了输入框下方的两个按钮，对于会点选推荐条目的人没有操作上的影响，但是对于仅搜索输入的内容、并不需要推荐条目的人来说，就得先让这个列表消失，才能够点到按钮，虽然按回车也可以达到目的，但毕竟也有用户是不知道在输入框里面按回车的。把按钮挪进列表的框内，对于前两种用户没有影响，却可以给不需要推荐条目、又不知道按回车的用户带来便利。这样一来连「关闭」链接也就不必要了，索性去掉。 改进后变成第二个网站的样子，这样就变得很完美了。 ...