104學習精靈
UX
UX
關注
邀請朋友 
Facebook
Twitter
Line
複製連結
Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
我要分享
我要提問
UX 學習推薦
全部
影片
文章
你可能感興趣的教室
一個按鈕的自我修養，就是不要讓使用者感到困惑
一個合格的按鈕到底需要具備什麼樣的素質？首先狀態要分明。
案例中的「加入追蹤」按鈕，可能會用到三個狀態
正常狀態——表示按鈕是可被點擊的
執行狀態——表示這個按鈕已被點下、正在作用中
禁用狀態——當前不可點擊，但是之後可以被啓用
雖然並沒有明確的規範指出灰色按鈕只能用於不可點擊，但是灰色按鈕在當前主流的交互經驗中，已經普遍被識別為「不可點擊」的狀態(disable)；若不得已要使用的話，還是建議大家，以「不影響增加轉換率」為目的之功能，例如取消、刪除等等。避免使用者下意識以為不可以點，或困惑能不能點，而錯失了可能增加轉換的機會。
案例是MOMO購物網的商品賣場截圖，在電商世界中，追蹤是個會影響轉換率的功能嗎？現在的價格或存貨數會影響當前下標的意願，所以消費者想先收藏起來，持續關注、等待結帳的時機點。介面上第一次看到「加入追蹤」按鈕的時候，真的以為不可以點(職業病？)，帶著疑惑去點點看，發現狀態會變成「已追蹤」；然後再按一次想要取消追蹤，竟然沒有恢復為初始狀態的互動設計....
那實際上可以怎麼改呢？以104的「收藏」為例，正常的次級按鈕可用主色的線框按紐，裡面的icon以「填色」＆「未填色」來區分儲存與否，這樣其實也蠻清楚的喔。
其實現在很多設計師在呼籲「不應使用禁用按鈕」與「禁用按鈕一定要是灰色的嗎」，也是基於使用體驗下慢慢進化的想法，之後看到相關案例再分享給大家嚕~~
拍手 3
留言 0
觀看 137 收藏 1
拍手
留言
分享
Line
複製連結
收藏
Kinny
資深產品設計師
01/07 15:38
展現幽默感與智力測驗，往往只有一線之隔
這個環節，到底是要使用者快速通過驗證，還是要他卡關直接關掉視窗？
使用者行為議題中有一個很重要的概念叫做「Don't let me think」，不要讓使用者有被迫停下來思考/猶豫/困惑的時間，當畫面隱含了對結果的不確定性，就會產生感知風險；簡單來說很可能就會產生不愉快的體驗。
案例中是linkedin的註冊流程，按錯了覺得智商受辱，我竟然會敗在驗證流程的問題漩渦裡 (然後要接受第二題的挑戰)；僥倖猜對了長吁一口氣，疲累感湧現！彷彿剛作答完智力測驗的試卷...我們人生中的關卡已經很多了，在這邊就放過使用者好嗎？
標題「來做個簡易的安全驗證」完完全全就是對我的嘲諷。到底什麼叫做「以正確方式向上的圖片呢」？問了周邊的朋友們，大家都說是右上，這我就不認同了：
中上 - 奮力向右上跳起的姿勢，但是蛙頭長得跟其他都不一樣
右上 - 是一個普通人對蛙類正常姿勢的印象，但他是靜止姿勢，沒有「向上的動作」
思考到這可能會恍然大悟說：「對嘛！這樣推論起來應該是中上了。」
Hello～別忘了使用者只想快速通過驗證
Don't let me think!!!
拍手 6
留言 2
觀看 542 收藏 1
拍手
留言
分享
Line
複製連結
收藏
Kinny
資深產品設計師
01/11 10:38
世界上最遙遠的距離，就是要使用者移動他的滑鼠
CTA(Call To Action)通常翻譯為行為召喚，如果你在很遠的地方進行召喚，可想而知召喚的力度會隨著距離而遞減；試想一下洗手間擦手巾的位置，是不是通常在洗完手後可觸及到的地方？如果需要走10步才可以擦到手，想走去擦的意願會不會降低呢？
希望每個產品開發人員一定都要把使用者看作是。個。很。懶。的。生。物，例如樹懶；動一下就覺得麻煩，走一步就耗盡體力；能在原地完成最好、能少一個點擊更好、盡量在當頁完成不需要跳轉到下一頁。使用者非常討厭付出一些成本，付出可能會要了他的命，以下舉例：
經濟成本：付錢
時間成本：花時間、等待
體力成本：移動、點擊、打字
腦力成本：動腦、思考
精神成本：擔心、費心
圖中案例是Yahoo設定為首頁的功能，頁面中第一眼會看到左上「將Yahoo奇摩設為首頁」的文案，看起來是不是很像CTA！然後就下意識去點點看，點了幾下沒反應，想說怎麼回事？放棄研究、視覺不再聚焦這個點上後，忽然看到螢幕的最右邊有一個「按此設定」的按鈕，這也離太遠了吧>_<
「使用者不會照著你所期望的方式去使用你的產品，因為你不是你的使用者」
拍手 4
留言 0
觀看 76 收藏 0
拍手
留言
分享
Line
複製連結
收藏
Kinny
資深產品設計師
01/10 14:50
沒有一致性的設計是對使用者的一種不尊重
因為這傳達了一種訊息：「功能只要找得到、能用就好，不要計較這麼多」
不一致的元素會造成視覺上的凌亂、沒有整體性，且不在乎使用體驗(找得到+沒客訴就好)；除了對使用者的不尊重外，也不太尊重自己身為設計師的專業，因為這是最最最基本的設計原則，印象中高中的美術課本就有談到「美的形式原理」，其中就有一項叫做「統一」。
範例中是Yahoo入口網站的局部介面，三個按鈕看似是三位不同的設計師、在不同時期維運下的產物；可以理解「登入」需要用文字作為指示性更強的按鈕、且較難用icon完整表達含義。
但「信箱」呢？在當代的介面使用經驗下，信封icon一般代表著兩種意思：通知/信件；若中間的鈴鐺icon是「通知」，那右邊的信封icon應該很好推論了吧！且中間的鈴鐺可以不需要以中文解釋「這是通知功能」，為什麼使用者會需要信箱二字來輔助呢？再者，若擔心使用者會誤解，用工具提示框(Tooltips)來輔助示意也是不錯的選擇。
根據做互聯網產品的經驗，估計是有人投訴「找不到信箱入口在哪吧」(笑)
然後PM/設計師就用了最暴力的方式解決這個問題
下次可以加紅點試試看喔！(希望聽得出來這是反諷)
拍手 5
留言 0
觀看 109 收藏 0
拍手
留言
分享
Line
複製連結
收藏
Kinny
資深產品設計師
01/07 10:17
按鈕文案，不是設計師補強「產品理解不足」的地方
CTA的中文一般理解為「行動呼籲」，目的是提升轉化率，而不是向使用者解釋目的、你希望他做的事情、以及解釋後續行為的地方。
按鈕文案務必簡潔明瞭，如果你的行為需要解釋，那代表你的產品不夠直覺；介面中的行為最不需要的就是「思考」，Don't let me T.H.I.N.K！
你以為你不會做這種愚蠢的事，但在專案過程中真的蠻常看規格是這樣寫的縮....
範例是cakeresume的忘記密碼流程，這年頭誰沒忘記過密碼呢？可能cakeresume的忘記密碼流程很複雜所以需要解釋吧！為了保險起見我還真的走了一遍，按下這個落落長的按鈕，結果他只是寄了一封重設密碼的信給我...... : )
如果你是接手進行優化的設計師．按鈕文案改成什麼比較合適捏 ？
拍手 8
留言 0
觀看 238 收藏 1
拍手
留言
分享
Line
複製連結
收藏
職涯診所
04/23 21:50
https://giver.104.com.tw/question/1d4f8345-3f6c-4b2a-a25c-adde3d56d549
前輩們是否有UX思考設計的實務經驗可分享?
拍手 2
留言 2
觀看 65 收藏 1
你可能感興趣的教室