錚／
巨匠電腦分享使用者介面設計：圖標 v.s. 文字
前一陣子與幾位比較資深的ux專家討論我們家的產品，提到一個我常常在思考的問題，那就是在介面設計功能的配置上，到底圖標、文字怎麼選擇呢? 所以這篇來討論一下怎麼選擇這件事。
從視覺設計的角度來看，圖標(icon)會被認為比較美觀，也容易被記憶，所以大多的設計師能用圖標就盡量不使用文字，但是圖標有時候很難辨視它的用途，這篇The Problem with Icon有提到，圖標如果意義不明確的話，使用者很難理解這些圖標的作用為何。
在《親愛的界面》這本書79頁中有提到 Colin Ware的著作《Information Visualization》，這本書有討論相同的問題，作者認為「易於識別」的圖標能夠刺激人腦大腦中的長期記憶語義網路中的相關概念，也就是說圖像比文字容易記住，但請注意是「易於識別」的圖像。 但我想這樣的結論並不意外。只是什麼時候該用圖標什麼時候該用文字，什麼時候又該並用，才是設計師在意的。
此外，在hpx中有一篇文章有討論關於圖標與文字之間選擇的研究整理：使用者經驗之迷思13：icon可以增強易用性。裡面也有圖標與文字之間決擇，一個比較折衷的作法，就是在icon上面加上文字，但這樣就算提高了易用性，但總覺得有點囉嗦，而且並不是每個位置都可以同時塞的進圖標還有文字…所以該怎麼選擇圖標或文字呢?
下面我整理了圖標、文字使用的優缺點：
基本上圖標或文字都各有優缺點，如何使用端看設計師當下的需求，但是想討論的事是：如果需求也不確定時怎麼選擇圖標或文字呢? 成熟的產品可以透迭代設計還有A/B測試來調整並選擇樣式，但如果是一個全新功能的產品那要根據什麼來進行設計呢?
有時候可能是一種設計風格，但這邊我要帶入Norman提到的設計方法：預設用途(affordance)、指意(signifier)來做討論(可以這考我寫的這篇文章)。指意算是比較後來所提出的概念，但在Norman提出指意的說法前，預設用途的分類其實也可以非常的細，而指意是預設用途的其中一種形式，可以參考這篇文章對於預設用途的分類，但我還是以Norman的說法來做討論。
前面的文章說過預設用途是強調的是「關係」，物體提供的功能與使用者的需求，兩者能滿足，預設的用途就會存在；指意是傳達行為指示的方法(聲音、文字、符號…等)，這跟圖標還有文字有什麼關係?
其實圖標與文字放置的選擇，可以用這個區塊能否讓使用者有預先想到的互動關係來決定。想只放圖標不放文字，那可能tab bar 會是一個不錯的位置，有使用智慧型手機習慣的使用者，應該會知道這個區塊是用來做頁面切換或使用一些功能(打卡、po文…等)，所以能預想到可能的互動關係，或許只放圖標是一個不錯的選擇。
但只放圖標不一定好，大多的tab bar圖標都會帶有文字，因為圖標不易理解，但在預設用途存在的條件下，我個人認為不影響使用，例如behance、google+ (下圖)tab bar 上面的圖標都沒有提供文字，那要怎麼知道這位置的圖標提供什麼功能呢?一般來說，使用者會「主動」找他們需要的功能，這些功能不是偶然，背後都是經過設計思考後產生的需求，是常用、必要的，所以我們可以先假設使用者有主動學習的能力，經過學習後就會操作。
上圖左是behance的介面，下方有很多圖標，但能從圖標知道這是幹嘛的嗎?右邊則是google+的介面，下方的圖標看起來都是一些「功能」，但我們可以聯想到這些功能是做什麼嗎? 我想就算不知道，但至少會知道它可以點，點了就知道能做什麼了。
而在上方navigation bar 左右兩側都會有tools，通常我們會塞進一些狀態或是工具(搜尋、漢堡選單、通知…等等)，所以我們可以注意到這兩個app的右上角都有兩個圖標，從圖標上我們能知道它可能是個狀態或工具，同時這些圖標都是可以點選的，在這樣的預設用途下，使用圖標或許也是一個不錯的方式。
接下來看一下內容的部份，
上圖左是tumblr的app，右則是fancy的app，他們的內容是以卡片樣式組成，每張卡片下方都有一些「指意」，如果只從文字、圖標，是否能發現它的互動方式，根據我個人的經驗，tumblr的方式，使用者會比較難意識到下方的圖標或文字是可以點擊的，但tumblr用了一個比較特別的技巧「回饋」，點擊後的動畫，會讓人印象深刻，所以使用者操作過一次後，容易記得這樣的功能。而fancy用了另一個比較聰明的方式，就是把文字或圖片都加個外框，讓他看起來像按鈕(可以點擊的預設用途)，就能知道這是可以點擊的。
上圖則是facebook的app，所有的圖標都會加上文字的說明，這是一個比較保險的作法，但也跟facebook的使用者散佈的範很廣的特性有關，必須要很清楚的去說明每個icon的用途。
那什麼時候可以使用純文字，通常會是一個比較單純的行為引導，因為文字是很直接的指意，他可能重覆出現在介面的任何位置，常用的文字整理如下：
- 操作引導：編輯、確定、取消、新增、關閉、設定、看更多、儲存、選取、完成、刪除、移動、…
- 流程引導：上一步、下一步、首頁、取消、註冊、登入、登出、頁面狀態(麵包屑路徑)
以上這些都是比較常見的操作文字，有些可以用圖標替代，像是新增可以用+，取消可用x，但如果要讓使用者更為直覺，文字的效果可能會比較好，但是請記得可以點擊的文字要用其他的顏色，跟內文使用的文字有所區別。
如果文字讓使用者很難發現可以點擊怎麼辦? 目前比較好的解決方法，就是ghost button，在文字的外圍加上一個有圓角的外框，讓他有按鈕的預設用途，那可以加強只有文字指意的不足了。
上圖是iphone的app store，在每個app 的後方都會有ghost button ，使用者就可以知道這是可以點擊的。
結論
基本上什麼時候使用圖標或文字，可以取決放置元件的區塊是否有提供操作的「預設用途」，但這樣的方式是對於經常性使用介面的人才有效果，對第一次接觸介面的人，可能還是沒辦法意識到操作的方式，所以圖標加上文字是最為明確的。
所以有時候在做介面時，若目標市場不夠明確，也沒做事前對市場的使用者做一些分析，那開發的產品就要符合「全部人」的需求…那要考慮的是「通用」設計，就不會是單純的介面設計，但通常老闆都會採用「通用」設計，因為老闆的目標市場，通常就是全部啊(呵呵)。
此外，當一個介面元件經常性的被使用，也會從指意漸漸的轉向一種預設用途。
上圖是wordpress的編輯元件，如果你經常的使用word或其他相關的文書編輯軟體，就算沒有文字的指意，仍然可以判斷出大致上的用途。
上圖兩個箭頭，一般人能分出差異嗎? 但設計師能，問問身邊的設計師，這兩個箭頭差在那邊吧~
以上的這些討論，並不是一定的解決方式，只是希望能夠透過一些比較有根據性的說法來進行討論，這樣才能確保每一個選擇都是有經過思考的，當然最好的方式還是迭代設計還有進行A/B測試，如果能去追縱每個介面上元件的效益，會是最好的也最科學的決策方式。
巨匠電腦設計了視覺設計課程，教你跨界創意視覺設計、使用者介面設計等等，快來巨匠電腦輕鬆學！
文章與圖片出處: https://heywesley.wordpress.com/2015/08/08/icon-or-text/
