三個(gè)關(guān)鍵因素,幫你改善移動(dòng)端APP的輸入體驗(yàn)

0 評(píng)論 8508 瀏覽 41 收藏 13 分鐘

在用戶輸入時(shí)如何利用有限的屏幕空間,這篇文章列出了三個(gè)改善數(shù)據(jù)輸入體驗(yàn)的關(guān)鍵因素,分別是改進(jìn)輸入速度,為用戶提供幫助和支援和在用戶輸入時(shí)直接指出問(wèn)題所在,全是干貨,一起來(lái)看看。

一、輸入

根據(jù)需要輸入的文本類型匹配鍵盤布局

用戶喜歡那些在輸入文本時(shí)能夠提供合適鍵盤布局的應(yīng)用。不像物理鍵盤,觸摸鍵盤可以隨時(shí)調(diào)整,根據(jù)每個(gè)表單域的不同數(shù)據(jù)類型,為用戶提供不同的鍵盤布局。通??梢赃M(jìn)行優(yōu)化的輸入類型包括:

  • 數(shù)字:電話號(hào)、信用卡號(hào)、PIN 碼
  • 文本:固有名稱、用戶名
  • 混合格式:郵箱地址、街道地址、搜索查詢

確保這些項(xiàng)可以在你的app中持續(xù)地進(jìn)行優(yōu)化,而不是只在某些特定任務(wù)中優(yōu)化。

uisdc-ios-2016093019

合理配置自動(dòng)大寫功能

如何合理地設(shè)置自動(dòng)大寫,對(duì)于移動(dòng)端表單域的可用性是很重要的。如果語(yǔ)言本身有要求,每個(gè)文本框的首字母和每句話的開(kāi)頭字母都應(yīng)該大寫。相關(guān)例子:

  • 詢問(wèn)用戶的姓名
  • 包含句子的信息,比如短信

但是,要注意不讓電子郵件的文本框開(kāi)啟自動(dòng)首字母大寫,當(dāng)用戶發(fā)現(xiàn)時(shí),可能會(huì)返回刪除大寫的首字母再改回小寫,因?yàn)樗麄儠?huì)擔(dān)心郵件不能正常發(fā)送。

uisdc-ios-2016093020

當(dāng)詞典不夠智能時(shí),關(guān)閉自動(dòng)糾錯(cuò)

用戶反感低效的自動(dòng)糾錯(cuò)功能,如果用戶沒(méi)有發(fā)現(xiàn)這個(gè)功能,可能還會(huì)造成問(wèn)題。當(dāng)用戶發(fā)現(xiàn)自動(dòng)糾錯(cuò)功能對(duì)于那些單詞縮寫、街道名稱、郵箱、人名和一些不在字典的單詞表現(xiàn)非常糟糕的時(shí)候,是極其影響用戶體驗(yàn)的。

在老版本的亞馬遜 app 中,地址欄曾經(jīng)有自動(dòng)糾錯(cuò)功能,卻導(dǎo)致了正確地址被這個(gè)功能改寫為錯(cuò)誤的。

uisdc-ios-2016093021

這種情況經(jīng)常會(huì)發(fā)生,因?yàn)橛脩敉ǔV魂P(guān)注了他們正在輸入什么,而不是他們已經(jīng)輸入的內(nèi)容。對(duì)于地址信息,這樣會(huì)導(dǎo)致用戶輸入的有效地址被自動(dòng)糾錯(cuò)改成了無(wú)效地址,而用戶卻沒(méi)有留意到自動(dòng)糾錯(cuò)已經(jīng)發(fā)生,最終提交了錯(cuò)誤的地址。

固定的輸入格式

不要使用固定輸入格式。強(qiáng)制使用固定格式的最常見(jiàn)原因,是受到驗(yàn)證腳本的限制(難道后端不能確定所需要的格式?)。在大部分情況下,這是開(kāi)發(fā)的責(zé)任,而非用戶。與其強(qiáng)迫用戶輸入某些特定格式,比如電話號(hào)碼,不如想辦法把用戶輸入轉(zhuǎn)化為你想要顯示或者存儲(chǔ)的格式。

uisdc-ios-2016093022

默認(rèn)值和自動(dòng)完成

