當(dāng)前位置：首頁 >

web表单设计:点石成金_设计复杂的用户表单：12个UX最佳实践

發(fā)布時間：2023/12/9 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 web表单设计:点石成金_设计复杂的用户表单：12个UX最佳实践小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

web表單設(shè)計:點石成金

It’s been a few years that I’ve been taking interest in designing complex user forms, where a lot of information is requested from users. Here are a few industries where you regularly find such flows:

幾年來，我一直對設(shè)計復(fù)雜的用戶表單感興趣，其中需要用戶提供大量信息。以下是一些您經(jīng)常會發(fā)現(xiàn)此類流量的行業(yè)：

🏡 Real estate / Accommodation (e.g. publishing a listing on Airbnb)
🏡房地產(chǎn)/住宿(例如在Airbnb上發(fā)布清單)
💰 FinTech (e.g. sending money with TransferWise)
Tech金融科技(例如通過TransferWise匯款)
👩?💼 LegalTech (claiming a compensation with AirHelp)
💼LegalTech(通過AirHelp索賠)
?? InsurTech (e.g. getting a quote on Lemonade)
??InsurTech(例如獲得檸檬水的報價)
🛠 Any kind of repair / home improvement services (e.g. booking an appointment with Puls)
🛠任何類型的維修/家庭裝修服務(wù)(例如與Puls預(yù)約)

Designing such flows is tricky but important, because while asking a very extensive set of data to the user, the experience must look like it’s effortless. Here are a few principles that are worth following in order to design the right flow:

設(shè)計這樣的流程非常棘手，但很重要，因為在向用戶詢問大量數(shù)據(jù)時，體驗必須看起來很輕松。以下是設(shè)計正確流程時應(yīng)遵循的一些原則：

🏎? Reassure users on the duration of the flow
🏎?讓用戶放心流動的持續(xù)時間
?🍹 Make users feel like they’re not working
?🍹讓用戶覺得自己沒有工作
👌 Present all steps in a clear and understandable way
in以清晰易懂的方式介紹所有步驟
🤝 Explain why you’re asking for each piece of information
🤝解釋為什么要詢問每條信息
🕹 Remove distractions
🕹消除干擾
💾 Reassure users that their information can be saved
💾向用戶保證可以保存他們的信息
?? Show the real-time impact of the user’s action
??顯示用戶操作的實時影響
💡 Give some hints
💡給一些提示
👩 Add some human touch
👩增添一些人情味
👮?♂? Bring in some credentials
ing帶來一些憑據(jù)
🛣 Make it clear where users are and where they’re going
🛣弄清楚用戶的位置和去向
📝 Enable users to review their information
📝使用戶能夠查看其信息

Alright, let’s deep dive into each of those principles!

好吧，讓我們深入探討其中的每個原則！

🏎向用戶保證流程的持續(xù)時間 (🏎 Reassure users on the duration of the flow)

Before they engage in a form, users must feel like this is going to be fast. One of the best examples is the online bank N26, who claims that opening an account with them only takes 8 minutes.

在使用表單之前，用戶必須感覺這很快。最好的例子之一是網(wǎng)上銀行N26 ，后者聲稱在他們的銀行開戶僅需8分鐘。

Opening a bank account in 8 minutes? That sounds pretty futuristic, and yet it’s true.

在8分鐘內(nèi)開設(shè)銀行帳戶？聽起來很有前途，但這是事實。

The same goes for Lemonade, an insurance startup, who promises you to get a quote “in seconds”:

保險初創(chuàng)公司Lemonade的情況也是如此，他向您保證會在“ 幾秒鐘內(nèi) ”獲得報價：

The Zebra, an American car and home insurance comparison website, goes even further. Even though their flow takes a few minutes to complete, their selling point is for you to “Compare insurance quotes instantly”.

美國汽車和房屋保險比較網(wǎng)站Zebra的使用范圍更廣。即使他們的流程需要幾分鐘才能完成，但他們的賣點是讓您“ 立即比較保險報價”。

🍹讓用戶感覺自己不在工作 (🍹 Make users feel like they’re not working)

