糖果屋的啟示:凡走過必留下痕跡

大家小時候應該都有看過或聽過糖果屋(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面迷路了。

在現實生活中,許多事情都會像麵包屑一樣留下痕跡,我們的鍵盤上常用的按鍵的字母會被磨掉、車子方向盤會有兩手習慣握的地方的痕跡、常看的書會比較破舊一點、上面會插著書籤、有時候書邊還會寫滿我們的筆記。這些痕跡就像我們走進積雪的大草原,身後會跟著我們走過的足跡一樣,讓我們感到熟悉而且不會迷路。

 

超連結與使用痕跡

當我們進入數位時代,這些痕跡似乎就消失了,在 iPhone 的鍵盤上,常用的按鈕不會比較大顆,電子書在怎麼看都跟新的一樣。有些好的數位產品的設計,會幫助使用者留下他們曾經使用過的記錄。舉例來說:在網路剛開始興起的時候,超連結(hyperlink)都是藍色的,只有在點擊過之後超連結會變成紫色,這代表著你造訪(visited)過這個網頁了!瀏覽器會幫你記得你曾經去過哪裡,讓你不會一而再再而三的重複瀏覽相同的內容。這尤其是在你想從一大堆連結裡面找到一個需要的文件時特別重要,就像是糖果屋的麵包屑一樣,幫你記住身後的路。

隨著 CSS 技術的興起,大家可以開始自定超連結的顏色,許多設計師就遺忘了這個特性,無論有沒有造訪過某個連結,都用一樣的方式呈現,這讓我們常常在網際網路這個大森林裡面迷路。設計超連結的顏色的時候,千萬不要忘記幫造訪過(visited)的連結也設計個不同的顏色或樣式吧!這會幫助使用者更輕鬆的在你的網站上面瀏覽的喔!

 

麵包屑與導覽

另外一個在網站上常常用到的技巧就是也叫做麵包屑(breadcrumbs)的導覽列了。麵包屑會顯示現在在網站上的哪裡,並一路顯示出上層的結構與路徑,下圖是 Apple Store 的網站呈現的麵包屑,就清楚的告訴了使用者,你現在的所在地是 MacBook Pro 底下的 Configure,一路也順便記錄了使用者的路徑。如此一來,當我們想要回到商品列表看更多商品的時候,只要按下 Shop Mac 就可以快速的回到商場。

蘋果網站上的麵包屑

FTP 軟體 Transmit 上的麵包屑

 

麵包屑與社群網站

在社群網站崛起的現在,使用者造訪到你的網站往往是因為他的朋友在 Facebook、Twitter 上面分享了一個連結,首頁可能往往不再是網站的入口。這時候麵包屑就會發揮他的功能。雖然使用者來到的地方是網站的一篇文章或一個商品,但是透過麵包屑,他會知道這篇文章屬於哪個分類底下、首頁又在哪裡。如果是購物網站,顧客會知道這個商品屬於什麼分類、還有什麼其他商品可以逛逛。

除了選單(Menu)與導覽列(Navigator)以外,麵包屑也同時可以快速讓使用者對你的軟體或網站有個概念,知道你的網站在介紹什麼、賣什麼東西或是提供什麼服務。

記得使用者很忙嗎?我們在日常生活的生活中,使用過的痕跡幫助我們降低認知上的負擔,輔助我們過每一天的生活。在數位產品的時代,產品和服務得提供良好的紀錄或導覽方式,讓我們生活的更輕鬆、更愉快。

 

延伸閱讀:

造型與操作界面的脈絡

像鏡子一樣映射操作方式

連結使用者熟悉的生活經驗

 

Image via perpetualplum, CC License.

我們的眼睛和大腦在觀察事物、接收影像刺激的時候,會有一些特別的傾向。這些傾向常常可以幫助我們快速的辨別事物,有時候也會產生所謂的「錯覺」。完形心理學重要的概念便...
為了研究與應用色彩,人們將千變萬化的色彩按照它們各自的特性,依照—定的規律秩序排列、並加以命名,我們稱之為色彩的體系。幫助我們將色彩組織化、以更確實精確的方法去...
一個成功的遊戲,除了耐玩的遊戲性,情境的描述與安排更是關鍵。情境能吸引或幫助玩家更加投入到遊戲中,常見的角色扮演遊戲總是會先播放一段影片或敘述一段故事讓玩家快速...
網頁設計中,切圖輸出是指設計師將手邊繪製完成的原始圖稿轉換成網頁用的圖片格式、並交由下一位人員網頁排版的重要步驟。選擇適合的圖片格式不但可以將讓設計得到合理的顯...
人類是一種社交動物,在人類的演化上,社交生活深深的影響人類的生存。透過同伴之間的表情,我們可以觀察出他人的情緒和意向,讓我們能夠結合成團體,集體面對大自然的險惡...
在建築設計中,空間可以簡單的區分成「正空間」與「負空間」兩個種類。如果放置物體在一個空白的空間中,可以圍塑出形狀時,這個被圍塑出來的形狀稱為正空間,如果沒有辦法...
© 2013 Desiring Clicks. All Rights Reserved.
Top