優化輸入框,讓填寫如絲般順滑

優化輸入框,讓填寫如絲般順滑

填寫是一件麻煩事,我們或多或少感受糟糕體驗。設計開發者也很無奈,感覺身體被掏空。怎麼辦?

讓我們從優化輸入框開始吧!看著簡單的框,對用戶體驗的影響很大。特別是在非常有限的手機屏幕中,怎麼幫助用戶順利的填寫完呢?值得我們好好研究。

視覺層面

舒適的填寫區域

常用的數值是:拇指的滑動觸發區域在寬高45px左右,圖標的操作區域是48dp,輸入框行高在80dp左右,行間距在8dp。

優化輸入框,讓填寫如絲般順滑

左圖行距過於擁擠,而且文字大小不統一,給用戶一種填寫內容很多的感覺

簡潔的描述

填寫標籤要簡潔, 過長的標籤有兩個問題:

  • 使填寫的內容壓縮。

  • 影響整頁對齊。

平行排布優點是:符合視線規律。閱讀更快。如果要填寫的標籤實在過長,檢查一下是否說不清楚的可以用佔位符描述?或者採取垂直排布的方式。平行排布優點是:對標籤字數限制不嚴格。

優化輸入框,讓填寫如絲般順滑

恰當的顏色

輸入的結果我們常常用顏色來反饋,比如藍色代錶鏈接,灰色代表失效,綠色代表正確,黃色代表提示,紅色代表錯誤。紅色的使用要慎重,因為紅色默認為最高等級警告,如果紅色的提示出現過多會對用戶造成緊張感,想到試卷上滿篇的厚叉了么?所以把提示分級吧。

對於大家公認的色彩暗示,如果隨意交換容易造成誤解,特別紅色和灰色。這有點像我們默認為穿裙子的形象是女,穿褲子是男,如果有天你看到穿裙子標識的男廁所,會困惑嗎?

優化輸入框,讓填寫如絲般順滑

對於約定俗成的事,走尋常路才更易用

明確的指示

當用戶選中準備輸入的時候,應當提供清晰的視覺提示,這樣讓用戶明確知道自己的位置,而不是迷失在茫茫表格中,這種細微的反饋會讓用戶更有掌控力。

優化輸入框,讓填寫如絲般順滑

交互層面

標註鍵盤類型

手機上的鍵盤觸摸點非常小,觸摸鍵盤需要隨時調整,根據每個表單域的不同數據類型,為用戶提供不同的鍵盤布局。輸入方式有三種。對於第一種純數字的我們可以鎖定為數字鍵盤。

  • 純數字: 電話號碼、郵編、各種號碼

  • 純文本: 用戶名、地址等

  • 混合格式: 評論、備註等等

優化輸入框,讓填寫如絲般順滑

上圖填寫電話號碼,如果如右圖默認好數字鍵盤,填寫時就節省一次切換鍵盤的功夫。

對於一些固定選項我們常常使用控制項幫助用戶更快填寫,比如日期,性別,地區等等。盡量在當前頁面調用控制項。如果填寫內容範圍廣,需要進入二級頁面另一頁來選擇適合,盡量提供快速檢索方式。還有一種情況是對於容易填錯的選項,使用控制項,減少用戶的填寫錯誤,從而減少心理負擔。

優化輸入框,讓填寫如絲般順滑

但是我們要思考使用控制項是否更快速,下圖這個例子,填寫還款日的時候進入另一個選擇,把1— 28 以及月末安行排開,初衷應該是為了容錯,但是使用起來繁瑣。

優化輸入框,讓填寫如絲般順滑

及時驗證

當你好不容易填寫完長長的信息,點擊提交,這時候界面提示:你有 20 項填錯……雖然我知道作為金融產品,這項的目的是為了限制錯誤。然而這種處理方法顯然不是最好的。

沒有人喜歡後知後覺的反饋,特別是錯誤。告知用戶輸入內容是否正確的最佳時機,是在用戶填完內容后立刻告知用戶。內聯驗證可以馬上告知用戶輸入的正確性。幫助用戶及時改正,無需等到點擊提交按鈕。如果只有一個錯誤要修正,那就很容易,能降低用戶放棄的可能性。

優化輸入框,讓填寫如絲般順滑

清晰的反饋

關於填寫錯誤的描述應該非常清晰,比如註冊時密碼填寫,不要說密碼安全性過低,而要說,密碼必須超過 8 位,或者密碼必須包含大小寫和數字。總結為兩點:

  • 發生了什麼錯誤,可能原因是什麼。

  • 用戶應該做什麼來改正錯誤。

必要的說明

有兩種輸入項目常常要加入說明:

  • 專業性強,大眾可能不清楚

  • 安全隱私或者金錢相關,有心理顧慮

針對第一種,說明能減少輸入錯誤,例如銀行轉賬不是及時就到,而是需要兩小時,金額不是任意的,每天有上限,並且和所剩的餘額相關。如果這些是在用戶輸入完才告知,或者報錯,那麼這個鍋用戶當然不願意背。

針對第二種,有心理顧慮的,可以承諾不會對用戶造成損失,或者找背書,該方案已經通過XXX安全認證。消除顧慮之後才能順利進行下一步。

優化輸入框,讓填寫如絲般順滑

上圖轉說明了限額,以及限額原因,能讓用戶在正確範圍內使用

減少用戶輸入

說了那麼多,最讓用戶舒心的莫過於幫助他們填寫,因此,許多需要填寫、選取的表單最好有預設的初始值或者內容填充在其中,這樣可以讓用戶用起來更加方便,這就是智能預設。常見的使用場景有搜索聯想輸入,地址定位等。

優化輸入框,讓填寫如絲般順滑

總的來說,優化輸入框設計主要有三個方向:

  • 提高輸入速度

  • 為用戶輸入提供引導幫助

  • 直接有效的指出用戶輸入過程中的問題

重視每一個接觸點的用戶的感受,這樣我們的產品才被打磨的越來越精緻。

作者:Uki加菲喵

來源:http://www.jianshu.com/p/aba4bf4de862

發表迴響