參考：Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach
作者：Matteo Penzo
來源：http://www.uxmatters.com/MT/archives/000068.php
譯文出自：http://usability.dlmu.edu.cn/communication/newsletter003/004.html
目前來說，輸入框（form）是最為常見也幾乎是用戶向網(wǎng)站輸入信息的唯一途徑。Web2.0使得輸入框被廣泛地使用，例如在現(xiàn)有的幾個網(wǎng)站：Flickr?, Del.icio.us和 Writeboard?上，用戶通過輸入框來提交他們的標注、評論等信息。電子商務(wù)網(wǎng)站也極度依賴輸入框，用戶通過它才能找到并購買商品。因此輸入框的可用性對整個網(wǎng)站的可用性影響非常大。
通常輸入框主要有以下三個重要元素：標簽、輸入?yún)^(qū)域和提交按扭。Penzo通過眼動跟蹤測試來評估搜索框在頁面的合適位置，以及這三個元素之間如何放置。同時探求使得輸入框好用的原因。
這項研究依據(jù)用戶對網(wǎng)絡(luò)的不同熟練程度將用戶分為三組：新手用戶、中間用戶和熟練用戶。在研究中每位用戶先使用Google網(wǎng)站，以熟悉任務(wù)。接著從Google、Amazon、eBay、Flickr和useit.com中隨機選取三個，進行三輪測試。每輪測試任務(wù)均是找到搜索框、定位、提交，提交完成標志著任務(wù)的結(jié)束。
雖然測試中有個別例外情況，但整體上的結(jié)果仍具有很強的趨同性。根據(jù)用戶的熟練程度結(jié)果中顯示出來的搜索模式有所不同。新手用戶會上下左右反復(fù)地搜索，而熟練用戶會直接輸入，從不四處觀望，因為他們知道完成任務(wù)所需工具在哪里。這從眼動儀的研究結(jié)果中不同用戶注視區(qū)域的大小即能顯示出來。圖1中顯示了熟練用戶與新手用戶在使用搜索框時極為不同的行為模式。
如圖1所示，新手用戶會先看一眼輸入框，再看一眼提交按扭，接著看一眼標簽。這一系列行為會不斷重復(fù)，即使在他們進行某項輸入時，他們?nèi)匀粫磸?fù)查看輸入框的所有元素以確保他們所做的是對的。
熟練用戶會首先直接注視輸入框，完全忽視其它東西，直到完成輸入并且在即將提交的那一刻，才會長時間掃視提交按扭，用戶應(yīng)該是早已感知到該按扭的存在，只是一直沒看而已。通常熟練用戶會直接按回車鍵提交搜索。
圖1—新手用戶使用Google進行搜索時的注視區(qū)域圖
新手用戶需要確保他們行為的正確性，因此在輸入文字時不斷地審查他們正在輸入文字的區(qū)域是否就是搜索框。這個發(fā)現(xiàn)在最開始的熱身測試，即使用Googe搜索時表現(xiàn)得很明顯，但在更復(fù)雜的任務(wù)里這個結(jié)論也是成立的。
給用戶體驗設(shè)計師的實用建議——輸入框要有清晰的標簽。加標簽并不會給熟練用戶帶來 多大影響，但對于新手用戶來說會有很大幫助。
Amazon 和 eBay在Amazon.com，由于其搜索框沒有g(shù)oogle那么大和突出，多少會讓用戶感到困惑，特別是新手用戶，他們需要花費1.6秒才能完全理解搜索框。
在Amazon和eBay上，下拉列表離輸入框很近。研究結(jié)果表明，用戶通常會首先看這些下拉框，并長久注視。圖2是一個熱點圖，它顯示了所有新手用戶在eBay這個頁面的每個元素上所花費時間的總和。似乎所有用戶都覺得下拉框是最重要的部分。
圖2—熱點圖顯示了所有新手用戶在eBay這個頁面的每個元素上所花費時間的總和
當某個頁面的內(nèi)容太多，突出顯示輸入?yún)^(qū)域的標簽可以幫用戶快速識別，這樣可以減少用戶重復(fù)注視的次數(shù)。在eBay上，搜索區(qū)域的重要元素——提交按扭位于頁面最右端，這樣迫使用戶注視該區(qū)域后，再回到輸入?yún)^(qū)域，這樣不斷來回注視，加重了他們的認知負擔。
專家用戶仍然既不注視標簽亦不注視下拉列表—即使稍微地注視也是認知負擔。但與新手用戶有所不同的是：一旦輸入了搜索關(guān)鍵詞，他們會直接將注意力移向提交按扭。圖3是熱點圖，顯示了所有熟練用戶注視Amazon上各元素的時間。
圖3—熱點圖顯示所有熟練用戶注視Amazon上各元素的時間
Flickr搜索框絕非Flickr網(wǎng)站的突出特點。但它的搜索區(qū)域很緊湊：輸入?yún)^(qū)域很窄，標簽位于其上方，按扭在右邊。這一設(shè)計很成功。圖4顯示所有用戶注視各元素的時間，可以發(fā)現(xiàn)用戶最終將視線集中于搜索區(qū)域。
圖4—熱點圖顯示所有用戶注視Flickr各元素的時間
這種輸入框形式在測試所選的所有網(wǎng)站里表現(xiàn)最為出色。因為整個搜索區(qū)域很緊湊，完全掃視一眼所需時間不會超過1秒。并且，因為輸入框有明確的標簽，新手用戶能很快領(lǐng)悟該輸入框的用途。
useit.comuseit.com 是Nielsen自己的電子商務(wù)網(wǎng)站。他對許多電子商務(wù)網(wǎng)站做過研究。所以相信對該網(wǎng)站搜索框的放置問題研究一下一定有趣—它可沒有標簽。
對于該網(wǎng)站的搜索框，無論是新手用戶還是中間用戶都沒法立即發(fā)現(xiàn)它。因此，可以說要將搜索框置于網(wǎng)站右上角這條標準，對于這些用戶似乎不奏效。由于沒有標簽，新手用戶需要來到頁面最右端確認該輸入框的意圖。但對于熟練用戶來說—他們可能是Nielsen網(wǎng)站的目標用戶—在第三眼就能發(fā)現(xiàn)搜索框，并且開始輸入搜索文字。
圖5—該圖顯示了新手用戶在使用Useit.com的搜索框時的掃瞄路徑
搜索框設(shè)計指南雖說沒有對輸入框進行深入的研究，但該研究還是總結(jié)出了一些有意思的搜索框設(shè)計指南。
搜索框標簽可以幫助新手用戶和中間用戶，他們在一開始會試圖在網(wǎng)站上尋找這樣的標簽。他們期待標簽出現(xiàn)在搜索框左邊或者上方。熟練用戶完全不會在意和使用標簽，就好象不存在這些標簽一樣。
下拉列表是很吸引眼球的元素。對于是否使用下拉列表，你總需要考慮再三。只有在別無它法的情況下才使用下拉列表。如果你想創(chuàng)建一個新手用戶就能使用的簡單搜索框，盡量避免使用下拉列表這種形式，因為它們會加重用戶的認知負擔。
緊湊讓搜索框變得容易讀取，因此，要讓搜索框盡量緊湊。當用戶對某項東西不太理解的時候，他們會整體掃視該區(qū)域直到能理解它們。在所有眼動測試中，表現(xiàn)最優(yōu)秀的是Flickr的搜索框，它非常緊湊，標簽位于輸入框上方，這樣用戶只需要看頁面的一小塊地方，不用來回看。因此應(yīng)該將標簽放在搜索框的正上方或左方。
應(yīng)該將搜索框放在一致的地方，這應(yīng)該成為一種標準，可以用來彌補那些不加標簽的問題。如果實在不想在搜索框處加標簽，至少應(yīng)該將搜索框放置在一個獨立的區(qū)域，這樣用戶比較容易明白它的意圖。如果你這樣做，不僅能讓熟練用戶受益，因為他們從來不看標簽，也能讓新手用戶受益，他們完成任務(wù)極度依賴這些標簽。
