為什麼PM要學UI/UX?淺談使用者介面/體驗
PM成長之路:產品經理訓練營#6
1.什麼是UI/UX?
(1)日常的UI/UX
(2)UI/UX設計師在做甚麼?
2.UI設計宗旨
(1)設計核心
(2)設計5大原則:目的性、效率性、一致性、失誤性、成就感
(3)設計6大細節:導航、習慣、線索、配對、回饋、例外
(4)設計重點
(5)小結
3.UX研究導入專案:
(1)人物誌Persona
(2)使用者旅程地圖user journey map
(3)小結
4.為什麼PM要學UI/UX?
心得結論1.什麼是UI/UX?
UI(User Interface):使用者介面,產品"看"起來如何。
UX(User Experience):使用者體驗,產品"用"起來如何。
➳UI/UX介紹參考:
(1)日常的UI/UX:
大家對於UI/UX的差異更有感覺了嗎?
生活中以番茄醬包裝為例, 番茄醬的包裝設計由UI設計師負責(玻璃材質且直立的番茄醬瓶身),不知道大家有沒有買過發現擠不出來狂拍瓶子的經驗?UX設計師發現這個痛點後, 優化產品設計, 改為塑膠瓶方便擠壓,且瓶蓋加寬倒立讓番茄醬因地吸引力聚集在瓶口處,打開立刻就能擠出。
(2)UI/UX設計師在做甚麼?
UI設計師注重產品的整體視覺, UX設計師注重產品的使用感受,UI/UX設計師配合方式依據每間公司文化不同而有差異,也有連UI或PM身兼UX設計師的情況。
2.UI設計宗旨
(1)設計核心:
設計沒有標準答案,最重要的是你的用戶(有可能不只有一群)喜歡的設計是甚麼,最重要的是:
同理心、
用戶體驗大於美觀
(2)設計5大原則:目的性、效率性、一致性、失誤性、成就感
→目的性
使用者是誰?他們知道甚麼?他們使用這個功能學到甚麼?使用前/中/後會得到什麼?
→效率性
使用者是否能在最高效率下完成任務?也就是操作流程上是否能夠快速達成任務?以IG為例, 為了讓用戶快速達成上傳照片的任務,在操作流程上設計:
1."下一步"和"上傳"按鈕都在同一個位置,讓用部不需要思考操作直覺性按下。
2.送出後沒有任何確認上傳確認彈跳視窗阻礙任務完成。
3."預先上傳"功能不會有loading過久造成照片上傳完成前跳出。
→一致性
相同目的設計相同, 減少思考時間、降低學習成本,以台新銀行Richart APP為例,設計”>”引導可點選區塊。
→失誤性
是否容易造成錯誤?可否立即復原?舉例來說,loading畫面和無網路連線畫面設計(通常在產品發想時暫時不會先考慮,待設計確認後,才會考慮此細節)。
➳tips:無網路連線畫面若沒有設計,會造成用戶沒意識到已斷線,等待APP回應的不佳使用體驗情境。→成就感
整體使用使用下來,使用者的情緒是正面的嗎?
(3)設計6大細節:導航、習慣、線索、配對、回饋、例外
→導航:
用戶知道自己在哪、可以做甚麼、如何離開。
→習慣:
與現實產生關連,擬物化設計,例如是看到特定icon會自動聯想到對應功能:✉聯想到信箱、☎聯想到電話、✈聯想到飛航模式。
→線索:
讓使用者知道可以互動,誘使使用者展開行為,以台新銀行Richart APP為例,利用紅點"new"提示使用者有新的功能:
→配對:
使用者操作得到的結果與預期相同, 例如:youtube按下鈴鐺就能收到上傳影片通知。
→回饋:
所有互動都給予回饋,無論正確或錯誤,例如:送出表單後若沒有成功的回饋通知, 會造成用戶不確定是否成功送出的狀況。
→例外:
錯誤環境、無資料環境、極端值處理,例如:line訊息超過999則會顯示999+,避免數字過長影響使用者體驗(此數字需要PM事先訂立)。
(4)設計重點:配色、字體、布局、趨勢
設計重點"易讀性"第一
→配色:
符合主題調性,至於怎麼選主題顏色?
1.思考產品屬性,例如購物目的為誘使用戶衝動購買,使用偏橘紅色調,誘發用戶內心的購物慾。
2.參考競品:例如股票相關APP以紅色為大宗(聯想到漲停、紅包、發大財)。
配色搭配可參考：
→字體:
清楚色彩對比、合理大小、字體型態大小統一、合理行高, 其中易讀性最重要。
→佈局:
對齊是一切基本、適當留白可具結重點。
→趨勢:
保持觀察市場趨勢(每年網路都會公布UI流行趨勢)。
A guide of UI design trends for 2021
More 3D, more color, glassmorphism and great tools! 🤩
uxdesign.cc
(5)小結:
設計沒有標準答案,最重要的是你的用戶(有可能不只有一群)喜歡的設計是甚麼
APP設計指南可參考material.io Guidelines:
3.UX研究導入專案:
(1)人物誌Persona
若無訪談對象, 受限於時間緊迫可試著回想自己日常生活經驗, persona姓名盡量使用貼近現實日常生活有可能會看到的名字。
(2)使用者旅程地圖user journey map
人物誌與使用者旅程地圖可參考:
如何發想產品?利用精實畫布進行產品企劃(上)
如何發想產品?利用精實畫布進行產品企劃(下)
(4)小結
UX跟PM一樣需要同理心、不斷溝通, 在相同的情況裡尋找用戶痛點,並提出標新立異的解決辦法。
4.為什麼PM要學UI/UX?
先介紹普遍PM/UI/UX的工作配合流程:
(依不同公司流程/文化/專案時效性會有差異,例如有些公司是PM需要畫wireframe,以下暫省略wireframe環節)
1.PM確認規格(spec.)及流程
2.由UI/UX進行使用者體驗測試及模型(prototype)
3.過程發現bug或用戶測試後需要修正先前spec.PM和UI/UX進行討論解決
4.工程師撰寫程式
(由以上流程可看出若少第3步驟,直到工程師已經撰寫程式時才發現bug需要修正,此時專案成本又會再疊加上去,因此在資源允許的情況下,UX/UI在專案進入工程師撰寫程式前先參與PM規格流程確認,及時調整是很重要的)
根據以上總結為何PM需要學UI/UX?
1.PM和UI/UX溝通配合過程, 已有UI/UX基礎知識, 減少溝通成本。
2.並非每間公司/每個專案都有UX, PM有時需要身兼UX, 若PM沒有UX基礎知識, 在工程師撰寫程式後才不斷修正成本也會不斷疊加。
心得結論
之前負責網站建置專案的經驗, 對於PM和UI工作流程配合的部分有時遇到的狀況是:
-情境: PM(我)已使用googlesite畫wireframe和UI確認網站架構
-問題:UI提版有時會超乎(客戶/我)預期的驚嚇….
- 當時我的作法:
1.前幾次是會直接請UI改, 但會造成UI失去創意熱忱, 變成詢問我要怎麼改?icon要放哪?
2.記取經驗後, 我調整為先詢問UI(讓我驚訝的設計部分)原因為何?是有甚麼考量的因素嗎?若UI只是回答覺得這樣版面比較好看時, 我會在依據網站的TA樣貌/使用習慣和UI說明我想調整的方向,這種方式能讓UI維持創作熱誠, 但同時也花費較多的時間做溝通。 - 如果經過溝通後UI堅持設計?
先詢問辦公室其他人的想法(我覺得不太可能會有個結果),若無解的話可把兩個版本當作A/B test驗證。 - 下次可改善的方法?
在資源允許的情況下, 對於還未培養默契的UI,先詢問提供簡單的線框搞確認設計風格/架構是否符合預期, 減少後續反覆修改的時間。
設計沒有標準答案, 只有符合用戶體驗的設計, 過程需要大量溝通取得共識, 關於我畫wireframe的迭代史想下次在分享給大家 :)
➳產品體驗好文分享_pchome v.s. momo:
感謝你的閱讀及支持，任何問題都歡迎來信和Elaine交流｜ela71930@gmail.com
如果喜歡這篇文章，請給我1–10個拍手(越喜歡當然可以拍越多，甚至按住不放!這也是我持續寫作的動力！)此外還可以動動手指「Follow」Elaine ☺