作者s are vetted experts in their fields 和 write on topics in which they have demonstrated experience. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
米克罗斯飞利浦
验证专家 在设计

Miklos是一名UX设计师, 产品设计战略家, 作者, speaker with more than 18 years of experience in the design field.

专业知识

以前在

金融时报》
分享

Web 形式 are annoying, inefficient, they fill people with dread. 有没有人 就像 填写网页表格? 不过, 它们是一种“必要之恶”,可以创造或破坏一些最关键的在线互动.

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

Web-form ux ui design comes from paper-based form design

Thankfully, major shifts are on the way. 五年后, we will look back in horror at the awkward, 慢, 我们过去在填写工作申请时输入个人数据的方式令人沮丧, credit card 应用程序lications—dealing with eCommerce checkouts, account registrations… virtually any task requiring information entry. Notwithst和ing the importance of these interactions, 支持这些功能的表单的设计通常没有经过深思熟虑.

DMV网页表单设计

底线是, 今天的大多数网页表单——无论是桌面的还是移动的——都是糟糕的用户体验. 尽管有无数的书籍、研究、文章和UX行业专家的白皮书,比如 尼尔森诺曼集团, Baymard研究所 (电子商务)和 Luke Wroblewski (co-founder of the Interaction 设计 Association), many organizations—even those whose lifeblood depends on it—don’t follow web form ux design best practices.

That translates into billions 和 billions in lost revenue.

令人震惊的是, 亚马逊—the big multi-billion dollar behemoth of eCommerce—is ranked very low in “overall checkout UX performance” by the Baymard研究所 when considering user interactions with 形式 such as shipping 和 store pickup, 信用卡信息, 验证错误, 和更多的. How much business is lost due to such poor UX?

Today, most web 形式 are frustrating, 慢 to fill out, put 可用性 最后的.

网页表单设计UX UI

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

Job 应用程序lication web-form design ux

Organizations often try to collect too much information from users even when it’s not required to complete the transaction. Donation 形式 are often the biggest offenders as they insist on gathering donor profile data for their own statistics, not considering the interests of the donor. 想象一下,如果你被告知,当你要给别人你辛苦赚来的硬币,你必须等待, 手头现金, as they grill you with questions entirely for their own statistical use. 不,谢谢.

Mobile 形式—account registrations, checkouts, 等.—are fraught with their own unique ux issues 和 challenges. 因为屏幕太小,没有全尺寸键盘,所以输入很尴尬. 人 have to use their fingertips to tap 和 swipe UI elements. Text entry is particularly 慢 和 littered with typos, even on devices with dedicated mini keyboards.

Small screens mean fewer visible options at any given time, requiring users to rely on their short-term memory to build a mental model of the system behind the scenes.

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

不断发展的网页形式

Web 形式 are in the midst of an evolutionary phase. Ahead of the birth of an entirely new paradigm, we are somewhere between the painful, 笨重的, 繁琐和重复的“输入到表格”早期阶段和轻松轻松, 防误的未来哪里是Touch ID, 声波纹, 计算机视觉, 面部识别, 虹膜扫描 will unlock our personal data 和 seamlessly 和 securely provide all the necessary information to systems that need it.

用户体验设计师 are constantly striving to improve the experience 和 reduce the pain that comes with 填写网页表格, but in this intermediate phase are still only providing “vitamins”—hardly the ultimate “painkiller” solution.

In order to provide a more user-friendly, 无缝的用户体验, some of the latest form designs try to eliminate a few of the frustrations by implementing an interface that doesn’t bear any resemblance to conventional 形式. 它们确实成功地使我们的生活变得更加容易,但仍有一段路要走.

会话式UI网页表单设计 by Typeform

自动填充来救援

Google’s Chrome browser 和 its Autofill feature was a long-awaited godsend for more efficient form completion. 它可以安全地存储频繁输入的个人数据——包括信用卡——以便快速填写网页表单. A recent study by Google found that disabling Chrome’s Autofill feature resulted in 25% fewer form submissions. The study demonstrated that 没有 it the experience is so annoying, some users ab和on filling out 形式 altogether.

