作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
米克罗斯飞利浦的头像

米克罗斯飞利浦

Miklos是一名UX设计师, 产品设计战略家, 作者, 在设计领域拥有超过18年经验的演讲者.

专业知识

以前在

金融时报》
分享

Web表单令人讨厌,效率低下,而且让人充满恐惧. 有没有人 就像 填写网页表格? 不过, 它们是一种“必要之恶”,可以创造或破坏一些最关键的在线互动.

Web表单仍然主要基于旧的纸质表单——以系统为中心的ui遗留下来的僵尸. 以用户为中心). 30年过去了,我们仍然一遍又一遍地把同样的信息输入表格.

web表单ux ui设计来源于纸质表单设计

值得庆幸的是,重大转变正在发生. 五年后, 我们会惊恐地回顾过去的尴尬, 慢, 我们过去在填写工作申请时输入个人数据的方式令人沮丧, 信用卡应用程序——处理电子商务结帐, 账户注册……几乎任何需要输入信息的任务. 尽管这些互动很重要, 支持这些功能的表单的设计通常没有经过深思熟虑.

DMV网页表单设计

底线是, 今天的大多数网页表单——无论是桌面的还是移动的——都是糟糕的用户体验. 尽管有无数的书籍、研究、文章和UX行业专家的白皮书,比如 尼尔森诺曼集团, Baymard研究所 (电子商务)和 Luke Wroblewski (交互设计协会联合创始人), 许多组织——甚至是那些依赖于它的组织——都没有遵循web表单用户体验设计的最佳实践.

这意味着数以亿计的收入损失.

令人震惊的是, 亚马逊当考虑到用户与运输和商店提货等形式的交互时,这家价值数十亿美元的电子商务巨头在Baymard研究所的“整体结账用户体验表现”中排名很低, 信用卡信息, 验证错误, 和更多的. 这种糟糕的用户体验导致了多少业务的流失?

今天,大多数网络表单都令人沮丧,填写和放置都很慢 可用性 最后的。.

网页表单设计UX UI

就时间和认知压力而言,在线表单往往是一个巨大的麻烦. 它们非常容易出错, 缺少默认值, 自动完成, auto-formatting; they h和le input errors badly—和 that’s not even talking about mobile 形式 which require a distinct design mindset 和 have different 可用性 issues.

工作申请网页表单设计ux

组织经常试图从用户那里收集过多的信息,即使这些信息不是完成交易所必需的. 捐赠表格往往是最大的违规者,因为他们坚持收集捐赠者的个人资料作为自己的统计数据, 不考虑捐赠者的利益. 想象一下,如果你被告知,当你要给别人你辛苦赚来的硬币,你必须等待, 手头现金, 因为他们问你问题完全是为了他们自己的统计用途. 不,谢谢.

移动表单——账户注册、结帐等.-都充满了自己独特的用户体验问题和挑战. 因为屏幕太小,没有全尺寸键盘,所以输入很尴尬. 人们必须使用他们的指尖来点击和滑动UI元素. 文本输入特别慢,而且到处都是错别字, 即使是在配备专用迷你键盘的设备上.

小屏幕意味着在任何时候可见选项都更少, 要求用户依靠他们的短期记忆在幕后建立系统的心智模型.

移动网页表单用户体验设计

不断发展的网页形式

Web表单正处于进化阶段. 在一个全新的范例诞生之前, 我们在痛苦之间的某处, 笨重的, 繁琐和重复的“输入到表格”早期阶段和轻松轻松, 防误的未来哪里是Touch ID, 声波纹, 计算机视觉, 面部识别, 虹膜扫描将解锁我们的个人数据,并无缝、安全地向需要它的系统提供所有必要的信息.

用户体验设计师 是否一直在努力改善体验,减少填写网页表单带来的痛苦, 但在这个中间阶段,我们仍然只提供“维生素”——几乎不是最终的“止痛药”解决方案.

以便提供更加用户友好的, 无缝的用户体验, 一些最新的表单设计试图通过实现与传统表单没有任何相似之处的接口来消除一些挫折. 它们确实成功地使我们的生活变得更加容易,但仍有一段路要走.

会话UI网页表单设计由Typeform

自动填充来救援