This is probably the most critical part. Users are lazy and don’t want to feel like you’re asking them to work too hard. Hence a few ideas that you can apply to make them feel like you’re doing the work for them:

這可能是最關(guān)鍵的部分。用戶很懶惰，不想讓您覺得他們要求他們太努力。因此，您可以應(yīng)用一些想法使他們感到自己正在為他們做工作：

Offer them a list of pre-defined choices, instead of asking them to manually research what they’re looking for
向他們提供預(yù)定義選擇的列表，而不是要求他們手動研究他們要尋找的內(nèi)容

That’s why offering a list of pre-defined choices, like Puls (an American home maintenance startup) does, makes it more likely that users are going to complete a complex form.

這就是為什么提供諸如Puls (一家美國家庭維護(hù)初創(chuàng)公司)之類的預(yù)定義選項的列表，使用戶更有可能填寫復(fù)雜表格的原因。

This follow a psychological principle, “Recognition over Recall” (source: Mental Notes card deck). This principle states the following: “It’s easier to recognize things we have previously experienced than it is to recall them from memory.”

這遵循一種心理原則，即“ 對召回的認(rèn)可 ”(來源：心理筆記卡片組)。該原則規(guī)定如下：“ 識別我們以前經(jīng)歷過的事情要比從記憶中回憶起來容易。 ”

Illustrate each choice to give more context about what you’re asking
說明每種選擇，以提供有關(guān)您所要詢問的更多背景信息

The Zebra’s fire hydrant illustration is a good example. Images and pictures speak louder than words. With this illustration below, I immediately understand what is asked from me.

斑馬的消火栓插圖就是一個很好的例子。 圖像和圖片勝于文字 。通過下面的插圖，我立即了解我的要求。

It can also be illustrated in a fun/creative way, like Lemonade does with its toothbrushes to ask who’s living in your home:

也可以通過有趣/創(chuàng)意的方式來說明，例如Lemonade用牙刷來詢問誰住在您的房屋中：

in以清晰易懂的方式介紹所有步驟 (👌 Present all steps in a clear and understandable way)

A long form with several pieces of information asked on one page can be visually exhausting for the user.

在一頁上詢問多條信息的長格式可能會給用戶造成視覺疲勞。

That’s where “Sequencing”, a psychological principle, comes into play: “We are more likely to take action when complex activities are broken down into smaller tasks” (source: Mental Notes).

這就是“排序”(一種心理學(xué)原理)開始發(fā)揮作用的地方：“ 當(dāng)復(fù)雜的活動分解成較小的任務(wù)時，我們更有可能采取行動 ”(來源：心理筆記 )。

Sequencing is applied on many digital products, by cutting down complex forms into smaller sub steps. It’s what we also sometimes call a “One screen, one action” experience.

通過將復(fù)雜形式分解為較小的子步驟，序列化可應(yīng)用于許多數(shù)字產(chǎn)品。這就是我們有時也稱為“一個屏幕，一個動作”的體驗。

For instance, Robinhood, the investment app, breaks down its sign up flow into 3 steps instead of one:

例如，投資應(yīng)用程序Robinhood將注冊流程分為三個步驟，而不是三個步驟：

The same goes for Lemonade, which asks information about your home screen by screen, which makes the flow feel smoother and the user more serene.

Lemonade也是如此，它逐個屏幕詢問有關(guān)您的主屏幕的信息，這使流程更順暢，用戶也更安靜。

This “one screen, one action” experience is now a common practice that has been widely adopted by lots of digital products.

這種“一個屏幕，一個動作”的體驗現(xiàn)在已經(jīng)成為許多數(shù)字產(chǎn)品廣泛采用的慣例。

🤝解釋為什么要詢問每條信息 (🤝 Explain why you’re asking for each piece of information)

Since the Cambridge Analytica case and a few other user data breaches (Adobe, LinkedIn, Canva, eBay, etc.), users don’t give away all their data as easily as before. You have to be transparent why and how you will be using their personal information.

由于Cambridge Analytica案和其他一些用戶數(shù)據(jù)泄露事件(Adobe，LinkedIn，Canva，eBay等)，用戶不會像以前那樣輕易地泄露所有數(shù)據(jù)。您必須保持透明，為什么以及如何使用他們的個人信息。

