美文网首页
web表单设计读后感

web表单设计读后感

作者: yaya的思绪 | 来源:发表于2019-01-19 10:34 被阅读0次

引子

作为一个半岁的产品策划,我慢慢地从一开始的“初生牛犊”到了现在的“审慎而行”。所谓审慎而行,其中一点表现为跟UED产生产生分歧的时候,说不出理论性的原因,渐渐谨慎了。要改变这种现状,我知道自己需要get更多的交互体验的知识,才能真正站在“用户体验”立场上,才能有辨别交互方案优劣的能力,也才能创造“以客户为中心”的产品(终极目标)。

对于表单及表单设计的认知更新

表单无所不在。仔细回想,日常上网时候接触的大部分功能都是表单。购物时,你需要在淘宝上选中商品、填写姓名、联系方式,这是一个表单;搜索时,你需要填写关键词,选中某视频/内容,这是一个表单;买车票时,你需要填写出发时间、返程时间、购票人、选中某趟车,这也是一个表单。表单只是退去了A4纸张上表格的束缚,增加了用户与计算机的交互。

表单设计的重要性。表单的设计重要吗?这个问题可能不太好回答。换一种方法,表单的设计不重要吗?试着对比一下淘宝网页的表单设计和你们本科学校的教务管理系统的表单设计,想必你有了答案。一般情况下,大学教务管理系统只重视实现功能(选课、查分数等),本着能实现基础功能就ok的目标,设计了你脑海中的既不兼容mac,也不能记住密码,还可能引起懵逼的各个按钮的模样。而淘宝的表单填写成功率直接影响成交订单量,为了用户能够最大概率地顺利完成表单填写,在整个过程中都需要给到用户方便。因此,给了你优于教务管理系统的用户体验。

表单设计依赖于商业目标、用户需求、表单情境。商业目标是指导所有action的,需要明确用户是谁?我们为用户提供什么服务?一旦确定了范围,我们需要设计的表单才能确定。表单设计的终极目标是服务于商业目标的。关于用户需求,需要落实到挖掘用户内心真正的需求,而非表面需求。而表单情境,需要把自己当成用户,落到用户角色上去思考用户填写表单时候真正的痛点是什么?比如,网络不好,用户会有疑惑,填写到一半的表单会不会无效?落到表单情境上,表单设计应该考虑到这种情况,应该给到提示安抚用户,也应该采取技术手段暂时缓存表单已填写的内容,一有网络就可以继续填写。

几个设计原则。一是减少痛苦。减少填写表单者的痛苦,尽量把表单以更容易的方式呈现、供填写。实践下来,我觉得可以减少用户的理解成本(别让用户思考嘛),减少不必要的输入(可用智能输入),来减少痛苦。二是明确路径,遇到复杂、长的表单,容易让用户中途放弃,因此,需要将长表单分为几个部分,让用户清楚看到完成整个表单需要几步,现在已经完成了几步,给用户一个心里预期(可以了解一些心理学知识)。三是考虑情境,同理心在设计用户产品的时候真的很重要,自己也在不断的领悟中。四是一致沟通,给到用户同一个主体的称呼应该是一致的,不能出现不同模块,不同功能下对一个概念的口径不同。

进入表单设计

本书很清晰地分为三个部分,表单结构、表单元素、表单的交互。乍一看,觉得是本指导实践的书籍,是告诉读者“怎么做”的。通篇读下来,发现它不是简简单单教你这个按钮放在哪,那个输入框多长的书籍,是一本教你自上而下思考表单如何设计的一本书。

第一部分的表单结构更多的是表单设计的思想、表单的组织、表单的完成之路。表单设计的思想上面大概都提到了,我觉得主要突出的点是——重视表单,帮助用户顺利完成表单。表单的组织需要随时应变,少量的可自然分成若干主题的表单用一个网页,大量的则用多个网页,而大量的只有一个主题的表单一个网页就够了。在表单的完成之路的设计中,印象比较深的点就是对于关键任务表单,例如支付页面,需要简洁明了,消除一系列的阻碍表单填写成功的因素。

第二部分的表单元素介绍了标签、输入框、动作、帮助文字、错误与成功提示。这里面有基础知识,也有实验证明的更优的设计方案。顶对齐标签、左对齐标签、右对齐标签,不同的排列不同的眼动路径,适用于不同的场景。对于输入框,有个小秘诀学到了,可以用长度引导用户填写正确答案。动作里面要考虑的就是主动作和次动作的视觉区分,和进程中的动作需要控制不可两次提交(如前端控制提交后就不可再提交了)。帮助文字很有必要,不同的场景用不同的帮助文字方式,自动即时帮助、激活即时帮助、激活区域帮助慢慢实践。错误与成功提示自己在做需求的时候也需要想到,目的是为了帮助用户尽快完成表单。

第三部分表单的交互有即时验证、多余输入、额外输入、基于选择的输入、循序渐进几个内容。即使验证有几种方式,即时确认、即时建议、即时质量条。即时确认最常用在确认用户名是否可用,即时建议用在有大量选择的情况下,即时质量条常用于判断密码强度。多余输入可基于默认输入、智能化个性输入,帮助用户输入一些信息,减少需要填的表单内容。额外输入建立在既不干扰一般用户的普通需求,也满足少数用户的高级需求。基于选择的输入要考虑到页面是否会产生不在用户预期中的跳动。循序渐进的设计用于表单输入的时间点,可以选择让用户试用功能、了解这个功能后再进行注册。

整本书中提到了不少的表单实验方法,可用性测试、实地测试、网站追踪、眼动追踪,这些以后可以考虑实践实践。

相关文章

  • 5款优秀的在线表单设计器

    1、Ueditor Formdesign Plugins Web表单设计器 Ueditor Formdesign ...

  • web表单设计读后感

    引子 作为一个半岁的产品策划,我慢慢地从一开始的“初生牛犊”到了现在的“审慎而行”。所谓审慎而行,其中一点表现为跟...

  • 工作流开发推荐使用表单引擎

    所谓的表单引擎 表单引擎,也可以称为表单流程,流程表单和工作流表单,是基于Web界面上可视化编辑的表单设计系统。它...

  • 基于web的自定义表单引擎

    所谓表单引擎 表单引擎,又可称之为表单流程、流程表单、工作流表单,是基于Web界面上可视化编辑的表单设计系统,可设...

  • 网页设计中的“表单”问题

    在WEB产品的设计中经常要用到设计表单,表单中的元素众多,尤其是许多后台操作系统中表单元素的组合就更加复杂...

  • 无处不在的表单

    这两天看了《web表单设计》,根据自己以前对表单的理解,写下总结。 表单的组织 先考虑人,再考虑像素。用户真正关心...

  • 关于Web表单设计的经验分享

    表单在UI设计中的出现场景还是比较多的,尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计,就想把...

  • 表单的标签和输入区-表单设计的对齐方式

    转自:http://www.yixieshi.com/5459.html 在web页面设计中,在表单设计中经常会遇...

  • flask中的wtf表单

    Web表单 web表单是web应用程序的基本功能。 它是HTML页面中负责数据采集的部件。表单有三个部分组成:表单...

  • 19. Flask web表单 Flask-WTF表单扩展

    Web表单 web表单是web应用程序的基本功能。 它是HTML页面中负责数据采集的部件。表单有三个部分组成:表单...

网友评论

      本文标题:web表单设计读后感

      本文链接:https://www.haomeiwen.com/subject/grlmdqtx.html