首页

如何进行表单体验优化-中台系统

分享达人

本篇文章将分享Web端表单体验优化等相关内容,分析设计师在设计B端类产品时如何让用户愉悦并高效的填写表单。表单作为基础通用组件,也是在各个企业级中台中出现频率最高的元素之一。在用户界面中表单无处不在,比如:用户注册登陆页、支付页、用户反馈、共享信息数据录入等不同类型的表单。当我们使用/设计表单页面时看似是按钮、输入框等表单组件进行组合搭配使用,看似简单,但是在实际业务使用中却有着无数可推敲的细节冒出来,常常给设计师造成较多的困扰。

后台表单设计中的思考

分享达人

表单页作为B端设计中常见页面之一,在设计过程中如何解决用户的问题如何降低使用者的录入负荷。一点小小的经验供大家参考~在使用表单组件、或设计表单页面时,很多设计者都是根据自己的直觉或者个人经验本能驱动解决排列、布局的一些问题。但又会有很多的疑惑会从过程中冒出来困惑设计师,导致自己的设计很难使产品、开发等信服。每一个设计都离不开解决某问题或达到某个预期,好的表单设计往往都能让用户快速get到关键信息同时快速准确录入信息,降低使用者填写负荷。带着这样的设计目的结合业务内容将表单进行分组,结合适当的设计策略,这样能使设计方案更加有理有据。

网页后台设计:列表设计、表单设计

分享达人

一个完整的后台,由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成,下面跟大家分享后台中的表格和表单的设计细节当接到一个全新的网页后台项目时,首先确定设计风格,然后考虑这个后台尺寸是做居中固定式,还是全屏响应式(上一篇文章已经跟大家分享了网页设计的画布尺寸)。全屏响应式的网页设计,选择怎么样的屏幕来做效果,就显得有些主观了,除非有规定,否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然,不管选择什么尺寸,都得基于做好一个后台而开展工作。

后台系统中,如何高效的设计表单-标签篇

分享达人

表单在我们的工作生活中非常见,表单对于企业和个人同样至关重要,当涉及到数据收集时,我们大多数情况下会采用表单。比如,我们在出国申请护照的时候,我们需要填写的纸质的申请资料,就是表单。我们在淘宝京东下单买东西时填写的个人信息,地址的时候,也是表单。表单有数据收集,校验和提交的功能,其中核心功能是采集数据信息,可以看成是采集、传递、提交数据的中间媒介。表其作为获取用户输入的重要交互方式,也承担着将问题和答案进行配对的角色。包含复选框,单选框,输入框,下拉选择框等元素。

B端-表单设计指南

博博

对B端表单的设计与使用场景进行了详细的总结和归纳

看完本篇文章,你会学到以下内容:
1, 什么是表单页?
2,表单页设计原则
3,表单的构成
4,表单的交互

5,页面布局
6,提升表单易用性
7,体验衡量指标

一、什么是表单页

1.1表单页满足的核心场景

1、采集/录入数据信息。2、编辑数据信息。3、特殊的条件设置。后台产品的本质是针对数据的增、删、改、查。而增、改、查都可以用表单完成。

1.2常见的应用场景

OA系统里面的请假申请,报销申请,录入员工,新建会议。教育类的创建课程。HRM系统里面发布职位以及物联网管理系统新建设备等等。

二、表单页设计原则



2.1明确

用户快速定位重要信息和目标选项同时文案和组件能够准确传达相应含义

2.2高效

整体表单排布有合理的交互形式;科学的信息布局和组织形式;尽可能“少操作一步”用户在面对50和表单和500个表单的心理压力是不一样的。

2.3安全

操作前:提示和防错。

操作中:实时反馈与纠错

操作后:合理的保存、清空、取消、撤销机制。

三、表单的构成

表单通常由表单标签、表单域、提示提示、操作按钮四部分构成。 



3.1表单标签



左标签

优点:表意明确,节约纵向空间,多用于web端

缺点:不太适用于移动端等狭长空间

顶标签

优点:对齐舒适,节约横向空间,多用于移动端及英文场景下。

缺点:纵向空间利用率不高

行内标签

优点:最节省空间,多用于注册登录

缺点:输入状态标签消失,用户陷入迷茫





左对齐标签

视线从标签移动到表单域时间为500ms,这比右对齐标签所用的时间长的多,所以更适合阅读,用于详情的陈列。

特点:阅读效率高,操作效率较低;

右对齐标签

视觉动线参差不齐,不适合高效阅读,但适合高效操作,更适合表单填写。

特点:阅读效率不高,标签指向明确,操作效率高

3.2表单域



如何定义输入框/选择框大小?

步骤一:根据业务已经有的字段长度定义4-5种宽度规范,建议宽度可以是8或者是40的倍数。



步骤二:根据你要搭建的表单,选用合适的规范,长度与输入预期成正比。有人会说排出来的表单左边没对齐,右边也没对齐,其实这就是B端产品特征那就是是好用大于好看,就要给用户一种心智那就是给你的这个长度那就是要输入一个这么长的内容。



3.3提示信息

避免“正确的废话”:给不到用户任何的帮助还增加了用户的阅读成本。



提示信息用哪种展示方式?



3.4操作按钮

按钮常见位置:一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。

按钮阅读顺序:按钮出现页面右上角或右下角时,阅读顺序是从右往左,这符合pc端操作习惯以及人阅读习惯。按钮跟随表单内容或在表单内容底部时,阅读顺序为从左往右,这符合人的填写顺序从上往下,从左往右。



