看到一篇UX-MAGAZINE出的文章Hi-Fi Prototypeing:Design is Our Muse, Code is our Medium , 這篇文章應該可以當作是我們之前分享的另一篇文章-什麼是MVP? 的實戰經驗分享. 裡面是TuroTax 分享他們的Prototyping經驗, 做一下摘要分享
Coder-designer?
前一陣子有一篇文章App UI設計師該不該學寫程式 在網路上引起很熱烈的探討, 這篇文章一開始也提到目前在國外的UX設計師的職位要求也開始出現要會HTML, CSS, JavaScript, 還要要會一些Front-end開發框架, 例如BootStrap, AngularJS, 這些公司認為會coding的設計師可以為使用者帶來比較好的使用者體驗. 事實真的是這樣嗎? TurboTax可不這麼認為, 他認為會寫程式的設計師跟會設計出好產品是兩回事-設計師如何應用coding的知識設計出好產品, 這件事才是重點.
TurboTax反而認為在設計階段導入Prototyping比起設計完成後就直接跳到軟體開發階段比較容易創造出好的使用者體驗. 尤其是Prototype越接近真實產品(hight-fiedly prototype)而且可以帶有真實測試資料讓使用者測試效果越好-. 在Prototyping階段可以快速得到使用者的回饋, 增快設計修改的週期, 如果到開發者階段再來修正代價就會很高. TurboTax有使用兩種方法做Prototype給使用者測試, 他們發現將Prototype設計越精確並用真實的資料給使用者測試得到的回饋比較有意義.
Motion
Motion可以讓使用者明確從一個動作到系統產出. 關於何時該採用Motion, 可以參考How to Integrate Motion Design In The UX Workflow 這篇對於何時該採用Motion提供更多的資訊.
Apple Watch App Prototype
如果有在做Apple Watch app UX設計可以參考裡面有提到他們在設計Apple Watch的prototype和開發者整合的經驗-The Only way to create animation for the Apple Watch is to use Key frames, or a series of images. – 一個物件移到下一個物件無法有淡進淡出的效果. 但是他們在製作Apple Watch App的介面時有這個效果, 這時候怎麼辦? 他們找到一個工具去錄製Prototype的操作成為影片, 然後將影片播放速度變慢, 將淡入淡出的效果抓成影像, 然後再將這個影像給工程師去做, 做出來的效果跟Prototype一樣-這個案例告訴我們有些事受限到OS本身的功能, 不是靠工程師就能搞定:-)
Prototype is a mindset
最後這篇文章提到Prototyper is not frond-end developers, Prototyper 是60%的designer+40% developer, Prototyper要重視的是產品的設計目的而不是像開發者一樣做production-ready的產品. Prototyper是設計師與開發者之間的橋樑.
這篇文章很長, 我只摘錄我看到的重點, 裡面還有很多細節值得好好看一遍.
Not enough?
看過什麼是MVP? Hi-Fi Prototyping, 大概可以抓住這個設計流程的精髓, 但是我認為還不夠? 為何我會這樣說, 反問自己一個問題, 經過這樣的流程就會產出成功的產品嗎? 最近看了另一本書 Real-World Kanban的最後面附錄一, 那位作者本身擔任顧問的工作, 他提到他的客戶開發的產品專案有50%都沒有做到客戶使用階段, 也就是說50%的專案都是失敗的, 沒有賺到錢. 其實MVP與Prototype確實可以解決這一部份的問題-如果可以在早期就知道這個產品設計有問題, 就省下後期的軟體開發成本, 但是製作MVP or Prototype也是要動用人力資源下去做, 有時一做也是1~2個月的時間成本就不見了, 我在網路上跟一位網友討論這個問題, 他的經驗是往往花了三個月的時間開發一個新功能, 然後到了客戶端才發現這不是客戶要的, 也許我們有了MVP, Prototype這個工具可以將三個月縮短到1.5個月, 利用Prototype去測試使用者的需求, 但總有一種投石問路的感覺. 我在Real-World Kanban這本書的附錄看到一個不錯的概念, 我給它另一種名稱-MVP/Prototype前奏曲-定義Product Concept, 經過這個流程, 你會對你要做的產品目標看得更清楚而你會發現MVP/Prototype應該是用來驗證產品的想法不是只是拿來做測試.
如果對於如何做product concept定義, 有興趣可以看Real-World Kanban書本附錄一, 作者使用很多圖來說明, 非常俱有參考價值.
延伸閱讀
以下為工商廣告時間 🙂
原型互動設計工具, 歡迎參考Facebook設計師採用的Framer
