翻譯：om19

最近，有一個設計師問我們說用戶期望在頁面的哪兒找到登錄區(qū)域呢。有的站點把它放在左邊，有的卻放在右邊。我們是不是有什么研究能夠表明放在這兒比放在哪兒更好呢？

這 樣的問題拉出了一個更大的問題：為用戶的期望而設計。一方面來說，用戶，無論是新生兒還是新手，都會對某件事物理應出現(xiàn)的地方產(chǎn)生期望。為這種期望而設計 將會減少用戶的認知負擔，并且能夠讓他們能夠?qū)⒆⒁饬性谒麄兊娜蝿丈稀牧硪环矫鎭碚f，并不是所有的業(yè)界標準都是設計的最佳之道。設計師能夠正確地擺 脫前人的束縛，才會出現(xiàn)更好的替代方案。甚至有時，那將是現(xiàn)有標準的一種“進步”。因此，有個兩頭論：我們應該為用戶的期望而設計還是給他們一個新的體 驗？——這種新的體驗也許會更好但會違背用戶的期望。登錄區(qū)域的問題對我們來說是個不錯的案例來探索如何解決這個兩頭論。我們可以利用視覺設計和交互設計 作為導向來幫助我們解決這個問題。

到底、究竟該放在哪里

在 最近的包括了經(jīng)常瀏覽的用戶的研究中，我們有機會看到第一手關(guān)于當?shù)卿浌δ鼙环胖迷陧撁娴牟煌胤綍r，登錄功能將如何見效的資料。登錄放在哪兒并沒有一貫 的原則。例如，hertz.com把他們的登錄放在左邊欄的中間；Marriott.com放在頁面的中央；USAriways.com把用戶名和密碼輸 入框橫跨在頁面的最頂端。

Hertz home page

Marriott Home Page

US Airways Home Page

雖 然沒有太多的一貫的原則，但是他們都確實使用了登錄表單——一個用戶名或者email輸入框，加上一個密碼輸入框——或者只是用了一個叫做“登錄”的鏈 接，這個鏈接帶領(lǐng)用戶到第二個登錄界面。Orbitz.com的頁面上方就有一個這樣的鏈接，Avis.com把他們的鏈接放在了頁面的中 間，Westin.com將鏈接放在了左上方。

觀察用戶我們得出，無論是位置還是樣式(表單或者鏈接)都沒有明顯的區(qū)別。這些位置和樣式都很好地完成了功能——想登錄的用戶可以沒有挫敗，不會出錯地開始登錄。這最設計師來說是個好消息。這個結(jié)論給予了他們在設計上的很大的靈活性。

到底、究竟該如何表現(xiàn)

雖然放在哪兒并不重要，但是我們確實發(fā)現(xiàn)了視覺表現(xiàn)的重要性。貌似很明顯地，如果登錄區(qū)域或者鏈接在頁面上難以看見，那么用戶會遇到麻煩的。

在 最近的對電影租賃網(wǎng)站的UI部門經(jīng)理Bill Scott的采訪中，他承認了我們的這個發(fā)現(xiàn)。他講述了一個故事：由于“登錄”鏈接太小，被混亂在設計之中，因而Netflix的用戶到了網(wǎng)站的新頁面上 卻找不到“登錄”鏈接。當他們對顏色、大小和表現(xiàn)做了一些微小的改動后，他們發(fā)現(xiàn)，問題基本消失了。

Netflix Register Page

使用視覺設計上的一些最優(yōu)方法可以幫助團隊保證在他們的用戶需要登錄功能的時候找到它。對登錄使用一些視覺上的變化可以讓那些尋找登錄的人很容易在頁面中發(fā)現(xiàn)它。

雙輸入框模式

根據(jù)我們對用戶的觀察，貌似他們首先會去尋找兩個等大的文字輸入框。他們的眼睛會先會先掃描頁面(常常伴隨著鼠標移動)尋找兩個輸入框。

網(wǎng)站上的一般包含在一個不同的背景和邊框里的兩個輸入框，可以很快的抓住用戶的注意。他們應該會在第一個框內(nèi)輸入用戶名，在第二個框內(nèi)輸入密碼。

