|
翻譯：om19
最近，有一個(gè)設(shè)計(jì)師問我們說用戶期望在頁面的哪兒找到登錄區(qū)域呢。有的站點(diǎn)把它放在左邊，有的卻放在右邊。我們是不是有什么研究能夠表明放在這兒比放在哪兒更好呢？
這樣的問題拉出了一個(gè)更大的問題：為用戶的期望而設(shè)計(jì)。一方面來說，用戶，無論是新生兒還是新手，都會(huì)對(duì)某件事物理應(yīng)出現(xiàn)的地方產(chǎn)生期望。為這種期望而設(shè)計(jì)將會(huì)減少用戶的認(rèn)知負(fù)擔(dān)，并且能夠讓他們能夠?qū)⒆⒁饬性谒麄兊娜蝿?wù)上。從另一方面來說，并不是所有的業(yè)界標(biāo)準(zhǔn)都是設(shè)計(jì)的最佳之道。設(shè)計(jì)師能夠正確地?cái)[脫前人的束縛，才會(huì)出現(xiàn)更好的替代方案。甚至有時(shí)，那將是現(xiàn)有標(biāo)準(zhǔn)的一種“進(jìn)步”。因此，有個(gè)兩頭論：我們應(yīng)該為用戶的期望而設(shè)計(jì)還是給他們一個(gè)新的體驗(yàn)？——這種新的體驗(yàn)也許會(huì)更好但會(huì)違背用戶的期望。登錄區(qū)域的問題對(duì)我們來說是個(gè)不錯(cuò)的案例來探索如何解決這個(gè)兩頭論。我們可以利用視覺設(shè)計(jì)和交互設(shè)計(jì)作為導(dǎo)向來幫助我們解決這個(gè)問題。
到底、究竟該放在哪里在最近的包括了經(jīng)常瀏覽的用戶的研究中，我們有機(jī)會(huì)看到第一手關(guān)于當(dāng)?shù)卿浌δ鼙环胖迷陧撁娴牟煌胤綍r(shí)，登錄功能將如何見效的資料。登錄放在哪兒并沒有一貫的原則。例如，yuhou.cn把他們的登錄放在左邊欄的中間；yuhou.cn放在頁面的中央；yuhou.cn把用戶名和密碼輸入框橫跨在頁面的最頂端。
Hertzhomepage
MarriottHomePage
USAirwaysHomePage
雖然沒有太多的一貫的原則，但是他們都確實(shí)使用了登錄表單——一個(gè)用戶名或者email輸入框，加上一個(gè)密碼輸入框——或者只是用了一個(gè)叫做“登錄”的鏈接，這個(gè)鏈接帶領(lǐng)用戶到第二個(gè)登錄界面。yuhou.cn的頁面上方就有一個(gè)這樣的鏈接，yuhou.cn把他們的鏈接放在了頁面的中間，yuhou.cn將鏈接放在了左上方。
觀察用戶我們得出，無論是位置還是樣式(表單或者鏈接)都沒有明顯的區(qū)別。這些位置和樣式都很好地完成了功能——想登錄的用戶可以沒有挫敗，不會(huì)出錯(cuò)地開始登錄。這最設(shè)計(jì)師來說是個(gè)好消息。這個(gè)結(jié)論給予了他們?cè)谠O(shè)計(jì)上的很大的靈活性。
到底、究竟該如何表現(xiàn)雖然放在哪兒并不重要，但是我們確實(shí)發(fā)現(xiàn)了視覺表現(xiàn)的重要性。貌似很明顯地，如果登錄區(qū)域或者鏈接在頁面上難以看見，那么用戶會(huì)遇到麻煩的。
在最近的對(duì)電影租賃網(wǎng)站的UI部門經(jīng)理BillScott的采訪中，他承認(rèn)了我們的這個(gè)發(fā)現(xiàn)。他講述了一個(gè)故事：由于“登錄”鏈接太小，被混亂在設(shè)計(jì)之中，因而Netflix的用戶到了網(wǎng)站的新頁面上卻找不到“登錄”鏈接。當(dāng)他們對(duì)顏色、大小和表現(xiàn)做了一些微小的改動(dòng)后，他們發(fā)現(xiàn)，問題基本消失了。
NetflixRegisterPage
使用視覺設(shè)計(jì)上的一些最優(yōu)方法可以幫助團(tuán)隊(duì)保證在他們的用戶需要登錄功能的時(shí)候找到它。對(duì)登錄使用一些視覺上的變化可以讓那些尋找登錄的人很容易在頁面中發(fā)現(xiàn)它。
雙輸入框模式根據(jù)我們對(duì)用戶的觀察，貌似他們首先會(huì)去尋找兩個(gè)等大的文字輸入框。他們的眼睛會(huì)先會(huì)先掃描頁面(常常伴隨著鼠標(biāo)移動(dòng))尋找兩個(gè)輸入框。
網(wǎng)站上的一般包含在一個(gè)不同的背景和邊框里的兩個(gè)輸入框，可以很快的抓住用戶的注意。他們應(yīng)該會(huì)在第一個(gè)框內(nèi)輸入用戶名，在第二個(gè)框內(nèi)輸入密碼。
這樣的模式十分根深蒂固以至于影響了本不該是登錄框的模式。在yuhou.cn上，一個(gè)在線貿(mào)易行業(yè)銀行業(yè)務(wù)的網(wǎng)站，他們?cè)O(shè)計(jì)了兩對(duì)雙輸入框。第一對(duì)是標(biāo)準(zhǔn)的登錄區(qū)域，但是更突出的另一對(duì)是股票報(bào)價(jià)和站內(nèi)搜索功能。
ETradeHomePage
由于用戶對(duì)這種的模式的強(qiáng)烈的反應(yīng)，常常見到用戶將自己的用戶名和密碼輸?shù)焦善焙退阉鞯牡胤?，完全忽視了正確的登錄表單。由此可見，設(shè)計(jì)師在放置一堆文字輸入框的時(shí)候應(yīng)當(dāng)注意用戶是否會(huì)把它們誤認(rèn)為登錄框。
登錄鏈接模式如果用戶沒有看到兩個(gè)輸入框，那么他們會(huì)開始掃描尋找一個(gè)叫做登錄的鏈接。(我們還未發(fā)現(xiàn)有人用按鈕來表示它。其實(shí)按鈕也是一種選擇。但是，我們懷疑如果按鈕沒有恰當(dāng)?shù)乇憩F(xiàn)，那么這可能會(huì)照成認(rèn)知上的不一致。)
在我們的研究中，有一個(gè)模式很可行。這個(gè)模式就是：一旦登錄，就把登錄鏈接更換成用戶名、id、或是email地址，接著后邊放上一個(gè)退出的鏈接。用戶表現(xiàn)出他們理解了這個(gè)語義，這使他們安心地知道了系統(tǒng)已經(jīng)確認(rèn)了他們的帳號(hào)信息。
和兩個(gè)輸入框模式一樣，登錄鏈接需要在視覺上做得明顯并且能夠與在頁面上的許多其他的鏈接區(qū)分開來。聰明的視覺設(shè)計(jì)師可以輕易地將“登錄”做得明顯而又不影響頁面的美觀。
什么時(shí)候讓用戶登錄？我們不但發(fā)現(xiàn)用戶的期望仿佛不能決定頁面上登錄信息應(yīng)該出現(xiàn)的地方，我們同時(shí)還注意到當(dāng)?shù)卿洃?yīng)該出現(xiàn)的時(shí)候，用戶有很強(qiáng)的期望它能夠出現(xiàn)。交互流程的設(shè)計(jì)在我們研究的站點(diǎn)中有很明顯的影響。
在yuhou.cn上，首頁向?yàn)g覽者同時(shí)展示了登錄區(qū)域和租賃詳情區(qū)域。我們?cè)S多瀏覽者來網(wǎng)站時(shí)對(duì)航班信息記憶猶新。他們可能先開始輸入航班信息，然后點(diǎn)擊按鈕開始選車并進(jìn)入查看支付信息的步驟。
不幸的是，這種方法并不能讓用戶很好享受保存著他們的車參數(shù)和支付信息的Hertz一等俱樂部的會(huì)員資格。一旦進(jìn)入了第二個(gè)步驟，他們必須返回首頁，重新登錄，然后再次輸入到達(dá)航班和離開航班的數(shù)據(jù)。在我們研究的時(shí)候，他們一旦開始了這個(gè)流程，就沒辦法能夠做到不用放棄并重新開始就能預(yù)訂。(注：Hertz隨后變更了他們的設(shè)計(jì)。這個(gè)問題不再重現(xiàn)。)
在yuhou.cn上，注冊(cè)用戶在搜索酒店之前是不需要登錄的。他們可以選擇一間酒店準(zhǔn)備入住并開始進(jìn)行預(yù)訂。當(dāng)站點(diǎn)需要展示一個(gè)頁面，并且如果有儲(chǔ)存的會(huì)員信息將會(huì)使這個(gè)頁面更加有效的時(shí)候，瀏覽者可以在不用重復(fù)上訴步驟的前提下選擇登錄。
雖然這時(shí)交互設(shè)計(jì)很重要，但是它并不能降低視覺設(shè)計(jì)的地位。有些Marriott的瀏覽者由于登錄框不顯著地出現(xiàn)在頁面的右側(cè)以致沒有發(fā)現(xiàn)它。
MarriottReservationPage
yuhou.cn使用了另一種方法，將“喜達(dá)屋榮譽(yù)會(huì)員”登錄(新的注冊(cè)會(huì)員的噱頭)作為表單的第一欄放在了頁面的中央。瀏覽者在預(yù)定的時(shí)候很容易看到。(注：Marriott近期將他們的設(shè)計(jì)改得更類似于Westin的方式。)
WestinReservationPage
期望、視覺設(shè)計(jì)和交互設(shè)計(jì)視覺設(shè)計(jì)讓我們能夠讓元素更加突出，這樣用戶就能容易地找到他們想要的。交互設(shè)計(jì)讓我們能夠?qū)⒃匾惑w化，形成對(duì)話，這樣用戶能夠在他們需要的時(shí)候就能用到。
制作很好的體驗(yàn)的時(shí)候，并不是一直在設(shè)計(jì)用戶所期望的東西。相反的，應(yīng)該是設(shè)計(jì)明顯地在用戶需要的那一刻去迎合他們的東西。擁有者強(qiáng)大的視覺設(shè)計(jì)和交互設(shè)計(jì)技能的團(tuán)隊(duì)，會(huì)找到他們?nèi)绾芜M(jìn)入更高階的設(shè)計(jì)的方法的。
|