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

为了体现文本框设计形式的科学性,Google Design(下文简称GD) 团队在2019年曾分享过一篇用户研究文献,是与高级用户体验研究员 Michael Gilbert 共同合作撰写的关于文本框的真实用户可用性研究报告

其实MD现阶段版本的文本框规范,早在2017年初就进行了重设计,但在2019年年底才分享出其背后的研究过程与结论。

我想借此机会和大家分享GD团队的该项研究幕后过程。看到最后,你会发现所得到的结论不仅仅只限于使用在文本框控件上

最关键的是:从GD团队所披露的研究过程和结论,我发现其实再高深的用户设计/研究团队,都会在前期做一些“失败”的设计,这并不可怕。所以在探索过程中的我们,不要轻易感到沮丧。多去模拟大型团队的方法和理念,勇于输出自己的新观点才是最重要的。

 01 
为什么需要优化?

文本框是用户在表单和对话框中输入、编辑文本的最常用控件之一,本质与关键是应该让用户清楚:这是一个可交互的控件。

先来看看MD规范早期文本框的样式(2017年前):

对于旧版文本框,GD团队发现部分用户并不知道可以与之交互。因为旧文本框下的线条寓意并不清晰,容易让某些用户将这条线与分隔线(分割作用)混淆。标签文本(Label text)和输入内容也容易与正文混淆,尤其是在密集文字排版中。

GD团队的优化目标是改进文本框,使其具有更高的辨识度、易见性,从而更易被理解,这样用户才能够正确、快速地使用。

于是团队开始进行用户实验研究,剖析究竟是哪些要素在干扰用户判断。

整个用户研究实验分为两个测试阶段。

  · 测试项目一:158名参与者(+ 45名飞行员)  

第一项测试是将原文本框与其他三种不同设计形式的文本框原型进行比较,放在简单/复杂/真实使用场景当中,让用户完成指定的任务(例如要求参与者找到特定的“ Item L”文本框)。

为了确保参与者无法提前学习和预测在测试过程中文本框可能出现的位置,团队将显示这些文本框的顺序随机打乱。

GD团队通过记录不同的文本框设计形式在不同的场景中,被参与者找到并进行准确点击的时间,来判断用户是否能清晰地认知文本框。以此得到一个理论量化值。

然后在感性层面,GD团队还让参与者按照自己的视觉偏好来对四种文本框设计进行喜好度排名。

通过理论和感性两个层面综合得出较优的文本框形式,再进一步细化细节,投入到测试项目二中。

  · 测试项目二:400名参与者  

通过测试项目一确定了设计方向后,测试项目二为了更进一步地确定文本框的细节设计,GD团队创建了一个自定义工具。

团队从文本框控件中提炼出了7个特征(例如标签位置、背景颜色对比度、边框样式等),通过这个自定义工具进行特征组装,最后组装出了140多个文本框样式。

然后重复项目一中的测试模式,进行计时。这一次还记录了用户的点击热力图来收集有关参与者正确或错误点击的数据。

为了确定哪些文本框特征是最能影响到用户对文本框控件的判断的,研究人员和设计人员团队找到了能映射用户行为的三个量化指标:

  1. 通过「正确点击次数与错误点击次数」量化可识别性

  2. 通过「参与者查找并点击所任务要求文本框所花费的时间」量化文本框可被查找性

  3. 通过「参与者对每个文本字段的变体进行排序」量化用户视觉偏好

 02 
主要发现

两项实验的结果表明,文本框的以下特征最能影响到用户判断:

  • 矩形(框形)样式的封闭文本框的性能优于仅带有线条的文本框;

  • 文本框应该带有有色填充和底部线条;或者空白填充,但需要有色描边;

  • 文本框的底部线条与背景的颜色对比度最小应为3:1(关于颜色对比度相关话题,我会在后面写一篇文章细致讲解);

  • 标签文本应放置在文本框范围内;

  • 文本框应具有圆角(用户视觉喜爱度更偏好)。

于是通过这个实验,就有了如今的MD规范中的文本框样式。也被借鉴运用到了许多其他规范与场景当中。

 03 
总结

GD团队重新探索文本框控件设计的实验涉及到了两名设计师、一名研究员和大约600名参与者。得出了在MD规范中,「文本框控件」细则开篇便给出的三个原则:易见、清晰、高效。可能以前对MD规范还算关注的你,也是知其然,不知其所以然。

