原文作者: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)站里隨意瀏覽男韧,因此提供當(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ù)期(讓用戶明白下一步是什么)罩息。
頁面標(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)鍵詞明了)
該網(wǎng)站中盏檐,教科書的出版日期(1995-2003)暗示著文章已經(jīng)過時歇式,但URL中卻有意提供了課程的時間(2006)。這里最好能在頁面里具體展示出課程的時間胡野,好讓學(xué)生們知道這是一篇老舊卻依舊經(jīng)典的文章材失。頁面底部(整個網(wǎng)站皆如此)的版權(quán)信息雖然給出了2001-2015的提示,但這個時間范疇對于科技內(nèi)容來說太久了给涕。
為有效的位置標(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ù)提問:“為了弄明白自己在哪兒易结,你通常會怎么做枕荞?”
總之
只有讓用戶參與測試才能確保網(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)課程
譯者簡介
小媛买优,神經(jīng)認知語言學(xué)碩士 ?現(xiàn)從事互聯(lián)網(wǎng)產(chǎn)品設(shè)計 ?熱衷于用戶體驗和交互設(shè)計
如需轉(zhuǎn)載妨马,請聯(lián)系作者并注明簡書原文地址