底部按钮右对齐:一般用在弹框,因为弹框页面比较小,右对齐比较符合操作习惯。

底部按钮居中:一般用在页面中,因为右下角操作距离会有点远,所以表单用页面承载的话按钮建议居中。



3.5字体和间距规范

表单中字体全部统一采用14px。表单上下间距一般有三种,1.内容与内容间距为24px。2.内容与说明文案间距为4px。3.内容与子内容间距以及及子内容之间的间距为8px。



四、表单交互

表单交互方式有四种。1.原位编辑;2.气泡卡片;3.弹窗/抽屉;4.页面跳转。

原位编辑

编辑内容即为展示内容,容量低于5个时使用。



气泡卡片

设置项与看板内容紧密相关时使用气泡卡片,建议设置项低于5个。



弹窗/抽屉

设置项与看板内容可以有关联也不可以没有,大于三个以上的录入项使用。



如果录入项较多,用弹框承载出现翻页的情况下可考虑使用抽屉。



页面跳转
如果容量超出了弹框/抽屉的承载量并且录入项与看板没有那么强的关联性可采用页面跳转的方式。

五、页面布局

页面布局方式有四种。1.分组;2.锚点定位;3.标签页;4.分步骤

5.1分组

5.1.1标题分组 

设置项超过7个;彼此间的关联性较弱且可以分类去归纳




5.1.2卡片分组
有多个设置项,多个分类;彼此之间的关联性更弱,分类明确




5.2锚点定位

有多个分类的情况可通过锚点定位迅速找到相关信息



5.3标签页

彼此之间没有特定的相关性,可以独立设置。每个设置包含了多个录入项且使用了标题分组。



小结
当录入项少于7个时使用基础布局;当录入项在7-15个时可采用标题分组,卡片分组、锚点定位布局;当录入项大于15个时需采用标签页布局。

5.4分步骤

利用步骤条将大型,复杂任务拆解为多个部分,并按照相关性分组。



建议3种分组依据
1.采用必填项划分,把必填的选项分在一起;2.采用相关性划分;3.以操作成本划分。把好填的简单的表单放在前面,复杂的放在后面。


六、提升表单易用性

提升表单易用性方式有5种。1.信息降噪;2.清晰易读;3.高效智能;4.防错纠错;5.所见即所得

6.1信息降噪

场景一:当表单中大多数都是必填只有极少数非必填时



场景二:表单项非必填项比较多,可将低频的非必填项收起



6.2视觉清晰

场景一:尽量采用单列布局,视觉动线流畅,不容易遗漏信息;按enter键换行。



场景二:如果出于业务方需要,必须在横向添加内容,那最好有一定的分组依据。但这样就不应该出现竖向分组,以免遗漏信息。



6.3高效智能

6.3.1根据上下文信息可以自动获取的,无需用户再次填写。

例如根据手机号带出用户姓名;根据地址带出邮政编码;根据身份信息带出生日。

6.3.2提供合适的“默认项”。

例如根据行业现状提供常规的比例分配;根据定位把地区做默认的填充。



6.3.3提供搜索、联想,自动显示匹配的信息

用户在进行输入等操作时可以提供智能辅助,例如表单填写时对需要录入信息的区域提供辅助提示,通过自动补全或联想词来帮助用户快速录入信息,在保持用户的操作自由度的情况下提效。



6.3.4 OCR识别文件内容

对于一些标准证件信息的录入,可以通过OCR识别文件内容。当用户上传图片后,运用图像识别技术提取关键信息并自动填入结果。



6.4防错纠错

6.4.1对于长数字,四位一空格,用来分段

例如输入银行卡号;充值场景下输入手机号等



6.4.2为用户封闭不正确道路

将超出时间选择范围的日期置灰。电话号、身份证录入时只允许输入数字同时设置字数上限。



6.4.3告诉用户哪里错了,而非简单粗暴的错误提示



6.5所见即所得

表单页对填写的物料内容进行映射,展示真实效果预览,降低用户心理的不确定性。适合对移动端、小程序、H5页面的设置。



七、体验衡量指标

体验衡量指标有4种。1.任务完成率;2.任务完成时长;3.必填项目数;4.易用度评分

7.1任务完成率



7.2任务完成时长



7.3必填项目数

结合业务场景给出最适合的必填项设定,提高用户填写效率。

