Design by 00nyrhtak

提出視覺設計方案:有時候我們需要一些反直覺

循著脈絡多方嘗試、借助團隊多方驗證

Kathryn Wang
Sep 29, 2020

--

在《怎麼辦——中文字體設計和跨文化溝通》裡看過一個有趣的故事,兩組分別主修數學和建築設計的學生解答同一個問題,數學組學生掌握問題關鍵後,就用最快速度給出最佳解,建築設計組學生則是試著找出各種解決問題的可能性和角度、不斷證明發展,為求最精彩的解決之道。

如果說數學組解決問題的原則是尋找一條點到點的最高效率線段,那麼設計組的原則則是由一個端點引發盡可能多的設線集團。前者的目的在於最有效的解決問題,後者的目的在於尋找解決問題過程中的最佳可能性。

跟前 Facebook 產品設計副總 Julie Zhuo 在她的文章〈Junior Designers vs. Senior Designers〉裡提到的概念非常相似,用兩張簡單的圖像表現兩種思考模式的差異。

大多時候以直覺投射出來的方案,離最終定案的版本還有一段未知空間,也有機會最初的直覺和結果相去不遠,但在沒有試過其他的可能性之前,怎麼有辦法斷定眼前的它就是所謂最好的設計?

這種設線發展的思維延伸出果思的設計團隊的內梗——畫面墳場 ☠️,埋放在設計發展過程中被捨棄掉的方案。走過墳場可以看到針對同個畫面各種不同的嘗試,在每次反覆驗證中找到再優化的方向,最後選定其中的最佳方案。

我們需要適時加入一些反直覺,反問自己「我還可以怎麼做」,扣緊核心目的、依循設計脈絡,一步步接近心中理想的樣貌。

本文架構一、設計嘗試與測試驗證的價值二、提出設計方案的時機
內部對團隊 ✦ 在討論交流中排除不確定性因素
外部對客戶 ✦ 在每個選擇中逐步推進專案階段
三、向內部提出視覺設計方案的流程
1 ✦ 設計嘗試
2 ✦ 測試驗證
3 ✦ 呈上主管

一、設計嘗試與測試驗證的價值

進行設計嘗試是個從不間斷的探險旅程,在還不知道下一個目的地在哪裡的情況下,帶著過往經驗還有手上握有的資源,跨出第一步。這一步通常出於安全心理,會踩在你先前走過的最穩的道路上,因為風險最低也相對熟悉,但你無法確保持續前進就能引領你到最終你想去的地方。

那條最穩的道路就是我們最直接慣用的設計表現手法,隨時間累積形成鮮明的個人特徵,這並不是件不好的事,然而身處在專案類型多元的專案公司裡,需要的是不被自己設下的框限給制約的「流動彈性」,在嘗試中多一點突破,靈活變化會為你帶來面對不同風格主題的適應力!

在果思裡我不是一個人前行,還有身邊可愛的旅伴,適時向他們請益,往往會得到意想不到的發現。這也是設計嘗試後的關鍵環節——內部測試驗證。

自己心中所設想的設計方案不一定是最理想、最符合目的的,借用他人視角來客觀檢視畫面,才有可能獲取新的線索,引領你到下一條路上。

二、提出視覺設計方案的時機

以果思的情況而言,主要會向兩種對象提出你的設計方案——內部團隊、外部客戶。內部是為了協助你做測試驗證,外部是為了讓客戶下決策以推進專案進度。

內部對團隊 ✦ 在討論交流中排除不確定性因素

注意在提出設計方案之前,首要必需考慮的還是專案時間成本和頁面重要性及複雜度。試想這個畫面之於整體產品的地位如何?舉例來說,第一眼接觸到的首頁會比內層輔助性質的通知列表頁還要有發展多種方案的必要。

把時間投注在重要程度較高、不確定性因素較多的畫面,讓時間資源效用最大化,時間就是專案公司最珍貴的資產之一。

有些適合嘗試多種表現手法的畫面,可以透過提問瞭解受測者的主觀感受、是否達到主要目的;資訊繁雜的頁面,著重於閱讀動線的流暢度、是否能夠抓到重點且正確理解資訊。受測者在測試中產生的任何疑惑或不確定感,就是我們可以調整優化的部分。

外部對客戶 ✦ 在每個選擇中逐步推進專案階段

向客戶正式提出的每一個方案都有被選中的可能,所以千萬要調整好心態,別為了「充數」而硬塞方案,主管常常跟我們強調要真心喜歡和認同自己的產出,問心無愧才會做得投入開心 🥰

  • 視覺提案時,針對重點流程頁面套入至少兩種不同風格詮釋:目的是為了讓客戶選定一種視覺形象作為其他頁面的風格走向。以最近剛上線的誠品人 App 為例,我們在提案階段提出「首頁/會員個人頁/會員卡條碼頁」三個具有較多視覺展示意義和空間的頁面。
  • 專案進行中,針對影響產品門面的畫面提供方案選擇:在使用者還未實際使用產品前,會先接觸到「App Icon/商店上架圖/登入頁」等畫面,植入初次見面的印象。我們可以視專案規模和時間成本判斷是否需要提出多種方案,或者可以以蒐集參考圖的方式聚焦客戶的偏好。

除了上述兩種情況,也要根據專案現況思考「在這個階段,給予方案選擇是不是能幫助專案更順利進行?」主動提供給客戶選項和建議。先前同事負責的專案涵蓋幾十個成就徽章繪製,最糟的後果是全數畫完以後,客戶說要打掉重練,那我可能就眼睜睜看著同事在原地爆炸了。像這類風險極高的項目更要及早確立好方向,先用少量徽章試水溫,彼此有了共識再往下執行。