谷歌的Chrome浏览器及其自动填充功能是人们期待已久的天赐之物,它能提高表单的完成效率. 它可以安全地存储频繁输入的个人数据——包括信用卡——以便快速填写网页表单. 谷歌最近的一项研究发现,禁用Chrome的自动填充功能可以减少25%的表单提交. 研究表明,没有它的体验是如此令人讨厌, 一些用户完全放弃填写表单.

惊喜! 人们想要避免冗长的表单输入.

Google Chrome自动填充

密码管理器减轻痛苦

不断地检索和输入数百个在线账户的密码是件令人厌烦的事情. 几年前,密码管理器应运而生,现在已被广泛使用. 1密码Dashlane 两个领先的解决方案是这样的吗, 只需点击几下即可, 安全存储和自动填充网站和应用程序的加密密码.

移动密码管理器自动填充

社交登录终结了注册

根据 WebHostingBuzz在美国,86%的用户称自己被创建新账户所困扰. 社交登录消除了注册的需要. 这是一种单点登录的形式,使用来自Facebook等社交网络服务的现有信息, 谷歌+, LinkedIn和Twitter. 它增加了注册,并通过减少对用户名和密码的需求,最大限度地降低了进入的门槛.

社交登录,社交登录

移动设备技术减轻了表单的负担

移动表单的可用性得到了大量改进,这些改进也推动了一些新的桌面最佳实践——比如存储和检索经常使用的值, 使用手机功能(摄像头), 全球定位系统(GPS), 的声音, 联系人列表)来预填充表单和自动格式化数据(基于邮政编码预先选择美国州).

也, 取决于所需输入的类型, the keyboard can be changed; suggestions/autocomplete based on the first letters typed can be used, 电话号码和信用卡号码可以自动格式化.

Apple Pay,计算机视觉

如前所述, traditional web form design follows the old paper-based model; that’s why they look so similar. 以前,以任何其他方式收集个人数据的技术是不可用的,但今天是可行的. 为了彻底抛弃传统的网页形式, 设计师正在向用户展示一个干净的UI和下划线区域,以指示文本输入的位置. 这样,填写表单感觉更自然,而不像数据输入.

移动网页表单设计


桌面网页表单设计

另一个趋势是让请求用户输入更具对话性, 哪一个能创造出更人性化的互动. 这是一个更复杂的聊天机器人世界和未来其他输入方法的先驱, 它包括将用户输入字段交织成自然流畅的句子和问题.

会话式UI网页表单设计


会话商务移动网页表单设计

机器会说话:聊天机器人和自动化代理的兴起

通常, 机器人是使用即时通讯作为应用程序接口的人工智能平台. 而不是通过让用户填写表单来增加他们的负担, 聊天机器人通过使交互更加自然和对话来减轻这种负担——一些机器人不是人工智能,而是真正的人类,通过聊天进行交互,提供令人敬畏的用户体验.

尽管某些事情花费的时间可能是相同的——例如完成一个简单的旅行预订——因为交互是对话式的,并且被分成了几个块, 认知压力减少,体验得到改善.

会话UI聊天机器人GoVoteBot

旅客现在可以通过 凯悦酒店 使用 Facebook Messenger 应用程序, 或者直接与凯悦团队进行实时聊天,问一些自由形式的问题,比如在特定的假期是否有空房.

会话UI会话商务聊天机器人Hyatt

保险是另一个即将被自动化代理的兴起所颠覆的行业. Facebook让任何人都可以使用Messenger平台开发和部署聊天机器人,这也为自动保险代理打开了大门.

杰克保险 英国就是这样做的. 它的建立是为了提供简单的商业保险为自由创意和网络专业人士,如web 设计师, 开发人员, 插图画家.

杰克保险会话UI聊天机器人

然而,用聊天机器人和类似的东西来改善填写表单的体验只是一半的措施. 从长远来看,这是行不通的,因为人们将不得不反复提供大量的个人数据.

我们不能用制造问题时的思维方式来解决问题. ——爱因斯坦

从"维生素"阶段变成真正的止痛药, 我们需要以不同的方式思考,向新的范式迈出一大步.

人工智能的兴起:未来用户友好的数据收集

谁没有经历过艰难而重复的预订暑假的过程呢? 当我最近计划的时候, 我一遍又一遍地填了三家航空公司的表格, 十几家酒店, 两家汽车租赁公司, 机场接送,名字一样, 地址, 信用卡号, 常旅客俱乐部号码, 电话号码, 电子邮件地址……这个过程完全是灵魂的杀戮,完全是荒谬的.

