Google 用户研究:文本框设计原则( 二 )


本文插图
然后重复项目一中的测试模式 , 进行计时 。 这一次还记录了用户的点击热力图来收集有关参与者正确或错误点击的数据 。
为了确定哪些文本框特征是最能影响到用户对文本框控件的判断的 , 研究人员和设计人员团队找到了能映射用户行为的三个量化指标:

  • 通过「正确点击次数与错误点击次数」量化可识别性;
  • 通过「参与者查找并点击所任务要求文本框所花费的时间」量化文本框可被查找性;
  • 通过「参与者对每个文本字段的变体进行排序」量化用户视觉偏好 。
二、主要发现
两项实验的结果表明 , 文本框的以下特征最能影响到用户判断:
  1. 矩形(框形)样式的封闭文本框的性能优于仅带有线条的文本框;
  2. 文本框应该带有有色填充和底部线条;或者空白填充 , 但需要有色描边;
  3. 文本框的底部线条与背景的颜色对比度最小应为3:1(关于颜色对比度相关话题 , 我会在后面写一篇文章细致讲解);
  4. 标签文本应放置在文本框范围内;
  5. 文本框应具有圆角(用户视觉喜爱度更偏好) 。
于是通过这个实验 , 就有了如今的MD规范中的文本框样式 , 也被借鉴运用到了许多其他规范与场景当中 。
Google 用户研究:文本框设计原则
本文插图
三、总结
GD团队重新探索文本框控件设计的实验涉及到了两名设计师、一名研究员和大约600名参与者 。
得出了在MD规范中 , 「文本框控件」细则开篇便给出的三个原则:易见、清晰、高效 。
可能以前对MD规范还算关注的你 , 也是知其然 , 不知其所以然 。
Google 用户研究:文本框设计原则
本文插图
新的文本框规范已经应用在了Google的各产品线当中 , 从帐户登录页面到Google表单 。
其实使用上面的实验 , GD团队不仅解决了旧版文本框的易用性问题;通过前人种树得到的结论 , 我们还可以将这些手法运用到许多其他的场景当中 , 来辅助我们排查控件的可用性:例如对比、亲密性、用户视觉偏好等等 , 都值得被借鉴 。
希望这个实验的分享可以帮助到你 。
附上Google Design团队文本框优化实验文献地址 , 我们下期再见~
#专栏作家#
UCD耍家 , 公众号:UCD耍家(ID:ucdplayer) , 人人都是产品经理专栏作家 。
本文由 @UCD耍家 原创发布于人人都是产品经理 。 未经许可 , 禁止转载
【Google 用户研究:文本框设计原则】题图来自Unsplash , 基于CC0协议


推荐阅读