記得!大部分客戶並不具備敏銳的設計眼,方案間如果沒有足夠明顯的鑑別度,會落入看不出差異而無法果斷選擇的窘境,後續還得來回重工。

就像我身為咖啡外行者,每一種咖啡豆(耶加雪菲/肯亞/曼特寧⋯⋯)對我來說真的都是差不多的風味,要到「冰滴咖啡/黑糖拿鐵」這種等級的差別我才能輕易下決定。

三、向內部提出視覺設計方案的流程

把設計嘗試和內部測試驗證的流程融入到日常,做為正式上會議場前的暖身備戰,清楚地傳達給客戶前因後果(要達成的目標、具體的設計執行、獲得的價值效益),如此提出的設計才能具備足夠的根據和說服力。

和夥伴討論的過程中,不只是磨練精確完整的表達力,還能從回饋裡觀察自己的思考路徑、深入程度,甚至是沒有注意到的死角盲點。

向內部提出視覺設計方案的流程 (Design by 00nyrhtak)

1 ✦ 設計嘗試

  • 接手 Wireframe 後別急著一頭栽進視覺化,先跟 UX 設計師確認頁面目的(使用情境/最主要的行為動作/資訊權重⋯⋯)再去思考元件擺放位置、視覺上應該強化和弱化的部分、頁面想營造的情感氛圍等,傳遞出的訊息才會精確。這個步驟是幫助你找到靶心的位置,判斷投擲出去的每支飛鏢是否有所偏移。
  • 設計嘗試的過程中不免會遇到卡關障礙,這時候除了借助靈感網站或實際上線產品刺激想法,也可以跟夥伴們簡述現況、尋求新鮮點子。不在專案內的夥伴不會被已知條件受限,更能以旁觀者角度劃出一道突破口。
  • 切記盡可能保留每一個發展路徑的設計方案,方便討論者掌握你已經嘗試過的方向,快速點出還有哪些延伸發展。原本我有嚴重的畫面潔癖,心裡過不去的方案就會把它一鍵刪掉永不見天日,導致跟主管討論時無法從中揀選出值得進一步嘗試的節點,自己斬斷了向前的道路。

2 ✦ 測試驗證

接著來到內部測試驗證的時刻,事前準備比正式對外的易用性測試輕便很多,只要備好方案和想驗證的提問,就可以抱著電腦在辦公室走動,鎖定你的受測者了 👌🏻

首先要讓什麼都不知情的受測者有個基礎概念,簡要說明「頁面主軸/他的角色/使用情境」再拋出問題。以下用「時尚服飾網站主選單」作為案例:

  • 這是一個服飾品牌的首頁,你是一位初次進到網站的使用者,想要前往你最感興趣的女裝(大分類)頁面瀏覽。
👁 確認主要元件辨識度:是否能辨識主選單按鈕、找到主選單的位置
  • 點擊「女裝」後,預期畫面會發生什麼變化?
👁 確認動線是否與使用者預期的相符:點擊後展開子項目/直接跳轉到頁面/另開新頁面等
  • 你想要查找門市資訊(中分類底下的小分類),會怎麼做?
👁 確認資訊位置和階層合理性:是否能辨別大分類和中分類的層級差異、小分類屬於哪個中分類
  • 操作過程中有什麼任何有疑慮的地方或是其他想回饋的嗎?
👁 瞭解使用者容易卡關或不夠直覺的部分、蒐集不一定和測試有直接相關但可能值得參考的其他想法

分析受測者在測試中產生的大大小小問題,作為設計嘗試的指引,下次測試時觀察這些問題有沒有順利被解決,最後請 UX 設計師再次確認:是否有效達成頁面目的、操作動線具合理邏輯、清楚傳遞主次資訊。

3 ✦ 呈上主管

把經過內部驗證的最終理想方案呈上給主管,重點交代:頁面目的和情境、選擇這個方案的原因,有需要的話可以提及嘗試過程。如果有多個方案要再補充「自己傾向」的版本,說出自己的想法,而不是把選擇權都丟給主管!就像請朋友推薦美食,如果對方一下子丟出多間餐廳,我們很容易陷入無所適從,通常會再追問「那你有沒有最推薦的?」做為判斷基準之一。

即使最後不是選擇你偏好的方案,至少已經做到了問題的簡化,節省主管做決定的時間,讓主管知道你的思考脈絡。甚至能進一步瞭解為什麼主管會做出跟自己不一樣的選擇,自己是不是少了全盤的考量,藉此擴充思考廣度 🧠

結語

在我的愛書《成為自由人》裡,作者寫到「日本的民族性非常在意細節,他會在你以為已經夠好的地方追求更好,在你以為沒有能夠改進的地方找到新的契機。一件事、一件作品,若是每個環節都差百分之五、甚至百分之一,整體就會天差地遠。」

看似繁瑣的一連串嘗試和驗證流程,為你帶來是跳脫個人主觀的設計,不要過早就輕易滿足於現況,更不是要強求一開始就能做到位,在關鍵之處多方探索,找到下一個「更好」,層層堆疊出達到你心中門檻、超越客戶期待、精準打中用戶需求的作品 🎉

對於本文有任何建議、回饋、想法,歡迎在底下留言!也可以透過我的 Facebook 聯繫我 🙌🏻

--

--

Kathryn Wang

先好好過生活,才能好好做設計🌞 ig: @read_and_reframe