重點整理
- 折疊選單若無圖示，使用者會預期點擊後會開啟新頁面。
- V 型符號 (Caret) 是最安全可靠的折疊選單展開圖示。
- 加減號或上下箭頭容易與購物車或頁面滾動混淆，應避免。
- 避免使用文字與圖示分開點擊的分割選單，會大幅增加操作失誤。
你的企業官網一定有「常見問題 (FAQ)」或是手機版的「產品分類」，為了節省版面，通常會使用「折疊選單」（又稱手風琴選單，Accordion，也就是點擊後會展開或收合內容的區塊）。但你知道嗎？折疊選單旁邊的小圖示如果選錯，會讓客人點錯地方，甚至找不到想要的資訊，進而影響網站的轉換率。本文整理國際知名使用者體驗研究機構 NN/g 的研究，告訴你哪些圖示最有效，哪些設計其實是在折磨客人。
沒有圖示，客人會以為是「超連結」
研究發現，如果折疊選單的標題旁邊「什麼圖示都沒有」，使用者會直覺認為：點擊這個標題，就會「開啟一個新頁面」。
很多時候，我們為了追求畫面極簡，拿掉了圖示，結果客人點擊後發現沒有反應，或是預期錯誤。研究也指出，使用者在點擊時，往往會 equally（平均地）點擊文字標籤和圖示，這代表圖示的選擇不僅僅是視覺訊號，更會影響整個「點擊區域 (hit area，也就是螢幕上可以觸發動作的有效範圍)」的直覺認知。
這裡有一個非常簡單的黃金法則：如果這個文字真的是要連到其他頁面的「超連結」，最簡單有效的方法就是直接幫文字「加底線」，不需要加任何箭頭或圖示。雖然聽起來不酷，但這是最不會出錯、每次都能完美運作的做法。
最安全的選擇：V 型符號 (Caret)
如果確定是折疊選單，該用什麼圖示呢？研究指出，「V 型符號」（Caret，也就是常見的向下小箭頭 ▼）是最安全、最可靠的選擇。
當預設狀態顯示向下的 V 型符號，點擊後變成向上或向右時，使用者能非常直覺地理解「這裡可以展開或收合」。研究也發現，面對 V 型符號時，使用者會更傾向直接點擊圖示本身來操作，這代表它成功傳達了「這是一個可展開的控制項」的訊息。
那為什麼不建議用「加減號 (+/-)」或「上下箭頭 (↑/↓)」呢？雖然大家大概看得懂，但這些符號在網頁上有很多其他含義。例如，「+」號很容易讓人聯想到「加入購物車」、「收藏」或「放大」；而「↑/↓」箭頭則常被用來表示「頁面滾動」或「跳轉到特定區塊」。特別是在層級較多的「多層級導航」中，當好幾個層級同時展開時，這些符號反而會造成嚴重的視覺混淆。
千萬別用「分割選單」折磨客人
有一種設計叫做「分割選單」（Split menu，也就是文字和圖示分開點擊的設計），例如：點擊文字會進入該分類頁面，點擊旁邊的圖示才會展開子選單。
研究強烈建議避免這種設計。這會讓使用者感到非常困惑，因為大家習慣整個區塊就是一個整體的操作，分開點擊只會增加操作失誤的機率。
正確且友善的做法是什麼呢？讓整個標題區塊點擊後都只執行一個動作：展開子選單。如果使用者需要前往該分類的總覽頁面，請在展開後的子選單裡面，放上一個明確的「查看總覽」或「前往分類頁」連結。這種「單一按鈕只做一件事」的設計，能大幅降低客人的操作失誤率，讓瀏覽體驗更順暢。
崴米的建議
作為您的網頁設計顧問，我們建議您可以從以下幾個方向檢視並優化官網的互動細節：
- 統一折疊選單圖示：全站檢查看看，把 FAQ 或分類選單的圖示統一改為 V 型符號 (Caret)，並確保點擊區域夠大，讓手機使用者也能輕鬆點按，避免誤觸。
- 消除分割選單地雷：檢查手機版導覽或產品分類，如果有「文字點進去、圖示展開」的分割設計，請盡快改為「點擊展開選單，並在選單內提供總覽連結」的流暢體驗，減少客人的挫折感。
- 保持簡單直覺：網頁設計不需要過度複雜的巧思，能讓客人毫不費力找到資訊的設計，才是真正的好設計。
如果您發現官網的互動體驗需要調整，或是想打造一個客戶看得懂、好操作的網站，歡迎與我們討論；若是舊網站的版面與互動已經不符合現代標準，也可以考慮讓舊網站的互動體驗煥然一新。