7.4易用度评分(用户完成某项任务的难易程度

易用度可通过调研问卷和评分量表获取。



作者:鲲sky    来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

简约设计4原则在表单设计中的应用

分享达人

随着B端体验设计的发展,表单类页面已经形成了一定的设计模式,例如登录页面,场景比较明确、业务流程和设计模式都比较成熟了。

业务型表单设计与业务强相关。既需要考虑交互带来的用户体验,又要从业务角度出发满足用户的行为需求,相对比较复杂。不过也形成了一些固定的设计方法。今天我们先来看看「精简」策略。

本文主要内容:

✦ 删除,实现表单轻量化

✦ 组织,让表单更加有层次

✦ 隐藏,让表单更加灵活

✦ 转移,扩展表单的异步空间


表单是系统与用户进行沟通的语言,它应当符合双方的认知逻辑。因此表单设计时,需要解决「产品」和「用户」2个方面的问题:

✦ 表单需要用户提供哪些信息,保证信息的正常流转和业务的完整

✦ 用户如何理解这些信息,如何更好地帮助用户完成表单填写

尤其是面对复杂表单,需要从这两方面寻找到突破口。

✦ 在业务层面,设计师需要探究用户的实际需求,反思表单项是否必要,从而减少不必要的选项,提高用户效率。

✦ 同时在设计层面,还需要基于用户认知习惯,通过合理的信息组织、交互形式帮助用户完成表单任务。

复杂表单通常包含多种业务场景,并且与其他业务存在关联和嵌套,导致表单内容信息量较大。我们需要通过「删除」、「组织」、「隐藏」、「转移」4个交互设计原则,让表单页面更加简单、有效。



▎01 删除,实现表单轻量化

前几年,我们在银行或者移动营业厅开通一些新业务时,都会填写表单,通常是密密麻麻一堆信息。但是实际需要填写的内容可能只有2~3项,业务人员会特意勾选出来给客户,其余的都是非必填项,或者是业务人员填写的。

线上表单设计时,没有专门的业务人员指导,用户更容易迷失。所以设计师或者产品经理的首要任务就是尽可能地减少表单信息量,降低用户的认知负荷。

最近在做一个表单的优化,业务方要求增加“入参”、“出参”两个表格项,说是用户会看。与用户沟通后,反馈也说“会看一下”。但是在深度挖掘用户场景后,发现用户确实会查看这个信息,只不过不是在当前环节查看,而是在结果项中查看。

所以我们最终去掉了这两个信息量较大的表格内容,从而让整个表单的信息量得到了明显的下降。因此面对复杂长表单,我们需要从需求入手,判断是否有必要让用户提供如此多的复杂信息。

▎02 组织,让表单更加有层次

当我们不得不面对复杂表单时,如果采用简单内容平铺,用户看到的是满屏的散点信息,造成信息识别困难,用户一时间难以找到填写思路,反而增加用户的心理负担。因此信息的层次性,对于复杂表单至关重要。

首先要从内容和视觉层面让复杂信息变得清晰、规整,更加符合用户的认知习惯。例如,可以利用分组标题、分割线、卡片,按照不同信息的类别、属性和相关性进行区块划分。

根据不同的布局和交互,主要有以下4种表单设计模式。



1、顺序表单

表单分组后,可以按照业务逻辑顺序铺开展示。用户只要按顺序填写就可以了。但是对于超长表单,这种布局方式下,用户无法全览页面信息。页面上下滚动、定位查找带来的交互成本比较高。

1)平铺表单



2)卡片表单



因此顺序表单更多地用在业务信息比较简单的场景中。

2、锚点表单

为了解决长表单的定位效率问题,可以在顺序表单的基础上增加锚点。另外锚点还可以帮助用户快速了解表单所包含的内容模块。

根据锚点的布局,可以分为横向锚点和纵向锚点两类。锚点需要吸顶方便用户操作。本质上来说,锚点表单是顺序表单的优化版本。






3、标签表单

如果长表单内容没有依赖关系,还可以将表单拆分为几个相互独立的标签内容,这就是标签表单。



不过标签表单更强调内容的并列关系,常用于配置表单中,例如 MAC 或者 Windows 系统的配置弹窗。标签表单在全新表单中应用较少。



因为标签表单容易造成内容遗漏,并且无法告知用户哪些标签已经填写,哪些标签未填写,或者无法清晰展示校验信息。来回切换标签查看信息,也会影响效率,因此主要用于用户有目的的配置行为中。

4、步骤表单

步骤表单是一种常见的表单拆分方式。通过节点将子表单串联起来,形成一个完整的业务闭环。例如阿里云的云服务器订单流程,或者一些开户流程等。



步骤表单有几个特点:

1)过程串联

理论上来说,步骤表单有明显的操作顺序,用户需要按照节点完成内容填写,因此不会产生信息遗漏。当然也可以根据实际的业务场景,设置选填节点。但是总得来说,步骤表单更强调的是顺序操作。

2)业务引导性

对于复杂业务,步骤表单可以将分散在不同页面中的独立业务串联起来,在一定程度上具备新人教学功能,帮助用户了解业务逻辑。减少用户自定义操作时在不同页面的跳转,从而提供新人用户的操作效率。例如系统配置向导类的步骤表单。

3)逆向操作

由于步骤表单存在正向和逆向操作,因此设计时还需要考虑清楚逆向操作的设计逻辑。例如:

✦ 当用户想要修改前面步骤信息时,除了逐步返回,是否可以步骤条直接跨节点修改?

✦ 用户中途退出表单后,重启时是从第一步开始,还是直接从未填写的步骤开始呢?

✦ 用户如果完成了步骤条表单填写,想要二次修改时,是用普通表单,还是仍然使用步骤表单形式呢?

4)节点的平衡性

步骤表单可以分拆信息,化整为零。但是信息节点也不能过多,否则同样会影响用户的操作效率。所以要减少不必要的流程节点。

最近在做设计时,发现步骤表单最后一步是内容预览。通过用户调研发现,部分用户会谨慎地预览前面4步填写的内容。而另一部分用户则认为,刚填写了内容不需要预览,强制预览的设计并不友好。该如何平衡设计呢?

最终我们选择了将预览节点取消,将预览功能调整到第4步,采用「预览」按钮的形式。既满足了部分用户预览的需要,另一部分用户也可以不做预览,直接提交申请。

所以步骤表单过程中的节点具有一定的强制性,需要谨慎对待,保证节点的合理有效。

▎03 隐藏,让表单更加灵活

1、模块隐藏