你應(yīng)該頻繁預(yù)測(cè)用戶的選擇項(xiàng),通過(guò)提供智能預(yù)測(cè)的默認(rèn)值,或者基于過(guò)去輸入內(nèi)容的提示,使得用戶更加容易地輸入內(nèi)容。比如,你可以通過(guò)用戶的地理位置信息,預(yù)測(cè)用戶所屬國(guó)家。

這個(gè)解決方案可以和自動(dòng)完成功能配合使用,讓用戶輸入速度顯著提升。自動(dòng)完成會(huì)在下拉列表中實(shí)時(shí)地列出建議,使得用戶可以更加準(zhǔn)確和有效地完成輸入。這對(duì)于那些語(yǔ)言水平不高或者忘記拼寫的用戶非常有用,尤其是輸入非母語(yǔ)的時(shí)候。

uisdc-ios-2016093023

(帶有提示的文本域)

二、標(biāo)簽和幫助信息

用戶想要知道在輸入框中填入哪種信息,清晰的標(biāo)簽正是一種讓UI 更加易于理解的方式。標(biāo)簽告訴用戶每個(gè)輸入框的目的,在表單域獲得焦點(diǎn)甚至完成輸入后,保持其有效性。

你還應(yīng)該在表單域的上下文提供幫助信息。提供相關(guān)的語(yǔ)境信息,可以幫助用戶更加容易地完成操作。

限制單詞數(shù)

標(biāo)簽并非幫助文字,你應(yīng)當(dāng)使用簡(jiǎn)明扼要的標(biāo)簽(一兩個(gè)單詞),使得用戶可以快速了解你的文本域。

uisdc-ios-2016093024

如上圖,“Phone”、“Check in”和“Check out” 都是輸入框的標(biāo)簽。

如果有需要可以對(duì)表單域提供更多信息,當(dāng)用戶面對(duì)有用的信息,可以用于消除困惑或者減少潛在的錯(cuò)誤。

uisdc-ios-2016093025

在 “Phone”表單域下面的信息就是幫助文本。

語(yǔ)言簡(jiǎn)單化

從用戶的角度出發(fā)。?未知的術(shù)語(yǔ)和詞組會(huì)增大用戶的認(rèn)知成本。清晰的傳達(dá)方式和實(shí)用性應(yīng)該總是優(yōu)先于專業(yè)術(shù)語(yǔ)和品牌信息。

uisdc-ios-2016093026

如上圖,我們可以看到:

  • 左邊:非傳統(tǒng)的術(shù)語(yǔ)可能讓用戶感到迷惑;
  • 右邊:術(shù)語(yǔ)更加清晰和易于理解。

內(nèi)聯(lián)標(biāo)簽

內(nèi)聯(lián)標(biāo)簽(或者占位符文本)對(duì)于簡(jiǎn)單的表單域非常合適,比如用戶名或者密碼。

uisdc-ios-2016093027

但是當(dāng)頁(yè)面超過(guò)兩個(gè)表單域時(shí),用占位符文本來(lái)代替分離的文本標(biāo)簽就不合適了。占位符確實(shí)非常流行,看起來(lái)也不錯(cuò),但是它有兩個(gè)嚴(yán)重的問(wèn)題:

  • 一旦用戶點(diǎn)擊了文本域,標(biāo)簽就消失了,因此用戶不能再次檢查輸入內(nèi)容是不是表單要求填寫的。
  • 當(dāng)用戶看見(jiàn)文本框有內(nèi)容的時(shí)候,可能會(huì)以為這個(gè)地方預(yù)先填充了內(nèi)容,并因此而忽略填寫。

其中一個(gè)占位符的優(yōu)化方案是?浮動(dòng)標(biāo)簽 —?當(dāng)用戶填寫這個(gè)表單域時(shí),可浮動(dòng)的內(nèi)聯(lián)標(biāo)簽就會(huì)移到表單域的上方。

uisdc-ios-2016093028

(浮動(dòng)內(nèi)聯(lián)標(biāo)簽)

建議:?不要只依賴于占位符或者標(biāo)簽。一旦文本域被填寫了內(nèi)容,占位符文字就看不見(jiàn)了。你可以使用浮動(dòng)標(biāo)簽,以確保用戶可以知道他們填寫的內(nèi)容是否正確。

標(biāo)簽顏色

標(biāo)簽顏色應(yīng)該和 app 的配色方案相關(guān),同時(shí)應(yīng)該有合適的對(duì)比度(不應(yīng)該太亮或者太暗)。

