104學習精靈

UI設計

UI設計
關注
邀請朋友
邀請朋友

Line

Facebook

Twitter

複製連結

取消
關於教室
關注人數 9 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室,提供大家進行共學互動。
學習主持人
持續分享知識,
有機會成為官方教室主持人
教室標籤
關於教室
關注人數 9 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室,提供大家進行共學互動。
學習主持人
持續分享知識,
有機會成為官方教室主持人
教室標籤
Hi~ 歡迎分享學習資源,有學習問題可匿名向Giver發問!
我要分享
我要提問

UI設計 學習推薦

全部
影片
文章
你可能感興趣的教室

資深產品設計師

01/18 09:40

下列驗證圖最不可能用在何處?
1.動物星球頻道等級測驗
2.台大生物系入學考題
3.鳥類觀察協會入會試題
4.google的會員驗證流程
其實這一系列自以為幽默的驗證流程如果出一本案例專書,就像有人專門會買數獨的書慢慢玩一樣,我願意買來在坐捷運的時候好好玩味;但在不需要門檻的「我不是機器人」驗證流程中,使用者只想飛速通過此環節。
除非你想在這一步阻擋使用者通過:例如放在「註銷會員」的步驟中其實蠻適合的?
(開玩笑的!用在哪個流程都不建議)
設計師&工程師&企劃們:如果你沒有把握準確拿捏你的幽默感,那請把幽默感放在家裡。
喔對了,小白鷺是黑嘴的。
拍手 4 留言 2 觀看 283 收藏 1

資深產品設計師

01/17 17:34

不友善的介面就像與你個性不合的朋友
一個產品的調性與價值觀,可以從介面上最簡單的互動回饋略知一二。
介面就是把程式指令轉化成人看得懂、可操作的視覺語言,若只是機械式呈現指令、報錯、卻沒有賦予使用者引導性或主導權,那這個系統就只是個自說自話、不在乎你想法的陌生人;像不像那些相處起來格格不入、總覺得有些違和感朋友?
案例中是Microsoft Teams的文件下載通知;當開始執行下載後,這個視窗會在螢幕的右上方停留很~~久,久到我以為它壞掉!既不知道下載的進度如何、也無法暫停、甚至關不掉,你只能乾等到下載完畢,待視窗自然消失;或者更慘,直接報錯顯示下載失敗。
那麼當執行動作時,介面可以傳達什麼資訊呢?
1.系統狀態保持可見性 - 顯示下載進度軸或百分比;在流程中,需要合理的步驟來幫助使用者控制和瞭解當前進行狀態。
2.可逆性、可中斷性-提供「暫停」、「停止」等功能;若檔案太大,使用者可能有變更網路、暫停動作的情況,並且要提供可取消當前行為的出口。
3.可判斷的輔助資訊 - 例如檔案大小,使用者可判斷當前情境適不適合下載;甚至是下載到至哪個資料夾等等。
4.顯示完成 - 當抵達某個結果時,請提供一個簡單的「完成」或者「祝賀」,讓使用者知道已執行完畢。
請當個善解人意的朋友、貼心的設計師。
拍手 5 留言 0 觀看 88 收藏 0

資深產品設計師

01/13 11:01

一個按鈕的自我修養,就是不要讓使用者感到困惑
一個合格的按鈕到底需要具備什麼樣的素質?首先狀態要分明。
案例中的「加入追蹤」按鈕,可能會用到三個狀態
正常狀態——表示按鈕是可被點擊的
執行狀態——表示這個按鈕已被點下、正在作用中
禁用狀態——當前不可點擊,但是之後可以被啓用
雖然並沒有明確的規範指出灰色按鈕只能用於不可點擊,但是灰色按鈕在當前主流的交互經驗中,已經普遍被識別為「不可點擊」的狀態(disable);若不得已要使用的話,還是建議大家,以「不影響增加轉換率」為目的之功能,例如取消、刪除等等。避免使用者下意識以為不可以點,或困惑能不能點,而錯失了可能增加轉換的機會。
案例是MOMO購物網的商品賣場截圖,在電商世界中,追蹤是個會影響轉換率的功能嗎?現在的價格或存貨數會影響當前下標的意願,所以消費者想先收藏起來,持續關注、等待結帳的時機點。介面上第一次看到「加入追蹤」按鈕的時候,真的以為不可以點(職業病?),帶著疑惑去點點看,發現狀態會變成「已追蹤」;然後再按一次想要取消追蹤,竟然沒有恢復為初始狀態的互動設計....
那實際上可以怎麼改呢?以104的「收藏」為例,正常的次級按鈕可用主色的線框按紐,裡面的icon以「填色」&「未填色」來區分儲存與否,這樣其實也蠻清楚的喔。
其實現在很多設計師在呼籲「不應使用禁用按鈕」與「禁用按鈕一定要是灰色的嗎」,也是基於使用體驗下慢慢進化的想法,之後看到相關案例再分享給大家嚕~~
拍手 4 留言 0 觀看 217 收藏 1

