返回顶部

三步教你提升B端表单设计的用户体验(一)

[复制链接]
玫瑰黑糖Lv.2 显示全部楼层 发表于 2022-7-5 17:17:41 |阅读模式 打印 上一主题 下一主题
本帖最后由 玫瑰黑糖 于 2022-7-5 17:19 编辑

 
  三步教你提升B端表单设计的用户体验(一):高效。
       通过合理的信息组织形式和表单组件的使用,使用户可以快速完成表单页任务。

  1) 标签和输入框成组

  使标签和输入框两两组合,用间隔的大小来形成组的概念,否则就会如左图所示,分不清楚那个标签和哪个输入框是匹配的,容易产生混淆,使用户感到困惑。

  2) 选择合理的标签对齐方式

  标签常见的对齐方式有:顶对齐、左对齐、右对齐,另外还有不常见的表单域内对齐。

  有的时候我们希望用户尽可能快地填写表格,但有些场景下我们需要故意让用户慢下来,以便他们用心地留意并阅读标签。



  不同的对齐方式适合不同的应用场景:

  左对齐

  优点:用户视觉动线左对齐,方便阅读,节约垂直空间。

  缺点:填写速度慢,浪费横向空间,标签长度和输入框弹性小。

  用户存留时间较长,所以左对齐标签一般用于购买类需要用户仔细看、谨慎选择。

  右对齐

  优点:节约垂直空间,表单标签和表单域距离近所以有利于用户高效填写。

  缺点:可读性较弱,横向占用空间大,不利于狭长页面布局,标签长度和输入框弹性小。

  右标签一般用于需要高效填写的表单,比如账号的基本信息。

  顶对齐

  优点:视觉舒适、用户浏览和填写表单的速度较快,节约横向空间。

  缺点:占用垂直空间。

  在移动端产品设计中,下拉的交互比左右滑动的交互更为便捷,所以采用顶部标签较常见。

  顶部对齐可以让用户快速填写表单,完成任务的场景一般采用顶部标签,例如阿里云的创建应用分组。

  表单域内对齐:

  优点:最节省空间,多用于移动端和登陆页面。

  缺点:输入时和输入后标签消失,令用户迷茫,字段多的表单不建议使用。

  3) 任务拆解和编排

  将大型、复杂任务拆解为多个部分,并按照相关性分组,减轻用户输入负担。

  尽管每部分内容单独处理,但最终一起完成提交,适用于大型、复杂表单,通过适当的任务分割降低用户出错率。

  4) 折叠不重要非必填信息

  在能完整获取需要信息的前提下,输入项越少越好。

  当表单页很长且有些信息非必填,或者说填写后的意义不大的情况下,可以考虑将非必要信息折叠收起,点击“展示更多”下拉展开全部表单项,让用户可以选择性录入不重要的信息。

  5) 智能默认值

  使用智能默认使用户完成表单速度更快、更准确,能满足多数人需要的默认选择,从而帮助用户填写单据。

  根据搜索、联想,自动显示匹配信息(如自动搜索、邮箱后缀联想、定位地址),如下图东航的搜索机票的表单,出发地和支付方式根据定位地址给了一个自动匹配,乘机人数量、出发及返程时间给了一个默认时间。

【免责声明】本文系转载,文章来源于公众号Clip设计夹 ,作者大Clip设计夹,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

达内教育:成立于2002年。致力于面向IT互联网行业,培养软件开发工程师、测试工程师、系统管理员、智能硬件工程师、UI设计师、网络营销、会计等职场人才 达内使命:缔造年轻人的中国梦、缔造达内员工的中国梦 达内愿景:做管理一流的教育公司
  • 商务合作

  • 微信公众号

  • Powered by Discuz! X3.4 | Copyright © 2002-2021, 达内教育 Tedu.cn
  • 京ICP备08000853号-56 |网站地图 | 京公网安备 11010802029508号