uisdc-ios-2016093029

三、驗(yàn)證

表單域驗(yàn)證是為了和用戶對(duì)話,并引導(dǎo)他們處理錯(cuò)誤和不確定信息。其輸出內(nèi)容應(yīng)該是感性而非純技術(shù)的。在數(shù)據(jù)處理中,其中一個(gè)最重要但是通常不被人喜愛(ài)的部分就是數(shù)據(jù)處理。犯錯(cuò)是人之常情,你輸入的內(nèi)容也不例外。如果做得好的話,驗(yàn)證可以把模糊不清的交互步驟變得更加清晰。

實(shí)時(shí)驗(yàn)證

用戶可不喜歡當(dāng)他們填完了所有信息,最后點(diǎn)擊提交的時(shí)候,才發(fā)現(xiàn)信息有錯(cuò)誤。告知用戶輸入內(nèi)容是否正確的最佳時(shí)機(jī),是在用戶填完內(nèi)容后立刻告知用戶。

實(shí)時(shí)內(nèi)聯(lián)驗(yàn)證可以馬上告知用戶輸入的正確性。這個(gè)方法讓用戶更快地改正錯(cuò)誤,而不需要等到他們按下提交按鈕。錯(cuò)誤狀態(tài)可以使用對(duì)比色,比如暖色調(diào)的紅色或者橙色。

uisdc-ios-2016093030

提交時(shí)驗(yàn)證 vs 實(shí)時(shí)驗(yàn)證

驗(yàn)證過(guò)程不僅應(yīng)該告訴用戶他們做錯(cuò)了,還應(yīng)該告訴用戶他們做的不錯(cuò)。這樣可以給用戶信心來(lái)完成余下的輸入過(guò)程。

uisdc-ios-2016093031

清晰的反饋

對(duì)于用戶問(wèn)題——“剛才發(fā)生了什么?為什么會(huì)這樣?”,應(yīng)該直接給出答案,有效的回答應(yīng)該清晰說(shuō)明:

  • 發(fā)生了什么錯(cuò)誤,可能原因是什么。
  • 用戶應(yīng)該做什么來(lái)改正錯(cuò)誤。

再次提醒,應(yīng)該避免出現(xiàn)技術(shù)術(shù)語(yǔ)。這個(gè)原則很簡(jiǎn)單,但是有時(shí)候很容易忽略。

正確的顏色

顏色是設(shè)計(jì)驗(yàn)證時(shí)的最佳工具之一。?由于人的視覺(jué)本能,紅色錯(cuò)誤信息、黃色警告信息、綠色成功信息都是非常易于識(shí)別的。下圖是驗(yàn)證密碼強(qiáng)度一個(gè)很好的示例:

uisdc-ios-2016093032

密碼表單域的警告狀態(tài)

另一個(gè)例子是用于表單域字符限制的提示顏色。字?jǐn)?shù)計(jì)數(shù)器和邊框線條變紅的時(shí)候,說(shuō)明字?jǐn)?shù)超過(guò)了限制。

uisdc-ios-2016093033

但是不要只依賴于顏色來(lái)反饋驗(yàn)證信息!確保界面對(duì)于用戶是可理解的,這對(duì)于視覺(jué)設(shè)計(jì)執(zhí)行而言,是一個(gè)非常重要的方面。

結(jié)論

你應(yīng)該讓數(shù)據(jù)輸入的過(guò)程盡可能簡(jiǎn)單。每一個(gè)微小的工作,比如自動(dòng)大寫轉(zhuǎn)換或者指明每個(gè)表單域填寫什么信息,都可以有效提高表單域的可用性和交互設(shè)計(jì)的質(zhì)量。深入思考用戶實(shí)際上是如何使用應(yīng)用和輸入內(nèi)容的。當(dāng)設(shè)計(jì) app 時(shí),確保沒(méi)有遺漏上述提及的問(wèn)題。

 

原文地址:?Text Fields in Mobile App

譯者 :?Zhangjd

譯文地址?:?掘金翻譯計(jì)劃

校對(duì)者:?Jasper Zhong,?Velacielad

版權(quán)聲明:人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范,所轉(zhuǎn)載的文章都注明作者和來(lái)源,若標(biāo)注有誤,請(qǐng)聯(lián)系主編QQ:419297645更改。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!