「认知」和「交互」两个维度,总结WEB表单中的设计细节

2022-08-0311:30:26交互设计Comments1,063 views字数 3062阅读模式

《Web Form Design》一书中,作者认为「表单决定了最关键的界面中交互的成败」。作为B端产品中最广泛的设计形式之一,表单有各种设计方法和技巧,也充满了各种不确定性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

今天我就从「认知」和「交互」两个维度,总结下表单中的设计细节,希望对大家有所帮助。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

一、认知策略

1. 表单排列

表单承载的主要功能是向用户清楚地传达信息,单列表单形式更利于用户浏览动线,帮助用户识别和填写内容。而多列表单形式用户的视觉横向移动范围更大,浏览和填写效率更低。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

例如QQ邮箱设置页面中,选项都是采用了纵向布局的方式。当然这种布局方式是比较理想化的,是与场景相匹配的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

首先作为设置界面,并非高频操作业务,用户只会调整部分内容,而不是全业务的操作。所以更强调信息的查看,纵向布局更有利于浏览。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

其次,表单项内容应并不复杂,即使采用纵向布局,对整体的表单长度影响也比较有限。另外配合底部常驻按钮,对用户的操作效率影响不大。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

而在B端输入型表单中,本身内容填写的任务就比较重,所以需要适当控制表单的整体长度,因此一味地追求浏览动线也是不可取的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

2. 输入框长度

1)输入框排版文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

如下图所示,右图采用的是错落有致的排版,左图更加整齐划一。但是相比较而言,似乎右图的诗句舒适度更高。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体,但左图过度的对齐导致暗示隐性的截断,我们会感觉表单列右侧空间缺了一大块。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

所以表单中要注意整体的协调性,不要为了对齐而对齐。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

2)输入框长度的暗示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

输入框的长度具有一定的暗示作用,因为用户会认为它是与输入的内容是相对应的。尤其是邮政编码、电话号码和银行卡号等长度固定的字段。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

在设计这类输入框的时候,可以采用与内容相互匹配的长度,避免过长引起用户对输入内容正确性的疑虑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

下图即一典型案例。在上图中,不需要花多少钱的金额输入框进行等宽处理,容易误导用户对所需输入金额的判断,造成用户的不安全感。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

3. 必填与选填

必填和选填是表单的基本信息,用来引导用户识别关键信息,做出行为决策。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

通常必填字段较少时,优先采用星号(*)标注显示,更好地提高信息识别效率。当必填字段较多时,则可以标注选填项的方式,避免出现满屏星号,增加额外信息量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

但是同一个系统中建议还是采用统一的标记方式。我个人更倾向于星号(*)方式,用户成本低,对内容干扰性更小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

4. 识别好过记忆

这是尼尔森十大可用性原则之一,要求能够通过各种方式给予用户足够的信息,减少用户的记忆成本。在表单设计中,主要是各种提示信息辅助用户完成表单填写。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

1)主动性提示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

对于开放性、复杂的、超出用户认知的输入信息,需要做出主动性提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

例如在阿里云、腾讯云中,很多名称字段都是需要以字母开头的。而普通用户为了便于信息的识别和记忆,更习惯于中文命名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

这种情况下,表单中就需要默认给出填写说明,减少用户的记忆和出错概率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

另外一些具有限制性的规则,对用户的操作会产生直接影响的,也需要显性地告知用户,尽量避免出现理解偏差,带来用户投诉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

主动性提示可以通过输入框中的「占位标签」告知用户;不过过长的提示信息通常放置在输入框下方,便于用户查看。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

2)交互性提示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

还有一种提示增加了信息交互。例如密码设置时,光标停留会触发密码规则提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

既保证了默认界面信息的精简,又可以保证提示的有效性。用户输入时,还会进行内容校验反馈,交互性更强。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

3)被动性提示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

对用户而言,解释说明、帮助信息更偏向于业务属性。随着用户深入使用产品,这些信息会变得不再重要,用户查看的频率也会越来越低。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

所以这类信息通常被默认收起,减少界面的信息量,用户在需要时主动触发查看。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

5. 主任务与分支任务的协同

有些展示型表单,主要是为用户提供信息服务的。但是为了保证操作链路的流畅,会加入一些分支任务。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

