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

用户在填写表格的时候可能会犹豫不决,所以你应该让这个过程变得尽可能容易,这篇文章中的7个设计原则可以显著提高表格的可用性。


用户在填写表格的时候可能会犹豫不决,所以你应该让这个过程变得尽可能容易,这篇文章中的7个设计原则可以显著提高表格的可用性。

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

移动端用户使用移动应用程序或网站都有一个特定的目标。通常情况下,站在用户和他的目标之间都会有一个交互形式 – 表单。实际情况中,表单被认为是用户使用链路中达到目标的最后一步,这就是为什么它是如此重要。所以用户填写表格尽可能快,没有任何疑虑,是表单交互设计的重要考虑要素。

移动端表单设计需注意的原则有如下7个:

原则 1:表单的交互设计应与用户输入数据的行为强兼容

确保表单所有字段没有被界面中的任意元素遮挡,例如键盘唤起时。当用户完成输入表单的某一字段,页面位置自动往下前进至下一个字段更好利用有限空间。

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

原则 2:减少输入字段和用户打字的交互成本

表单越长越复杂用户完成整体表单的意愿就越低 – 尤其是在小屏幕上。最大限度地减少输入字段数,使你的表单载入更快速,尤其是当您向用户索取大量信息的时候保持表单越简短越好。

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

但只减少输入字段的数量是不够的 – 交互设计师还应该注意用户输入成本,移动端打字有较高的交互成本。相信大家都有体验,手机打字很容易出错即便使用PC键盘也很难避免(触屏输入更是如此)。因此,尽量减少打字和防止用户输入错误,下面是几个小技巧:

智能缺省选项

智能缺省选项可让用户的表单输入完成更快,更准确。例如,根据其地理位置数据提前帮助用户选择用户的地理位置信息。

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

平铺单选但互斥的选项

当用户需要从选项列表中选择,可以考虑使用一个水平标签陈列的方式,因为它可以更好地利用可用的屏幕空间,也能减少用户的输入成本,例如时间的选择。传统的选择交互是给一个时间选择器,用户需选择小时以及分钟。但如果我们能确认大致时间以及范围就可以采用如下形式:

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

最低/最高区间的选择可考虑使用滑块交互

如果是在一个区间去选择选项可考虑使用滑块方式,用户只需要在一个设定的最低和最高值之间移动滑块就可以,和传统下拉菜单相比大大地降低了输入成本。对用户而言,通过视觉的提示滑块可以容易的横向或纵向调节来适应各种交互场景。但请记住,当操作滑块时调节轴上方的指示数字一定要给用户清晰的提示数据变动,这里也请考虑到大手指操作时候会被遮挡住的场景,例如:

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

原则 3:表单中的字段标签要么放置在字段上部要么使用浮动标签

字段标签告知用户这个字段的目的,清晰易懂的字段标签是让界面交互性提升的一个主要手段。

为什么你不应该使用内嵌标签(placeholder)做字段标签

内嵌标签(或placeholder作为一个字段标签),是位于表单域里面的文本,当用户输入的时候它会自动消失。

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

虽然内嵌标签看起来不错,节省了宝贵的屏幕房地产,这些好处是迄今为止由主要可用性的缺点,其中最显著其中是上下文的损失抵消。一旦用户点击文本框,标签将消失,因此用户无法仔细检查他/她写的是什么确实是为了被写入。占位符文本是视觉标签一个贫穷的替代品。

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

另一件事是,当用户看到一个文本框里面写的,他们可能会认为它已经在预先填写并可能因此忽略它。

为什么要左对齐字段标签对移动端表单设计是不好的

左对齐字段标签的主要问题涉及手机显示屏尺寸和宽高比。如果一个左对齐标签在字段前面所使用的,窄屏幕离开左为场本身的空间非常小。这是一个创建可用性的问题,因为表单字段通常不足够宽,以显示用户的整个输入。不能够看到输入数据造成了用户的麻烦,因为它使得更难为他们提交表单,从而导致更多的提交形式的错误之前发现任何输入错误。这很难,如果输入数据不完全可见现货的误差。

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

