原文作者：Susan Farrell ? ?2015-10-25 ? ?發(fā)表于NN/g ? ?譯者：小媛

摘要：顯示當(dāng)前位置的導(dǎo)航通過(guò)標(biāo)識(shí)幫助用戶在瀏覽網(wǎng)站的時(shí)候找到方向。很多網(wǎng)站需要更明顯的位置標(biāo)識(shí)。

設(shè)計(jì)師通過(guò)導(dǎo)航結(jié)構(gòu)幫助用戶瀏覽網(wǎng)站，但僅有合理的導(dǎo)航結(jié)構(gòu)和功能還不夠。導(dǎo)航不但要告訴用戶接下來(lái)去哪兒，還要告訴他們當(dāng)前在哪兒。網(wǎng)站里的每一個(gè)頁(yè)面都有可能是用戶看到的第一個(gè)頁(yè)面，因此每一個(gè)頁(yè)面都應(yīng)該有足夠的場(chǎng)景信息，引導(dǎo)用戶迅速找到去往目的地的路徑。

通過(guò)頁(yè)面搜索來(lái)瀏覽網(wǎng)站就像是在陌生的城市里隨便下了一站車。有效的標(biāo)志是非常重要的。圖片源自RK Photography

商場(chǎng)走廊的墻上常常會(huì)貼上地圖告訴人們他們現(xiàn)在在哪兒，為他們辨明了方向。圖片源自Britain W.

用戶不總是會(huì)走正門

在搜索引擎的幫助下用戶可以在網(wǎng)站里隨意瀏覽，因此提供當(dāng)前所在位置的提示十分重要，這樣用戶才不會(huì)迷路。即便他們是通過(guò)首頁(yè)進(jìn)入到網(wǎng)站，在瀏覽其他頁(yè)面的時(shí)候也需要方向的引導(dǎo)。

位置標(biāo)識(shí)讓用戶瀏覽目標(biāo)頁(yè)面時(shí)更放心。與火車站類似，網(wǎng)站的位置標(biāo)識(shí)包含色碼、亮度、符號(hào)、箭頭、路徑，以及位置名稱。在用戶感到迷惑、擔(dān)心，或是迷路的時(shí)候，這些標(biāo)識(shí)可以幫助他們確信接下來(lái)該去哪兒。

讓用戶一眼看出網(wǎng)站主題及當(dāng)前頁(yè)面主題。網(wǎng)站里的位置標(biāo)識(shí)常常通過(guò)導(dǎo)航、圖標(biāo)或者菜單的外觀變化來(lái)實(shí)現(xiàn)。面包屑導(dǎo)航和頁(yè)面標(biāo)題的作用尤為明顯。購(gòu)物結(jié)算流程和應(yīng)用安裝向?qū)б矁A向于以步驟名稱和數(shù)字為用戶導(dǎo)向。

典型的“你在這兒”機(jī)制

LOGO和品牌：LOGO可以告知內(nèi)容的歸屬，且和首頁(yè)關(guān)聯(lián)。另外，注冊(cè)商標(biāo)、調(diào)色板、簽名字體等品牌元素也能激發(fā)用戶對(duì)一個(gè)組織機(jī)構(gòu)信用度的認(rèn)知。通常LOGO和品牌位于網(wǎng)站頁(yè)面的左上角；這個(gè)位置很容易被用戶一眼看到，不管用戶用的是哪種設(shè)備。

導(dǎo)航的變化：當(dāng)用戶選擇了某個(gè)主題的時(shí)候，與導(dǎo)航相關(guān)的鏈接或圖形元素（分頁(yè)選項(xiàng)卡、按鈕、符號(hào)等）在視覺(jué)上會(huì)有更顯著的變化，通常以顏色高亮、或者移動(dòng)的方式呈現(xiàn)（有的時(shí)候?yàn)榱送怀鲂Ч麅煞N方式會(huì)同時(shí)使用）。

主題：左對(duì)齊的標(biāo)題符合從左向右閱讀的規(guī)律，能讓用戶快速獲取關(guān)鍵信息。一組不同級(jí)別的主題也可以讓用戶馬上了解到其他內(nèi)容和路徑信息。

窗口（頁(yè)面）標(biāo)題：在搜索引擎結(jié)果、RSS訂閱、新的RSS閱讀器、書簽、歷史記錄列表中，HTML標(biāo)題位于每個(gè)窗口或分頁(yè)的頂端。獨(dú)有的描述性標(biāo)題表明了其歸屬、信息組織方式以及頁(yè)面的特定內(nèi)容。

URL：適當(dāng)、可讀的網(wǎng)站地址對(duì)鏈接地址的分享，網(wǎng)站的信用度、辨識(shí)度，以及撤銷操作功能有舉足輕重的作用。它揭示了網(wǎng)站的信息構(gòu)架，幫助用戶在場(chǎng)景中更好地了解網(wǎng)站內(nèi)容。

