中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

閱讀完“如何再App表單設計上留住用戶？（上）”之后，接下來筆者為大家展示的是文章的后半部分——作為設計師，如何更好地簡化表單設計的流程，提高用戶體驗，避免用戶因為表單填寫復雜而放棄填寫。

二、字段標簽

1.?書寫清晰、簡明的標簽

標簽：告知用戶在特定輸入字段中期望哪些數據的文本。

書寫清晰的標簽是使表單更易于訪問的最佳方式之一。標簽應幫助用戶了解一眼所需的信息，避免使用完整的句子來解釋，標簽不是幫助文本。寫出簡潔清晰的標簽(一兩個字)，這樣用戶就可以快速掃描表單。

2.?將標簽和輸入緊密地放在一起

把每個標簽靠近輸入字段，因為眼睛會在視覺上知道它們是綁在一起的。

3. 不要使用消失的占位符文本作為標簽

雖然內聯標簽看起來很好，并且節省了寶貴的屏幕產業，但這些好處遠遠超過了顯著的可用性缺陷，其中最關鍵的是上下文的丟失。

當用戶開始在字段中輸入文本時，占位符文本將消失，并迫使用戶回憶這些信息。雖然對于簡單的雙字段表單來說，這可能不是一個問題，但是對于有很多字段(例如，7到10)的表單來說，這可能是一個很大的問題。在輸入數據后，用戶很難回憶起所有字段標簽。

毫不奇怪，用戶測試不斷表明表單字段中的占位符對可用性的影響往往大于幫助。

消除占位符的問題有一個簡單的解決方案：浮動(或自適應)標簽。

當用戶使用標簽占位符點擊字段后，標簽不會消失，它會移動到字段的頂部，為用戶輸入數據騰出空間。

4.?頂部對齊標簽

將字段標簽置于表單中的字段上方，會提高用戶掃描表單的方式。

使用眼睛跟蹤技術，谷歌顯示：在提交表單之前，用戶需要更少的固定時間、更少的固定時間和更少的掃視。

頂級標簽的另一個重要優點是：它們為標簽提供了更多的空間。

長標簽和本地化版本將更容易適應布局。后者特別適用于小型移動屏幕，您可以讓表單字段擴展屏幕的全部寬度，使其足夠大以顯示用戶的整個輸入。

5.?句子案列vs標題案例

有兩種常用的詞語大寫方式：

1. 標題案例：每個首字母都進行大寫——“This Is Title.”
2. 句子案例：句子的第一個單詞首字母進行大寫——“This is sentence.”

相比標題大小寫，使用句子大小寫標簽有一個優點：它稍微容易(因此，更快)閱讀。

雖然短標簽的區別可以忽略不計(“全名”和“全名”之間沒有太大的區別)，但對于較長的標簽來說，句子大小寫更好。

現在你知道，在標題中讀長文是多么困難了。

6. 避免使用全大寫作為標簽

“全大寫文本?-?”：指的是帶有所有字母的文本(?-?)，在不涉及實質性閱讀(如縮略語和徽標)的上下文中，文本是可以的，但避免使用其他所有大寫字母。

正如，邁爾斯·廷克在他的著作“印刷的清晰性”中所提到的那樣：與小寫字體相比，全大寫印刷大大降低了掃描和閱讀的速度。

三、布局

1. 使用單列布局

CXL研究所的一項研究發現：單列表單比多列表單更快完成。

在這項研究中，測試參與者能夠完成單列表格，比多列表格平均快15.4秒。

多列，會破壞用戶的垂直動量；多列，眼睛開始曲折。

這會大大地增加了眼睛的固定數量，因此，完成時間。

此外，多列表單可能會在用戶中引發不必要的問題，例如：

• 我應該從哪里開始？
• 右邊欄中的問題與左邊欄中的問題同等重要嗎？

在單列設計中，眼睛向一個自然方向移動，從上到下，一次一行，這有助于為用戶設置明確的路徑。

一列是很好的移動，因為屏幕是較長的垂直，垂直滾動是移動用戶的自然運動。

但，這條規則有一些例外，可以將簡短和邏輯相關的字段放在同一行(例如城市和區號)。

2.?用你的問題創建一個流程

你問問題的方式也很重要：應在邏輯上，從用戶的角度詢問問題，而不是根據應用程序或數據庫的邏輯，因為它將有助于創建與用戶的對話感。

