优艾设计网

7个帮你全面提升Web表单填写体验的方法

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:Jana
我们几乎每天都会接触形形色色的表单,登录账号、填写信息以获取服务、发布内容等。然而填写表单的过程往往不是特别愉悦的,我们需要消耗时间输入信息,点击提交,可能还需要等待审核;尤其是碰到较为复杂、流程长的

除了上面这种简单粗暴的方式以外,首次输入密码时使用明文确认同样可以节省二次输入密码的时间,出于信息安全的考虑,需支持有需要的用户随时切换成暗文显示。以下是笔者收集的几种明文确认密码的方式,可供参考:

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

鼠标点击、拖拽操作相对于键盘输入来说是更加有效率的方式。通过添加选取器、快捷选项、智能联想、range滑块、number微调等方式让用户可以更快速的完成表单。

添加选取器、快捷选项:

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

支持拖拽上传:

7个帮你全面提升Web表单填写体验的方法

智能联想:

7个帮你全面提升Web表单填写体验的方法

range滑块:

7个帮你全面提升Web表单填写体验的方法

number微调:

7个帮你全面提升Web表单填写体验的方法

慎用下拉框。由于下拉框会对用户造成信息的隐藏,需要而外的操作才能显示,更适合用在选择日期、省份等可选范围较大的地方。对于数目有限且重要的选项来说,使用更明显的选择方式更合适。

7个帮你全面提升Web表单填写体验的方法

放宽对用户输入的要求,包括格式、大小写等。让你的系统更灵活而非让用户为了你改变他们的输入习惯。

7个帮你全面提升Web表单填写体验的方法

错误预防。进行有效的即时校验,让用户能及时修改、补充缺漏的信息;另外,我们还可以通过限制用户的行为(如在预定机票时返回时间无法选择出发时间之前的日期,出发城市不能跟到达城市一样等),或提供自动修正的方式来预防用户犯错。

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

通过提供更加积极的交互反馈、预置文字、自动获取信息、自动修改格式、补全小数点等方式,使你的表单变得更聪明。

如当用户输入信用卡号码时,能够自动判断用户使用的是哪种信用卡。

7个帮你全面提升Web表单填写体验的方法

7个帮你全面提升Web表单填写体验的方法

当用户输入手机号码时,能够判断出其归属地。此时如果用户输错号码,会更容易被发现。

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消