資深產品設計師

01/07 15:38

展現幽默感與智力測驗,往往只有一線之隔
這個環節,到底是要使用者快速通過驗證,還是要他卡關直接關掉視窗?
使用者行為議題中有一個很重要的概念叫做「Don't let me think」,不要讓使用者有被迫停下來思考/猶豫/困惑的時間,當畫面隱含了對結果的不確定性,就會產生感知風險;簡單來說很可能就會產生不愉快的體驗。
案例中是linkedin的註冊流程,按錯了覺得智商受辱,我竟然會敗在驗證流程的問題漩渦裡 (然後要接受第二題的挑戰);僥倖猜對了長吁一口氣,疲累感湧現!彷彿剛作答完智力測驗的試卷...我們人生中的關卡已經很多了,在這邊就放過使用者好嗎?
標題「來做個簡易的安全驗證」完完全全就是對我的嘲諷。到底什麼叫做「以正確方式向上的圖片呢」?問了周邊的朋友們,大家都說是右上,這我就不認同了:
中上 - 奮力向右上跳起的姿勢,但是蛙頭長得跟其他都不一樣
右上 - 是一個普通人對蛙類正常姿勢的印象,但他是靜止姿勢,沒有「向上的動作」
思考到這可能會恍然大悟說:「對嘛!這樣推論起來應該是中上了。」
Hello~別忘了使用者只想快速通過驗證
Don't let me think!!!
拍手 6 留言 2 觀看 575 收藏 1

資深產品設計師

01/11 10:38

世界上最遙遠的距離,就是要使用者移動他的滑鼠
CTA(Call To Action)通常翻譯為行為召喚,如果你在很遠的地方進行召喚,可想而知召喚的力度會隨著距離而遞減;試想一下洗手間擦手巾的位置,是不是通常在洗完手後可觸及到的地方?如果需要走10步才可以擦到手,想走去擦的意願會不會降低呢?
希望每個產品開發人員一定都要把使用者看作是。個。很。懶。的。生。物,例如樹懶;動一下就覺得麻煩,走一步就耗盡體力;能在原地完成最好、能少一個點擊更好、盡量在當頁完成不需要跳轉到下一頁。使用者非常討厭付出一些成本,付出可能會要了他的命,以下舉例:
經濟成本:付錢
時間成本:花時間、等待
體力成本:移動、點擊、打字
腦力成本:動腦、思考
精神成本:擔心、費心
圖中案例是Yahoo設定為首頁的功能,頁面中第一眼會看到左上「將Yahoo奇摩設為首頁」的文案,看起來是不是很像CTA!然後就下意識去點點看,點了幾下沒反應,想說怎麼回事?放棄研究、視覺不再聚焦這個點上後,忽然看到螢幕的最右邊有一個「按此設定」的按鈕,這也離太遠了吧>_<
「使用者不會照著你所期望的方式去使用你的產品,因為你不是你的使用者」
拍手 4 留言 0 觀看 94 收藏 0

資深產品設計師

01/10 14:50

沒有一致性的設計是對使用者的一種不尊重
因為這傳達了一種訊息:「功能只要找得到、能用就好,不要計較這麼多」
不一致的元素會造成視覺上的凌亂、沒有整體性,且不在乎使用體驗(找得到+沒客訴就好);除了對使用者的不尊重外,也不太尊重自己身為設計師的專業,因為這是最最最基本的設計原則,印象中高中的美術課本就有談到「美的形式原理」,其中就有一項叫做「統一」。
範例中是Yahoo入口網站的局部介面,三個按鈕看似是三位不同的設計師、在不同時期維運下的產物;可以理解「登入」需要用文字作為指示性更強的按鈕、且較難用icon完整表達含義。
但「信箱」呢?在當代的介面使用經驗下,信封icon一般代表著兩種意思:通知/信件;若中間的鈴鐺icon是「通知」,那右邊的信封icon應該很好推論了吧!且中間的鈴鐺可以不需要以中文解釋「這是通知功能」,為什麼使用者會需要信箱二字來輔助呢?再者,若擔心使用者會誤解,用工具提示框(Tooltips)來輔助示意也是不錯的選擇。
根據做互聯網產品的經驗,估計是有人投訴「找不到信箱入口在哪吧」(笑)
然後PM/設計師就用了最暴力的方式解決這個問題
下次可以加紅點試試看喔!(希望聽得出來這是反諷)
拍手 5 留言 0 觀看 121 收藏 0
你可能感興趣的教室
一零四資訊科技股份有限公司 版權所有 © 2021 建議瀏覽器 Chrome / IE11.0 以上