面包屑：面包屑的鏈接路徑清晰展示了信息層級(jí)（當(dāng)前所在位置及如何返回）。和URL一樣，面包屑也能告訴用戶剛剛瀏覽過(guò)的路徑，并且更具探索性。

場(chǎng)景線索：無(wú)論從時(shí)間角度還是網(wǎng)站的信息構(gòu)架方面來(lái)看，日期、標(biāo)簽、圖標(biāo)以及其他符號(hào)標(biāo)志也常用于幫助我們?cè)谇‘?dāng)?shù)膱?chǎng)景中更好地展示信息。

視覺(jué)設(shè)計(jì)的變化：彩色編碼、品牌變化、及其他一些明顯差異都可以作為位置變化的標(biāo)志。網(wǎng)站中的彩色編碼（主色調(diào)隨網(wǎng)站區(qū)域而變）常常伴隨著風(fēng)格迥異的內(nèi)容。例如，雜志、新聞網(wǎng)站、還有許多組織機(jī)構(gòu)會(huì)通過(guò)顏色和品牌的變化來(lái)區(qū)別不同的特性、部門、產(chǎn)品系列等。

步驟：通常，購(gòu)物結(jié)算步驟以及其他的順序任務(wù)流被賦予了每一步的名稱和序號(hào)，以告知用戶目前是第幾步、要執(zhí)行什么任務(wù)。這些步驟標(biāo)識(shí)一般位于頁(yè)面的水平上方或者垂直展現(xiàn)在左側(cè)。他們幫助用戶了解整個(gè)任務(wù)流有哪些步驟、目前處于哪一步驟，激發(fā)用戶的正確預(yù)期（讓用戶明白下一步是什么）。

網(wǎng)站BBC新聞通過(guò)（1）logo和品牌，（2）導(dǎo)航條的變化，（3）主題，（4）場(chǎng)景線索讓用戶明確當(dāng)前所在位置。這個(gè)頁(yè)面的標(biāo)題和URL包含了文章的標(biāo)題和網(wǎng)站的名稱。

麻省理工大學(xué)開放課程的網(wǎng)站有非常明顯的位置標(biāo)識(shí)：（1）品牌，（2）導(dǎo)航條的變化，（3）面包屑導(dǎo)航，（4）主題、頁(yè)面標(biāo)題及URL。但是這個(gè)頁(yè)面遺漏了一個(gè)重要的可見(jiàn)性信息，時(shí)間場(chǎng)景。

頁(yè)面標(biāo)題和URL對(duì)展示信息場(chǎng)景和位置也很有幫助：

麻省理工大學(xué)開放課程網(wǎng)站的頁(yè)面標(biāo)題為：Readings | Introduction to Technical Communication: Explorations in Scientific and Technical Writing | Comparative Media Studies/Writing | MITOpenCourseWare（路徑很長(zhǎng)，但是展示清晰、關(guān)鍵詞明了）

其URL為：http://ocw.mit.edu/courses/comparative-media-studies-writing/21w-732-5-introduction-to-technical-communication-explorations-in-scientific-and-technical-writing-fall-2006/readings/

該網(wǎng)站中，教科書的出版日期（1995-2003）暗示著文章已經(jīng)過(guò)時(shí)，但URL中卻有意提供了課程的時(shí)間（2006）。這里最好能在頁(yè)面里具體展示出課程的時(shí)間，好讓學(xué)生們知道這是一篇老舊卻依舊經(jīng)典的文章。頁(yè)面底部（整個(gè)網(wǎng)站皆如此）的版權(quán)信息雖然給出了2001-2015的提示，但這個(gè)時(shí)間范疇對(duì)于科技內(nèi)容來(lái)說(shuō)太久了。

紐約公共圖書館網(wǎng)站的黑色導(dǎo)航條選中任意一個(gè)主題后，被選中的主題顏色由黑變紅。這一變化展示了導(dǎo)航條的層級(jí)結(jié)構(gòu)和內(nèi)容信息。網(wǎng)站的LOGO、品牌以及可以來(lái)回切換主題的導(dǎo)航條都對(duì)用戶當(dāng)前位置的展示起到了積極作用。

在復(fù)雜的網(wǎng)站信息結(jié)構(gòu)中展示最深級(jí)導(dǎo)航條的變化是有難度的。但面包屑導(dǎo)航做到了。歐洲太空總署網(wǎng)站的復(fù)雜構(gòu)架和面包屑導(dǎo)航向用戶展示了清晰的位置標(biāo)識(shí)。（盡管還是有點(diǎn)令人困惑，理由是2014年拍攝的照片被歸屬到2015年——有可能2015年是照片的發(fā)布年限。）

為有效的位置標(biāo)識(shí)進(jìn)行測(cè)試