例如任务预览时,会增加「发布」或者「编辑」功能,便于用户直接完成二次操作;或者智能报告表单中会增加人工「修正建议」,对内容进行纠偏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

这些操作只是可选项,并不是用户必需的操作行为。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

如果按照顺序将信息罗列展示,这些内容会被放在页面底部。长表单场景下,这些信息会无法直观展示,用户难以感知。所以需要为这些支线任务增加额外曝光。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

例如顶部的引导文字按钮,借助定位锚点,实现路径直达,提高操作效率;或者采用底部浮层弹窗的形式,方便信息的填写及表单内容的查看。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

具体的设计方案有很多种方式,需要根据场景和用户确定。但是设计师需要能够将主任务和分支任务进行有机的协同,保证用户对页面内容的全感知和操作效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

6. 数量级的影响

有些时候我们不得不面对很大的数据量,这对设计师和用户都是一个挑战。设计时,我们需要根据信息量做出合适的设计方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

信息量比较大时,首先要进行内容拆解,按照用户的认知习惯完成信息分层,让用户不要直接面对大量数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

例如通过树表结合,或者双层关联下拉选择,逐步缩小用户的目标范围。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

某些场景下,还要增加辅助搜索功能,让信息筛选更加简单文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

二、交互策略

表单设计除了静态展示效果外,还有大量的交互操作。主要的设计目标就是「效率」和「防错」。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

1. 操作效率

1)减少用户输入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

虽然PC端输入比移动端更加便捷,但是输入型操作对用户而言成本仍然较高。一方面用户需要思考应该填写什么内容,另一方面需要准确地完成内容输入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

而选择的成本相对更低,因此在表单设计时,尽可能让用户以选择的方式完成任务。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

例如邮箱在上传附件时,如果邮件没有填写过标题,会将附件名称直接填入邮件标题中,减少用户输入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

2)合理预设文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

表单信息可以通过信息的抓取、内容关联度分析,预设合理内容值,减少用户的操作。例如QQ邮箱设置时,系统提供了默认话术,用户只要快速启用即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

对于如证件类型、手机区号、国籍等较为通用的选项,为用户提供默认选择,同样可以有效简化操作步骤,减轻用户输入,帮助用户更快地完成表单填写。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

2. 业务流程顺畅

当我们在填写A任务时,需要关联选择B任务。而B任务并没有创建,该怎么办呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

通常情况下,需要在A任务中完成创建B任务。例如弹窗、抽屉、甚至是新开页面的形式,保证主流程的畅通。否则对于高频操作的任务,会严重影响用户的操作效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

如果由于各种因素,在流程中无法直接创建分支任务,或者由于各种限制条件阻断用户操作时,该怎么办呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

此时需要在任务开始前,给用户足够的信息提示。避免用户已经填写了部分内容后,发现缺少相关的内容,导致任务无法完成。这会带给用户非常糟糕的体验,尤其是会消耗用户较大精力的工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

3. 保存机制

表单填写时,可能会遇到各种异常场景,需要有防错机制和保存功能,避免用户误操作时造成信息丢失。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

「认知」和「交互」两个维度,总结WEB表单中的设计细节文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

4. 即时反馈

表单填写是为了向用户收集正确有效的信息,所以需要在用户填写完成或者提交表单时增加校验机制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

校验机制分为前端校验和后端校验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

前端校验无需服务器传输数据,前端页面会根据校验规则,对输入完成的内容进行验证。例如邮箱格式、手机号长度、密码是否符合规则等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

后端校验需要将表单内容传入后台数据库进行匹配,不匹配则会将信息反馈至前端页面。通常用在点击提交按钮后,例如账号不存在、密码错误等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

前端检验可以帮助用户及时发现问题并修改,纠错的效率更高。后端校验相对滞后,出错后用户需要自行定位错误项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

无论采用哪种方式都要告知用户错误原因,帮助用户快速解决问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

三、写在最后

表单设计是设计师绕不开的内容,无论用什么方法论也无法穷尽其中的可能性,也没有一套覆盖所有场景的设计模板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

设计师需要根据实际的业务场景,去完成合适的设计方案,并在不断的实践中积累经验,总结得失。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

子牧先生。公众号:子牧UXD(HelloDesign)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/jiaohu/26501.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/jiaohu/26501.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定