作者: 厚江
京东注册优化是来京东后第一个相对完整的设计项目。毕业后初涉交互设计工作,导师对我的第一个要求就是在设计过程中,重视对细节的设计。本文即从京东注册优化项目的一些方面谈谈对细节设计的体会。
一、在表单的设计过程中,需要着重聊一聊关于校验的问题
1.1 区分前端校验和后端校验
一般来说某些可以在用户输入过程中直接报错的提示,例如格式错误等,都属于前端校验。某些需要与后端数据库交互的提示,例如用户名是否重名等,属于后端校验。前端校验的错误一般比较简单,而后端校验的错误更加复杂,因为他需要用户主动触发事件来与后端数据库发生交互。因此弄明白这两者的好处是,所有前端校验的错误可以使用即时校验(一边输入一遍校验),用户可以直接修改输入错误。看:
当然,如果开发愿意,也可以花费些精力,在及时输入同时对后端进行数据交互,例如:
1.2 区分校验空状态提示与错误提示的事件
起初我认为空状态提示就是错误提示,其实不然。我们知道,一般校验错误提示的事件都是输入框失去焦点,但是当输入框失去焦点时,若输入框为空并不意味着这时就要出现空状态提示。如:
空状态提示应该是在点击提交按钮后才进行校验,而错误提示则可以通过前端校验还是后端检验的划分,来决定它的触发动作。其次还有一个问题,一旦表单过多,难道所有表单都要出现空状态提示吗?就像这样:
因此我们还要考虑到空状态的提示规则,是逐一提示亦或是有更好的办法,就像这样:
当然,要弄清楚表单中的校验问题,头疼的不仅是交互设计师,还有前端的伙伴。记得当初在测试时,为了完善表单的报错交互,前端着实废了不少脑筋。有的时候项目很着急,前端没有时间一点点调试,我们可以退而求其次,让前后端的检验都使用输入框失去焦点的方式,并对空状态进行逐一提示。细节设计往往需要耗费大量精力,那是否只要设计是准确并统一的,也未尝不可呢?(对于后端而言不出bug就感谢上天了,用户体验什么的再考虑吧~)
在本次前后端配合中,产品侧和我一起整理了一份《PC侧注册流程输入框的提示类型》,里面包含了所有输入框在哪些事件中应该出现哪些提示,并标注出所有的提示层级。这样做往往也可以帮助设计师把控所有文案的统一。
小结:梳理规范性的通用文档同步给各端,可以帮助设计细节的落地。
二、输入框的提示文案,其实分为两种场景
2.1 输入框未获取焦点和已获取焦点
通过一个最简单的例子来理解这两者的区别,看:
每一个输入框都是由标题和框来组合的,你让用户输入其实是解决两个问题,一个是为什么要输入,一个是怎么输入。但有时对一些显而易见的输入框,例如验证码,也可以将点击图片换一换,融入提示当中:
其次我们在对密码做安全层级提示的时候,也引导用户提升至更高的安全等级:
小结:拆分用户的使用步骤,及时引导用户的下一步操作
三、有时过度细节也不是什么好事
起初的交互稿中,有对输入框做清除的功能,以及密码输入框的明码展示功能,但在实现中都去掉了。输入框清除更多用于手机,手指在屏幕上点击一次就清除,比长按删除键来得更方便;但反观电脑,在输入过程中,用户的双手需要离开键盘,然后握住鼠标点击一次才清除,这样反而有些得不偿失了。而去掉明码展示,则是考虑到因为电脑屏幕大,明码显示后更容易被偷看,所以就去了。当时和产品达成的一致意见是,使用电脑注册永远要比手使用机注册更加安全。
小结:设计要讲究实用性,过度的细节设计只是在画蛇添足
结语
在最后的效果验收中,通过收集到的用户反馈发现,细节设计的确提升了用户满意度。认知问题的比例有所下降,从而暴露出更多系统和逻辑层面的问题。
随后,我们通过点击量的分布数据,再次细调了注册页的信息层级、优化了海外号码注册的交互体验,并在登录方面,强化了手机扫码的登录方式。
头一次做表单设计肯定是很耗精力的,但不妨将整理过的一些表单规范积累下来,一旦下次设计中有可用的就直接拷贝过来,再在每次运用的时候简化用法,慢慢形成固定的设计规范,降低未来的设计成本。其次,类似这种公用的表单校验方式更应该提炼出来,在每次交互输出的时候单独做成一页同步给前端和产品,让多方逐渐达成一种设计意识,这样才能更好地贯彻细节设计的落地。
文章来源:京东设计中心JDC