告訴用戶“你在這兒”

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


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

設(shè)計師通過導(dǎo)航結(jié)構(gòu)幫助用戶瀏覽網(wǎng)站偶摔,但僅有合理的導(dǎo)航結(jié)構(gòu)和功能還不夠卒密。導(dǎo)航不但要告訴用戶接下來去哪兒雏节,還要告訴他們當(dāng)前在哪兒肠鲫。網(wǎng)站里的每一個頁面都有可能是用戶看到的第一個頁面鸟顺,因此每一個頁面都應(yīng)該有足夠的場景信息酷宵,引導(dǎo)用戶迅速找到去往目的地的路徑亥贸。

通過頁面搜索來瀏覽網(wǎng)站就像是在陌生的城市里隨便下了一站車。有效的標(biāo)志是非常重要的浇垦。圖片源自RK Photography
商場走廊的墻上常常會貼上地圖告訴人們他們現(xiàn)在在哪兒炕置,為他們辨明了方向。圖片源自Britain W.

用戶不總是會走正門

在搜索引擎的幫助下用戶可以在網(wǎng)站里隨意瀏覽男韧,因此提供當(dāng)前所在位置的提示十分重要朴摊,這樣用戶才不會迷路。即便他們是通過首頁進入到網(wǎng)站此虑,在瀏覽其他頁面的時候也需要方向的引導(dǎo)甚纲。

位置標(biāo)識讓用戶瀏覽目標(biāo)頁面時更放心。與火車站類似朦前,網(wǎng)站的位置標(biāo)識包含色碼介杆、亮度、符號韭寸、箭頭春哨、路徑,以及位置名稱恩伺。在用戶感到迷惑赴背、擔(dān)心,或是迷路的時候莫其,這些標(biāo)識可以幫助他們確信接下來該去哪兒癞尚。

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

典型的“你在這兒”機制

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

導(dǎo)航的變化:當(dāng)用戶選擇了某個主題的時候聂儒,與導(dǎo)航相關(guān)的鏈接或圖形元素(分頁選項卡、按鈕硫痰、符號等)在視覺上會有更顯著的變化衩婚,通常以顏色高亮、或者移動的方式呈現(xiàn)(有的時候為了突出效果兩種方式會同時使用)效斑。

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

窗口(頁面)標(biāo)題:在搜索引擎結(jié)果奇昙、RSS訂閱、新的RSS閱讀器敌完、書簽敬矩、歷史記錄列表中,HTML標(biāo)題位于每個窗口或分頁的頂端蠢挡。獨有的描述性標(biāo)題表明了其歸屬弧岳、信息組織方式以及頁面的特定內(nèi)容。

URL適當(dāng)业踏、可讀的網(wǎng)站地址對鏈接地址的分享禽炬,網(wǎng)站的信用度、辨識度勤家,以及撤銷操作功能有舉足輕重的作用腹尖。它揭示了網(wǎng)站的信息構(gòu)架,幫助用戶在場景中更好地了解網(wǎng)站內(nèi)容伐脖。

面包屑面包屑的鏈接路徑清晰展示了信息層級(當(dāng)前所在位置及如何返回)热幔。和URL一樣,面包屑也能告訴用戶剛剛瀏覽過的路徑讼庇,并且更具探索性绎巨。

場景線索:無論從時間角度還是網(wǎng)站的信息構(gòu)架方面來看,日期蠕啄、標(biāo)簽场勤、圖標(biāo)以及其他符號標(biāo)志也常用于幫助我們在恰當(dāng)?shù)膱鼍爸懈玫卣故拘畔ⅰ?/p>

視覺設(shè)計的變化:彩色編碼戈锻、品牌變化、及其他一些明顯差異都可以作為位置變化的標(biāo)志和媳。網(wǎng)站中的彩色編碼(主色調(diào)隨網(wǎng)站區(qū)域而變)常常伴隨著風(fēng)格迥異的內(nèi)容格遭。例如,雜志留瞳、新聞網(wǎng)站拒迅、還有許多組織機構(gòu)會通過顏色和品牌的變化來區(qū)別不同的特性、部門她倘、產(chǎn)品系列等坪它。

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

網(wǎng)站BBC新聞通過(1)logo和品牌嗤详,(2)導(dǎo)航條的變化,(3)主題瓷炮,(4)場景線索讓用戶明確當(dāng)前所在位置葱色。這個頁面的標(biāo)題和URL包含了文章的標(biāo)題和網(wǎng)站的名稱。
麻省理工大學(xué)開放課程的網(wǎng)站有非常明顯的位置標(biāo)識:(1)品牌娘香,(2)導(dǎo)航條的變化苍狰,(3)面包屑導(dǎo)航,(4)主題烘绽、頁面標(biāo)題及URL淋昭。但是這個頁面遺漏了一個重要的可見性信息,時間場景安接。

頁面標(biāo)題和URL對展示信息場景和位置也很有幫助:

麻省理工大學(xué)開放課程網(wǎng)站的頁面標(biāo)題為:Readings | Introduction to Technical Communication: Explorations in Scientific and Technical Writing | Comparative Media Studies/Writing | MITOpenCourseWare(路徑很長翔忽,但是展示清晰、關(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)過時歇式,但URL中卻有意提供了課程的時間(2006)。這里最好能在頁面里具體展示出課程的時間胡野,好讓學(xué)生們知道這是一篇老舊卻依舊經(jīng)典的文章材失。頁面底部(整個網(wǎng)站皆如此)的版權(quán)信息雖然給出了2001-2015的提示,但這個時間范疇對于科技內(nèi)容來說太久了给涕。

紐約公共圖書館網(wǎng)站的黑色導(dǎo)航條選中任意一個主題后豺憔,被選中的主題顏色由黑變紅。這一變化展示了導(dǎo)航條的層級結(jié)構(gòu)和內(nèi)容信息够庙。網(wǎng)站的LOGO恭应、品牌以及可以來回切換主題的導(dǎo)航條都對用戶當(dāng)前位置的展示起到了積極作用。
在復(fù)雜的網(wǎng)站信息結(jié)構(gòu)中展示最深級導(dǎo)航條的變化是有難度的耘眨。但面包屑導(dǎo)航做到了昼榛。歐洲太空總署網(wǎng)站的復(fù)雜構(gòu)架和面包屑導(dǎo)航向用戶展示了清晰的位置標(biāo)識。(盡管還是有點令人困惑剔难,理由是2014年拍攝的照片被歸屬到2015年——有可能2015年是照片的發(fā)布年限胆屿。)

為有效的位置標(biāo)識進行測試

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

什么時候測試

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

對于新網(wǎng)站的設(shè)計亿汞,最好在視覺進展到高保真階段前就執(zhí)行好測試。列出所有網(wǎng)站在正式運轉(zhuǎn)情況下能干擾用戶的真實內(nèi)容揪阿,尤其是廣告疗我、動效、照片南捂,因為這些設(shè)計元素最能影響用戶注意力碍粥。

怎么執(zhí)行測試

向測試者展示網(wǎng)站不同層級的頁面,每次展示一個黑毅、不提供導(dǎo)向幫助嚼摩。

對測試者提問:“假設(shè)這是你第一次訪問這個頁面。你知道自己處于網(wǎng)站什么位置嗎矿瘦?”

若測試者給出反饋(正確或錯誤的答案)枕面,接著問:“你是怎么知道的?”

若測試者不確定缚去,再問:“你會希望這里有什么樣的標(biāo)識幫助你找到當(dāng)前位置潮秘?”

若測試者還是不清楚自己在哪兒,繼續(xù)提問:“為了弄明白自己在哪兒易结,你通常會怎么做枕荞?”

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

總之

只有讓用戶參與測試才能確保網(wǎng)站的導(dǎo)航路徑設(shè)計是否正確無誤魁瞪。如果測試結(jié)果顯示用戶只是漫無目、這兒看看那兒看看惠呼、或是原路返回导俘,說明你的網(wǎng)站構(gòu)架還是存有問題,要么是位置標(biāo)識不夠突出剔蹋、放錯地方旅薄,要么是導(dǎo)航層級、頁面標(biāo)題等不夠完善或有誤導(dǎo)性泣崩。

有關(guān)歷史記載

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

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

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


原文鏈接:Navigation: You Are Here

譯者簡介

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

如需轉(zhuǎn)載妨马,請聯(lián)系作者并注明簡書原文地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市杀赢,隨后出現(xiàn)的幾起案子烘跺,更是在濱河造成了極大的恐慌,老刑警劉巖脂崔,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件滤淳,死亡現(xiàn)場離奇詭異,居然都是意外死亡砌左,警方通過查閱死者的電腦和手機脖咐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門铺敌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人屁擅,你說我怎么就攤上這事偿凭。” “怎么了煤蹭?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵笔喉,是天一觀的道長取视。 經(jīng)常有香客問我硝皂,道長,這世上最難降的妖魔是什么作谭? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任稽物,我火速辦了婚禮,結(jié)果婚禮上折欠,老公的妹妹穿的比我還像新娘贝或。我一直安慰自己,他們只是感情好锐秦,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布咪奖。 她就那樣靜靜地躺著,像睡著了一般酱床。 火紅的嫁衣襯著肌膚如雪羊赵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天扇谣,我揣著相機與錄音昧捷,去河邊找鬼。 笑死罐寨,一個胖子當(dāng)著我的面吹牛靡挥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鸯绿,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼跋破,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了瓶蝴?” 一聲冷哼從身側(cè)響起幔烛,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎囊蓝,沒想到半個月后饿悬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡聚霜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年狡恬,在試婚紗的時候發(fā)現(xiàn)自己被綠了珠叔。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡弟劲,死狀恐怖祷安,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情兔乞,我是刑警寧澤汇鞭,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站庸追,受9級特大地震影響霍骄,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜淡溯,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一读整、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧咱娶,春花似錦米间、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至琼了,卻和暖如春逻锐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背表伦。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工谦去, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蹦哼。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓鳄哭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親纲熏。 傳聞我的和親對象是個殘疾皇子妆丘,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容