如何设计完美的移动端表单【UXRen译#169】
作者:Levi Kovacs | 翻译:楠木,校审:小蟹
不是所有人都喜欢填写表单。它不是什么有趣的事情,但它是我们必须做的事,完成一件事情的方法,可以说是一个工具。所以,让我们不再关注如何让它有趣,而是如何让它尽可能高效。
当然,它应该是美学上让人愉悦的,但我们这里的目标是使其可用,并帮助人们尽快完成它。
1、使用分段选择控件而不是下拉菜单
在一个有2-5个选项的单选情景内,使用内联分段选择控件而不是下拉菜单。主要是因为所有的选择都是立即可见的,并且可使用单个交互动作进行选择而不是三个(点击打开选项,执行选择,确定)。
2、将多个选择的下拉菜单合并在单个区域内
这一条可能不适用于所有地方,但是时间选择器是个很好的例子。它包含三个部分,年月日,这意味着如果用下拉菜单的话,至少有三个三步动作,加起来一共9个步骤。这太多了。而使用单个区域来做整个时间选择器则只需五步:打开,选择年,月,日,确定。
3、使用开关代替下拉菜单
一个包含两个选择的下拉菜单,如“显示”及“隐藏”像是勾选框。像图上所示的下拉菜单是在逼迫用户做多余的交互动作。同样的情况可以使用勾选框或者开关,二元选择的完美实现方法。
4、滑动器
通过切换控制方式,你可以将一个单调笨重的下拉菜单转变为可简单快速浏览的页面。考虑使用滑动器来选择范围内的一个或多个值。
5、避免使用多列
尤其是在较小的屏幕上,其物理边界帮助用户集中着手于内容上。这样整个页面导航更容易并且帮助用户使用时走在正确的轨道上。
6、使用步骤代替下拉菜单
当用户需要对数字做增加或减少的小调整时,避免使用自由形态输入方式以及下拉菜单。步骤选择器帮助最大程度减少错误发生,并减少为得到正确的数值所需的点击次数。
7、将报错信息在每行内显示而不是组合显示
在字段旁边显示上下文的错误比以前更重要。大部分时候,表格的上部或下部在屏幕可视范围之外,所以在对的位置提示用户非常重要。要在错误发生的时候以及发生的位置报错。避免以下两种方式报错:简单的表述“有四个错误”,或者在页面的最下方列出所有问题。
8、不要重复必填区域
根据经验来说,尽量避免显示不必要的字段。它会让表格更简短,用户更快乐。但有时候你确实不能避免它。所以当出现可选填的字段时,突出显示它,而不是突出必填字段或者用“*”来表示其他字段。
9、把相关的字段组合起来
组合相关的字段帮助人们更快浏览并发现他们想要的东西。同时这样可以打破冗长的表格,变之为几个部分。从而各个击破。
10、提供舒适的可触摸区域
不要把按钮和触摸区域做的太小。用户不是在用鼠标在点击,而是用他们的手指。
11、保持平台的一致性
做移动端特别是app时尽量和平台保持一致。尽可能使用相同的交互模式,提供熟悉的界面给用户。人们对同一个设备上的任一app中的返回按钮抱有同样的期待,它可能是iOS,Android或者Windows手机。
始终把用户的目标记在心里,同时如果你能在设计表格时努力一点点,你将会降低放弃率并提高转化率。确保你已经订阅了更多像这样的文章,另外这是我们正在做的帮助你设计更好表格的工具。
更多译文:
30个笑死人的设计
2017年移动端用户体验设计趋势
人机交互的四次重大变革
迪斯尼电影APP用户画像高清中文版
什么是用户体验文案设计?
全部160+篇译文>>
申请加入UXRen翻译组>>
译者:楠木 审校:小蟹
作者:Levi Kovacs
原文链接:https://uxplanet.org (需翻墙)
原文标题:《Building Great Mobile Forms》
版权声明:
- 本文版权归:UXRen翻译组 所有;
- 转载带有“UXRen译”抬头的翻译文章,文章标题必须保留“UXRen译”字样;
- 转载文中必须保留:“UXRen翻译组”、“作者”、“译者”及“审校者”信息;
- 转载文末必须保留本译文网页链接地址;
- 如未遵照上述规则转载,视为侵权,UXRen社区保留随时追责的权利。
很有价值的译文!印证了以前自己的错误。
移动端表单的设计应该保证高效简洁,同时美观。
谢谢好评!
干货!感谢分享!