建站常識
交互設計(7)一避免迷路
2010-01-24 21:48:00
任何位置都能明確“我在哪里?這里有什么?從這里能去哪里?”
小時候,童話故事都告訴我們,迷路可不是一件好事。那會伴隨著困惑、沮喪、憤怒和恐懼。為了避免迷失方向,我們發(fā)明了各種導航工具,大到衛(wèi)星定位系統(tǒng),小到指南針,人類在這一事情上,極具創(chuàng)意。
在網(wǎng)站上迷失方向,雖然不是什么生死攸關的事,但會帶來許多負面影響,如:用戶體驗下降、任務不能完成,用戶流失等。我們可以通過良好的導航系統(tǒng)來避免這個情況發(fā)生。好的導航系統(tǒng)可以幫助人們找到在網(wǎng)站中的位置,并幫助他們制定更好的查詢策略,增進對內(nèi)容的理解。
在制定解決方案前,先了解他們?yōu)槭裁磿月罚?/P>
1、當人們不能理解信息時,會產(chǎn)生迷惑
2、人們在查詢過程中迷失,不知道下一步該做什么
3、人們可能會在網(wǎng)站中失去方向感,無法回到以前的頁面,甚至是首頁
圖1
比如在圖1的這個網(wǎng)站中游走,你容易陷入進退兩難的境地。上圖中,兩個點擊打開的頁面,都沒有導航信息,甚至沒有任何離開當前頁面的出口。
4、 人們在在信息系統(tǒng)中偏離了方向,分散了注意力。人們因眾多的、喧賓奪主的信息而偏離了主要任務。關于這一點,可以參考交互指南之《突出重點,一目了然》
圖2
圖2中的登錄頁面,可謂琳瑯滿目,信息的豐富程度毫不遜色于首頁,難道設計者的目的,是希望用戶放棄登錄這個主要任務,去往“更重要”的地方嗎?
你也許會想,讓用戶不要迷路,不是非常簡單的事情嗎,我只要在所有頁面中放入全局導航,使他們能在網(wǎng)站的核心內(nèi)容之間移動。然后放入面包屑,讓他們了解自己所處的位置,一切不就完事大吉了。
但事實上果真如此嗎?全局導航也許能幫助用戶了解你網(wǎng)站的核心內(nèi)容,但在具體的任務中,比如圖3中的淘寶全局導航,如果放入在挑選商品或支付的頁面中,恐怕非但不能指引用戶,還會干擾到任務的完成。
圖3
小心,別讓自己陷入導航系統(tǒng)的過度設計中去。我們所要做的,是使用人物角色和場景作為參考,確定人物角色會選擇的到達內(nèi)容的最佳路線,而不是提供所有線路,更不需要將網(wǎng)站的全部結(jié)構(gòu)復制到每個頁面當中,造成頁面信息負擔。好的導航系統(tǒng)讓人們感知不到它的存在。就好象在觀看體育比賽時,裁判會做出許多正確的判定,而我們往往忽略他的存在,但一旦裁判員做出了一個錯誤的判決,就會引來場上觀眾的一片唏噓。
那么,我們應該怎樣做,才能保證用戶不在網(wǎng)站中迷失呢?
#p#首先,我們要幫助用戶定向,也就是確定“當前位置”。
即便GPS衛(wèi)星定位系統(tǒng)如此強大,它都必須隨時在地圖上標明我們的“當前位置”,才能真正為我們導航。而與現(xiàn)實世界不同的是,在網(wǎng)絡世界中沒有南北之分,也沒有地理位置,我們必須利用導航系統(tǒng)的各種因素,來為用戶創(chuàng)造可以判斷當前位置的情景:
1、 重視網(wǎng)站的品牌信息
用戶應該一直知道自己在瀏覽什么網(wǎng)站,將組織的名稱、標識、和身份識別圖放進網(wǎng)站的所有頁面中,是達到此目的最顯著的方法。
2、 細節(jié)創(chuàng)建情景
我們可以通過頁面內(nèi)標題、頁面文字,向用戶傳遞當前位置的信息。瀏覽器標題和URL也是用戶進行判斷的依據(jù)。當前導航選項的高亮狀態(tài),也是常用的方式。
3、 面包屑
“面包屑”也是標明當前網(wǎng)站位置的好工具。此外,面包屑還能傳遞網(wǎng)站結(jié)構(gòu)信息,以及記錄用戶的訪問足跡。
4、 逃生艙模式
逃生艙模式也是幫助用戶確定當前位置的一張底牌。也就是在網(wǎng)站的所有頁面上設置統(tǒng)一的出口,無論什么時候,點擊這里,都可以回到首頁。大部分網(wǎng)站都把逃生艙設置在網(wǎng)站LOGO上,已經(jīng)成為慣例了。
其次,根據(jù)用戶需求,確定導航模式。
用戶的需求決定了我們應當放置何種導航鏈接。在不同類型的頁面,用戶所產(chǎn)生的問題不盡相同。我們需要預測這些問題,然后在設計導航的時候,也問自己同樣的問題。
一般情況下,用戶會問:“我在哪里?”“我在這里能做什么?”“我還可以去哪里”;在電子商務網(wǎng)站,他們也許會問,我該如何找到想要的產(chǎn)品信息;具體在某一產(chǎn)品,他們也許會問:“我該如何聯(lián)系客服人員?”“我到哪里可以找到相關產(chǎn)品”。
我們所要做的,并不是想出所有可能發(fā)生的問題,相應的,我們也不可能把所有問題的答案都放入頁面當中。這個時候,人物角色和場景,將發(fā)揮很重要的作用。對于不同的頁面,弄清楚每個用戶角色要去哪里,放置他們最需要的導航。比如:你的人物角色需要隨時從一個欄目跳轉(zhuǎn)到另一個欄目嗎?如果是的話,請保證頂級欄目的鏈接一直可用。
一旦確定了用戶想要到達的內(nèi)容,就要思考達到這一目標所需要的最簡單、最容易的方案。比如在圖4中,也許你的人物角色需要的,只是一個“下一組”鏈接。
圖4
最后,通過壓力測試檢驗頁面的導航能力。
怎么樣測試這個頁面的導航能力呢?
(1) 隨機從你的網(wǎng)站上選擇一個頁面;
(2) 把這個頁面打印成黑白的,并把頁面頭部的瀏覽器地址欄和下面的版權及公司信息部份去掉;
(3) 假裝你是第一次進入這個網(wǎng)站,并試圖回答下面的問題(詳見下列問題列表);
(4) 在一張紙上寫下你所想的和答案;
問題列表:
1、這個頁面是寫什么內(nèi)容的? 在頁面的標題處畫一個方形或在紙上寫清楚;
2、這是個什么樣的網(wǎng)站? 把網(wǎng)站的名字用圈圈起來,或者自己寫在紙上;
3、這個網(wǎng)站主要的版塊是什么? 用x標識;
4、這個頁面中主要的版塊是什么? 用三角形圍著x來標識;
5、我怎么樣到達這個網(wǎng)站的首頁? 用H標識;
6、我怎么樣才能到達網(wǎng)站的頂部呢? T來標識;
7、每一組鏈接分別代表什么? 把頁面上的主要鏈接圈出來,并寫下標識;
D:用來標識更多,詳細介紹及這個版塊的子頁面等;
N:在同一版塊的其它相鄰頁面;
S:在同一網(wǎng)站上但不相鄰的頁面;
O:離開這個網(wǎng)站的頁面;
8、你是通過怎么樣的路徑到達這個頁面的呢? 請寫出你到達這個頁面的路徑,選擇1>選擇2>選擇3…
讓你們團隊的其它成員或熟悉你網(wǎng)站的朋友也與你做同一試驗,大家象跳傘一樣的進入網(wǎng)站中的任意一個頁面,然后把回答記在紙上,你就可以看出導航存在的問題。
關于導航壓力測試更詳細的內(nèi)容,請參考四娘的文章,我們就不詳細說明了。
原文:http://ued.taobao.com/blog/2010/01/22/the-practice-guidelines-of-interaction-design-avoid-getting-lost/
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2010-11-11 08:22:00] 基礎控件和交互設計元素的層級
- [2009-07-31 22:54:00] 交互設計模式——分頁
- [2010-02-26 21:52:00] 交互設計(10)—別讓我思考
- [2009-07-25 08:47:00] “反饋信息”的分類及交互設計原則(1/3)
- [2009-11-04 22:35:00] 交互設計表格
- [2010-12-15 08:44:00] Twitter設計細節(jié)引發(fā)的慘烈思考
- [2009-08-03 07:42:00] 如何理解與規(guī)劃設計師的職業(yè)生涯
- [2010-12-28 17:38:00] 層次任務分析
- [2016-08-23 16:31:00] 關于iOS7的設計方面變化
- [2010-08-05 08:13:00] 交互設計的方法
- [2010-11-11 08:26:00] 瞬間的快感之細節(jié)提升用戶滿意度
- [2009-07-13 08:26:00] 交互設計模式(一)-前言
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿(mào)行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關鍵字
青島網(wǎng)站營銷 手機網(wǎng)站 新的元素 官網(wǎng)建設 扁平化設計 robots 互聯(lián)網(wǎng) 網(wǎng)站視覺 青島輪胎網(wǎng)站設計公司 輪胎網(wǎng)站設計 網(wǎng)站設計 版面布局 青島做網(wǎng)站多少錢 高端輪胎網(wǎng)站設計 響應式設計 css 外貿(mào)網(wǎng)站建設 集團官網(wǎng) 網(wǎng)站改版 中小型企業(yè)網(wǎng)站建設 審美 青島黃島、紅島網(wǎng)站建設公司 html和css 青島SEO HTML5 插畫 網(wǎng)站品牌 青島網(wǎng)站案例 集團性網(wǎng)站 如何做網(wǎng)站優(yōu)化