從交互和UI兩個方面分析,文本框的正確打開方式

1 評論 12673 瀏覽 76 收藏 13 分鐘

文本框作為日常工作中經常遇到的組件,其易用與否直接影響著用戶體驗,今天來探討下如何提升文本框的易用性。(我們常說的文本輸入有兩種,文本框和文本域,下文以文本框統稱。)

在開始設計文本框之前,要問自己三個問題:這個地方要實現什么功能?必須以文本框的形式出現嗎?是不是有更好的替代方案?

因為相對于其他的人機界面交互方式來說,輸入成本是最大的。

結構

文本框的結構包括可見和非可見兩部分,可見部分通常由標簽Label、提示信息、輸入框、功能性圖標、內容、反饋六部分組成,非可見部分指文本框的校驗形式(即時校驗、失焦校驗、提交校驗)和校驗方式(前端校驗、后端校驗)。

下面我將從交互和UI兩個方面分析一下文本框正確的打開方式。

交互

1. 正常狀態

(1)標簽Label與輸入框的位置

Label與輸入框的位置關系主要有以下四種:

① Label與輸入框自上而下左對齊排列,瀏覽和輸入時,視線不存在左右掃描的情況,速度最快,常見于移動端。

② ③ Label與輸入框在同一水平高度上,Label對齊方式不同(左對齊和右對齊),常見于PC端,用戶以Z字形方式瀏覽和輸入,效率相對較低一些。對于涉及到安全、重要的信息,采用這種形式能夠減慢用戶輸入速度,降低用戶的出錯率。

④ Label在輸入框內以提示信息形式出現,這種看似簡潔又節約頁面空間的形式存在諸多問題:

  • Label和提示信息會產生沖突,尤其當提示信息內容較多時;
  • 當用戶的輸入被打斷或修改時,需要回憶Label是什么,甚至需要刪掉已輸入的信息重新查看Label,成本太大;
  • 給用戶造成產品不安全的感覺。

還有一種比較特殊的形式–浮動式標簽(如下圖),正常情況下Label在輸入框內,當激活輸入框時,Label變小浮動到框內左上角,常見于移動端較多,閱讀效率高,節約頁面空間;不足是在小屏幕下Label識別性較低,提示信息較多時,展示也存在問題。

(2)提示信息的位置

提示信息的位置一般有三種,如下圖所示。第一種一般用于對輸入內容有要求的情況,用戶需要邊輸入邊核對要求;第二種一般用于無約束條件的情況,Label的名稱足以提供給用戶有效的信息,用戶填寫出錯率較低時使用;第三種,提示內容隱藏在icon中。

常用于以下兩種情況:

  1. 提示信息內容很多,完全展示時已經對頁面整體效果造成了破壞;
  2. 重要程度相對較低,起到輔助作用的信息。

(3)Label和提示信息的內容

Label和提示信息應當做到“精”、“簡”、“短”的要求,避免冗長的文案造成閱讀和理解壓力。

(4)默認為激活狀態

新打開頁面時,文本框自動為激活狀態,簡化用戶操作路徑,用戶可直接輸入。這種形式常見于界面內只有一個文本框的情況。

2. 輸入狀態

(1)輸入法則

  1. 提示信息中要有明確的支持格式限定,如字母大小寫、下劃線、特殊符號等;
  2. 如果輸入框有明確的字符數限制,要給出明確的提示。字符限制有兩種類型:超過規定字數仍可以輸入,飄紅顯示超出多少字;達到最大字數時不能繼續輸入(如手機號輸入框);
  3. 輸入信息后,要有一鍵清空的icon,尤其是針對操作不方便的移動端。

(2)輸入源

  1. 支持文本粘貼、復制、剪切等常規操作;
  2. 移動端激活輸入框時喚起鍵盤,喚起數字鍵盤還是中英文鍵盤要根據內容性質確定。如手機號、身份證號等應該直接喚起數字鍵盤,避免喚起中英文鍵盤后需要用戶手動切換到數字鍵;
  3. 為輸入框提供更便捷的輸入方式,如掃描銀行卡號的形式代替數字輸入,GPS定位代替地址輸入,游戲中角色取名可通過搖骰子的形式隨機生成。

(3)特殊文本:密碼文本

由于明文的密碼會讓用戶感到不安全,因此在密碼上面添加遮罩形成了密文密碼。密文在用戶輸入錯誤時修改又比較麻煩,就出現了明/密文切換的形式。