表单实际上是任务信息的集合,为了具有更高的适配性,内容通常是多种场景的集合。而场景有高频、低频区分,对于高频信息需要优先展示,便于提高用户的填写效率;对于低频场景,可以隐藏弱化展示,从而降低整个表单的复杂度。

例如我们常见的「高级配置」,通常在表单的底部默认收起展示。



2、信息隐藏

复杂表单中信息会出现多级信息共存的场景。这种场景下,复杂表单默认展示当前选项对应的子内容,隐藏其他选项的内容,从而提高信息的指向性。



3、合理的组件形式

比较典型的就是单选和下拉选择器如何选择。有人为了强调效率,一味地追求单选按钮平铺展示,认为单选更加直观,用户不需要点击下拉滚动查看备选项。但是用户同样需要逐个浏览选择,反而增加了整个页面的信息量。

所以单选框更多用在备选项较少的场景,如果备选项较多,建议优先采用下拉选择器,隐藏备选项。

▎04 转移,扩展表单的异步空间

1、信息转移

在表单设计时,可以将部分二级信息转移到弹窗、抽屉中,利用浮层空间拓展业务内容,根据用户操作逐级加载出来。从而减少表单的信息量。

例如下图中,没有将「所有配送区域及运费」直接展示出来供用户选择,而是放在了弹窗中,表单中只呈现最后的选择结果。既简化了表单的内容,又让选择结果更加突出,方便用户的查看和校验。



2、记忆转移

现在很多浏览器都增加了密码存储功能,减少用户记忆成本。而在电商购物网站可以设定默认的收货地址。系统自动读取调用,从而减少用户的输入操作。

3、行为转移

现在越来越多的网站支持「手机短信验证码」免密注册登录方式,或者第三方登录方式,或者手机端扫码登录。将原有的表单填写转变为系统行为,从而降低用户的行为成本。



好了,以上就是我总结的表单设计的内容~

重复一遍:

✦ 删除,实现表单轻量化

✦ 组织,让表单更加有层次

✦ 隐藏,让表单更加灵活

✦ 转移,扩展表单的异步空间

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系。 

作者:腾讯ISUX团队    来源:子牧先生


分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

表单的用户体验,细节都在这里了!

分享达人

对于我们设计师来说,尤其是现在 B 端设计如此流行的情况下,表单设计细节尤其需要各位设计师注意。今天会分享表单设计中那些你不注意的细节点,必须先点赞收藏了,这些干货知识相信你一定用的上。

比如以登录为例,当你把密码输错后,网站清空你刚刚才填好的表单,是不是非常让你崩溃?删除所有数据对用户来说很烦人,这会让你必须重新输入用户名和密码,即便只是拼错了密码而已。

因此,任何专业的用户体验设计师不仅应该考虑顺利的流程情况,还应该考虑失败时应该怎么办。

错误提示

错误提示应该让用户容易找到原因并方便理解。否则,他们可能没办法解决这些错误。所以对于设计师来说,一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么,如果可能的话,最好也提供解决方案。



左边的错误信息很清晰的解释了发生的问题,右边的错误信息对用户来说非常困惑。

1. 什么时候告知用户发生了错误比较好?

当用户出错后,首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式:

内联/实时:在输入时或移开焦点后立即提供反馈;

提交后/客户端:当用户点击提交按钮之后;

服务器端:当请求发送到服务器后再返回反馈给用户。

这些方法中的每一种都有其优点和缺点。

2. 内联验证

一般来说,当表单非常短小时用内联验证,因为它允许在内存中的数据仍然最新时更正错误。



你可以用内联验证立即告诉用户哪里错了。

3. 提交后验证

另一方面,当表单很大且需要保持关注时,你希望帮助用户保持专注,而不是通过不断显示错误来打断他们。

4. 服务器端验证

服务器端验证是最不友好的方式,但却为网站提供了很高的稳定性。当需要二次检查用户的数据时,这种方法最有效。

5. 如何提示用户错误?

错误提示告诉用户他们做错了,但是他们究竟做错了什么,要如何修复它?很显然,清楚地说明错误,而不仅仅是显示 Error:90803,对用户有很大帮助。

6. 使用积极语言而不是消极语言

错误提示措辞要使用积极语言而不是消极语言。例如,如果用户遗漏了一个字段,与其说”该字段不应该是空的“,不如说”请填写此字段“。当使用积极语言时,用户不会因为一个错误而受到责备,这能减少用户的焦虑感,减少流失。

7. 必要时提供帮助

在某些情况下,用户无法自己修复错误,他需要额外的帮助。例如,当用户无法登录时,大多数应用只提供找回密码,而没有找回用户名。但事实上,用户名和密码都可能会忘记。因此,在这种情况下,尝试提供所有必要的操作和信息资源来帮助用户解决问题。

标签

标签是表单可用性最关键的组成部分。如果标签不清晰,那么其他元素就算把可用性做得再好也没意义。所以,不要让用户来猜测这里面到底要填什么内容。



用不要用一些模棱两可的词,比如‘数字’可能会让人感到困惑,一定要明确意思。

1. 将标签放在输入字段的顶部

许多研究表明,将标签放置在输入字段的顶部可以帮助用户更快地填写表单,因为它允许用户遵循一条垂直线而不是 Z 模式。但是,如果它占用太多的垂直空间,您也可以使用浮动标签。因此,如果你希望用户更快地填充表单,请将他们放置在字段的顶部。



将标签放置在字段的顶部和使用浮动标签,这两种方式都很有效

2. 将标签放在输入字段的左侧

