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

數位產品之外的 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) 用來傳達使用者距離流程結束還剩多少時間或步驟，這在數位產品裡很常見。而在現實世界，它們以顯眼的記號傳達某種狀態還剩下多少份量或時間，或是還要多少行動。

物品：書

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

對象：讀者

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

物品：腳踏車煞車皮

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

對象：腳踏車騎士

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

物品：酪梨

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

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

訊息：咖啡色 =「我已經過熟了/撞傷了。」綠色 =「我熟了，可以吃了！」

個人喜好

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

物品：啤酒罐

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

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

還值得一提：酒杯上的裝飾小物（還有毛巾上的吊飾 🙄）都是相同的手法！

物品：餐廳的茶壺

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

對象：服務生

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

物品：有領子的襯衫

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

對象：我自己！

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

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

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