這樣的模式十分根深蒂固以至于影響了本不該是登錄框的模式。在Etrade.com上，一個在線貿(mào)易行業(yè)銀行業(yè)務的網(wǎng)站，他們設計了兩對雙輸入框。第一對是標準的登錄區(qū)域，但是更突出的另一對是股票報價和站內(nèi)搜索功能。

ETrade Home Page

由于用戶對這種的模式的強烈的反應，常常見到用戶將自己的用戶名和密碼輸?shù)焦善焙退阉鞯牡胤剑耆鲆暳苏_的登錄表單。由此可見，設計師在放置一堆文字輸入框的時候應當注意用戶是否會把它們誤認為登錄框。

登錄鏈接模式
如果用戶沒有看到兩個輸入框，那么他們會開始掃描尋找一個叫做登錄的鏈接。(我們還未發(fā)現(xiàn)有人用按鈕來表示它。其實按鈕也是一種選擇。但是，我們懷疑如果按鈕沒有恰當?shù)乇憩F(xiàn)，那么這可能會照成認知上的不一致。)

在我們的研究中，有一個模式很可行。這個模式就是：一旦登錄，就把登錄鏈接更換成用戶名、id、或是email地址，接著后邊放上一個退出的鏈接。用戶表現(xiàn)出他們理解了這個語義，這使他們安心地知道了系統(tǒng)已經(jīng)確認了他們的帳號信息。

和兩個輸入框模式一樣，登錄鏈接需要在視覺上做得明顯并且能夠與在頁面上的許多其他的鏈接區(qū)分開來。聰明的視覺設計師可以輕易地將“登錄”做得明顯而又不影響頁面的美觀。

什么時候讓用戶登錄？
我們不但發(fā)現(xiàn)用戶的期望仿佛不能決定頁面上登錄信息應該出現(xiàn)的地方，我們同時還注意到當?shù)卿洃摮霈F(xiàn)的時候，用戶有很強的期望它能夠出現(xiàn)。交互流程的設計在我們研究的站點中有很明顯的影響。

在Hertz.com上，首頁向瀏覽者同時展示了登錄區(qū)域和租賃詳情區(qū)域。我們許多瀏覽者來網(wǎng)站時對航班信息記憶猶新。他們可能先開始輸入航班信息，然后點擊按鈕開始選車并進入查看支付信息的步驟。

不 幸的是，這種方法并不能讓用戶很好享受保存著他們的車參數(shù)和支付信息的Hertz一等俱樂部的會員資格。一旦進入了第二個步驟，他們必須返回首頁，重新登 錄，然后再次輸入到達航班和離開航班的數(shù)據(jù)。在我們研究的時候，他們一旦開始了這個流程，就沒辦法能夠做到不用放棄并重新開始就能預訂。(注：Hertz 隨后變更了他們的設計。這個問題不再重現(xiàn)。)

在Marriott.com上，注冊用戶在搜索酒店之前是不需要登錄的。他們可以選擇一間酒店準備入住并開始進行預訂。當站點需要展示一個頁面，并且如果有儲存的會員信息將會使這個頁面更加有效的時候，瀏覽者可以在不用重復上訴步驟的前提下選擇登錄。

雖然這時交互設計很重要，但是它并不能降低視覺設計的地位。有些Marriott的瀏覽者由于登錄框不顯著地出現(xiàn)在頁面的右側(cè)以致沒有發(fā)現(xiàn)它。

Marriott Reservation Page

Westin.com使用了另一種方法，將“喜達屋榮譽會員”登錄(新的注冊會員的噱頭)作為表單的第一欄放在了頁面的中央。瀏覽者在預定的時候很容易看到。(注：Marriott近期將他們的設計改得更類似于Westin的方式。)

Westin Reservation Page

期望、視覺設計和交互設計
視覺設計讓我們能夠讓元素更加突出，這樣用戶就能容易地找到他們想要的。交互設計讓我們能夠?qū)⒃匾惑w化，形成對話，這樣用戶能夠在他們需要的時候就能用到。

制作很好的體驗的時候，并不是一直在設計用戶所期望的東西。相反的，應該是設計明顯地在用戶需要的那一刻去迎合他們的東西。擁有者強大的視覺設計和交互設計技能的團隊，會找到他們?nèi)绾芜M入更高階的設計的方法的。