另一方面,当你询问用户比较复杂的问题,用户需要更多时间思考问题答案的时候,研究表明将标签放在输入框的左侧会比较好。



3. 标签应该是可见的,无论什么输入状态

无论你用什么方式,确保当用户填完内容后,标签是可见的。因为,当用户需要再次确认表单内容的时候,他们不用删除填好的数据来查看系统需要他们填什么。

4. 减少不必要的输入项

要填的表单越多,用户就不愿意填完它。所以尽可能地为用户减少不必要的输入项。如果实在做不到,可以将必填和非必填的字段区分开,减少用户的负担。

5. 可见性

不管状态如何,字段都应该是清晰可辨的。此外,活动字段和非活动字段之间的区别应该要明显。




用输入字段应该有高对比度,在所有状态下都是可见的

6. 自动激活 PC 端表单的第一个字段

自动激活表单的第一个字段,这可以提高处理效率,避免用户额外点击。

7. 帮用户预先填好

在某些情况下,你可以帮用户预先填好字段。例如,可以很容易地检测到邮政编码,或者某些数值可能是频繁的。在这些情况下,为用户填充字段。

8. 格式

含有大量小数的数字很难读懂。因此,当要求较大的数字时,需要考虑添加格式以支持可读性。例如,在询问卡号时,使用自动格式化:读取 5678-9876-9738-8394 比读取 5678987697388394 容易得多。

此外,当请求需要特定格式化数据时,要包含一个实例,让用户准确理解要填什么。



输入字段的大小应该与他预期的数据大小相对应

10. 为桌面系统设计灵活的表单

在键盘和鼠标之间切换很烦人。在理想的情况下,用户应该只使用一种媒介来填写表单,但有时,这是不可能实现的。因此,如果用户需要多种媒介来填写表单,至少要尽量减少切换。为此,将需要同一种工具的输入组合在一起。

另外,当创建一个网页表单时,要确保用户可以只使用键盘来浏览表单——使用TAB和方向键。

11. 为移动端系统设计灵活的表单

当在移动设备上时,将你显示的键盘与用户必须输入的数据相匹配。我们经常看到需要数字键盘的输入可以很好地实现这一点,但几乎很少有 APP 显示支持输入电子邮件地址的键盘。



输支持通过显示正确的键盘输入电子邮件

下拉菜单 vs 单选按钮

下拉框的使用比单选按钮更有挑战性,因为它需要额外的点击来打开它们。此外,用户无法提前看到选项,这可能会让他们感到困惑。因此,如果你只有少量的选项,使用单选按钮。如果选项的数量超过 4 个,下拉菜单的效果会更好。

1. 复选框

通过勾选复选框,用户应该是同意某些内容。我的意思是,他们应该说,“是的,我想要这个”,而不是,“是的,我不想要这个”。不幸的是,我经常看到有误导性的复选框试图在创建账户时欺骗人们订阅他们的产品。当你不想订阅他们的通讯时,你又必须勾选复选框,像这样的伎俩对信誉是不合适的,所以不要动心使用它们。



通过勾选复选框,用户应该同意某些内容,而不是确认他们不同意。

结构

一个结构充分的表单就像一个与用户的良好对话。所以记住这一点,仔细规划结构。

1. 从简单的问题开始

从简单的问题开始,从用户已经很清楚知道答案的问题开始,像名字、邮件这类。然后再循序渐进问稍微复杂的问题,像账户信息之类的。

首先,一个很自然的顺序,当你第一次见某些人的时候,你会找一些比较好切入的问题,比如叫什么名字啊之类的。其次,当用户已经填了一些字段之后,那么之后会增加他填完表单的机会。

2. 创建逻辑信息块

将不相关的信息按逻辑分组。例如,你可以将结帐表单分为“个人信息”和“帐户信息”组,将信息分组可以帮助用户一次只考虑一个主题。



通过对相关信息进行分组,使表单可被快速扫描

3. 单步 VS 多步表单

当你有很多问题要问的时候,你可能想知道哪一个最有效:单步流程还是多步流程。一般来说,单步表单的转化率更高,因为它看起来更小,而且不会劝退用户。如果你询问基本信息并希望用户快速填写表单,单步表单就非常不错。

当用户被要求必须填写更多复杂信息时,多步表单会更好。为了帮助用户在进行多步骤填写时不至于失去耐心,可以给到进度条,提示还剩多少步。

4. 单列 vs 多列布局

一般来说,用单列布局会更好,因为可以帮助用户更好地扫描,也可以尽量减少用户遗漏填写。

但当用户多次填写同一个表单时,他们更喜欢多列表单,因为这样不会浪费时间滚动。一般来说,在 B 端应用中这种多列表单会比较合适。

按钮

设计可用的按钮对提高转化率至关重要。如果按钮上的文字内容比较模糊,会容易劝退新手用户。



根据用户按下按钮会发生什么来命名按钮

1. 提高用户的容错率

对于更复杂的表单来说,按钮最重要的一点是,应该有提交和取消表单的单一方法。用户应该至少有补救的机会。举个例子,如果用户点了在线帮助时,他已经填好的数据不应该被丢失。或者,如果用户由于意外点击了按钮,请求不应该被提交。

2. 主要按钮和次要按钮应该很容易区分

为了避免点击错误的按钮,用户应该能比较容易地区分主要和次要按钮。另外,最好不要只依赖颜色,样式上最好有比较大的差异。




让主要和次要的按钮样式上有比较大的区分度

3. 正确的标签按钮