很多網(wǎng)站的位置標(biāo)識(shí)由于太不起眼而導(dǎo)致無(wú)法有效地傳達(dá)位置信息。設(shè)計(jì)師對(duì)自己設(shè)計(jì)的網(wǎng)站結(jié)構(gòu)了如指掌，不需要刻意的位置標(biāo)識(shí)，因此設(shè)計(jì)師眼里的網(wǎng)站設(shè)計(jì)與其他人是有差異的。相反，對(duì)于網(wǎng)站的訪客——新用戶或偶爾訪問(wèn)的用戶——來(lái)說(shuō)，一切都是新鮮有趣的。因此，一個(gè)對(duì)設(shè)計(jì)師來(lái)說(shuō)很明顯的位置標(biāo)識(shí)不一定能被訪客注意到。人們很容易忽略細(xì)節(jié)。

什么時(shí)候測(cè)試

現(xiàn)有網(wǎng)站隨時(shí)可以。

對(duì)于新網(wǎng)站的設(shè)計(jì)，最好在視覺(jué)進(jìn)展到高保真階段前就執(zhí)行好測(cè)試。列出所有網(wǎng)站在正式運(yùn)轉(zhuǎn)情況下能干擾用戶的真實(shí)內(nèi)容，尤其是廣告、動(dòng)效、照片，因?yàn)檫@些設(shè)計(jì)元素最能影響用戶注意力。

怎么執(zhí)行測(cè)試

向測(cè)試者展示網(wǎng)站不同層級(jí)的頁(yè)面，每次展示一個(gè)、不提供導(dǎo)向幫助。

對(duì)測(cè)試者提問(wèn)：“假設(shè)這是你第一次訪問(wèn)這個(gè)頁(yè)面。你知道自己處于網(wǎng)站什么位置嗎？”

若測(cè)試者給出反饋（正確或錯(cuò)誤的答案），接著問(wèn)：“你是怎么知道的？”

若測(cè)試者不確定，再問(wèn)：“你會(huì)希望這里有什么樣的標(biāo)識(shí)幫助你找到當(dāng)前位置？”

若測(cè)試者還是不清楚自己在哪兒，繼續(xù)提問(wèn)：“為了弄明白自己在哪兒，你通常會(huì)怎么做？”

避免把導(dǎo)航路徑設(shè)計(jì)成死胡同。有時(shí)URL也會(huì)因打不開而毫無(wú)作用。這種情況下，給出幾個(gè)位置鏈接、讓用戶嘗試去訪問(wèn)感興趣的頁(yè)面，而不是只留下一個(gè)空白頁(yè)面，這樣用戶可以重新計(jì)劃新的瀏覽之旅。該網(wǎng)站頁(yè)面向用戶表達(dá)了歉意，并建議用戶重新檢查網(wǎng)頁(yè)地址；此外，還提供了索引鏈接、網(wǎng)站的全局導(dǎo)航、檢查網(wǎng)站狀態(tài)的路徑、以及聯(lián)系網(wǎng)站工作人員的鏈接。無(wú)結(jié)果的搜索結(jié)果頁(yè)的處理方式也與此類似。

總之

只有讓用戶參與測(cè)試才能確保網(wǎng)站的導(dǎo)航路徑設(shè)計(jì)是否正確無(wú)誤。如果測(cè)試結(jié)果顯示用戶只是漫無(wú)目、這兒看看那兒看看、或是原路返回，說(shuō)明你的網(wǎng)站構(gòu)架還是存有問(wèn)題，要么是位置標(biāo)識(shí)不夠突出、放錯(cuò)地方，要么是導(dǎo)航層級(jí)、頁(yè)面標(biāo)題等不夠完善或有誤導(dǎo)性。

有關(guān)歷史記載

有趣的是，對(duì)用戶在“多維空間（復(fù)雜的網(wǎng)站構(gòu)架）中迷路”的擔(dān)心在萬(wàn)維網(wǎng)之前就催生了許多富有創(chuàng)造性但卻很復(fù)雜的解決方案。樂(lè)觀的是我們現(xiàn)今的網(wǎng)站已經(jīng)運(yùn)用了一些實(shí)際可行的微創(chuàng)新，并且用戶可以通過(guò)返回按鈕回到自己熟悉的領(lǐng)域。

相關(guān)培訓(xùn)課程

信息構(gòu)架，導(dǎo)航設(shè)計(jì)

原文鏈接：Navigation: You Are Here

譯者簡(jiǎn)介

小媛，神經(jīng)認(rèn)知語(yǔ)言學(xué)碩士 ?現(xiàn)從事互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì) ?熱衷于用戶體驗(yàn)和交互設(shè)計(jì)

如需轉(zhuǎn)載，請(qǐng)聯(lián)系作者并注明簡(jiǎn)書原文地址