Intersection
Published in

Intersection

探索現實生活中的視覺指示

數位產品之外的 UX 和介面設計原則延伸

An exploration of visual indicators in real life

Extending UX and interface design principles beyond digital products

本文的原作者 Joe Caron 目前是舊金山 @DesignMap 的 UX 設計師。

視覺指示 (Visual Indicators) 讓某些物品可以在芸芸眾生之中突顯出來。它們不會要求使用者採取行動,而是讓某些值得注意事項獲得關注的溝通工具。指示不會一直顯示,只在某些條件下才會出現。指示可能會用圖示、排印風格、放大、顏色變化和動畫等方式傳達訊息。

在數位的世界,到處都可以看到指示的範例。以 Gmail 來說,是用迴紋針顯示帶有附加檔案的信,還有用黃色星星標示已經儲存起來的討論串。Todoist 的使用者用勾選框的顏色來區分優先順序,而且也很容易看出哪些有備忘記錄。iOS 的 App 在下載更新時,圖示會覆蓋一層進度指示,讓使用者知道還要下載多久。

我喜歡研究 UX 和介面設計的原因,是原則和元素可以延伸出數位產品本身。我們的周遭到處都有像是直觀功能 (affordance) 和符號 (signifier) 的指示,傳達它們所代表物體的訊息。最明顯的視覺指示方式是加上文字,例如百貨公司裡,把東西標上「打八折喔!!」標籤。

在這篇探索裡,我想要特別專注於出現在現實生活中,沒有文字的指示,它們不用文字,而是顏色、方向和姿態。

狀態

「系統狀態的能見度*」是 Jakob Nielsen 使用者介面設計的 10 個易用性捷思 (Jakob Nielsen’s 10 Usability Heuristics for User Interface Design) 之一,其中提到:任何系統都要一直讓使用者知道現在發生什麼事情。在現實世界,四處可見以視覺指示傳達狀態,且用途相似。

*Visibility of system status

物品:信箱

指示:旗標位在「往上」的位置 [收信/寄信的狀態]

對象:郵差

訊息:「嘿,這裡有要收的信!」

物品:餐廳帳單

指示:卡片伸出帳單夾 [結帳狀態]

對象:服務生

訊息:「可以進行結帳方式了!」

物品:飛機渦輪引擎

指示:旋轉中的螺旋圖像 [運轉/關閉狀態]

對象:機場地勤人員

訊息:「小心!這架飛機的引擎啟動了。」

還值得一提也可以幫助避開鳥類

進度

還要 [增加] 多少,[此物品] 才會 [完成]?進度指示 (Progress indicator) 用來傳達使用者距離流程結束還剩多少時間或步驟,這在數位產品裡很常見。而在現實世界,它們以顯眼的記號傳達某種狀態還剩下多少份量或時間,或是還要多少行動。

物品:

指示:插在某一頁的書籤 [進度]

對象:讀者

訊息:「這本書你已經讀這麼多了!大約已經看完一半。」

物品:腳踏車煞車皮

指示:溝槽的消耗量 [剩下可用量]

對象:腳踏車騎士

訊息:「上面的溝槽幾乎不見了。該換煞車皮囉!」

物品:酪梨

指示:梗底下的顏色 [成熟度顏色]

對象:正在購物的人,還有磨刀霍霍的酪梨醬工具

訊息:咖啡色 =「我已經過熟了/撞傷了。」綠色 =「我熟了,可以吃了!」

個人喜好

我一直在尋找能夠讓問題在提出之前就獲得答案的創意方式。事先預測人們在尋找的物品,就可以免於造成潛在的困惑。我發現以下指示所傳達的訊息,可以不說出任何一個字,就有助於區分其他人和我自己之間的界線。

物品:啤酒罐

指示:把罐子凹下去 [所有權]

訊息:「這不是你的啤酒。」

還值得一提:酒杯上的裝飾小物(還有毛巾上的吊飾 🙄)都是相同的手法!

物品:餐廳的茶壺

指示:擺放位置,還有把茶蓋斜放 [空的/滿的狀態]

對象:服務生

訊息:「茶壺已經空了。請幫我們再倒些水。」

物品:有領子的襯衫

指示:衣架鉤子的擺放方式 [乾淨/穿過的狀態]

對象:我自己!

訊息:鉤子向外 =「襯衫是乾淨的。」鉤子向內 =「這件襯衫至少穿過一次了。」

這些指示並不會明講自己是什麼東西。但是,只要在正確的情境之下,這些視覺線索可以幫助使用者辨別出物品的不同之處。至於使用者倚賴這些傳遞訊息的行為,則端看當下的需求或最終目標。不管是在數位或現實世界,視覺指示都隨時在旁提供協助。

感謝閱讀!:) 如果你很喜歡,請別忘了按幾下 👏👏👏!如果你還有其他現實世界中的視覺指示,歡迎在底下留言!

--

--

優化、插件、高清、視頻、反饋、交互設計:已經看膩這些中國用語。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store