例如：如果您設計了檢出表，并詢問詳細信息（如全名、電話號碼和信用卡），第一個問題應該是完整的名稱。更改訂單（例如，從電話號碼開始，而不是名稱）將會導致不適。

就像在現實世界的對話中，在詢問某人的名字之前要求某人的電話號碼是不尋常的。

3.?把深入的問題拖到最后

當涉及到為您想問的問題設計一個流程時，請考慮優先級。遵循“先易后難”的原則，把深度或個人問題放在最后，這會幫助用戶更加容易地進入這一過程。

一旦他們建立了良好的關系，他們就更有可能回答復雜和更具侵擾性的問題。

這是有科學依據的：羅伯特·恰爾迪尼的一致性原則規定，當一個人對某事采取小的行動或步驟時，他們會感到更有必要去完成。

4.?組相關字段

格式塔心理學的一項原則——接近原則，認為相關的因素應該是相互接近的。

這一原則可以適用于一種形式的問題順序——相關的問題越多，它們之間就應該越接近。

設計人員可以將相關字段分組為區段。如果表單有六個以上的問題，請將相關問題分組為邏輯部分。不要忘記在各部分之間提供大量的空白，以便在視覺上區分它們。

5.?做一個長的表單看起來更簡單

如何設計一個能向用戶提出很多問題的表單？

當然，你可以把所有的問題放在一個屏幕上，但這會妨礙你的完成率。

如果用戶沒有足夠的動力完成表單，表單的復雜性可能會嚇跑他們。第一印象起著至關重要的作用，一般來說，表單看起來越長或越復雜，用戶開始填寫空白的可能性就越小。

盡可能最小化一次可見的字段數，這就產生了一種感覺——即形式比實際的要短。

有兩種技術可以做到這一點：

逐步解密：

漸進的公開是關于：在正確的時間給用戶正確的東西。

目標是：在合適的時間找到合適的東西放在小屏幕上。

最初，只向用戶展示幾個最重要的選項。而當用戶與表單交互時，則顯示表單的部分內容。

程序分塊：

chunking需要將一個長的形式分成幾個步驟。

可以通過將表單分成幾個步驟來提高完成率。Chunking還可以幫助用戶處理、理解和記住信息。在設計多步驟表單時，總是用完整的表通知用戶他們的進度。

設計人員使用進度跟蹤器（如上面的示例所示）或“步驟#退出#”指示符，既可以指出總共有多少個步驟，也可以顯示用戶目前距離的有多遠。

后一種方法對于移動表單可能是很好的，因為步驟指示不會占用太多的空間。

四、操作按鈕

指示用戶采取行動的交互式元素。

1. 使操作按鈕具有描述性

按鈕的標簽應該解釋按鈕的功能，用戶只需看一下按鈕就可以理解：點擊后會發生什么？

避免使用通用標簽，如：“提交”和“發送”，而使用描述操作的標簽。

2.?不要使用清除或重置按鈕

清除或重置按鈕允許用戶在窗體中擦除其數據。

這些按鈕幾乎從不幫助用戶，而且常常會傷害用戶。刪除用戶輸入的所有信息的風險，超過了不得不重新啟動的小好處。如果用戶填寫了表單，不小心按錯了按鈕，那么很有可能他們不會重新開始。

3. 對主按鈕和輔助按鈕使用不同的樣式

如果可能的話，避免二次行動。

但是，如果表單有兩個操作調用(例如：具有“應用折扣”和“提交訂單”)按鈕的電子商務表單，請確保主操作和次要操作之間有明確的視覺區別。視覺優先的主要行動，增加更多的視覺重量按鈕，這將防止用戶點擊錯誤的按鈕。

4. 設計手指友好觸控目標

微小的觸摸目標產生了可怕的用戶體驗，因為它們使得用戶能夠與交互對象交互。

設計手指友好的觸摸目標是至關重要的：更大的輸入字段和按鈕。

（下圖顯示平均成人手指的寬度約為11mm。）

根據材料設計指南：觸摸目標應至少為48/48DP。不管屏幕尺寸如何，該尺寸的觸摸目標都是大約9mm的物理尺寸。

使用更大的觸摸目標來適應更寬的用戶頻譜可能是合適的。

不僅目標尺寸重要，而且觸控目標之間有足夠的空間也很重要。

在觸摸目標之間保持安全距離的主要原因是：防止用戶觸摸錯誤的按鈕和調用錯誤的操作。

