Google 用户研究：文本框设计原则
编辑导语：上一期我总结了文本框的交互要点（可回顾《交互设计拆解：文本框》） ， 本文作者从iOS人机交互和 Material Design指导规范的共通点以及作者对设计方法论的拙见 ， 整合了文本框的交互细节；我们一起来看一下 。
本文插图
为了体现文本框设计形式的科学性 ， 其实 Google Design（下文简称GD） 团队在2019年曾分享过一篇用户研究文献 ， 是与高级用户体验研究员 Michael Gilbert 共同合作撰写的关于文本框的真实用户可用性研究报告 。
其实MD现阶段版本的文本框规范 ， 早在2017年初就进行了重设计 ， 但在2019年年底才分享出其背后的研究过程与结论 。
本文插图
刚好谈到了文本框 ， 我想借此机会和大家分享GD团队的该项研究幕后过程；看到最后 ， 你会发现所得到的结论不仅仅只限于使用在文本框控件上 。
最关键的是：从GD团队所披露的研究过程和结论 ， 我发现其实再高深的用户设计/研究团队 ， 都会在前期做一些“失败”的设计 ， 这并不可怕 。
所以在探索过程中的我们 ， 不要轻易感到沮丧——多去模拟大型团队的方法和理念 ， 勇于输出自己的新观点才是最重要的 。
一、为什么需要优化？
文本框是用户在表单和对话框中输入、编辑文本的最常用控件之一 ， 本质与关键是应该让用户清楚：这是一个可交互的控件 。
先来看看MD规范早期文本框的样式（2017年前）：
本文插图
对于旧版文本框 ， GD团队发现部分用户并不知道可以与之交互 。
因为旧文本框下的线条寓意并不清晰 ， 容易让某些用户将这条线与分隔线（分割作用）混淆；标签文本（Label text）和输入内容也容易与正文混淆 ， 尤其是在密集文字排版中 。
GD团队的优化目标是改进文本框 ， 使其具有更高的辨识度、易见性 ， 从而更易被理解；这样用户才能够正确、快速地使用 。
于是团队开始进行用户实验研究 ， 剖析究竟是哪些要素在干扰用户判断 。
整个用户研究实验分为两个测试阶段 。
1. 测试项目一：158名参与者（+ 45名飞行员）
第一项测试是将原文本框与其他三种不同设计形式的文本框原型进行比较 ， 放在简单/复杂/真实使用场景当中 ， 让用户完成指定的任务（例如要求参与者找到特定的“Item L”文本框） 。
为了确保参与者无法提前学习和预测在测试过程中文本框可能出现的位置 ， 团队将显示这些文本框的顺序随机打乱 。
本文插图
GD团队通过记录不同的文本框设计形式在不同的场景中 ， 被参与者找到并进行准确点击的时间 ， 来判断用户是否能清晰地认知文本框——以此得到一个理论量化值 。
然后在感性层面 ， GD团队还让参与者按照自己的视觉偏好来对四种文本框设计进行喜好度排名 。
通过理论和感性两个层面综合得出较优的文本框形式 ， 再进一步细化细节 ， 投入到测试项目二中 。
2. 测试项目二：400名参与者
通过测试项目一确定了设计方向后 ， 测试项目二为了更进一步地确定文本框的细节设计 ， GD团队创建了一个自定义工具 。
团队从文本框控件中提炼出了7个特征（例如标签位置、背景颜色对比度、边框样式等） ， 通过这个自定义工具进行特征组装 ， 最后组装出了140多个文本框样式 。
推荐阅读
- 光明网|多几个角度看待“集中清退研究生”
- 光明网|以紧缺人才招聘之名，就可歧视非全日制研究生？
- 中国新闻网|港中大研究表明部分新冠患者康复后粪便内病毒仍具传染性
- 平安银行新一贷和平安智贷爆火的背后：紧抓服务、科技与用户需求
- 以身作则扬正气: 51Talk发布在线教育服务标准，完善用户体验
- 补贴|南京非全研究生申请租房补贴被拒？人社局：被财政部门驳回了，新方案已再次上报
- 任正非称华为岗位没有年龄限制 2020通信设备制造行业现状及发展前景趋势分析研究报告
- 软银一月购入274亿科技股看涨期权 2020跨境电子商务行业现状及发展前景趋势分析研究报告
- 支付码3米外可被盗刷 2020三方支付行业现状及发展前景趋势分析研究报告
- 互联网医院半数亏损 2020互联网医疗行业现状及发展前景趋势分析研究报告