設計迭代 (Design Iteration) 是什麼?

Ellen Sun
Jun 6, 2021

--

Photo by Firmbee.com on Unsplash

轉行 UX 至今快要滿一年,這一年陸續經手過不同的設計,在每次犀利的設計 review 中慢慢了解到許多轉行前不知道的事情。在還沒進入這個領域之前,我一直搞不懂設計為什麼需要花這麼多時間 — — 如果今天是要製作一個網頁讓使用者填寫資料,只要該用輸入框的時候用輸入框,該用下拉式選單時候用下拉式選單,拿這些元件拼拼湊湊,不就有一個畫面可以交差了嗎?為什麼設計師總是感覺很忙、有一堆東西要想呢?

後來我才發現一個設計從零到一,其實要經過許多次的設計迭代 (Design Iteration),不斷燒腦想出截然不同的設計方法,再從中挑選出較佳的設計。當然,挑選時如果能直接找使用者測試是最好的!Jakob Nielson曾經做過研究,每一次的迭代,可以讓易用性提升 38%。

那麼,設計迭代該怎麼做呢?

設計策略迭代

設計的第一步在於了解使用者與她們的use case — — 使用者要達成什麼目標?會用什麼方法達成他的目標?一個使用情境中,可能會有多個use case,我們需要依據使用者的行為與發生頻率,分出 major case、minor case、corner case等。我所説的設計策略,是針對 major case 定義出的設計主軸或設計側重點,有點像是今天要跟別人介紹這個設計的時候,你會想強調的設計特色是什麼。

Photo by Arisa Chattasa on Unsplash

拿電梯當例子:若電梯的 major case 是「讓乘客抵達想到的樓層」,我們可能有兩種策略:(1) 讓乘客能更快抵達 或是 (2) 讓乘客讓搭乘電梯更有掌控感 。針對第一種策略,在設計時我們可能會花更多心思考慮如何加快電梯的速度,或是怎麼讓想去同樣樓層的乘客盡可能搭同一部電梯,降低中途停靠的樓層數量。如果採用了第二種策略,那我們的討論可能就會偏向如何讓使用者知道抵達他的目標樓層還需要多少時間,或是中途還要停靠多少樓層。不同的策略,會導致完全不同的解決方案。

當然,策略也是基於對使用者痛點了解而來,策略之間也不是二選一/多選一的關係。

版面/元件迭代

策略方向決定了之後,接下來要考慮同個情境的 minor case,針對版面 (layout)、元件進行迭代。電梯的 minor case 可能包括「發生緊急狀況時要停止電梯」「要對外通話」「顯示廣告」,那這些 minor case 應該被擺放在電梯控制介面的哪個位置?要用什麼的元件呈現?

在製作頁面時,會因為使用者商業效益開發成本,導致設計師在區塊佔比、元件選擇或欄位排序有不同的判斷。

考量使用者時使用不同的版面/元件

考量使用者時,我們可能會思考情境裡所有的 use case,並依照 use case 的重要程度相應選擇可以「強化」或「弱化」的版面與元件。如上圖的範例1,左邊把功能 A、功能 B 列為同等重要的 use case,因此兩者有等重、各自獨立的入口;右邊則是直接進到功能 A 的流程,功能 B 弱化到只剩文字按鈕,可以明顯感受到在這個設計中 功能 A 的重要性遠遠大過功能 B。

而範例2,則呈現了即使都是「輸入日期」,使用者對日期資訊的掌握程度與行為不同,就會導致我們選擇不同元件。

考量商業效益使用不同元件

在設計時我們也會考慮到產品的商業效益。以上圖為例,如果該功能期望讓使用者更願意消費,那麼右邊的像優惠卷的選擇方式,就會優於左邊相較比較平淡冷靜的下拉式選單。

考量商業效益使用不同元件

最後,我們當然也要考量開發成本。例如,即使像上圖的可拖拉 slider,可能會給使用者較好的體驗。但如果這個功能不是主要功能且使用人數不多,考量到開發新元件的成本,最後我們可能會選擇右邊比較不好用、但不用在另行開發的既有元件。

這邊雖然討論了很多種不同作法,但再怎麼變化,是不太會變動到前面策略的。有點像是確立了策略之後,就會一直堅持下去(除非有非常重大的理由正面原先定下來的策略並不可行),如果在這個階段還在策略層面猶疑不定,會導致設計持續反覆、沒辦法繼續發展下去。

視覺迭代

等到流程與元件類型都確定之後,接下來就要開始視覺的迭代。我平常並不負責視覺的部分,只能分享幾個從視覺設計師那邊偷學到的、聽起來有點玄妙但實際上非常重要的考量點。

  • 太強、太弱:不同佈局、顏色、字體會造成資訊不同的強弱,需要同時讓 use case 的強弱反映在視覺上,但又不能讓整個畫面的重量失衡(如頭重腳輕)
  • 出不來、被吃掉:比較常用來談顏色之間的對比,出不來通常是因為兩個重疊物件的對比度太低
  • 包或不包、太碎:整理資訊的一個重要原則就是把相近、有關的東西放在一起,分類之後就會有所謂「區塊」的概念。為了區隔出不同區塊,一個慣用手法就是把同類資訊放在牌卡中,也就是所謂的「包」。然而,當整個畫面都用牌卡區隔時,就會造成畫面「太碎」、被切成一塊一塊的。如果「不包」,則可能用分隔線或單純用間距去區隔。
    然而,每加入一個分隔元件(如分隔線、牌卡),就需要在元件上下左右留出更多空間,導致最後能夠放的資訊變少。

簡而言之,一個相對理想的設計其實是建立許許多多被淘汰的設計之上,每個設計師都會有個畫面墓園專門祭奠畫面的殘骸。這也是為什麼好的設計是一件很花時間的事情!

對於什麼設計,每個人都有不同的定義,隨著做設計越多應該也會有不同的體會。現在的我認為設計除了應該以解決問題為根本之外,更應該是一種有意識的精心安排,讓所有東西 — — 不論是使用者/商業/技術之間,或是一個畫面上的元件之間 — — 達到一個平衡的狀態。一個不用心的設計,通常都會讓人感覺把所有東西沒有意識、沒有邏輯、沒有主軸的丟到一個平面上或空間中。

Source: Polysphere

我們的 Design Lead Sean 曾說過,設計就像是把很多分散在各地,看起來毫不相關聯的拼圖,設計師就是要找到那個最合適的角度,才能剛好把這些拼圖拼成一個完整的圖形。設計最困難也最花時間的,大概就是要盡可能的蒐集到足夠全面的拼圖,然後還得不斷嘗試才能找到最佳角度吧!

--

--

Ellen Sun

UX Designer; a (messy) mixture of liberal arts, business and tech; beer is running in my veins