當像“同意”和“不同意”這樣的二進制選擇被放置在一起時，按鈕之間的距離變得非常重要。

材料設計指南建議：將觸點目標與8 DP或更多的空間分開，這將創造平衡的信息密度和可用性。

5.?設點擊后禁用按鈕

表單操作通常需要一些時間來處理。

例如：提交后可能需要數據計算。

重要的是，不僅要在操作進行時提供反饋，而且要禁用Submit按鈕，以防止用戶意外地再次點擊按鈕。

這對于電子商務網站和應用尤其重要。通過禁用按鈕，不僅可以防止重復提交(這可能是偶然發生的)，而且還可以向用戶提供有價值的確認(用戶將知道系統已經收到了他們的提交)。

五、幫助與支持

1. 提供成功狀態

在成功完成表單后，通知用戶這一點至關重要。

可以在現有表單的上下文中提供此信息(例如，顯示刷新表單上方的綠色復選標記)，也可以將用戶引導到一個新頁面，該頁面表明提交已經成功。

2.?錯誤與驗證

用戶會犯錯誤，這是不可避免的。

所以，在故障時刻設計一個支持用戶的用戶界面是至關重要的。

雖然錯誤和驗證這一主題值得自己寫一篇文章，但是，仍然值得一提的是：為了改進移動表單的用戶體驗，應該做一些事情。

對每個字段使用輸入約束：

預防勝于治療。如果您是經驗豐富的設計師，則應熟悉可能導致錯誤狀態（易出錯狀態）的最常見的案例。

例如：通常很難在第一次嘗試中正確填寫表單，或者在移動設備具有不良網絡連接時正確同步數據。

那么就應該考慮到這些情況，以最大限度地減少錯誤的可能性。

換句話說：通過利用約束和提供建議，更好地防止用戶在第一位置出錯。

例如：如果您設計的表單允許人們搜索酒店預訂，您應該阻止用戶選擇過去的簽入日期。

如下面的Booking.com示例所示：

您可以簡單地使用一個日期選擇器，它只允許用戶選擇今天的日期或將來的日期。這樣的選擇器將迫使用戶選擇適合的日期范圍。

不要使數據驗證規則太嚴格

雖然在某些情況下使用嚴格的驗證規則是必要的，但在大多數情況下，嚴格的驗證是懶惰編程的標志。

當用戶以與預期稍有不同的格式提供數據時，在屏幕上顯示錯誤會造成不必要的摩擦，這將對轉換產生負面影響。

一個問題答案的幾個變體是可能的，例如：當表單要求用戶提供有關其狀態的信息時，用戶的響應方式是輸入他們州的縮寫而不是全名（例如CA而不是加利福尼亞）。

表單應該接受這兩種格式，開發人員的任務是：將數據轉換成一致的格式。

明確錯誤信息

當您編寫錯誤消息時，集中注意盡量減少用戶在與表單交互中，遇到問題時所感受到的挫折感。

以下是關于編寫有效錯誤消息的幾條規則：

• 從不責備用戶：傳遞錯誤消息的方式可能會對用戶對其感知的方式產生巨大影響。一個錯誤消息，例如：假如用戶輸入了錯誤的號碼，所有的責任都將被歸咎于用戶。這樣，用戶可能會受到挫折，并放棄應用程序。寫復制，聽起來是中性的或積極的。一個中性的消息聽起來像：“數字不正確?！?/li>
• 避免模糊或一般錯誤信息：比如“出問題了，請稍后再試?！?，沒有對用戶說太多話，用戶就會想知道到底出了什么問題。要一直試圖地解釋問題的根源，確保用戶知道如何修復錯誤。
• 使錯誤信息具有可讀性：不要出現像“用戶輸入錯誤：0x100999”這樣既神秘又可怕的錯誤信息。要像人類一樣寫作，而不是機器人。使用人類語言，解釋：用戶或系統到底做錯了什么？以及用戶應該做什么來解決問題？

內聯顯示錯誤

當涉及到顯示錯誤消息時，設計人員選擇兩個位置之一：表單頂部或內聯。

第一種選擇可能會帶來糟糕的體驗。

Javier Bargas-Avila和Glenn Oberholzer對在線表單驗證進行了研究，發現：在表單頂部顯示所有錯誤信息會給用戶內存帶來很高的認知負荷。用戶需要花費額外的時間將錯誤消息與需要注意的字段進行匹配。

