104學習精靈
使用者介面設計
使用者介面設計
關注
邀請朋友 
Facebook
Twitter
Line
複製連結
1.瞭解並能運用程式語言設計使用者介面。
2.運用已熟悉的景物做象徵。
3.系統提供即時的回應所需。
4.保持介面的一致。
5.提供直接的控制權給使用者。
6.提供適量的使用者控制。
Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
我要分享
我要提問
使用者介面設計 學習推薦
全部
影片
文章
不知如何開始嗎？ 先進行技能挑戰吧～
技能挑戰：初級
目前等級：未達初級
2 人已通過「初級」測驗，通過率67%，和學習精靈一起探索知識、增強能力！
我要挑戰
你可能感興趣的教室
改變元件該有的樣子並不會凸顯設計師的功力，好用比好看更重要
通用元件就該擁有一張大眾臉，不要挑戰使用者的認知心理
示能性(Affordance )指的是一件物品用來做何用途、或被認為有什麼用途，應該具有讓人明顯知道該如何使用它的特性。舉例來說，眼前有一枝筆，幾乎所有人都會用較尖的那端寫字。那是筆的形狀引導我們的行為。若改變了物品的外觀，反而會用使用者覺得困惑，進而放棄查找該功能或降低使用機率，百害無一利。
案例是yes123的部分首頁，你在第一時間可以找得到搜尋框在哪裡嗎？
這個網站搜尋的條件以及行為比較複雜，設計師為了要讓這一條看起來較有整體感，所以將開關按鈕、搜尋框、兩個下拉式選單合併成一個大的模組；的確視覺看起來是比較簡潔了，但由於周遭資料量也不小，下方有關鍵熱搜的超連結，以及被其他文字按鈕包圍著，要找出輸入框在哪裡著實有點困難。
看到才會有點擊慾望，沒看到就沒事兒~
想當然爾，這個版本「搜尋」的使用率應該不高。
拍手 2
留言 0
觀看 35 收藏 0
拍手
留言
分享
Line
複製連結
收藏
忘記密碼是登入頁面的標配，沒有例外
正宗打拋肉放番茄就是死罪，登入介面沒有忘記密碼就是低級失誤！
你一天要登入幾個系統呢？帳號密碼越來越多，但我們的記憶力卻在慢慢下降，帳號密碼總是搞混、記錯。每一個人一定都會有忘記密碼的時候，而在登入介面上的「忘記密碼」選項變成了找回密碼時不可缺少的解決方法，如果沒有這個選項，使用者只能打電話給客服，然後客服的電話就會被打爆！你們公司的客服就會對設計師/開發團隊產生很大的不滿.....案例中是華南銀行的登入介面，不要高估以及挑戰使用者的記憶力啊。
要看一個熱炒師傅功力到哪，嚐嚐看他的蛋炒飯就知道。
想打探一個設計師的實力，就去玩玩看他設計的註冊/登入/找回密碼流程吧，你以為最簡單沒有挑戰性的東西，製成時越是會被輕忽。
拍手 3
留言 3
觀看 245 收藏 0
拍手
留言
分享
Line
複製連結
收藏
一顆貪心的按鈕，會讓行為變得很黏稠
你可以推使用者一把，但是不要坐在他身上阻礙前進
左：認識 -> 理解同時行動
右：認識 -> 理解 -> 行動
先講結論：當你的行動包含了其他的意圖，本來會反射按下的行為，因為需要停下來理解而延遲。
按鈕本身保持易讀、易懂的原則是最重要的事情！通常按鈕背後包含著我們對這個產品的商業目標，以及希望他做的事，所以有時候一顆按鈕是會影響一個產品或行銷成敗的。
所以請把需要溝通以及理解的敘述，放在按鈕的周圍去「煽動」使用者；想像一下當你要推坑朋友購買一樣物品時，是在旁邊不斷地鼓吹他，而不是騎到他的身上去搖晃他、讓他無法思考。
原案例(左)是「104落點分析」這個產品的說明視窗，出發點是好意、文案也沒問題，希望使用者看到「累積500+人次使用」後，更加深自己想要下載的意願；但是「登入後才能下載」這件事本身就需要門檻，有些人可能看到要登入就放棄了，若再同時消化另一件事，無形中增加了心智負荷，在判斷上就稍微吃力了一些。
調整後(右)把原文案「累積500+人次使用」放在CTA的附近，暗示裡面的資訊很值得下載；接著把按鈕文案調整成「登入拿禮物」，將行為加了一點「樂意感」，使它更具誘因，讓使用者心甘情願登入拿禮物。
拍手 2
留言 1
觀看 166 收藏 0
拍手
留言
分享
Line
複製連結
收藏
介面的TA是使用者，不是你！
使用者不關心你，所有你想告訴他的，他都會想「跟我有關嗎？」或是「關我屁事」。
真實案例，之前曾跟工程師辯論「錯誤的空狀態到底要放什麼」，後端工程師堅持要把報錯的內容寫在空狀態上；例如當api出錯，讀取不到資料且頁面內容為空時，空狀態要寫「伺服器無法驗證要求：00403」，這樣工程師才可以很快地知道問題在哪。
乍聽之下很有道理對吧？可是在乎使用者體驗的設計師會認為這樣寫有很大的問題：
1.使用者根本看不懂，你的伺服器問題關我什麼事？
2.無法減緩帶來的不良體驗，降低不滿、焦慮、受挫的心理狀態。
3.無法明確的引導下一步，所以我應該怎麼做？
你可以真實告訴使用者系統當前的問題，但請加一點「溫度」，用較口語化的敘述方式表達，並且引導下一步可以操作的行為；當使用者讀懂你的文字時，看到後面的錯誤代碼也就不會這麼突兀了，例如：
「哎呀！我們遇到了一點小問題，請重新整理後再重試一次(00403)」
「此帳號沒有資料，請聯絡客服人員進行後續處理(00401)」
「伺服器不乖，工程師正在努力修復中！請稍後再試試看(00404)」
案例是郵保鑣APP，對於這種只能按「確定」的視窗也是很值得吐槽，因為你根本沒有給使用者選擇的權利(忍不住翻白眼)
拍手 4
留言 0
觀看 242 收藏 1
拍手
留言
分享
Line
複製連結
收藏
增加使用者的付出成本，其實也是一種無形的浪費
下列驗證圖最不可能用在何處？
1.動物星球頻道等級測驗
2.台大生物系入學考題
3.鳥類觀察協會入會試題
4.google的會員驗證流程
其實這一系列自以為幽默的驗證流程如果出一本案例專書，就像有人專門會買數獨的書慢慢玩一樣，我願意買來在坐捷運的時候好好玩味；但在不需要門檻的「我不是機器人」驗證流程中，使用者只想飛速通過此環節。
當你的品牌花了不少行銷預算，來吸引使用者體驗你的產品，卻對使用者進行了一場忠誠度考驗，忠誠度不高 (沒這麼想用) 的人就會果斷離開；等於你在白白浪費公司的行銷預算、人力成本、開發成本；使用者真的沒有你想像的不怕麻煩，越簡單越好，真的！
喔對了，小白鷺是黑嘴的。
拍手 5
留言 2
觀看 383 收藏 1
拍手
留言
分享
Line
複製連結
收藏
你以為的溫馨提示，使用者卻覺飽受困擾
一個產品的調性與價值觀，可以從介面上最簡單的互動回饋略知一二。
介面就是把程式指令轉化成人看得懂、可操作的視覺語言，若只是機械式呈現指令、報錯、卻沒有賦予使用者引導性或主導權，那這個系統就只是個自說自話、不在乎你想法的陌生人。
案例中是Microsoft Teams的文件下載通知；當開始執行下載後，這個視窗會在螢幕的右上方停留很~~久，久到我以為它壞掉！既不知道下載的進度如何、也無法暫停、甚至關不掉，你只能乾等到下載完畢，待視窗自然消失；或者更慘，直接報錯顯示下載失敗。
那麼當執行動作時，介面可以傳達什麼資訊呢？
1.系統狀態保持可見性 - 顯示下載進度軸或百分比；在流程中，需要合理的步驟來幫助使用者控制和瞭解當前進行狀態。
2.可逆性、可中斷性－提供「暫停」、「停止」等功能；若檔案太大，使用者可能有變更網路、暫停動作的情況，並且要提供可取消當前行為的出口。
3.可判斷的輔助資訊 - 例如檔案大小，使用者可判斷當前情境適不適合下載；甚至是下載到至哪個資料夾等等。
4.顯示完成 - 當抵達某個結果時，請提供一個簡單的「完成」或者「祝賀」，讓使用者知道已執行完畢。
請當個善解人意的朋友、貼心的設計師。
拍手 5
留言 0
觀看 145 收藏 0
拍手
留言
分享
Line
複製連結
收藏
你可能感興趣的教室