It’s good to give some reassurance about data privacy, like The Zebra does (“We take your privacy seriously and your information is always secure with us”).

最好給數(shù)據(jù)放心一些保證，就像Zebra所做的那樣(“我們認(rèn)真對待您的隱私，并且您的信息始終對我們安全”)。

It’s even better to explain why each piece of information is required…

更好地解釋為什么需要每條信息…

…When you ask for personal information
…當(dāng)您要求提供個人信息時

The best example I’ve found to date is N26’s sign up flow from 2018. In this flow, each and every piece of personal information was justified with a very convincing description.

迄今為止，我發(fā)現(xiàn)的最好的例子是N26從2018年開始的注冊流程。在此流程中，每條個人信息都用非常令人信服的描述來說明。

…When you ask for information that’s tricky to get
…當(dāng)您索取難以獲取的信息時

For instance, when tricky information is asked for, like “How much would it cost to rebuild your home”, it’s key to explain why this is important. Otherwise, users can get quickly discouraged by such questions.

例如，當(dāng)要求提供棘手的信息時，例如“重建房屋要花費多少”，關(guān)鍵是要解釋為什么這很重要。否則，用戶可能會很快被此類問題所困擾。

Luko, a French insurtech startup, justifies asking detailed information about your home in order because they want to “offer you the best rates”.

法國保險技術(shù)創(chuàng)業(yè)公司Luko合理地詢問有關(guān)您房屋的詳細(xì)信息，因為他們想“為您提供最優(yōu)惠的價格”。

This makes users even more motivated, as a large part of them probably came here to make some savings and to get a quote in a quick and efficient way.

這使用戶更有動力，因為其中很大一部分人可能是來這里節(jié)省一些錢并以快速有效的方式獲得報價的。

🕹消除干擾 (🕹 Remove distractions)

In a complex user form, it’s important to provide a clean interface where users aren’t distracted too much by banners and navigation links.

在復(fù)雜的用戶形式中，重要的是要提供一個干凈的界面，以使用戶不會被標(biāo)語和導(dǎo)航鏈接所吸引。

For instance, in the Airbnb publication flow, the only link you’ll find is “Save and Exit”. There is no possibility to access your user profile or make a search. This maximizes the chances that users will stay focused and complete the funnel.

例如，在Airbnb發(fā)布流程中，您將找到的唯一鏈接是“保存并退出”。無法訪問您的用戶個人資料或進(jìn)行搜索。這樣可以最大程度地使用戶保持專注并完成渠道。

Lemonade went for a compromise: they’re still giving users the possibility to access navigation links, but those are hidden behind a hamburger menu in the top left section of the screen.

Lemonade做出了讓步：他們?nèi)匀粸橛脩籼峁┰L問導(dǎo)航鏈接的可能性，但是這些鏈接隱藏在屏幕左上方的漢堡菜單后面。

💾向用戶保證可以保存他們的信息 (💾 Reassure users that their information can be saved)

Complex user forms can sometimes require users to complete them over the course of several sessions. Indeed, they can require some information, documents or pictures that users can’t immediately access.

復(fù)雜的用戶表單有時可能需要用戶在多個會話過程中完成它們。實際上，它們可能需要一些用戶無法立即訪問的信息，文檔或圖片。

That’s why it’s important to make it clear that all the efforts that users have made so far aren’t in vain. That all their information has been saved or can be saved easily.

因此，重要的是要弄清楚用戶到目前為止所做的所有努力都沒有白費。他們的所有信息已保存或可以輕松保存。

Publishing a listing on Airbnb can take some time, because you need to upload the right pictures. That’s why the interface lets its users know that their progress has been automatically saved, and also displays a link that enables them to “Save and Exit”.

在Airbnb上發(fā)布列表可能需要一些時間，因為您需要上傳正確的圖片。因此，該界面讓其用戶知道其進(jìn)度已自動保存，并顯示一個鏈接，使他們能夠“保存并退出”。

??顯示用戶操作的實時影響 (?? Show the real-time impact of the user’s action)

In forms where user actions have an impact on a major piece of information (e.g. price), showing the real-time impact adds a lot of serenity.