移動端由于輸入不便,修改成本高,一般情況下默認為密文,點擊icon可顯示明文。PC端一般只有密文形式,不支持明文,一是因為PC端使用鍵盤輸入,錯誤率很低,二是考慮到他人借用電腦時密碼的安全性。

3. 反饋狀態

(1)關于校驗

校驗形式有三種:即時校驗、失去焦點時校驗和提交時校驗,即時校驗相對其他兩種效率更高,相應的實現成本也較高。

校驗的方式有:前端校驗和后端校驗。

  • 前端校驗一般是格式校驗,如:是否包含特殊字符、格式是否符合要求等;
  • 后端校驗一般是數據校驗,驗證是否符合后端數據庫要求,這種成本相對大一些。

(2)錯誤反饋

針對錯誤反饋,需要注意以下幾點:

  1. 要告知用戶錯誤的原因并引導如何糾正;
  2. 必要時給用戶提供推薦方案,如注冊時的用戶名推薦;
  3. 提示文案注意友好性,盡量避免命令式文案,不要將責任推卸給用戶。

(3)正確反饋

錯誤的操作需要反饋,正確的操作同樣需要。一方面給予反饋符合用戶的心理預期,另一方面能夠激勵用戶繼續操作完成任務。

在應用場景上,正確的反饋適用于花費時間、人力成本較大,要求比較復雜,操作難度較高的文本框,是對用戶正確操作的肯定;簡單的操作不需要反饋,過多的發反饋對用戶體驗是一種傷害。

4. 深入挖掘細節

(1)字數限制提示

常見的字數限制提示一般有兩種:一直顯示和超過一定閾值才提示的形式(如下圖)。

兩種形式運用的場景有所不同,這里涉及到對于用戶的心流狀態的分析。

一直顯示的形式下,時時變化的數字是對用戶心流狀態的干擾和打斷,用戶的視線在輸入文本和數字提示上來回切換。這種比較適用于需要用戶仔細斟酌,謹慎輸入的情況,避免用戶隨心所欲的輸入達到自嗨的狀態。

到一定閾值才提示的形式,不會打斷用戶,用戶在輸入的過程中處于心流狀態。這類文本框在UGC類型的網站較多,鼓勵用戶生產、創作內容。

(2)錯誤反饋轉化為正確反饋

出現錯誤會讓用戶產生負面情緒,即便通過友好的提示、幫助用戶糾錯、情感化設計等途徑也只是緩解減少用戶的負面情緒。有些情況下,可以嘗試將錯誤反饋轉化為正確反饋,從根源上避免用戶負面情緒的產生。

我們經常碰到如上所示的文本框,針對復雜的要求可以進行合理的拆分,使用戶更易于理解,減輕心理壓力和閱讀負擔,使得用戶更有心理預期,每達成一個條件都有相應的反饋,對用戶也是一種激勵。

(3)敏感信息保存后進行局部隱藏

除密碼外,涉及到用戶隱私的其他文本如銀行卡、身份證等信息也需要做隱私處理,用戶在編輯完成后,要對其中的敏感信息進行隱藏,如電商平臺中收件人的手機號、支付寶中的銀行卡號等。

(4)密碼驗證失敗后,由默認的密文轉化成明文(移動端)

移動端的密碼輸入默認狀態下為密文,當驗證失敗后,直接展示給用戶明文,方便用戶進行查看和修改。

UI

1. Label

關于Label前文提到要足夠精簡,多余的信息不要。如“我的電話”和“電話”。如果涉及到英文的Label,要避免全部采用大寫的形式,可讀性太低。

2. 文本框的長度和寬度

單個文本框的長度盡量根據字數的多少定義,讓用戶在操作前便產生心理預期。字數較多時采用文本域,文本域高度隨輸入內容拉伸,根據頁面情況確定是否需要限制最大高度,如移動端輸入框一般最高撐開5行。

3. 文本框之間的距離

注意文本框之間的距離,Label與輸入框之間的距離,Label之間的距離等。

4. 文本框顏色符合用戶認知習慣

文本框的不同的狀態要對應不同的顏色,及時反饋給用戶當前的狀態。如正常情況下一般為灰色,藍色代表文本框被激活、處于輸入狀態,紅色代表產生錯誤、異常,黃色代表警告和提示,綠色代表正確等。

總結

本文從交互和UI兩個方面入手,分析了提升文本框用戶體驗的要點,由于篇幅稍長,對以上組織結構進行整理回顧如下,期待大家共同交流。

 

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

題圖來自 Pixabay,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 關于校驗反饋,什么情況下采用即使校驗?什么情況下用失焦校驗呢?

    來自廣東 回復