設計造成的體驗破壞 — 如何清還「設計債」
產品設計除了審美之外，最重要的是通過設計解決使用者的問題、實現產品的目標。當產品隨時間變得越來越複雜，產品就會慢慢浮現視覺問題，例如老舊的陰影樣式，或者不符合新的品牌形象的線條粗細。
除了視覺問題造成品牌形象淡化之外，設計債更影響了設計師的工作效率或阻礙產品經理的需求提案，最嚴重的狀況是造成使用者體驗不佳。
設計債讓你拿到像被轟炸過的設計文件？
設計債讓你永遠找不到頁面規格？
明明設計稿是 #333 為什麼上線的產品是 #999？
如果你的設計環境就像核爆現場一樣，我想跟你分享我過去作為設計營運做了各種嘗試的還債經驗。
看完之後可以更了解
- 什麼是設計債
- 設計債造成的影響
- 設計債的成因
- 如何處理過去、現在、未來的設計債
一、什麼是設計債？
設計債是由技術債延伸出來的概念，它是由 Ward Cunningham 在 1992 年提出的一種術語。
所謂的設計債是指設計師在執行專案的時候，為了加速作業時間，或者因應 PM 需求，優先考慮更快的解決方案，在沒有完整考量設計系統的情況下，產生難以維護又沒有文件留存的債務。
設計債的產生是無形的，雖然短期內可以讓開發團隊得到好處，但是犧牲的代價卻是產品的使用者體驗。
設計師出來混總是要還的，如果你欠債不還，使用者就會用憤怒替你還債。
時間資源的利用
以圖表來看資源的維度，每一條紫色的線代表時間，我們可利用的時間資源是固定的，所以每一條線的長度是一樣的。上方代表我們可以用來探索新功能的時間，下方代表我們在複雜的事情和債務中掙扎的時間。
最終，當我們需要花費更多時間處理設計債務時，將只剩少量的時間可以專注在新項目的使用者體驗和研究中，導致團隊在執行新專案的時候容易落入低層次的討論。例如：「 Button 的高度到底是 44px 還是 48px？」
我們會花費更多的時間維護設計外觀，而降低能夠真正創造價值的時間。
設計債的影響
具體來看設計債的影響如同前述，設計師會花費太多時間解決現有系統的問題，導致我們沒有時間增加設計對產品的價值。
使用者也會在我們推出新功能時，在使用過程中發現既有的淺在的缺陷，而影響新功能對使用者的體驗，這意味我們也需要額外花費時間先修復這些缺陷來確認使用者對新功能的體驗。
當產品經理想要主動因應市場變化快速規劃新的功能時，由於產品流程的複雜性和文件規格缺漏的情況，讓我們在專案中花費更多力氣解決新舊衝突。
設計文件也會在債務累積之下，逐漸變得龐大、複雜，讓接手的設計師難以閱讀或尋找這些文件，尤其早期的設計師已經離職，我們也無法回朔當初的環境。此時，若設計師使用舊的設計稿複製貼上在新的專案中，也會額外貼上一些不必要的內容，讓稿件的處理變得麻煩。
設計債是一種慢性病
除了影響專案的執行難度、降低實作的敏捷性，淺在缺陷還會影響功能價值，降低新功能對市場的競爭力。最後，設計債造成糟糕的體驗在使用者的潛意識中累積，讓使用者對產品的期望值下降，進而開始尋找其他替代產品。
這樣的因果關係被用戶體驗設計師 Mark Boulton 稱為「Marginal Degradation of Brands 品牌邊際退化」。
設計債的成因
- 設計師未完成基礎的設計流程
設計債的產生很多時候和設計師未完成設計有關，有時候我們為了快速或方便，略過其中幾個步驟，例如：修改系統元件、定義規格、移除不要的資訊、命名或加入註解。這些債務通常會持續累績，因為設計師很少修正過去的文件，而時間會讓習慣形成比較差的設計文化。 - 缺乏檔案整理，產生大量腐爛的設計文件
有時候設計師為了提升工作效率而使用「拋棄式文件」，意指交付後即堆積在資料夾中，沒有標注狀態或有規則的整理公開，日積月累連自己也不知道那些檔案的內容物是什麼。 - 脫離原有系統的設計
因為文件資料不齊全，設計師在進行新的專案時，乾脆自行重新設計既有樣式，並祈禱未來會逐步將所有樣式更新。事實上，設計師的祈禱通常不會發生，因為你永遠不會知道這些翻新的時機在什麼時候，尤其當你沒有更新設計系統的文件，接手的設計師就沒有辦法繼續做下去，所以千萬不要用祈禱法進行設計翻新。 - 沒有系統性的重新設計
東補一塊西補一塊是我們最常見的還債模式，但沒有經過系統性的計畫，這樣其實是在無形中持續產生設計債，因為當我們沒有確立一致的目標時，每位設計師的新設計無法有效的整合，導致一個產品有數種風格。
以上是幾個在設計師在工作中比較常見的設計債來源。
這裡再條列其他設計債可能產生的原因，但這不是全部，只要設計師和開發團隊想要走捷徑完成開發項目，設計債就會產生。
- 缺乏風格定義或設計系統來構建未來的設計工作
- 使用第三方前端樣式缺乏自定義
- 測試市場的 MVP 上線後沒有後續的追蹤和優化
- 專案會運用跨組資源卻沒有周全的協作
- 設計師沒有資源或沒有確實審核完成品
設計債是資源與技術之間平衡下的選擇，我們不是完全不能產生，而是要持續記得這些債務，讓團隊了解品牌邊緣退化的危險。
二、逐步解決設計債
了解設計債的成因和風險，大家可能會急著想要快點解決債務，因為每拖一天使用者的怒氣就會多累積一些，但我們還是需要有計畫性的循序漸進。
接下來要談一談我們該如何處理過去的、現在的、未來的設計債。
在處理債務前，我們必須要有計畫性的開啟這項工作，所以我會分成三個部分依序處理。
- 減少設計債的持續增加
- 讓問題可視化
- 解決既有的債務
減少設計債的持續增加
在我們持續還債之前，必須先減少新的設計債產生，如果你在還債的時候債務又不斷增加，而且算上利息還大於你的還款是一件很不划算的事，所以我們要來談如何減少設計債的產生。
- 定義當前的設計系統
如果當前的設計系統不完全，設計師可以先著手定義當前的設計系統，讓現階段的專案能夠暫時運行在軌道上。
設計師可能會遇到你覺得有些地方做得太爛了想要現在重做，也許是卡片樣式或某個功能流程，但是這樣做其實很危險，因為它可能會讓你創造一些新的設計債，所以根據當前的設計系統進行設計可以減少設計債的產生，也更以讓你全盤了解之後要翻修的元件有哪些。 - 定義什麼是完成
明確定義「完成」交付的條件，可以讓設計師充分了解需要花費的時間，並將這些作業時間納入專案估時，這樣可以減少設計師因為時間不足產生的快速交付行為。未完成的工作會浪費我們未來的時間、精力，甚至對使用者的信譽，所以設計師要盡可能的避免這種設計債的產生。 - 歸納現有的設計文件
資訊整理對設計師來說也是必要的工作能力，我們必須利用檔案編排與描述，將正確的最終檔案文件化，讓其他協作的設計師或開發人員了解現況。 - 債務透明化
設計師也需要將債務透明化，盡可能的將手上的資料整理並運用無論是 Google Drive 還是 Figma 公開讓團隊成員知道，這樣我們就有足夠的資料注意現有債務然後進一步思考如何改善。
其實所有的做法都在定義設計師的自我管理能力。
最低標準的設計
如果設計師無法確定我們在過程中是否產生設計債，可以嘗試透過以下幾個 Check List 了解。
- 你是否完成基礎的設計流程？
- 你是否在有依據的情況下進行設計？
- 你的設計是否符設計系統或品牌形象？
- 你的設計是否建築在 Fundamental Heuristics of UX 之上？
讓問題可視化
接下來，我們需要想辦法衡量問題，才能有辦法在未來改善它，所以要讓問題可視化。
- 了解和業務有直接/間接影響的債務
我們需要先去了解和業務有直接影響的設計債，例如：令人困惑的主頁導致高跳出率，或者複雜的流程導致低轉換率；和業務有間接影響的可能是產品摩擦而導致的用戶流失。
簡單解釋「產品摩擦」指的是產品中任何可能讓使用者改變行為的東西，它可能是一個 CTA 的位置或是一個產品的功能。 - 使用者研究/使用者回饋/數據觀察
我們了解債務的方法可以透過使用者研究、使用者回饋或數據觀察，我們必須花費時間正確理解產品所面臨的問題，否則未來的優化方向很有可能是老闆要的，卻不是使用者的需求。 - 不要糾結與成效低關聯性的細節，優先整理可評估的債務
注意這個過程中我們要討論的是對使用者有嚴重影響的設計，所以要避免因為強迫症而糾結於每一個元件的外型和細節，否則會讓我們花費太多時間停滯不前，所以債務的可評估性也是一個測量的指標。
定義還債目標
開始還債前，最重要的工作是我們必須先「定義我們希望透過處理債務實現的設計和業務目標」，這可以協助團隊成員清楚知道自己應該為什麼目標而努力，此外還可以幫助設計師向外溝通以及推動這項專案，使得專案在公司內部獲得支持和資源。
簡單舉例：我們希望產品介面更符合現代趨勢，提供新的品牌包裝進行行銷推廣。
請注意！「體驗優化」是一個含糊的意思，所以你定義的目標不能只有體驗優化，我們需要明確定義改善什麼體驗並帶來什麼優化效果，定義越明確對我們正在做的事情越有幫助。處理現有債務
了解還債目標之後，我們要進一步了解設計在產品中的路線圖。
以現況來說，如果你已經知現況有非常多的設計債，包括因爲迭代而產生不同的設計風格，或龐大又不明確的設計資產，面對比較複雜的設計債時，我們需要從最基層的架構開始慢慢梳理。
- 了解產品需求和市場定位
知道自己是誰、要成為誰，並嘗試了解競爭對手，可以讓接下來的設定更明確，也可以讓我們從中探討如何建立差異化。 - 確立風格
根據先前對產品及市場的分析進一步確立品牌風格，並製作風格指南，確保公司的品牌從設計到產品保持一致。若你的團隊早就建立好風格指南，也可以趁這個時候重新檢驗是否符合當前的定位。
很好！大方向都明確定義了以後我們就可以進入實作的部分。 - 根據風格定義基礎元件與體驗
我們可以藉由現有的設計系統逐步調整基礎設計以符合品牌風格，並且優先改善先前找出的可視化的嚴重問題。 - 重新建構畫面
在處理設計債的時候不建議大規模的進行重構，因為這樣會交互影響使用行為，並且容易讓使用者因為大量的改變而產生抗拒。還債並不是提供新的功能或重大變革，最好的方式是循序漸進並且讓使用者好感提升又不會造成太刺激性的影響。
總結來說，清還設計債的工作可以分成四個階段。第一階段：整理債務並透過整理設計系統和交付流程，減少設計債的產生。第二階段：定義還債目標、確定視覺風格。
第三階段：根據確定的視覺風格重新審視基礎元件和體驗，並以嚴重影響業務的問題為主。
第四階段：依照基礎元件重整畫面。
我們再以圖表重新看資源的維度，當我們減少設計債的產生後，設計師可用於探索新功能的時間就會相較原本增加。
但必須要了解，設計債不可能永遠消失，也不可能完全不增加，儘管開發團隊中只有一個設計師也無法做到百分之百的控管。
我們可以做的是運用前面所說的方法盡量減少設計債的產用，最重要的是維持擴展性和變更的彈性，在必要的時候過去的建置可以幫助我們更清楚明確的進行重構。
三、設計系統 Design Systems
在處理設計債的時候我們一定需要 Design System 的輔助，Design System 和 Style Guide 不太一樣，Style Guide 是比較封閉式的大框架，告訴你品牌的全貌；Design System 是一種做產品的工具，它是動態的，會隨著需求增加或減少，但無論如何我們都要以 Style Guide 去擴展設計系統，不能隨意創造脫離品牌的設計。
* Design Systems 是工具但不是唯一準則
* Design Systems 是動態並可擴展的，隨需求增加或刪除
* 以 Style Guides 擴展而非創造脫離品牌的設計Design System 必須要有完整的定義才能幫助每次設計迭代的時候，我們可以更有系統性的進行重構，但這不代表所有頁面中的細節都需要在 Design System 中定義，我們只需要定義必要的內容。
* 只定義必要的內容而非所有細節
* 完整的定義幫助每次的設計迭代四、總結
設計債的累積最終會影響品牌的信譽也會損失產品的使用者。
每個團隊的做事方法不同，所以對待設計債的方式也不一樣，沒有所謂通用的最好的方法，我們必須通過重複的嘗試和校正，找到最適合的合作方式，降低設計債累積的風險。
祝設計師們還債順利！