惊喜! Tedious typing into 形式 is something people want to avoid.

Google Chrome自动填充

密码管理器减轻痛苦

不断地检索和输入数百个在线账户的密码是件令人厌烦的事情. 几年前,密码管理器应运而生,现在已被广泛使用. 1密码Dashlane 两个领先的解决方案是这样的吗, 只需点击几下即可, securely store 和 auto-fill encrypted passwords for websites 和 应用程序s.

移动密码管理器自动填充

Social Sign-ins Put an End to Registration

根据 WebHostingBuzz, 86% of users report being bothered by having to create new accounts. A social sign-in eliminates the need for registration. It is a form of single sign-on using existing information from a social networking service such as Facebook, 谷歌+, LinkedIn和Twitter. It increases registration 和 minimizes barriers to entry by reducing the need for usernames 和 passwords.

社交登录,社交登录

Mobile Device Tech Eases the Burden of Forms

There have been numerous 可用性 improvements made for mobile 形式 that also drive some of the new best practices on desktops—such as storing 和 retrieving frequently used values, 使用手机功能(摄像头), 全球定位系统(GPS), 的声音, 联系人列表)来预填充表单和自动格式化数据(基于邮政编码预先选择美国州).

也, depending on the type of input needed, the keyboard can be changed; suggestions/autocomplete based on the first letters typed can be used, 电话号码 和 信用卡号 can be auto-formatted.

Apple Pay,计算机视觉

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

移动网页表单设计


桌面网页表单设计

Another trend is to make asking for user input more conversational, which creates a more human interaction. 这是一个更复杂的聊天机器人世界和未来其他输入方法的先驱, 它包括将用户输入字段交织成自然流畅的句子和问题.

会话式UI网页表单设计


Conversational commerce mobile web-form design

Machines Talk Back: Chatbots 和 the Rise of Automated Agents

通常, 机器人是使用即时通讯作为应用程序接口的人工智能平台. Instead of putting the burden on users by asking them to fill out 形式, chatbots relieve that burden by making the interaction more natural 和 conversational—some bots are not AI but real humans interacting via chat to provide an awesome user experience.

Even though the time something takes may be the same—to complete a simple travel booking for example—because the interaction is conversational 和 broken up into chunks, the cognitive strain is reduced 和 the experience improved.

Conversational UI chatbot GoVoteBot

Travelers can now make reservations with 凯悦酒店 使用 Facebook Messenger 应用程序, or simply engage in a live chat with the Hyatt team to ask free-form questions—就像 whether there is availability around particular holidays.

Conversational UI conversational commerce chatbot Hyatt

保险是另一个即将被自动化代理的兴起所颠覆的行业. Facebook making its Messenger platform available for anyone to develop 和 deploy chatbots also opened the door for the automated insurance agent.

杰克保险 英国就是这样做的. It was built to provide simple business insurance for freelance creatives 和 web professionals such as web 设计师, 开发人员, 插图画家.

Jack insurance conversational UI chatbot

然而,用聊天机器人和类似的东西来改善填写表单的体验只是一半的措施. It won’t work in the long run because people will continue to have to provide a lot of personal data repeatedly.

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

To get from the “vitamin” phase to a true painkiller, 我们需要以不同的方式思考,向新的范式迈出一大步.

The Rise of AI: User-friendly Data Collection of Tomorrow

谁没有经历过艰难而重复的预订暑假的过程呢? 当我最近计划的时候, I filled out numerous 形式 over 和 over again with three airlines, 十几家酒店, 两家汽车租赁公司, 机场接送,名字一样, 地址, 信用卡号, 常旅客俱乐部号码, 电话号码, 电子邮件地址……这个过程完全是灵魂的杀戮,完全是荒谬的.

Google reports that stress runs unchecked: 69% of leisure travelers worry they’re not finding the best price or making the best decision while booking a trip. Add to that the poor user experience filling out endless 形式 with the same information 90% of the time, 我们谈论的是一个非常令人沮丧和紧张的过程. 即使有Chrome的自动填充功能和前面提到的其他便利, the experience is still harrowing 和 filled with tedium.

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

