同理心拯救世界

從 Mockup 使用看軟體設計流程敏捷度

What is MOCKUP?

我們先來看 MOCKUP 這個名詞的定義


在製造及設計上,mockup是一個設計或是設備的模型,用來教學、展示、設計評估、推廣或是其他用途,可以是比例模型或和實物一様大的模型。 (在軟體開發最常用的 Mockups 試驗模型,是在軟體還沒有開發或底層功能的時候,以建立使用者介面向終端使用者展示該軟體看起來的樣貌。)

Wiki


如果拿視覺稿模型來套這個文字定義的話,看起來都對。
沒錯!都對,而且都有人用,我們再看幾個名言佳句。


Mockup 階段和最終產品的樣貌會完全一致,只差在這邊只有單純的圖片設計、還沒有真正能操作的功能。 (下一步就是直接交由工程師根據視覺稿進行開發)

Jay



在畫好 Wireframe、定版後,就可以依照線框稿內容製作 Mockup 了。Mockup 有很多種說法,我當它是視覺稿,所有跟視覺有關的部份都會在這個階段產出。 (Mockup 就是開 Photoshop 或 Sketch 之類繪圖軟體製作精稿,設計師最熟悉的工作階段,也最婊 RD 的一步。)

Akane Lee



在網頁設計領域很難找到一個以前沒有做過這類 Mockup 的人。 Mockup 通常很容易修改,並可以把你的網站帶到一個不同的視覺效果。 (網路上現在充滿了能夠幫助我們更快、更好、更有針對性地開展工作的資源,其中一個資源是模型設計。)

設計迷



身為一名UI設計師如何讓作品看上去更有逼格?那當然少不了高質量Mockup的包裝。

壹念視覺


都可以用,但是

為什麼長的不一樣的兩個東西,都慣用同一個詞?

除了名詞定義的通用性之外,在傳統的設計流程裡,軟體介面設計需經過這幾個步驟。

在過往如果想要做前期的使用者體驗調研,大多只能先省後端的成本。
設計師使用 PS 、AI 等工具設計頁面,再交由工程師開發成可互動的前端程式(原型),最後用來對真實用戶做測試。
所以就衍生了下面這個簡單的判斷邏輯,網路上很多人轉載,追溯起源可能來自此 Jay的商業筆記

在今天聽起來是一個土豪作法,因為一看就需要很多時間成本,事實上 User eXperience 在早期會被當成IT界奢侈品也是這個緣故。
在這個競爭激烈,用戶胃口很刁的環境下,原型設計工具 也日新月異了起來。
所以今天來看這張圖加上是否可互動的註解,就會變成這樣。

為什麼不是往越高擬真才增加互動性?
今天的 WIREFRAME 已經套不進去上面的簡單判斷邏輯了,而且 MOCKUP 位置感覺尷尬尷尬的…

再往上看一次名詞定義,人家都說了是「只可遠觀,不可褻完焉。」既然依照擬真程度 MOCKUP 的順序動不了,再加上前端工程師們長年累積而來對這個詞的高仇恨值,只好把它拔掉了…
我們來看看 Adam 大大 2013 年在 WebConf.tw投影片:


有時候,MOCKUP說的太少,就像地雷片的預告一樣。 (又或者這根本就是平面設計,這種例子還不少。)

Adam Wang


還是有人用也不是真的被拔掉拉…

但為什麼在敏捷團隊裡面好像比較少聽到這個詞?
不知道什麼是敏捷的可以簡單先看這篇 十年敏捷路,談企業轉型經驗

你可以這麼形容敏捷

如果花很多時間做出一個錯的東西,然後又剛好把時間用完,那就是瀑布。
如果用一半的時間做一個錯的東西,知道什麼會錯之後,用剩下的時間把比較對的東西做出來,那就是敏捷。
用一半的時間,做兩倍的事。
敏捷不是快,但求做事有效率。
開發流程的演進是為了因應市場需求的快速變動,那設計呢?


Even the best UX designers cannot design a perfect — or even good enough — user experience without iterative design driven by observations of real users and of their interactions with the design.

Nielsen Norman Group


在有敏捷 MINDSET 的開發團隊裡面,連座位旁的小蟑螂都敏捷起來了。
既然如此,那介面設計流程是不是也可以更敏捷點,才能設計出更貼近用戶真正的需要(NEED)的軟體介面,而不只是任何人自以為是所提出的需求(Requirement)。
因此,我認為演化後的設計流程會是這個狀態:

重點是趕快做使用者測試確認方向是不是對的

口頭討論或腦力激盪結束後,就趕快用工具 做出可互動的 WIREFRAME 進行使用者測試,並根據反饋立即迭代。
有經過使用者測試的確認,才叫做線框稿的完成。

這一兩年針對在敏捷團隊裡面,UX 設計的合作 NN/g 也有一些說法。
Incorporating UX Work into Your Agile Backlog

既然都是可操作互動的假介面,那線框和視覺的切分緣故在於:

1. 製作工時的長短。
由於擬真程度的高低會有不同的工時,除非你是超快手可以一樣快做完,那就可忽略。

2. 基本需求和進階需求的優先順序。
而針對需求的優先順序,這裡就會拿馬斯洛的金字塔來比喻,基本功能確立了才可來談主觀美感問題。

也因此,線框稿的目的在於讓受測者專注於功能的操作,而不要岔題去討論諸如按鈕顏色等問題。

對外產品需要有視覺效果的確認,然而公司內部員工使用的產品、視覺已訂定不可變動的產品介面,則可直接採用素材包進行製作。
也因此,流程會更簡化如下:

設計流程的敏捷度

2016 年還有人會吵 Clickable or static? Axure or paper?
因為設計這檔事是需要時間的,壓縮時間就降低品質在過去是一個不變的鐵則。
然目前已有好多的原型製作工具,大幅降低設計可測試原型的工作時間,甚至操作介面簡單到非設計背景也可以上手。
並且連開發團隊都擁抱了設計思考,甚至帶出了 Design Sprint 在開發者圈的流行。
為何設計師不可加入敏捷團隊,透過迭代的方式執行既有的工作項目,並且完整的追蹤用戶的使用情況
我一直認為,只有設計師被納入 SCRUM TEAM 的編制,才是真正擁抱敏捷。
而不是目前主流的設計和開發之間的強瀑布關係
畢竟,團隊存在的目的都是需擁有一致的目標以用戶為中心打造成功的產品,才能收穫對應的價值。


Clear vision, Agile development, and the goal to connect coworkers are what distinguishes the best intranets. (10 Best Intranets of 2020: What Makes Them Great)

Nielsen Norman Group




1 thought on “從 Mockup 使用看軟體設計流程敏捷度”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料


向上滑動