104學習精靈

使用者介面設計

使用者介面設計
關注
邀請朋友
邀請朋友

Line

Facebook

Twitter

複製連結

取消
1.瞭解並能運用程式語言設計使用者介面。 2.運用已熟悉的景物做象徵。 3.系統提供即時的回應所需。 4.保持介面的一致。 5.提供直接的控制權給使用者。 6.提供適量的使用者控制。
關於教室
關注人數 3 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室,提供大家進行共學互動。
學習主持人
持續分享知識,
有機會成為官方教室主持人
關於教室
關注人數 3 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室,提供大家進行共學互動。
學習主持人
持續分享知識,
有機會成為官方教室主持人
Hi~ 歡迎分享學習資源,有學習問題可匿名向Giver發問!
我要分享
我要提問

使用者介面設計 學習推薦

全部
影片
文章

不知如何開始嗎? 先進行技能挑戰吧~

技能挑戰:初級
目前等級:未達初級
2 人已通過「初級」測驗,通過率67%,和學習精靈一起探索知識、增強能力!
我要挑戰
你可能感興趣的教室

資深產品設計師

01/28 15:28

改變元件該有的樣子並不會凸顯設計師的功力,好用比好看更重要
通用元件就該擁有一張大眾臉,不要挑戰使用者的認知心理
示能性(Affordance )指的是一件物品用來做何用途、或被認為有什麼用途,應該具有讓人明顯知道該如何使用它的特性。舉例來說,眼前有一枝筆,幾乎所有人都會用較尖的那端寫字。那是筆的形狀引導我們的行為。若改變了物品的外觀,反而會用使用者覺得困惑,進而放棄查找該功能或降低使用機率,百害無一利。
案例是yes123的部分首頁,你在第一時間可以找得到搜尋框在哪裡嗎?
這個網站搜尋的條件以及行為比較複雜,設計師為了要讓這一條看起來較有整體感,所以將開關按鈕、搜尋框、兩個下拉式選單合併成一個大的模組;的確視覺看起來是比較簡潔了,但由於周遭資料量也不小,下方有關鍵熱搜的超連結,以及被其他文字按鈕包圍著,要找出輸入框在哪裡著實有點困難。
看到才會有點擊慾望,沒看到就沒事兒~
想當然爾,這個版本「搜尋」的使用率應該不高。
拍手 2 留言 0 觀看 35 收藏 0

資深產品設計師

01/24 14:39

忘記密碼是登入頁面的標配,沒有例外
正宗打拋肉放番茄就是死罪,登入介面沒有忘記密碼就是低級失誤!
你一天要登入幾個系統呢?帳號密碼越來越多,但我們的記憶力卻在慢慢下降,帳號密碼總是搞混、記錯。每一個人一定都會有忘記密碼的時候,而在登入介面上的「忘記密碼」選項變成了找回密碼時不可缺少的解決方法,如果沒有這個選項,使用者只能打電話給客服,然後客服的電話就會被打爆!你們公司的客服就會對設計師/開發團隊產生很大的不滿.....案例中是華南銀行的登入介面,不要高估以及挑戰使用者的記憶力啊。
要看一個熱炒師傅功力到哪,嚐嚐看他的蛋炒飯就知道。
想打探一個設計師的實力,就去玩玩看他設計的註冊/登入/找回密碼流程吧,你以為最簡單沒有挑戰性的東西,製成時越是會被輕忽。
拍手 3 留言 3 觀看 245 收藏 0

資深產品設計師

01/25 14:44

一顆貪心的按鈕,會讓行為變得很黏稠
你可以推使用者一把,但是不要坐在他身上阻礙前進
左:認識 -> 理解同時行動
右:認識 -> 理解 -> 行動
先講結論:當你的行動包含了其他的意圖,本來會反射按下的行為,因為需要停下來理解而延遲。
按鈕本身保持易讀、易懂的原則是最重要的事情!通常按鈕背後包含著我們對這個產品的商業目標,以及希望他做的事,所以有時候一顆按鈕是會影響一個產品或行銷成敗的。
所以請把需要溝通以及理解的敘述,放在按鈕的周圍去「煽動」使用者;想像一下當你要推坑朋友購買一樣物品時,是在旁邊不斷地鼓吹他,而不是騎到他的身上去搖晃他、讓他無法思考。
原案例(左)是「104落點分析」這個產品的說明視窗,出發點是好意、文案也沒問題,希望使用者看到「累積500+人次使用」後,更加深自己想要下載的意願;但是「登入後才能下載」這件事本身就需要門檻,有些人可能看到要登入就放棄了,若再同時消化另一件事,無形中增加了心智負荷,在判斷上就稍微吃力了一些。
調整後(右)把原文案「累積500+人次使用」放在CTA的附近,暗示裡面的資訊很值得下載;接著把按鈕文案調整成「登入拿禮物」,將行為加了一點「樂意感」,使它更具誘因,讓使用者心甘情願登入拿禮物。
拍手 2 留言 1 觀看 166 收藏 0

資深產品設計師

01/20 10:52

介面的TA是使用者,不是你!
使用者不關心你,所有你想告訴他的,他都會想「跟我有關嗎?」或是「關我屁事」。
真實案例,之前曾跟工程師辯論「錯誤的空狀態到底要放什麼」,後端工程師堅持要把報錯的內容寫在空狀態上;例如當api出錯,讀取不到資料且頁面內容為空時,空狀態要寫「伺服器無法驗證要求:00403」,這樣工程師才可以很快地知道問題在哪。
乍聽之下很有道理對吧?可是在乎使用者體驗的設計師會認為這樣寫有很大的問題:
1.使用者根本看不懂,你的伺服器問題關我什麼事?
2.無法減緩帶來的不良體驗,降低不滿、焦慮、受挫的心理狀態。
3.無法明確的引導下一步,所以我應該怎麼做?
你可以真實告訴使用者系統當前的問題,但請加一點「溫度」,用較口語化的敘述方式表達,並且引導下一步可以操作的行為;當使用者讀懂你的文字時,看到後面的錯誤代碼也就不會這麼突兀了,例如:
「哎呀!我們遇到了一點小問題,請重新整理後再重試一次(00403)」
「此帳號沒有資料,請聯絡客服人員進行後續處理(00401)」
「伺服器不乖,工程師正在努力修復中!請稍後再試試看(00404)」
案例是郵保鑣APP,對於這種只能按「確定」的視窗也是很值得吐槽,因為你根本沒有給使用者選擇的權利(忍不住翻白眼)
拍手 4 留言 0 觀看 242 收藏 1

資深產品設計師

01/18 09:40

增加使用者的付出成本,其實也是一種無形的浪費
下列驗證圖最不可能用在何處?
1.動物星球頻道等級測驗
2.台大生物系入學考題
3.鳥類觀察協會入會試題
4.google的會員驗證流程
其實這一系列自以為幽默的驗證流程如果出一本案例專書,就像有人專門會買數獨的書慢慢玩一樣,我願意買來在坐捷運的時候好好玩味;但在不需要門檻的「我不是機器人」驗證流程中,使用者只想飛速通過此環節。
當你的品牌花了不少行銷預算,來吸引使用者體驗你的產品,卻對使用者進行了一場忠誠度考驗,忠誠度不高 (沒這麼想用) 的人就會果斷離開;等於你在白白浪費公司的行銷預算、人力成本、開發成本;使用者真的沒有你想像的不怕麻煩,越簡單越好,真的!
喔對了,小白鷺是黑嘴的。
拍手 5 留言 2 觀看 383 收藏 1

資深產品設計師

01/17 17:34

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