SPARKFUL

Blog

Insights from the SPARKFUL teams

為使用者撒下「麵包屑」

Wei-Fan Chenuser-interface-design
name

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

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

超連結與使用痕跡:按過就變色,讀起來更輕鬆

當我們進入數位時代,這些痕跡似乎就消失了,在 iPhone 的鍵盤上,常用的按鈕不會比較大顆,電子書再怎麼看都跟新的一樣。然而,有些好的數位產品的設計,會幫助使用者留下他們曾經使用過的記錄。

舉例來說:在網路剛開始興起的時候,超連結(hyperlink)都是藍色的,只有在點擊過之後超連結會變成紫色,這代表著你造訪(visited)過這個網頁了。瀏覽器會幫你記得你曾經去過哪裡,讓你不會一而再、再而三的重複瀏覽相同的內容。這尤其是在你想從一大堆連結裡面,找到一個需要的文件時特別重要,就像是糖果屋的麵包屑一樣,幫你記住身後曾走過的路。

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

麵包屑與導覽:列出網站架構,該往哪走一目了然

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

↑ 蘋果網站上的麵包屑

↑ FTP 軟體 Transmit 上的麵包屑

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

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

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

(圖片來源:perpetualplum, CC Licensed)

Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
Entrepreneur in entertainment and play for wellness / Author of Playable Design / Active indie game developer 🎉
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

讓設計跟著指尖走:觸控設備上的互動效果

對於網頁瀏覽者來說,按鈕元件的幾種變化可以說是再熟悉不過的一種機制了:一般使用滑鼠瀏覽時最容易感受到的有 Normal、Hover 以及 Active 這三種效果,分別為按鈕平時的狀態、滑鼠游標移到上方的效果、以及點擊按...Read more