如前所述, because of the array of technologies available on mobile: 全球定位系统(GPS), 指纹识别(Touch ID), 声纹与识别, 虹膜扫描, 人脸识别, 计算机视觉, 人工智能助手, 和聊天机器人, the unavoidable personal data collection that must occur for a successful online transaction will be revolutionized on mobile first. 相应的, desktop sites could utilize mobile devices’ tech capabilities for sophisticated ID verification by linking with them.

Conversational travel booking instead of web-形式

Let’s imagine an ideal future with a personal data vault that stores everything about a person super securely: their name, 家庭住址, 工作地址, 电话号码, 飞行里程, 出生日期, 等. 这个个人数据库可以通过生物识别验证的组合来解锁, 安全问题, 和一个主密码. 一旦解锁并获得访问权限, the site or 应用程序 would be able to access all the necessary information it needs 没有 the user having to type in any information.

Biometric identification 和 personal data security, web 形式

根据平台和设备的不同,可以使用不同的方法和后备方案来解锁保险库. To avoid users having to input data, the system would then ask simple questions using a chatbot, 或者其他带有可选语音识别和自然语言处理的会话UI. If 的声音 input is not practical, keyboard input would be available.

再进一步, 这个个人数据保险库可以与其他保险库(伴侣或配偶的)连接, 例如), with the owner’s consent would be temporarily unlocked to access relevant information (access would be brief 和 only the requested information would be made available). A travel 应用程序 or site could then securely access all necessary data, make travel arrangements effortlessly.

Web 形式 will soon become old-school—interesting artifacts of a bygone era for which there will no longer be any need. 在上面描述的场景中,UX设计师将面临设计更好的体验的问题 没有 形式. All of the conventional interactions, including typing information into web 形式, would dis应用程序ear into the background.

The Nature of User Input Is Changing

互联网和智能手机的使用创造了压倒性的、永远存在的海量数据. “未来科技,,比如计算机视觉, 物联网, 人工智能, machine learning is already here, changing the nature of interactions 和 the UX l和scape.

传统的ui正在消失,而web表单是这种转变的一部分. 当然, some need for user input 形式 will never go away, but invisible interfaces—where less 和 less user interaction will be needed to provide input—will become widespread.

机器学习等人工智能技术可以从个人数据获取价值, 智能算法可以预测完成工作申请需要哪些数据, 旅行预订, online purchases easier for users.

当我们拥护充满希望的愿望并追求这些崇高的用户体验理想时, there remains a fracture between inventive ways to eliminate web 形式 entirely 和 security concerns around personal data. 我们可以设计健壮而安全的系统,但我们需要处理这些问题. Studies have shown that people are willing to share personal data 和 allow tracking if they derive significant value 和 time savings from it.

保持领先地位, 用户体验设计师应该开始考虑充满聊天机器人和会话ui的未来场景. 我们需要优化体验并找出用例场景. Are the interaction steps as smooth 和 efficient as possible? 聊天机器人的语气是什么? Are we reducing the time it takes to get things done or increasing it? 随着生物识别身份验证的到来,这种互动将会是什么样子? 我们如何才能更好地为用户服务,并提供令人惊叹的体验,让生活更轻松?

Technology 和 the nature of interactions will change, but the sum 和 substance of the best practices of UX design—the user-centered design process—will continue to evolve 和 ultimately prevail.

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

米克罗斯飞利浦

验证专家 在设计

英国伦敦

2016年5月20日成为会员

作者简介

Miklos是一名UX设计师, 产品设计战略家, 作者, speaker with more than 18 years of experience in the design field.

作者s are vetted experts in their fields 和 write on topics in which they have demonstrated experience. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前在

金融时报》

World-class articles, delivered weekly.

By entering your email, you are agreeing to our 隐私政策.

World-class articles, delivered weekly.

By entering your email, you are agreeing to our 隐私政策.

Toptal设计师

加入总冠军® 社区.