提高移动端表单可用性的7个设计原则

提高移动端表单可用性的7个设计原则

ID:37810417

大小:1.12 MB

页数:13页

时间:2019-05-31

提高移动端表单可用性的7个设计原则_第1页
提高移动端表单可用性的7个设计原则_第2页
提高移动端表单可用性的7个设计原则_第3页
提高移动端表单可用性的7个设计原则_第4页
提高移动端表单可用性的7个设计原则_第5页
资源描述:

《提高移动端表单可用性的7个设计原则》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、提高移动端表单可用性的7个设计原则用户在填写表格的时候可能会犹豫不决,所以你应该让这个过程变得尽可能容易,这篇文章中的7个设计原则可以显著提高表格的可用性。移动端用户使用移动应用程序或网站都有一个特定的目标。通常情况下,站在用户和他的目标之间都会有一个交互形式–表单。实际情况中,表单被认为是用户使用链路中达到目标的最后一步,这就是为什么它是如此重要。所以用户填写表格尽可能快,没有任何疑虑,是表单交互设计的重要考虑要素。移动端表单设计需注意的原则有如下7个:原则1:表单的交互设计应与用户输入数据的行为强兼容确保表单所有字段没有被界面中的任意元素遮挡,例如键

2、盘唤起时。当用户完成输入表单的某一字段,页面位置自动往下前进至下一个字段更好利用有限空间。原则2:减少输入字段和用户打字的交互成本表单越长越复杂用户完成整体表单的意愿就越低–尤其是在小屏幕上。最大限度地减少输入字段数,使你的表单载入更快速,尤其是当您向用户索取大量信息的时候保持表单越简短越好。但只减少输入字段的数量是不够的–交互设计师还应该注意用户输入成本,移动端打字有较高的交互成本。相信大家都有体验,手机打字很容易出错即便使用PC键盘也很难避免(触屏输入更是如此)。因此,尽量减少打字和防止用户输入错误,下面是几个小技巧:智能缺省选项智能缺省选项可让用户

3、的表单输入完成更快,更准确。例如,根据其地理位置数据提前帮助用户选择用户的地理位置信息。平铺单选但互斥的选项当用户需要从选项列表中选择,可以考虑使用一个水平标签陈列的方式,因为它可以更好地利用可用的屏幕空间,也能减少用户的输入成本,例如时间的选择。传统的选择交互是给一个时间选择器,用户需选择小时以及分钟。但如果我们能确认大致时间以及范围就可以采用如下形式:最低/最高区间的选择可考虑使用滑块交互如果是在一个区间去选择选项可考虑使用滑块方式,用户只需要在一个设定的最低和最高值之间移动滑块就可以,和传统下拉菜单相比大大地降低了输入成本。对用户而言,通过视觉的提

4、示滑块可以容易的横向或纵向调节来适应各种交互场景。但请记住,当操作滑块时调节轴上方的指示数字一定要给用户清晰的提示数据变动,这里也请考虑到大手指操作时候会被遮挡住的场景,例如:原则3:表单中的字段标签要么放置在字段上部要么使用浮动标签字段标签告知用户这个字段的目的,清晰易懂的字段标签是让界面交互性提升的一个主要手段。为什么你不应该使用内嵌标签(placeholder)做字段标签内嵌标签(或placeholder作为一个字段标签),是位于表单域里面的文本,当用户输入的时候它会自动消失。虽然内嵌标签看起来不错,节省了宝贵的屏幕房地产,这些好处是迄今为止由主要

5、可用性的缺点,其中最显著其中是上下文的损失抵消。一旦用户点击文本框,标签将消失,因此用户无法仔细检查他/她写的是什么确实是为了被写入。占位符文本是视觉标签一个贫穷的替代品。另一件事是,当用户看到一个文本框里面写的,他们可能会认为它已经在预先填写并可能因此忽略它。为什么要左对齐字段标签对移动端表单设计是不好的左对齐字段标签的主要问题涉及手机显示屏尺寸和宽高比。如果一个左对齐标签在字段前面所使用的,窄屏幕离开左为场本身的空间非常小。这是一个创建可用性的问题,因为表单字段通常不足够宽,以显示用户的整个输入。不能够看到输入数据造成了用户的麻烦,因为它使得更难为他

6、们提交表单,从而导致更多的提交形式的错误之前发现任何输入错误。这很难,如果输入数据不完全可见现货的误差。标签上方的字段或浮动标签表单标签应高于表单域,使用户可以很容易地看到他们在,为什么都尽显。放置在标签上移动领域以上的主要好处是,你可以有表单字段延长屏幕的整个宽度,使它们足够大,以显示整个用户的输入(在一个体面的字体大小16像素一样)。额外的好处是字迹清晰的和有意义的字段标签,因为我们没有做限定于1-2词语。以上标签的主要缺点是,它需要更多的垂直空间,这意味着用户必须滚动多。然而,这并不是一个严重的问题–现在这是绝对自然滚动。另外,也可以使用浮动标签,

7、确保他们填写了正确的外地用户。占位符文本默认情况下显示,但一旦一个输入字段被窃听和输入文本占位符文本淡出和顶部对齐的标签的动画。原则4:表单输入应实时进行验证在一个理想的世界里用户将填补必要信息的形式,并顺利完成他们的工作。在现实世界中,用户经常犯错误。但是,用户在通过填写表单只在提交找出来,他们已经犯了一个错误的过程中不喜欢。以通知提供的数据的成功/失败的正确时间是正确的用户提交信息后。实时在线验证立即通知有关用户提供的数据的正确性。这种方法允许用户以纠正他们做出更快的错误,无需等待,直到他们按下提交按钮查看错误。如果在一个特定的格式都需要答案,提前告

8、知用户,而无需额外的例子通信的征收规则(格式规范)。内嵌的验证也有助于减少硬反弹

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。