按功能明确地标注按钮。例如,如果按一个按钮可以创建一个账户,在按钮上的文案叫”创建账户”要好过“提交”。

总结

当用户打开表单时,他首先肯定是想要填完它的。尝试帮助他们而不是用糟糕的设计给他们设置障碍。

不幸的是,这里面提到的许多错误,并不需要多么高级的技巧,而是因为设计没有同理心。仔细思考你的设计流程,检查是否能让所有内容对不同背景和专业知识的人都是清晰的。

通常来说,一般要达到以下目的,大多数指导原则都来自这些规则:

用户应该只输入一次数据

用户应该填尽可能少的信息

用户应该只需要记住少量的信息

用户检查和恢复错误内容应该要很容易

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系

作者:nanaOMO   来源:站酷

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


如何提升表单的易用性及数据量化

雪涛

表单在B端产品中是重要的组成部分,设计表单是比较考验设计师综合能力和设计细节的。一定程度上,表单设计的好坏也决定了产品的成败。


在实际项目中随着B端产品的复杂化,出现冗余的视觉干扰信息,降低信息传达的效率,使得用户认知成本高,操作难度大。那么对于表单如何提升表单的易用性又该如何数据量化易用性呢?本文从4大方面阐述全面提升表单的易用性并验证。


一、表单的构成及应用场景


表单由表单标签、表单域、提示信息、操作按钮组成。


二、为什么要提升表单的易用性


在我们设计B端产品的过程中,总会遇到用户信息填写逻辑混乱、资料收集不全的状况,导致用户在浏览和编辑时的操作体验大打折扣。主要反映在以下几个方面:


1、用户浏览信息顺序混乱,信息层逻辑不清

2、不同信息内容风格及交互不统一,用户难以建立统一心智

3、产研协作与资产沉淀之间有断层,无法有效沉淀与跟踪管理

4、整体页面操作时间长,用户跳脱率高

5、用户客诉数据高



三、如何提升表单易用性


提升表单易用性的4大原则:易阅读 、易操作 、安全感 、所见即所得


1、易阅读


a、采用扁平化设计,化繁为简,去除冗余的视觉干扰,使得页面更加简洁清晰。

如:当必填特别多时,就不用都标出来了,只需要单独标出非必填项即可,最大化得信息降噪。


b、尽量采用单列布局,视觉动线流畅,不容易遗漏信息;按Enter换行,可以最大程度得提升表单的输入效率。此处的用户心智与操作效率比屏幕利用率更为重要。


c、面对多行或复杂表单可以采用逻辑分组+合适的折叠度,提高页面有效信息的透传,增加用户填写表单的效率,让用户快速填写,快速离开。


2、易操作


a、为用户提供合适的默认项,可以减少用户操作步骤,提高填写效率。


b、在表单中填写上部分信息即可自动获取下面信息,无需用户再次填写,也大大增加了操作效率。


c、根据搜索、联想,自动现实匹配信息,大大减少用户记忆和认知的负担。


d、对于一些标准证件、文本信息的录入,可以通过OCR识别文件内容。当用户上传图片后,运用图像识别技术提取关键信息并自动录入。

如果图片不清晰或存在水印,此时也应提供修正渠道,可逐一校对并修改。


3、安全感


a、操作前给予正确提示,避免用户重复试错,缺乏安全感。


b、操作中给予实时反馈,为用户封闭不正确的道路。


c、操作后的提醒和纠错,告诉用户哪里错了,而非简单粗暴的错误警告。


4、所见即所得


边设置,边预览,适合对移动端、小程序、H5的配置。


四、如何量化体验度量衡


通过用户点击数据,辅助设计洞见。从4个方面量化体验度量衡:任务完成率、任务完成时长、必填项目数、易用度评分


1、任务完成率

通过埋点获取数据使用公式进行计算或让技术搭建看板直接看。新版上线后,用户会有一定的学习适应周期,最好选取一个月以后的数据,比较具有参考意义。


2、任务完成时长

数据分析发现,任务完成时长数据呈现伪正态分布状态,取众数最具代表意义。


3、必填项目数量

结合业务场景,减少不必要的必填项,只设置必要的信息填写,能自动获取则自动获取,减少操作步骤,增加操作效率。


4、易用度评分

通过在产品后台投放调研问卷,获取真实的用户,使用登门槛效应让其进行评分。最后可把被筛选的对象圈到访谈对象池,有机会可以成为产品成长用户。


五、总结


以上就是对于提升表单易用性及验证的思考,总结如下:


对于用户来说

提升表单易用性可以提高信息内容理解和操作效率,更便于管理账户

对于产品来说

提升表单易用性可以提升获取用户和企业信息内容的效率,优化企业框架结构,提升信息质量

对于设计来说

提升表单易用性可以提升信息获取效率,节约设计和开发成本


文章来源:站酷   作者:牛肉咖喱garry 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

设计输入框原来这么简单

雪涛

导读:系统设计当中除了按钮之外,文本输入框(Text Fields)应该是最常见的交互元素了。当你在淘宝买个东西,当你注册个新账号,当你买单输入个金额时,各种使用场景简直无处不在。可以说把握好输入框设计,我们的表单设计就成功了一大半。

一、「Text Fields」的基本结构

今天直接单刀直入不讲别的,直接把google的Material Design对于文本输入框结构分解图放上来,

  1. 容器(Container)
  2. 前导图标(Leading icon)
  3. 标签文本(Label text)
  4. 输入文本(Input text)
  5. 尾随图标(Trailing icon)
  6. 激活指示器(Activation indicator)
  7. 帮助文本(Helper text)

