編輯導(dǎo)語：上一期我總結(jié)了文本框的交互要點(diǎn)（可回顧《交互設(shè)計拆解：文本框》），本文作者從iOS人機(jī)交互和 Material Design指導(dǎo)規(guī)范的共通點(diǎn)以及作者對設(shè)計方法論的拙見，整合了文本框的交互細(xì)節(jié)；我們一起來看一下。

為了體現(xiàn)文本框設(shè)計形式的科學(xué)性，其實 Google Design（下文簡稱GD） 團(tuán)隊在2019年曾分享過一篇用戶研究文獻(xiàn)，是與高級用戶體驗研究員 Michael Gilbert 共同合作撰寫的關(guān)于文本框的真實用戶可用性研究報告。

其實MD現(xiàn)階段版本的文本框規(guī)范，早在2017年初就進(jìn)行了重設(shè)計，但在2019年年底才分享出其背后的研究過程與結(jié)論。

剛好談到了文本框，我想借此機(jī)會和大家分享GD團(tuán)隊的該項研究幕后過程；看到最后，你會發(fā)現(xiàn)所得到的結(jié)論不僅僅只限于使用在文本框控件上。

最關(guān)鍵的是：從GD團(tuán)隊所披露的研究過程和結(jié)論，我發(fā)現(xiàn)其實再高深的用戶設(shè)計/研究團(tuán)隊，都會在前期做一些“失敗”的設(shè)計，這并不可怕。

所以在探索過程中的我們，不要輕易感到沮喪——多去模擬大型團(tuán)隊的方法和理念，勇于輸出自己的新觀點(diǎn)才是最重要的。

一、為什么需要優(yōu)化？

文本框是用戶在表單和對話框中輸入、編輯文本的最常用控件之一，本質(zhì)與關(guān)鍵是應(yīng)該讓用戶清楚：這是一個可交互的控件。

先來看看MD規(guī)范早期文本框的樣式（2017年前）：

對于舊版文本框，GD團(tuán)隊發(fā)現(xiàn)部分用戶并不知道可以與之交互。

因為舊文本框下的線條寓意并不清晰，容易讓某些用戶將這條線與分隔線（分割作用）混淆；標(biāo)簽文本（Label text）和輸入內(nèi)容也容易與正文混淆，尤其是在密集文字排版中。

GD團(tuán)隊的優(yōu)化目標(biāo)是改進(jìn)文本框，使其具有更高的辨識度、易見性，從而更易被理解；這樣用戶才能夠正確、快速地使用。

于是團(tuán)隊開始進(jìn)行用戶實驗研究，剖析究竟是哪些要素在干擾用戶判斷。

整個用戶研究實驗分為兩個測試階段。

1. 測試項目一：158名參與者（+ 45名飛行員）

第一項測試是將原文本框與其他三種不同設(shè)計形式的文本框原型進(jìn)行比較，放在簡單/復(fù)雜/真實使用場景當(dāng)中，讓用戶完成指定的任務(wù)（例如要求參與者找到特定的“Item L”文本框）。

為了確保參與者無法提前學(xué)習(xí)和預(yù)測在測試過程中文本框可能出現(xiàn)的位置，團(tuán)隊將顯示這些文本框的順序隨機(jī)打亂。

GD團(tuán)隊通過記錄不同的文本框設(shè)計形式在不同的場景中，被參與者找到并進(jìn)行準(zhǔn)確點(diǎn)擊的時間，來判斷用戶是否能清晰地認(rèn)知文本框——以此得到一個理論量化值。

然后在感性層面，GD團(tuán)隊還讓參與者按照自己的視覺偏好來對四種文本框設(shè)計進(jìn)行喜好度排名。

通過理論和感性兩個層面綜合得出較優(yōu)的文本框形式，再進(jìn)一步細(xì)化細(xì)節(jié)，投入到測試項目二中。

2. 測試項目二：400名參與者

通過測試項目一確定了設(shè)計方向后，測試項目二為了更進(jìn)一步地確定文本框的細(xì)節(jié)設(shè)計，GD團(tuán)隊創(chuàng)建了一個自定義工具。

團(tuán)隊從文本框控件中提煉出了7個特征（例如標(biāo)簽位置、背景顏色對比度、邊框樣式等），通過這個自定義工具進(jìn)行特征組裝，最后組裝出了140多個文本框樣式。

然后重復(fù)項目一中的測試模式，進(jìn)行計時。這一次還記錄了用戶的點(diǎn)擊熱力圖來收集有關(guān)參與者正確或錯誤點(diǎn)擊的數(shù)據(jù)。

為了確定哪些文本框特征是最能影響到用戶對文本框控件的判斷的，研究人員和設(shè)計人員團(tuán)隊找到了能映射用戶行為的三個量化指標(biāo)：

• 通過「正確點(diǎn)擊次數(shù)與錯誤點(diǎn)擊次數(shù)」量化可識別性；
• 通過「參與者查找并點(diǎn)擊所任務(wù)要求文本框所花費(fèi)的時間」量化文本框可被查找性；
• 通過「參與者對每個文本字段的變體進(jìn)行排序」量化用戶視覺偏好。

二、主要發(fā)現(xiàn)

兩項實驗的結(jié)果表明，文本框的以下特征最能影響到用戶判斷：

1. 矩形（框形）樣式的封閉文本框的性能優(yōu)于僅帶有線條的文本框；
2. 文本框應(yīng)該帶有有色填充和底部線條；或者空白填充，但需要有色描邊；
3. 文本框的底部線條與背景的顏色對比度最小應(yīng)為3：1（關(guān)于顏色對比度相關(guān)話題，我會在后面寫一篇文章細(xì)致講解）；
4. 標(biāo)簽文本應(yīng)放置在文本框范圍內(nèi)；
5. 文本框應(yīng)具有圓角（用戶視覺喜愛度更偏好）。

于是通過這個實驗，就有了如今的MD規(guī)范中的文本框樣式，也被借鑒運(yùn)用到了許多其他規(guī)范與場景當(dāng)中。

三、總結(jié)

GD團(tuán)隊重新探索文本框控件設(shè)計的實驗涉及到了兩名設(shè)計師、一名研究員和大約600名參與者。

得出了在MD規(guī)范中，「文本框控件」細(xì)則開篇便給出的三個原則：易見、清晰、高效。

可能以前對MD規(guī)范還算關(guān)注的你，也是知其然，不知其所以然。

新的文本框規(guī)范已經(jīng)應(yīng)用在了Google的各產(chǎn)品線當(dāng)中，從帳戶登錄頁面到Google表單。

其實使用上面的實驗，GD團(tuán)隊不僅解決了舊版文本框的易用性問題；通過前人種樹得到的結(jié)論，我們還可以將這些手法運(yùn)用到許多其他的場景當(dāng)中，來輔助我們排查控件的可用性：例如對比、親密性、用戶視覺偏好等等，都值得被借鑒。

希望這個實驗的分享可以幫助到你。

附上Google?Design團(tuán)隊文本框優(yōu)化實驗文獻(xiàn)地址，我們下期再見~

#專欄作家#

UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議