标签上方的字段或浮动标签

表单标签应高于表单域,使用户可以很容易地看到他们在,为什么都尽显。放置在标签上移动领域以上的主要好处是,你可以有表单字段延长屏幕的整个宽度,使它们足够大,以显示整个用户的输入(在一个体面的字体大小16像素一样)。额外的好处是字迹清晰的和有意义的字段标签,因为我们没有做限定于1-2词语 。

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

以上标签的主要缺点是,它需要更多的垂直空间,这意味着用户必须滚动多。然而,这并不是一个严重的问题 – 现在这是绝对自然滚动。

另外,也可以使用浮动标签,确保他们填写了正确的外地用户。占位符文本默认情况下显示,但一旦一个输入字段被窃听和输入文本占位符文本淡出和顶部对齐的标签的动画。

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

原则 4:表单输入应实时进行验证在一个理想的世界里

用户将填补必要信息的形式,并顺利完成他们的工作。在现实世界中,用户经常犯错误。但是,用户在通过填写表单只在提交找出来,他们已经犯了一个错误的过程中不喜欢。以通知提供的数据的成功/失败的正确时间是正确的用户提交信息后。实时在线验证立即通知有关用户提供的数据的正确性。这种方法允许用户以纠正他们做出更快的错误,无需等待,直到他们按下提交按钮查看错误。

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

如果在一个特定的格式都需要答案,提前告知用户,而无需额外的例子通信的征收规则(格式规范)。

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

内嵌的验证也有助于减少硬反弹。在下面的例子中你可以看到在线验证,提供用于固定一个潜在的问题的解决方案的一个很好的例子。

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

原则 5:匹配的键盘与所需的文本输入框

用户认识到,提供适当的键盘用于文本输入的应用程序。例如,当用户需要输入信用卡号码,只显示拨号盘,其输入限制到数字和不字符。这将减少他们的选择和错误,并加速完成。

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

确保这是整个应用程序,而不是只针对某些任务而不是其他一致的实现。

原则 6:提供在上下文中的有用的信息

有时候,你需要有相关的,在上下文信息准备协助用户通过表单很容易移动。但它真正需要的相应的文字只应该用于:

当调度日期,用户也喜欢像月历范围内查明星期几,无需离开应用程序,检查智能手机的日历。它也降低了用户的风险变得另一任务分心。

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

人可能对他们的数据的安全或隐私的关注,你需要向他们保证数据不会与第三方资源共享。

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

为一个经验法则,不要超过解释100个字符。

原则 7:使用格式宽恕

有些任务实在是要求用户键入非常精确的信息,但迫使人们提供特定格式的信息,可以在具有很好的实用性原则相抵触。如果正在要求用户输入的数字信息(诸如电话号码)转换成一种形式,是柔性的,和设计的屏幕,可以解释多个输入格式和显示的方式,很容易可扫描的信息(人类,而不是机器)中为了防止出错。不要使用固定的输入格式。

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

 

原文来自:阿里37.2度体验

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27572/

(0)
CatherineCatherine
上一篇 2017-05-18 06:37
下一篇 2017-05-18 09:00

