|
地點：Cymking Space 第七屆DFT第二階段的第一堂小型工作坊，邀請到高雄科技大學工業設計系助理教授，龔蒂菀老師，從「體驗經濟」的角度，帶同學了解如果想要透過設計一款app來改善使用者的生活，必須了解的核心原則，以及UI UX的設計核心！  什麼是體驗experience? 體驗的意思是，事物是在人的大腦中留下深刻的「印象」，讓人可以回想曾經感受過的生命歷程，並因此對未來有所預感。我們活在持續成長的體驗經濟時代，不斷尋求足以影響我們的刺激感受，而每一個互動體驗，都可以是改變人類感覺、思考、行為的機會！龔老師進一步以DFT工作坊的地點為例，為什麼我們不在一般的學校教室上課，而要特地來到CYMKING SPACE呢？藉由添加了環境的元素，創造教室外的氣氛，這正是在設計一種體驗。 設計師的分身腦袋很重要 如果今天想要設計一個全新的app給使用者，必須要有「分身」的概念。身為設計師，很常誤以為自己也是使用者，因此忽略或混淆了使用者的需求。設計師必須強迫開啟一個分身腦袋，不斷對自己挑戰和提問：使用者為什麼要下載我的app？這個app提供了什麼願意讓他長期使用的動機？願意下載、願意用且持續用，才是重點，否則淪於自嗨產品就太可惜了！ 設計的迷思 很多人誤以為設計只是讓東西變好看，但這是個大迷思，設計本來就該好看，但卻不只是如此而已！以日本便利商店的自助式咖啡機為例，設計師設計了一款自以為簡潔美觀的介面，卻因為日本人看不懂R代表Regular、L代表Large，店員不得已在咖啡機上加註貼紙，最後越加越多，原本簡潔的介面消失了，取而代之的是充滿怨念的補丁。只想到介面美觀，卻沒有考慮到真實的使用情境，是萬萬行不通的！  高鐵組PK台鐵組--易用性測試練習 所有學員分成高鐵組與台鐵組，必須分別完成購買指定任務的高鐵與台鐵車票，組員必須扮演提問者、受測者與紀錄者，進行易用性的測試練習。練習完畢後，小組必須進行討論及上台發表，提出一到兩個購票過程中，最影響使用者完成任務的困難點，並討論解決方法，例如是少了什麼功能嗎？又或是可以多一個選項讓使用者更便利？龔老師藉此練習提醒學員，開發這兩app的人一定也認為自己是使用者，知道所有使用者的需求，但最後流程還是讓人遇到問題，設計師的分身腦袋，其實還是不容易，因此也格外重要！  從APP發想到提案 不斷反覆分組互測 彼此「找麻煩」！ 在重新梳理顧客旅程圖及同理心地圖後，小組開始實際進行APP功能發想，考慮三大要素：使用者真實需求、遭遇最大的困難、需要完成的任務。一輪的討論結束後，小組中的成員必須輪流到下一組，扮演受測者，開始「找麻煩」！被測試的小組必須提供一個情境讓受測者代入並扮演使用者腳色，針對app的流程或功能給出意見！每一輪小組互測結束，收集到珍貴的使用者回饋後，小組也必須重新檢討並調整旅程內容！  別急著畫APP，先從Flow Chart開始 Flow Chart指的是APP的流程圖，也可以稱做User Flow，呈現方式建議用樹狀圖架構來盤點功能與連結性！龔老師要同學先不用動腦想畫面的配置，而是確認所有需要的功能都在上面，檢視使用者會有的行為，給予適當回應，也確認所有的流程是否太長？若是流程太複雜，就必須再簡化，避免使用者失去耐心。 Wireframe幫助省時省力省成本 再更進一步則是畫出Wireframe(線框稿)，這是開發初期溝通、發想的重要步驟，可以大量節省時間和人力成本，重點在於畫面上要呈現的內容，而非美觀。未來所有的設計，都是以Wireframe為基準。龔老師推薦大家使用一款好用的app草稿軟體Balsamiq，可以共同編輯，內建各種元件及icon，能快速產出讓頁面互相連結的初版的Prototype，不需寫程式也能讓使用者體驗到UI/UX，想要修改畫面也能快速完成！  用Marvel完成進階版Prototype 龔老師先請學員練習用Balsamiq至少完成10頁的介面產出，當功能都已齊備後，下一步，還可以再繼續用免費的線上網站Marvel做進階版，建構更接近真實的彩色版prototype。Marvel細膩的地方在於他可以處理到手機操作的「手感」！不管你想要設定向左滑動、向右滑動、輕觸、長按、雙點擊，都可以設定，也更接近真實的app呈現方式！ 這個環節同樣讓小組各自完成在marvel上繼續建構app，並且持續派組員輪流到各組找麻煩。測試很重要，在浪費太多時間前，趕快測試才能及早修正！app一定有問題，一定有bug，及早測試及早修改，才不會太心痛及浪費時間，這也是prototype最大的用意！  小結 本次UI/UX工作坊中，龔老師將UI/UX的學習過程逐步拆解，透過循序漸進的方式，從體驗經濟說起，讓同學回想自身使用app的經驗，實際進行易用性測試的PK，認知到設計app時分身腦袋的重要性。最後回到小組各自的議題，回到顧客旅程圖及同理心地圖，再次分析小組app的價值及必要性，最後才讓同學實際用電腦操作，練習app從wireframe到mockup的產出！ |