谷歌报告称,压力是不受控制的:69%的休闲旅行者担心他们在预订旅行时找不到最优惠的价格或做出最好的决定. 再加上糟糕的用户体验,90%的时间里,用户都在用相同的信息填写没完没了的表单, 我们谈论的是一个非常令人沮丧和紧张的过程. 即使有Chrome的自动填充功能和前面提到的其他便利, 这段经历仍然令人痛苦,充满了乏味.

长期的用户体验愿景不是不断完善网页表单,而是彻底消灭它们.

如前所述, 因为移动设备上的一系列技术:全球定位系统(GPS), 指纹识别(Touch ID), 声纹与识别, 虹膜扫描, 人脸识别, 计算机视觉, 人工智能助手, 和聊天机器人, 为了成功的在线交易,不可避免的个人数据收集将首先在移动设备上发生革命性的变化. 相应的, 桌面网站可以利用移动设备的技术能力,通过链接来进行复杂的身份验证.

会话式旅行预订,而不是网络形式

让我们想象一个理想的未来,有一个个人数据库,可以超级安全地存储关于一个人的一切:他们的名字, 家庭住址, 工作地址, 电话号码, 飞行里程, 出生日期, 等. 这个个人数据库可以通过生物识别验证的组合来解锁, 安全问题, 和一个主密码. 一旦解锁并获得访问权限, 该网站或应用程序将能够访问所有必要的信息,而无需用户输入任何信息.

生物识别和个人资料安全,网页表单

根据平台和设备的不同,可以使用不同的方法和后备方案来解锁保险库. 避免用户输入数据, 然后系统会用聊天机器人问一些简单的问题, 或者其他带有可选语音识别和自然语言处理的会话UI. 如果语音输入不实用,可以使用键盘输入.

再进一步, 这个个人数据保险库可以与其他保险库(伴侣或配偶的)连接, 例如), 在所有者同意的情况下,将暂时解锁以访问相关信息(访问将是短暂的,仅提供所请求的信息). 然后,旅游应用程序或网站就可以安全地访问所有必要的数据, 毫不费力地安排旅行.

Web表单将很快成为过时时代的老派文物,不再有任何需要. 在上面描述的场景中,UX设计师将面临设计更好的体验的问题 没有 形式. 所有传统的相互作用, 包括在网页表单中输入信息, 会消失在背景中吗.

用户输入的性质正在发生变化

互联网和智能手机的使用创造了压倒性的、永远存在的海量数据. “未来科技,,比如计算机视觉, 物联网, 人工智能, 机器学习已经出现了, 改变交互和用户体验的本质.

传统的ui正在消失,而web表单是这种转变的一部分. 当然, 对用户输入表单的一些需求永远不会消失, 但是不可见的界面——在这种界面中,提供输入所需的用户交互将越来越少——将变得普遍.

机器学习等人工智能技术可以从个人数据获取价值, 智能算法可以预测完成工作申请需要哪些数据, 旅行预订, 而且网上购物对用户来说更方便.

当我们拥护充满希望的愿望并追求这些崇高的用户体验理想时, 在完全消除网络表单的创新方法和对个人数据的安全担忧之间仍然存在分歧. 我们可以设计健壮而安全的系统,但我们需要处理这些问题. 研究表明,如果人们从中获得重大价值和节省时间,他们愿意分享个人数据,并允许跟踪.

保持领先地位, 用户体验设计师应该开始考虑充满聊天机器人和会话ui的未来场景. 我们需要优化体验并找出用例场景. 交互步骤是否尽可能的流畅和高效? 聊天机器人的语气是什么? 我们是在减少完成任务所需的时间还是在增加时间? 随着生物识别身份验证的到来,这种互动将会是什么样子? 我们如何才能更好地为用户服务,并提供令人惊叹的体验,让生活更轻松?

技术和互动的本质将会改变, 但是用户体验设计最佳实践的总和和实质——以用户为中心的设计过程——将继续发展并最终占上风.

聘请Toptal这方面的专家.
现在雇佣
米克罗斯飞利浦的头像
米克罗斯飞利浦

位于 英国伦敦

成员自 2016年5月20日

作者简介

Miklos是一名UX设计师, 产品设计战略家, 作者, 在设计领域拥有超过18年经验的演讲者.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前在

金融时报》

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.