在用戶行為會對主要信息(例如價格)產(chǎn)生影響的表格中，顯示實時影響會增加很多寧靜。

For instance, when you’re booking a flight on Transavia, a European low-cost airlines, any extra service you’re opting for is immediately shown in the sticky footer. You see a new icon for the extra service you’ve selected, but you also see the price being instantly updated.

例如，當(dāng)您預(yù)訂歐洲低成本航空公司Transavia上的航班時，所選擇的任何額外服務(wù)都會立即顯示在粘性頁腳中。您會看到一個新圖標(biāo)，顯示所選的額外服務(wù)，但價格也會即時更新。

Same idea in the B2B space. When you upgrade your FullStory account, there’s a fixed block dedicated to the details of your offer on the right side of the screen. This shows the content of your offer as well as the monthly price instantly updated when you make changes in the left part of the screen.

B2B空間中的想法相同。升級FullStory帳戶時，屏幕右側(cè)會出現(xiàn)一個固定的框，專門用于顯示商品的詳細(xì)信息。當(dāng)您在屏幕左側(cè)進(jìn)行更改時，這將顯示報價的內(nèi)容以及每月更新的即時價格。

This sort of “real-time update” experience adds a lot of transparency to the pricing of a service.

這種“實時更新”體驗為服務(wù)的定價增加了很多透明度。

💡給一些提示 (💡 Give some hints)

When a flow requires very specific information where users can easily get mistaken, it’s relevant to add some hints.

當(dāng)流程需要非常具體的信息以使用戶容易出錯時，添加一些提示就很重要。

Photos are the most important asset of an Airbnb listing. If you upload ugly photos, chances are very limited that you will be able to host guests. That’s why Airbnb gives some hints on its right side panel on how to take quality photos.

照片是Airbnb列表中最重要的資產(chǎn)。如果您上傳丑陋的照片，則能夠接待客人的機會非常有限。這就是為什么Airbnb在其右側(cè)面板上會提示如何拍攝高質(zhì)量照片的原因。

But hints can also be inspirations from other users. When you start creating an experience on Airbnb, they display similar experiences on the right side panel, which enables you to benchmark other experiences in order to find inspiration in terms of name, branding, photos, description, price, etc.

但是提示也可能是其他用戶的靈感 。當(dāng)您開始在Airbnb上創(chuàng)建體驗時，它們會在右側(cè)面板上顯示類似的體驗，使您可以對其他體驗進(jìn)行基準(zhǔn)測試，以便從名稱，品牌，照片，描述，價格等方面尋找靈感。

The same goes for pricing. When you post an offer for a project on Upwork, they show you a range of hourly rates for similar projects. This enables you to increase chances that you’ll find a relevant freelancer for your job.

定價也是如此 。當(dāng)您在Upwork上發(fā)布項目報價時，它們會為您顯示類似項目的每小時收費范圍。這使您增加找到適合您工作的自由職業(yè)者的機會。

👩增添一些人情味 (👩 Add some human touch)

In verticals where users are usually cautious (e.g. insurance or legal expertise), adding a human presence in the flow can feel reassuring. It looks like there’s someone personally taking care of your case, even though it’s just a computer-generated form.

在用戶通常都很謹(jǐn)慎的垂直行業(yè)(例如，保險或法律專業(yè)知識)，在流程中增加人員的存在會讓人感到放心。看起來好像有人親自照顧您的案件，即使這只是計算機生成的表格。

Crème de la crème, a freelance community platform, combines bringing some human touch with giving some hints. Throughout the signup flow, their head of community is giving some tips on how to best fill in the required information.

一個自由的社區(qū)平臺Crèmede lacrème ，結(jié)合了一些人性化和暗示性。在整個注冊流程中，他們的社區(qū)負(fù)責(zé)人將為您提供一些有關(guān)如何最好地填寫所需信息的提示。

ing帶來一些憑據(jù) (👮?♂? Bring in some credentials)

In verticals depending on an official regulation, it’s important to show that you have the appropriate credentials. That’s why AirHelp shows an informational banner proving that it’s enforcing the “EU regulation EC261”. This plays on authority — thanks to this, users are better convinced of AirHelp’s legitimacy regarding flight compensations.