新的文本框规范已经应用在了Google的各产品线当中,从帐户登录页面到Google表单。

其实使用上面的实验,GD团队不仅解决了旧版文本框的易用性问题,通过前人种树得到的结论,我们还可以将这些手法运用到许多其他的场景当中,来辅助我们排查控件的可用性:例如对比、亲密性、用户视觉偏好等等,都值得被借鉴。

希望这个实验的分享可以帮助到你。
(0)

相关推荐

  • 体验|研究了上千套案例,才发现用户体验设计可以细化为 12 个步骤

    在如今的产品设计团队中,体验设计师需要做的事情已经跨越了职能边界,为了寻求更好的设计方案,常常要承上启下地连接整个团队.其中所涉及的工作,基于我们熟知的设计流程,同时隐藏了许多跨职能的思考和工作细节, ...

  • 体验|如何做好用户体验项目?从一个好计划开始

    本文共 5178 字,预计阅读 13 分钟 TCC推荐:大家好,这里是 TCC 翻译情报局,我是李泽慧.任何项目的开展,若想要顺利高效的进行,都需要一个完整的计划.本文作者梳理了用户体验项目研究计划应 ...

  • 测试用例细节控件知识

    页签 2.分组框 3.文本框 4.单选按钮 5.复选框 6.列表框 7.组合列表框 8.选项卡 9.文本框组合 10.按钮 11.滚动条 12.日历控件 13.表格控件 16.打开文件对话框 17.保 ...

  • 66种用户研究方法,基于斯坦福思维设计

    要找到一个系统的用户研究方法,那么就必须依托于一个成熟的方法模型. 斯坦福设计思维正是解决此问题的一种经典思维方式.它是斯坦福大学Hasso-Plattner设计学院(D.School)提出的一个五阶 ...

  • 向标杆致敬:移动用户体验的 7 个设计原则

    TCC 推荐:大家好,这里是 TCC 翻译情报局,我是李泽慧.提及移动设计原则你会想到哪些?或许你还没有对其进行清晰地梳理,但它们一直在潜移默化地影响着你,早已深入你的设计思维.例如对用户行动点的布局 ...

  • “黏”住用户的游戏化设计研究

    编辑导读:游戏化设计,是很多人想到的增加用户使用时长.进行产品增长的有效方式.但是游戏化设计背后的原理是什么呢?如何结合这个机制进行具体的产品设计呢?本文作者从游戏化设计的价值出发,对游戏化设计的八大 ...

  • 网站搜索框怎么设置,设计原则错误,容易影响网站排名?

    如果你是一个老站长,这几年,我们在一些资讯类型的网站中,你是否很少发现搜索框的身影,特别是一些垂直类型的网站,更多的是在不断向采用信息流的推荐策略进行转移. 但对于中小企业的网站而言,从目前来看,可能 ...

  • 【教学设计】 文本框的应用

    [教学设计]  文本框的应用 康汝燕 内蒙古乌海市特殊教育学校 [教学内容]   插入文本框 [教材分析]      本课是在聋生已学习掌握了Word软件中的简单的编辑之后,指导学生在Word软件中利 ...

  • 主题乐园环境的设计原则应把握哪些方面重点

    主题乐园作为一种人工旅游环境,与人的游乐行为密切联系.从游乐行为的无规定性.不受约束性特征出发,主题乐园环境的设计原则应从以下几个方面重点把握: 主题乐园环境的设计原则应把握哪些方面重点 1.多样性和 ...

  • 最简单直接地理解Java软件设计原则之里氏替换原则

    理论性知识 定义 里氏替换原则,Liskov Substitution principle(LSP). 抽象定义是下面这样的 如果对每一个类型为T1的对象O1,都有类型为T2的对象O2,使得以T1定义 ...

  • 管道布置设计原则与相关工程规范

    管道布置设计原则.基本要求管道布置设计必须具备的条件应遵守的国家和行业法律法规.设计标准以及规程规范工程设计统一规定工艺流程(系统)图设备布置图设备表.设备图相关专业的设计条件(总平面地形图.厂房建筑 ...

  • 菜鸟记279-用好文本框,改造PPT页面一分钟就可以很漂亮

    也许您身边的盆友正好需要呢? 关键词:PPT2016:文本框:填充:页面美化:操作难度*** 近期,小菜帮一个好盆友改造他的PPT,原图是这样的: 图 1:原来的页面示意图 小菜分析:作者为了契合主题 ...