最好將錯誤消息內聯放置。

首先，這個位置與用戶自然的自上而下的閱讀流程相對應。其次，錯誤將出現在用戶輸入的上下文中。

內使用動態驗證

選擇顯示錯誤消息的時間至關重要。

只有在按下Submit按鈕后才會看到錯誤消息，這可能會使用戶感到沮喪。不要等到用戶完成表單后，在輸入數據時提供反饋。

使用帶實時反饋的內聯驗證，這個驗證立即告訴人們他們輸入的信息是否與表單的要求兼容。

2009年，LukeWroblewski根據提交后的驗證對內聯驗證進行了測試，并為內聯版本找到了以下結果：

• 成功率提高22%
• 錯誤減少22%
• 滿意度提高31%
• 完成時間減少42%
• 眼球固定次數減少47%

但是，應該謹慎地執行內聯驗證：

避免在焦點上顯示內嵌驗證。

在這種情況下，只要用戶輕擊字段，就會看到一條錯誤消息。即使字段是完全空的，也會出現錯誤。當一個錯誤消息被顯示在焦點上時，它可能看起來像在用戶開始填充它之前對用戶發出的聲音。

在鍵入每個字符后，不要進行驗證。

這種方法不僅增加了不必要的驗證嘗試的數量，而且還使用戶沮喪（因為用戶在完成字段之前可能會看到錯誤消息）。

理想情況下，在用戶停止鍵入或移動到下一個字段后，內聯驗證消息應顯示在500到1000毫秒左右。

此規則有幾個例外：當創建密碼時（要檢查密碼是否滿足復雜性要求），當創建用戶名時（要檢查名稱是否可用），以及在鍵入具有字符限制的消息時，它有助于驗證內聯。

六、易接近，可到達

所有能力的用戶都應該能夠訪問和享受數字產品。設計師在構建產品時應盡可能多地結合可訪問性需求。

以下是一些您可以做的事情，使您的表單更容易訪問。

1. 確保表格有適當的對比

您的用戶可能會在戶外與您的表單交互，所以要確保這是很容易使用，無論是在陽光和低光環境——檢查表單中字段和標簽的對比度。

W3C建議正文文本的對比度如下：

• 小文本與其背景的對比度應至少為：4.5：1。
• 大文本(在14點粗體，18點規則和向上)應該有一個至少3：1的對比度與它的背景，測量顏色對比度似乎是勢不可擋的。

幸運的是：一些工具使這個過程變得簡單。其中之一是WebAIM顏色對比檢查器，它幫助設計師測量對比度水平。

2. 不要僅僅依靠顏色來傳達狀態

世界上每12名男性（8%）和1名女性中大約有1個人會患有色盲（或色覺缺陷）。

世界上有許多類型的色盲，但最常見的兩種是Protanomaly——或降低對紅光的敏感性，或降低對綠光的敏感性。

顯示驗證錯誤或成功消息時，不要單獨依賴顏色來傳達狀態（即，通過使輸入字段綠色或紅色）。作為W3C準則狀態，顏色不應被用作傳達信息的唯一可視手段，指示動作、提示響應或區分視覺元素。

設計者應該使用顏色來突出或補充已經可見的內容，通過提供附加的視覺提示來支持彩色盲人，幫助他們理解用戶界面。

3. 不允許用戶控制字體大小

允許用戶增加字體大小以提高可讀性。

移動設備和瀏覽器包括一些功能：使用戶能夠在整個系統范圍內調整字體大小。

此外，請確保窗體為大字體分配了足夠的空間。

七、測試您的設計決策

上述所有要點均可視為行業最佳實踐。

但不能和僅僅因為某些東西被稱為“最佳實踐”，就認為它始終是您的形式的最佳解決方案。應用程序和網站很大程度上取決于使用它們的上下文。

因此，測試您的設計決策是至關重要的——確保填寫表單的過程是平滑的，流程不會中斷，用戶可以解決他們面臨的任何問題。定期進行可用性測試會話，收集關于用戶交互的所有有價值的數據，并從中學習。

八、結論

用戶可能對填寫表格猶豫不決。因此，作為設計師，我們的目標是使填寫表格的過程盡可能簡單。在設計表單時，要努力創建快速、無摩擦的交互。

有時，一個小的更改——比如：正確地編寫錯誤消息，可以顯著地提高表單的可用性。

本文由 @潘強 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協議