这里需要指出Material Design对于文本输入框结构是经过多年设计发展洗礼,然后基于它规范之下而生成的标准构造体。我们抛开一些非必要元素之后会得到一个基础版本文本输入框的构造。

一个表单项从结构上来看可以分为标签、表单域、提示三个主要的元素。

1、标签文本(Label Text)

“标签文本”该表单项唯一的名称,告诉用户填入什么信息。

2、帮助文本(Helper text)

“帮助文本”在该处位置可将提示用户的相关信息放置于此。

3、容器(Container)

“容器”用户输入文本信息区域,可以是单行文本,也可以是多行文本。

二、「Text Fields」的交互状态

文本输入框常规情况下具有4种交互状态:「默认状态」、「聚集状态」、「错误状态」、「禁用状态」

1、特别提下文本输入框通常情况下不具有「Hover状态」。

2、在设计聚焦状态的时候,需要注意用户光标的位置。比如:text fields的信息来源不仅仅于来自用户键入场景,同时还有可能用户从别处复制一段文字的场景。

三、「Text Fields」的外在样式

标签「Label text」的对齐问题是让设计师这么多年来一直头疼的问题,也是让设计师不断创新交互形式的源动力。它直接影响到用户对于表单的理解成本以及表单填写的完成率,下面我们就来聊聊一些比较常见的标签设计形式。

1. 「Label text」左对齐

标签文本采用左对齐,文本的长短问题又会导致部分较短标签文本与容器间距增大,让用户从左至右浏览的效率降低,并且看起来不够协调。同时如果该产品存在国内与海外两种版本的话,将中国翻译成外文以后长度将会变的十分不可控。

2. 「Label text」右对齐

如果标签文本采用右对齐,标签文本的长短问题容易导致左侧的视觉隐形边界错乱,用户的规律眼动容易被打乱,同时如果该产品存在国内与海外两种版本的话,标签长度问一样依然存在。

3. 「Label text」与容器顶端对齐

介于标签左对齐与右对齐各自存在不同的优缺点,不能完美统一,从而催生出标签与容器顶端对齐的交互方式。顶端对齐的方式使得用户视觉动线变得十分规律,竖直向下浏览可以便捷地理解标签文本阅读效率提高明显,同时标签文字长度不再成为干扰设计师进行排版的一个纠结点,很好的解决了有些同时具有国内以及海外版本产品的问题。

但是标签与容器顶端对齐的方式也不是十全十美,在移动产品场景下或者对纵向空间使用率要求比较高的场景,标签与容器顶端对齐的设计方式就比较尴尬。由于表单高度比其他几个设计方式要高,造成用户一边填写表单一边不断往下滑动。

4. 前导图标代替「Label text」

前导图标代替「Label text」这种设计方式在轻量级表单中较为常见,条件也比较苛刻:

  • 基本用在那些表单理解成本相对较低,用户对此类表单熟悉程度较高的场景。
  • 视觉设计师对图标绘制表意能力比较强。

同时因为每个人生活习惯、文化差异非常之大,造成对于前导图标的认知都有很大的不同,由于这种设计方式对于用户理解成本很高,信息密度较大的表单类型也不适用,所以没有很强的普适性。

5. 占位符代替「Label text」

占位符代替「Label text」或者将标签与占位符合二为一的这种设计方式可以很好的节省大量纵向设计空间。但是也是存在比较大的设计弊端,假如用户填写的表单十分复杂且场景不熟悉需要边填写边理解,那么这种设计方式就不够优雅了,会让用户完全忘记自己在填写什么类型的表单。

基于上述一些存在的问题,Material Design的使用了一种比较讨巧的设计策略。即采用占位符承载标签文本,并且在用户填写信息时,标签文本始终可见,由占位符转移到文本框顶部。

这种设计方式对视觉动线、标签整齐度、排版空间等一系列问题都有改善,但是在填写信息密度大、理解难度高的表单上表现就不尽如人意。读者现在可以脑补下,在一个需要填写大量表单的场景下,这种带有动效的方式会造成视觉混乱,不能让用户沉浸式的填写信息,容易让用户出戏。

不过在某些商业场景下,这种设计方式对数据转化会有比较不错的表现。譬如在电商的搜索框当中,把一些需要重点的商品信息放在占位符上,一方面对该商品的曝光量必然有所提升,另一方面在用户直接点击搜索时,将会以当前占位符内容进行搜索,达到为所推荐商品引流的效果。

四、需要注意的点

1. 注意粘贴场景

前文也提到过text fields的信息来源不仅仅于来自用户键入场景,同时还有可能用户从别处复制一段文字的场景。那么在用户复制信息过来的时候,就需要特别注意focus状态下的光标位置,必须在文字的末尾,而不是在其他什么乱七八糟奇特的地方。

2. 合理的反馈

1)负反馈

合理的反馈信息对用户降低理解成本、提高表单填写率也是至关重要的一部分。这里我总结一些比较常见的错误类型供大家参考,没有想到有缺失的类型也希望大家帮我补全。

「内容是否为空」比如必填项;

「二次确认是否相同」比如密码校验;

「输入信息是否合规」比如密码格式;

「输入信息长度合法性」比如手机号码长度;

「输入信息的唯一性」比如收到的验证码。

2)正反馈

从用户体验流派角度去分析,好的设计不仅在错误情况下给出明显易懂的提示信息,也要在正确场景下给到正向反馈与鼓励,让用户增强信心。