相关推荐

  • 作为第一个接触小程序的设计师,是什么样的体验?

    自选股小程序已经上线,作为项目的一员,做了一下交互体验和视觉设计的总结。

    2017-05-08
  • UED研究如何应用到产品设计中

      腾讯有互联网产品经理的黄埔军校之称。前段时间看腾讯CDC出版的《在你身边,为你设计》,颇有启发。特别摘录书中的《商业价值与用户价值的平衡》中讲UED的部分,看看腾讯是如何让产品责任人和企业高层接受UE…

    2015-07-23
  • 交互设计 | 如何创作一本足够打动考官的作品集

    近年交互设计大热,但交互设计是否如大家所见所想仅是网页及APP设计,申请交互设计艺术留学的同学们又该如何创作帮助自己跨入名校大门的作品集?今天,汉艺国际(H·Art)为大家带来《如何创作一本打动考官的作品集》系列第九期,与大家分享交互设计作品集的创作方法(求职作品集可同理借鉴创作思维)。关于交互设计必须要强调的事儿①——交互设计不仅仅是网页和APP▼交互设计并不是一个单纯研究电子产品用户界面交互的学科。 交互设计包括但不限于用户界面设计...

    2018-04-06
  • 5个关键词看小程序和App的UI设计异同

    微信总喜欢在深夜推出一个大新闻,昨晚10点,小程序开放公测的消息一出,我公号的文章都推不出去了,一直显示系统繁忙,那得是多大的流量啊,心里暗想,能分我一点零头就好了,估计是我想多了!

    2017-05-16
  • 万豪国际集团打造智能交互体验客房

    作为全球酒店业的创新者,万豪国际集团近日携手两大全球领先企业 -- 三星与罗格朗,重磅推出 “智能交互体验客房”,探索有可能提升宾客体验的各种新概念,创造更为高效的客房设计,从而为宾客带来未来酒店体验。宾客可在万豪国际集团“智能交互体验客房”镜子上投射瑜伽练习视频万豪国际集团全球首席商务官Stephanie Linnartz表示:“我们的宾客期望在生活中的方方面面都能获得个性化的体验,酒店入住也是如此。智能交互体验客房使得宾客可以按照自...

    2018-01-30
  • 移动端搜索功能研究

    搜索功能无论在web端还是移动端,都是产品中十分重要的功能。文章主要从用户体验和产品功能、策略角度来分析,提出一些对应的设计方法。 搜索能够帮助用户快速精确找到想要的结果,其中两个重要目标是提高搜索结果…

    2016-10-28
  • Axure RP 8.0软件安装教程

    软件链接:Axure RP 8(32、64位)链接:https://pan.baidu.com/s/1pMubgLl密码:0nb1软件介绍Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。安装教程共享软件库1.点击历史信息,查看更多内容2.长按右...

    2018-03-04
  • 用户至上——何为用户体验

    在这边学习笔记中,主要将讲用户体验是什么、UCD的设计原则、设计原则在项目中的应用和市场、商业、用户不同需求的区分这四个方面。第一:何为用户体验用户体验设计协会将用户体验定义为“用户与产品、服务和系统交互过程中感知到的全部要素。用户体验设计包含构成界面的全部要素,例如页面布局、视觉设计、文字、品牌、声音和交互等。可用性工程协调各个要素之间的关系,并为用户提供最佳的交互体验。”另一个虽然可能不是最佳答案,但是简单有效的回答——就是让技术变...

    2018-04-24
  • 信息架构与导航系统,还傻傻分不清楚吗?

    作者:Jennifer Cardello,翻译:小球娘   几句话概述:信息架构是支撑网站的骨架;导航指的是网站交互界面上,用来让用户到达具体信息内容的元素。 人们有时会把信息架构(IA)和导航系统的概念混淆到一起,这些概…

    交互专题 2017-08-07
  • 唯品会实习|面向19/18届,地点广州

    公司介绍唯品会(NYSE:VIPS)VIP.com成立于2008年,以“全球精选 正品特卖”为品牌宗旨,在中国开创了“精选品牌、深度折扣、限时抢购”的时尚特卖模式,在线销售服饰鞋包、美妆、母婴、居家、生活等全品类名品。招聘岗位商务助理(18/19届)■岗位职责:1. 负责跟进预上线商品的所有商品资料;2. 负责检查货品清单正确性、完整性、准确性、规范性,交接正确的资料给相关部门;3. 负责申请标准的档期,走档期流程并落实档期日期;4. ...

    2018-03-06