根據(jù)官方規(guī)定，在垂直行業(yè)中，重要的是要證明您具有適當(dāng)?shù)膽{據(jù)。這就是為什么AirHelp會顯示一條信息性標(biāo)語，證明其正在執(zhí)行“ EU法規(guī)EC261”。這發(fā)揮了權(quán)威作用 -從而，使用戶更好地相信了AirHelp在航班補償方面的合法性。

In highly competitive verticals, credentials can also be emphasized with social proof. Using customer testimonials and third-party ratings, this reinforces AirHelp’s legitimacy.

在競爭激烈的垂直行業(yè)中，也可以通過社會證明來強調(diào)證書。使用客戶推薦和第三方評級，可以增強AirHelp的合法性。

🛣弄清楚用戶的位置和去向 (🛣 Make it clear where users are and where they’re going)

In a long user form with many steps, it’s important to give users some peace of mind by clearly showing their progress. This can be done through 3 interface elements:

在具有許多步驟的長用戶形式中，重要的是通過清楚地顯示其進(jìn)度來使用戶放心。這可以通過3個界面元素來完成：

Showing a progress bar
顯示進(jìn)度條

This is the most frequently used UI component to show progress. It works easily both on desktop and mobile.

這是顯示進(jìn)度的最常用的UI組件。它在臺式機和移動設(shè)備上均可輕松運行。

Showing the main steps of the flow
顯示流程的主要步驟

This can be either displayed horizontally, through breadcrumbs, like on TransferWise’s money transfer flow…

它可以通過面包屑水平顯示，例如在TransferWise的匯款流程上…

… Or vertically, through a side panel, like on Airbnb’s experience publication flow:

…或垂直通過側(cè)面面板，如Airbnb的體驗發(fā)布流程：

Using “checkpoints” screens
使用“檢查點”屏幕

A “checkpoint” screen is a screen that you see after completing each step of a flow. If you have a flow that can take several user sessions to complete, it can be relevant to implement such an interface. That’s what Airbnb does in its publication flow.

“檢查點”屏幕是您完成流程的每個步驟之后看到的屏幕。如果您的流程需要花費多個用戶會話才能完成，則實現(xiàn)這樣的接口可能很重要。這就是Airbnb在其發(fā)布流程中所做的。

📝使用戶能夠查看其信息 (📝 Enable users to review their information)

In flows where the last step includes a very committing action (e.g. transferring money or making a payment), users can easily drop off if they’re not sure that all of their information is correct.

在流程中，最后一步包括非常有承諾的操作(例如，轉(zhuǎn)賬或付款)，如果不確定不確定所有信息的正確性，用戶可以輕松地退出。

That’s why you need to provide them with an easy way to review all of the information they’ve completed throughout the flow, as well as a way to easily edit any piece of information that might be incorrect.

因此，您需要為他們提供一種簡便的方法來查看他們在整個流程中完成的所有信息，以及輕松地編輯任何可能不正確的信息的方法。

A good example is TransferWise’s “Review” page, just before sending a money transfer.

發(fā)送匯款之前，TransferWise的“審核”頁面就是一個很好的例子。

That’s it for this post. I hope you enjoyed those best practices! Feel free to share some of your own examples of how to make complex user forms look simpler.

就是這個帖子。希望您喜歡這些最佳做法！隨意分享一些自己的示例，以使復(fù)雜的用戶表單看起來更簡單。

Want to get more product tips? Sign up for my monthly newsletter to stay in touch! 👉 http://eepurl.com/gYTX2b

想獲得更多產(chǎn)品提示嗎？ 訂閱我的每月時事通訊以保持聯(lián)系！ 👉 http://eepurl.com/gYTX2b

Need product/UX consulting on your own product? Check out my services! 👉 http://www.lucdid.com

需要您自己的產(chǎn)品的產(chǎn)品/ UX咨詢嗎？ 查看我的服務(wù)！ 👉 http://www.lucdid.com

翻譯自: https://uxdesign.cc/designing-complex-user-forms-12-ux-best-practices-f9ffdbd7b67c