3. 提供格式范例

对于某些具有特殊格式的输入信息(比如手机号码、出生年月、信用卡到期日等等),我们在设计占位符的时候就可以预先把格式写入其中,告诉用户信息输入的必要格式,起到提前防错效果。

4. 清除功能

清除功能在pc端的表单中存不存在区别并不是很大,但是在移动端表单中小编强烈建议把它放上去,因为可以帮助用户大大降低交互成本。

5. 合理的字数提示

在使用多行文本输入信息的时候,我们经常会碰到输入文字超出文本域字数规定的情况。那么一个优雅的字数限制方式就显得尤为重要。一般采取两种设计方式:

  • 当用户输入信息超过设计规定时,就不让用户继续输入,同时也不显示超出信息。
  • 在文本框内显示所有用户输入的信息对于不做限制,在帮助文本(Helper text)处告诉用户你已经超出了规定。

显而易见第二种方式更为优雅,也更能够获得用户的尊重,毕竟最高层次的用户体验就是让用户自由的输入。

6. 为特殊人群而设计

根据相关研究机构调查报告得出每10个人当中就是1个具有某些方面的先天不足,所以恢复到初心「设计以人为本」,针对特殊人群在设计的时候我们必须要考虑周全,比如红绿色盲。这里小编就不展开阐述了,有机会的话可以另外开一篇文章专门讲讲这方面设计需要注意的点。

五、文末总结

Text Fields是我们平常表单设计工作中无法避免的一环,几乎20%的Text Fields承担着表单当中80%的重要功能。与表单填写率与完成率有着密不可分的关系。如何合理的设计表单当中的Text Fields成为了工作当中的重中之重。

相关知识推荐:你到底会不会「下拉菜单」啊?



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理   作者:月亮与六便士

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何设计友好易用的表单

分享达人

表单对于用户和产品同样重要。当我们需要收集数据时,表单是我们最常采取的方式(也许是由于在互联网普及之前,表单就已经长期应用于我们日常生活中 )。因此,将表单设计得友好易用是提高用户信息填写完成率的关键。


表单拆解

表单的样式会根据业务目标、内容的不同而发生变化,但是有一些基础的组成部分能帮助用户快速顺利地完成表单的填写。


1.类别标题:类别标题能够帮助用户浏览表单并同时解释整个表单的大致内容是什么。当你需要把被收集的信息分类为多个部分时,比如个人信息、职业信息和财务状况,这时类别标题就可以派上用场。


2.文本标签: 文本标签能够提示用户在每个输入框中应该填写什么样的信息。


3.提示文字:文本标签的附加说明。


4.错误信息提示:向用户反馈为什么输入框中输入的信息有误。


5.重要行为召唤按钮:表单末尾的按钮,用来提交表单上输入的内容。



表单状态


在用户使用表单时,有三种最基本的状态能够帮助用户完成操作。


1.默认状态:默认状态是用户未进行任何操作时的状态。


2.激活状态:当用户点击输入框后,输入框就变成激活状态并通过样式的变化强调显示。如果用户视线离开了屏幕一小会儿,这个状态可以帮助用户快速浏览定位。


3.反馈状态:此状态一般在完成一个信息的填写,并进行下一个字段输入的时候出现,让用户了解输入的信息是否正确。对于一些无法立即验证的信息可以在用户提交表单的时候进行反馈。



设计原则


1.保持简单:将表单设计得短且简单。只收集必要的信息,避免让用户分开填写姓氏和名字(分开填写姓氏和名字一般只存在于外国网站)。允许用户查看已输入的密码,而不要让用户填写两次密码去确认。


2.使用内嵌提示:当用户输入信息有误时要给出错误提示,同时要将错误原因注明在相应的输入框旁。


3.组合相关项:将有相关性的填写项组合在一起,然后将它们以合理的顺序整理,这可以帮助用户不必花费太多认知成本去填写必要的内容, 这个过程不仅轻松而且只需要用户很短的专注时间。


4.使用左对齐的文本标签:始终在输入字段上方放置文本标签。不要用文本标签替换提示文字,不然用户在提交表单之前很难检查他们输入的信息,会浪费较多的时间。请把标签放在输入字段上方并且左对齐。


5.根据输入信息的格式设计输入框:简单来说,确保输入框的格式与输入信息的格式协调。比如说,地址的输入框应该比手机号码的输入框更长。


6.CTA按钮(行为召唤按钮)

一般表单的后面会有一个或多个按钮,比如“提交”、“下一步”之类的。在按钮有多个的情况下,最重要、或者是最想要用户点击的按钮应该要突出,而其他按钮弱化处理。

当使用模态视图状态下的表单时,有时会有一个关闭按钮用于关闭模态视图。另一种设计方式是使用叉号图标并将其放置在顶部的右侧边缘,它可以代替关闭按钮,如图所示。


7.搜索字段:当网站内容比较多的时候,把搜索字段做的明显些,方便用户对网站内容进行筛选。同样的,在用户使用了搜索功能获取到结果后,不要清除搜索框内的搜索关键字,因为用户可能会查看最初他们搜索了什么。


8.清晰:向用户清晰地表达信息,不要出现含糊不清的词。用户可能不愿意填写表单,所以尽可能清晰简单。如下图的绿色按钮文字使用“提现”而不要使用“确定”。


原文:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

作者:Momoh Silm

译者:Ballen贝林、春风似蛋挞

本文翻译已获得作者的正式授权

授权截图

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:Ballen成明

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档