<pre id="qjh0x"></pre>

    <acronym id="qjh0x"></acronym>
  1. <p id="qjh0x"></p>
    當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    2022-06-30 1085 0

    Hi,我是小紀。我們每天都在填寫各種表單,例如發帖、填單、登錄等等。然而,在填寫時經常容易出錯,例如可能會輸錯密碼。從用戶體驗角度看,幫助用戶盡可能順利地處理這些錯誤至關重要。

    對于我們設計師來說,尤其是現在 B 端設計如此流行的情況下,表單設計細節尤其需要各位設計師注意。今天會分享表單設計中那些你不注意的細節點,必須先點贊收藏了,這些干貨知識相信你一定用的上。

    比如以登錄為例,當你把密碼輸錯后,網站清空你剛剛才填好的表單,是不是非常讓你崩潰?刪除所有數據對用戶來說很煩人,這會讓你必須重新輸入用戶名和密碼,即便只是拼錯了密碼而已。

    因此,任何專業的用戶體驗設計師不僅應該考慮順利的流程情況,還應該考慮失敗時應該怎么辦。

    錯誤提示

    錯誤提示應該讓用戶容易找到原因并方便理解。否則,他們可能沒辦法解決這些錯誤。所以對于設計師來說,一個非常重要的目標是要設計出一個易于解決錯誤的流程。一個錯誤信息應該能清晰的解釋到底發生了什么,如果可能的話,最好也提供解決方案。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    左邊的錯誤信息很清晰的解釋了發生的問題,右邊的錯誤信息對用戶來說非常困惑。

    1. 什么時候告知用戶發生了錯誤比較好?

    當用戶出錯后,首先要考慮的事情就是應該在用戶填表時提醒還是最后通知用戶。錯誤預警中有三種常見模式:

    • 內聯/實時:在輸入時或移開焦點后立即提供反饋。
    • 提交后/客戶端:當用戶點擊提交按鈕之后
    • 服務器端:當請求發送到服務器后再返回反饋給用戶

    這些方法中的每一種都有其優點和缺點。

    2. 內聯驗證

    一般來說,當表單非常短小時用內聯驗證,因為它允許在內存中的數據仍然最新時更正錯誤。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    你可以用內聯驗證立即告訴用戶哪里錯了。

    ”盡可能的進行內聯驗證“”這種類型的錯誤消息很容易被察覺“,此外,輸入完成后立即告知錯誤,對用戶的交互成本最低——UX專家Rachel Krause

    另一位專家 Luke Wroblewski 建議,當問題的答案不明顯時,可以使用內聯驗證。例如,在選擇用戶名時,用戶可能不知道哪些用戶名可用。在這種情況下,在用戶輸入數據時立即告知錯誤可能會有所幫助。

    3. 提交后驗證

    另一方面,當表單很大且需要保持關注時,你希望幫助用戶保持專注,而不是通過不斷顯示錯誤來打斷他們。

    “使用內聯驗證,用戶必須在兩種截然不同的思維模式之間反復切換:填寫表單和糾正錯誤。這減慢了用戶的速度,增加了認知努力,通常會降低用戶的滿意度。”Jessica Enders 在她的書《設計 UX:表單》中寫道

    4. 服務器端驗證

    服務器端驗證是最不友好的方式,但卻為網站提供了很高的穩定性。當需要二次檢查用戶的數據時,這種方法最有效。

    5. 如何提示用戶錯誤?

    錯誤提示告訴用戶他們做錯了,但是他們究竟做錯了什么,要如何修復它?很顯然,清楚地說明錯誤,而不僅僅是顯示 Error:90803,對用戶有很大幫助。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    使用用戶能理解的話,而不是用專業術語

    6. 使用積極語言而不是消極語言

    錯誤提示措辭要使用積極語言而不是消極語言。例如,如果用戶遺漏了一個字段,與其說”該字段不應該是空的“,不如說”請填寫此字段“。當使用積極語言時,用戶不會因為一個錯誤而受到責備,這能減少用戶的焦慮感,減少流失。

    7. 必要時提供幫助

    在某些情況下,用戶無法自己修復錯誤,他需要額外的幫助。例如,當用戶無法登錄時,大多數應用只提供找回密碼,而沒有找回用戶名。但事實上,用戶名和密碼都可能會忘記。因此,在這種情況下,嘗試提供所有必要的操作和信息資源來幫助用戶解決問題。

    標簽

    標簽是表單可用性最關鍵的組成部分。如果標簽不清晰,那么其他元素就算把可用性做得再好也沒意義。所以,不要讓用戶來猜測這里面到底要填什么內容。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    不要用一些模棱兩可的詞,比如”數字“可能會讓人感到困惑,一定要明確意思。

    1. 將標簽放在輸入字段的頂部

    許多研究表明,將標簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單,因為它允許用戶遵循一條垂直線而不是 Z 模式。但是,如果它占用太多的垂直空間,您也可以使用浮動標簽。因此,如果你希望用戶更快地填充表單,請將他們放置在字段的頂部。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    將標簽放置在字段的頂部和使用浮動標簽,這兩種方式都很有效

    2. 將標簽放在輸入字段的左側

    另一方面,當你詢問用戶比較復雜的問題,用戶需要更多時間思考問題答案的時候,研究表明將標簽放在輸入框的左側會比較好。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    當用戶需要思考答案時,將標簽放在輸入框的左側會更好

    3. 標簽應該是可見的,無論什么輸入狀態

    無論你用什么方式,確保當用戶填完內容后,標簽是可見的。因為,當用戶需要再次確認表單內容的時候,他們不用刪除填好的數據來查看系統需要他們填什么。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    不管輸入狀態如何,標簽都應該是可見的

    4. 減少不必要的輸入項

    要填的表單越多,用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項。如果實在做不到,可以將必填和非必填的字段區分開,減少用戶的負擔。

    5. 可見性

    不管狀態如何,字段都應該是清晰可辨的。此外,活動字段和非活動字段之間的區別應該要明顯。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    輸入字段應該有高對比度,在所有狀態下都是可見的。

    6. 自動激活 PC 端表單的第一個字段

    自動激活表單的第一個字段,這可以提高處理效率,避免用戶額外點擊。

    7. 幫用戶預先填好

    在某些情況下,你可以幫用戶預先填好字段。例如,可以很容易地檢測到郵政編碼,或者某些數值可能是頻繁的。在這些情況下,為用戶填充字段。

    8. 格式

    含有大量小數的數字很難讀懂。因此,當要求較大的數字時,需要考慮添加格式以支持可讀性。例如,在詢問卡號時,使用自動格式化:讀取 5678-9876-9738-8394 比讀取 5678987697388394 容易得多。

    此外,當請求需要特定格式化數據時,要包含一個實例,讓用戶準確理解要填什么。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    幫助用戶了解如何格式化數據

    9. 表單區域大小

    輸入框的大小應該要與所填的內容長度相匹配。比如,當要用戶填寫用戶名時,如果顯示的填寫區域是一個長段輸入框會讓用戶感到困惑。另一方面,如果你希望用戶寫一些反饋,但只能看到所寫內容的最后一小段,那就很難用了。(彩云注:我就經常在一些體驗不好的產品上碰到過這種情況,簡直太難受了。)

    如果你不能準確預測信息的長短,比如留言反饋,建議表單區域最好是能在用戶填寫內容觸碰邊界時,自動變高。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    輸入字段的大小應該與它預期的數據大小相對應

    10. 為桌面系統設計靈活的表單

    在鍵盤和鼠標之間切換很煩人。在理想的情況下,用戶應該只使用一種媒介來填寫表單,但有時,這是不可能實現的。因此,如果用戶需要多種媒介來填寫表單,至少要盡量減少切換。為此,將需要同一種工具的輸入組合在一起。

    另外,當創建一個網頁表單時,要確保用戶可以只使用鍵盤來瀏覽表單——使用TAB和方向鍵。

    11. 為移動端系統設計靈活的表單

    當在移動設備上時,將你顯示的鍵盤與用戶必須輸入的數據相匹配。我們經??吹叫枰獢底宙I盤的輸入可以很好地實現這一點,但幾乎很少有 APP 顯示支持輸入電子郵件地址的鍵盤。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    支持通過顯示正確的鍵盤輸入電子郵件

    下拉菜單 vs 單選按鈕

    下拉框的使用比單選按鈕更有挑戰性,因為它需要額外的點擊來打開它們。此外,用戶無法提前看到選項,這可能會讓他們感到困惑。因此,如果你只有少量的選項,使用單選按鈕。如果選項的數量超過 4 個,下拉菜單的效果會更好。

    1. 復選框

    通過勾選復選框,用戶應該是同意某些內容。我的意思是,他們應該說,“是的,我想要這個”,而不是,“是的,我不想要這個”。不幸的是,我經??吹接姓`導性的復選框試圖在創建賬戶時欺騙人們訂閱他們的產品。當你不想訂閱他們的通訊時,你又必須勾選復選框,像這樣的伎倆對信譽是不合適的,所以不要動心使用它們。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    通過勾選復選框,用戶應該同意某些內容,而不是確認他們不同意。

    結構

    一個結構充分的表單就像一個與用戶的良好對話。所以記住這一點,仔細規劃結構。

    1. 從簡單的問題開始

    從簡單的問題開始,從用戶已經很清楚知道答案的問題開始,像名字、郵件這類。然后再循序漸進問稍微復雜的問題,像賬戶信息之類的。

    首先,一個很自然的順序,當你第一次見某些人的時候,你會找一些比較好切入的問題,比如叫什么名字啊之類的。其次,當用戶已經填了一些字段之后,那么之后會增加他填完表單的機會。

    2. 創建邏輯信息塊

    將不相關的信息按邏輯分組。例如,你可以將結帳表單分為“個人信息”和“帳戶信息”組,將信息分組可以幫助用戶一次只考慮一個主題。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    通過對相關信息進行分組,使表單可被快速掃描

    3. 單步 VS 多步表單

    當你有很多問題要問的時候,你可能想知道哪一個最有效:單步流程還是多步流程。一般來說,單步表單的轉化率更高,因為它看起來更小,而且不會勸退用戶。如果你詢問基本信息并希望用戶快速填寫表單,單步表單就非常不錯。

    當用戶被要求必須填寫更多復雜信息時,多步表單會更好。為了幫助用戶在進行多步驟填寫時不至于失去耐心,可以給到進度條,提示還剩多少步。

    4. 單列 vs 多列布局

    一般來說,用單列布局會更好,因為可以幫助用戶更好地掃描,也可以盡量減少用戶遺漏填寫。

    但當用戶多次填寫同一個表單時,他們更喜歡多列表單,因為這樣不會浪費時間滾動。一般來說,在 B 端應用中這種多列表單會比較合適。

    按鈕

    設計可用的按鈕對提高轉化率至關重要。如果按鈕上的文字內容比較模糊,會容易勸退新手用戶。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    根據用戶按下按鈕會發生什么來命名按鈕

    1. 提高用戶的容錯率

    對于更復雜的表單來說,按鈕最重要的一點是,應該有提交和取消表單的單一方法。用戶應該至少有補救的機會。舉個例子,如果用戶點了在線幫助時,他已經填好的數據不應該被丟失?;蛘?,如果用戶由于意外點擊了按鈕,請求不應該被提交。

    2. 主要按鈕和次要按鈕應該很容易區分

    為了避免點擊錯誤的按鈕,用戶應該能比較容易地區分主要和次要按鈕。另外,最好不要只依賴顏色,樣式上最好有比較大的差異。

    想把表單的用戶體驗做到極致?我總結了這5個細節!

    讓主要和次要的按鈕樣式上有比較大的區分度

    3. 正確的標簽按鈕

    按功能明確地標注按鈕。例如,如果按一個按鈕可以創建一個賬戶,在按鈕上的文案叫”創建賬戶”要好過“提交”

    總結

    當用戶打開表單時,他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設計給他們設置障礙。

    不幸的是,這里面提到的許多錯誤,并不需要多么高級的技巧,而是因為設計沒有同理心。仔細思考你的設計流程,檢查是否能讓所有內容對不同背景和專業知識的人都是清晰的。

    通常來說,一般要達到以下目的,大多數指導原則都來自這些規則:

    • 用戶應該只輸入一次數據
    • 用戶應該填盡可能少的信息
    • 用戶應該只需要記住少量的信息
    • 用戶檢查和恢復錯誤內容應該要很容易

    0
    評論區(0)
    正在加載評論...
    相關推薦
    久久精品国产福利国产秒拍
    <pre id="qjh0x"></pre>

      <acronym id="qjh0x"></acronym>
    1. <p id="qjh0x"></p>