毒舌好朋友

UX、視覺設計相關知識、網頁設計、UI、App設計、App UI設計、UIUX設計、視覺設計、使用者介面設計、使用者介面規劃

毒舌好朋友

關注

Kinny

產品設計師

2022/01/13

[毒舌]一個按鈕的自我修養，就是不要讓使用者感到困惑

一個合格的按鈕到底需要具備什麼樣的素質？首先狀態要分明。

案例中的「加入追蹤」按鈕，可能會用到三個狀態

正常狀態——表示按鈕是可被點擊的

執行狀態——表示這個按鈕已被點下、正在作用中

禁用狀態——當前不可點擊，但是之後可以被啓用

雖然並沒有明確的規範指出灰色按鈕只能用於不可點擊，但是灰色按鈕在當前主流的交互經驗中，已經普遍被識別為「不可點擊」的狀態(disable)；若不得已要使用的話，還是建議大家，以「不影響增加轉換率」為目的之功能，例如取消、刪除等等。避免使用者下意識以為不可以點，或困惑能不能點，而錯失了可能增加轉換的機會。

案例是MOMO購物網的商品賣場截圖，在電商世界中，追蹤是個會影響轉換率的功能嗎？現在的價格或存貨數會影響當前下標的意願，所以消費者想先收藏起來，持續關注、等待結帳的時機點。介面上第一次看到「加入追蹤」按鈕的時候，真的以為不可以點(職業病？)，帶著疑惑去點點看，發現狀態會變成「已追蹤」；然後再按一次想要取消追蹤，竟然沒有恢復為初始狀態的互動設計....

那實際上可以怎麼改呢？以104的「收藏」為例，正常的次級按鈕可用主色的線框按紐，裡面的icon以「填色」＆「未填色」來區分儲存與否，這樣其實也蠻清楚的喔。

其實現在很多設計師在呼籲「不應使用禁用按鈕」與「禁用按鈕一定要是灰色的嗎」，也是基於使用體驗下慢慢進化的想法，之後看到相關案例再分享給大家嚕~~