成為更好的產品設計師(ㄧ)：水平延展思考
【本文適合想提升自己設計實力及思考能力的讀者】
這篇文章生成的原因，來自工作上所學的心得。在學校時，我們所做的Project大部分是在最完美的假設下進行。但真實世界裡的使用者流程和情境通常是多元、不規律的，單一的設計會導致原本UX flow或UI沒辦法達到預期的效果。
因此，在本文裡，想要提醒設計師及開發者，在設計時可以多多考量的元素，讓設計本身更有彈性，去應付不同的現實狀況。以下是文章架構：
- Introduction
• What is a good design? 什麼是好設計 - Horizontal Thinking 水平延展思考
• Think about Devices/Screens 考慮在不同裝置/螢幕大小的表現
• Think about Scenarios/Edge Cases 考慮不同使用情境下的呈現
• Think about Versatility/Scalability 思考設計的延展性/規模化 - Takeaways 重點整理
- References 參考資料
1. What is a good design? 什麼是好的設計
首先，我們必須先了解什麼是好的設計，才能解釋如何提升到另個層次。簡單帶過兩位知名大師提出的準則：Don Norman & Dieter Rams。
UX界的經典人物、Nielsen Norman Group 的創辦人Don Norman在Ted Talk: 3 Ways Good Design Makes You Happy提到好的設計是讓人愉悅的，有三種方法可以達到此目的，以衣服的例子來說明：
- Visceral experience: 視覺上的愉悅感
美觀、好看、適合身形、良好剪裁的大衣 - Behavioral level: 使用者與產品間的互動，包含功能、表現、易用性等
保暖、排汗、輕盈的外套 - Reflective experience: 產品的意義、所呈現的意涵
阿嬤親手織給你的毛衣，充滿童年的回憶
有興趣的朋友，同時可以參考德國工業設計大師Dieter Rams於1980年代提出的好設計十大準則，雖然起源主要指的是工業設計，隨著時代轉移，這些準則也在UX界備受重視。
2. Horizontal Thinking 水平延展思考
2.1 Think about Devices/Screens 考慮在不同裝置/螢幕大小的表現
身為一個專業的設計師，在設計介面時，必須考量在不同裝置、螢幕大小下的產品表現，即是在2010年Ethan Marcotte提出的設計概念：Responsive Web Design(RWD)響應式網頁設計。RWD的目的是在不同的裝置下，最佳化使用者的瀏覽經驗。
RWD為什麼重要？
- 越來越多人使用行動裝置瀏覽網頁 — 根據Statcoutner的研究：由於行動裝置的普及，2016年手機瀏覽網頁的比例首次超越桌上型電腦。
- 行動裝置帶來的商機 — 於2015年節日期間，1/3的使用者在手機上完成購物 (Amazon超過70%)
- 保持使用者經驗的一致性—不論裝置大小，使用者可以清楚了解網站目的，輕易操作
(想知道更多的原因請參考8 reasons to have a responsive web design)
那在設計上如何實踐，以下是我本人的方法，大家可以斟酌參考
步驟ㄧ：清楚網頁目的與內容
首先，設計師必須十分清楚此網頁的目的，不論是增加下載次數、商品轉換率，或是Subscription。可以跟產品經理再三確認，或是與研究員、客服部門交談，了解使用者現在的流程及困難處。
步驟二：了解技術限制
在此簡單介紹RWD的方法，目前主要有兩種方式構成Responsive，分別是Fluid與Adaptive。
Fluid
Fluid字面上是指流體，就像水一樣，遇到不同的容器，水會隨著容器變形。
而在RWD裡，Fluid的在CSS呈現方式是百分比，指的是物件與螢幕之間的相對關係。運用比例去敘述物件的大小，而非固定的衡量單位。物件隨著螢幕大小的改變，比例不變，藉而達到縮放的效果。
例如，Hero Image是螢幕寬度的80%，因此不論螢幕大小怎麼變化，相片與螢幕的相對比例並不會改變。
缺點在於，在小螢幕上瀏覽的經驗可能會造成以下問題：字體過小、CTA不明顯、使用者必須放大才能看清楚等。
Adaptive
Adapt是指適應的意思，通常會有不同的設計版本。在RWD我們常聽到Breakpoints，設計師或開發者定義出螢幕大小的分界點，到達某一個寬度，Layout隨之改變，但還沒到達分界點時，Layout並不會改變。
缺點在於設計師必須設計不同的版本，較耗時間。
Responsive
最後，Responsive綜合了Fluid與Adaptive的優點，定義Breakpoints(Adaptive)，其餘隨著螢幕大小做比例上的變化(Fluid)。
步驟三：進行設計
了解網頁目的與限制後，再進行設計會更有效率，主要有兩種策略：
- Graceful Degradation (Top-Down) 從大螢幕到小螢幕 (上到下)
先設計一般瀏覽器的介面，再去思考較小的裝置。基本上會運用到CSS Grid Layout的方法，在此不多做說明。 - Progressive Enhancement (Bottom-Up) 從小螢幕到大螢幕 (下到上)
由於越來越多人使用手機瀏覽，因此Mobile-first的觀念漸漸盛行。先設計小螢幕的介面，再延展到桌面瀏覽器。
有一個觀念很重要，沒有什麼是最好的方法。設計師可以根據每個網頁的目的、或是使用者的習慣選擇切入的策略。我個人較習慣Top-Down的方法，但是由於越來越多Transaction是在手機上進行，因此公司希望我們更重視Mobile-first的使用者經驗。
在網頁設計 : Atomic Design簡介及工作實例有稍微提到工作實例：
另外，不得不介紹我最近很喜歡的網站KBS, Canada，對RWD有興趣的朋友一定要點進去看，他們的Responsive實在是太優雅了，桌面與手機的UX幾乎沒有區別，結合得十分巧妙。
Responsive Web Design的方法十分多元，市面上有許多套用的軟件，Bootstrap, Webflow等，在本文只是蜻蜓點水，RWD的知識博大精深，有興趣的朋友可以留言，我們可以特別介紹RWD。
2.2 Think about Scenarios/Edge Cases 考慮不同使用情境下的呈現
在設計時，我們常常一開始都是以最完美的情境下進行設計(Happy Path)，因此會忽略了不同情境的呈現，會造成開發部門資源的消耗，及使用者的困惑或挫折感。因此，在剛開始著手設計時，能將不同Scenarios(Unhappy Path)納入考量，能夠更全面的確保使用者經驗的一致性。
以下簡單介紹五個我常遇到的Scenarios：
- First time use: Tutorials & Onboarding 第一次登入
- Empty States 空白頁面
- Loading Screen 載入動畫
- Error States 錯誤頁面
- Confirmation dialog 確認訊息
First Time Use: Tutorials & Onboarding 第一次登入
在使用者第一次登入時，常常會看到許多說明的指標，目的在於介紹使用者如何操作產品，或是有新功能時，也會運用此方法抓住使用者的目光。如何不過度的呈現資訊，但又可以清楚說明，是設計的目標。
有興趣的朋友可以參考：
- How to Turn Onboarding into an Amazing First Date with Your User
- Best Practices for Onboarding
- The 5 ‘Best’ User Onboarding Examples
Empty States 空白頁面
當使用者還沒創造任何內容時，難道畫面就一定是空白的嗎？善用空白頁面，可以指導使用者如何運用產品、鼓勵使用者與產品互動。
請參考：
Loading Screen 載入動畫
在資料載入的同時，與其讓使用者傻傻盯著螢幕、或是簡單的Porgress bar，不如設計有趣、好玩的動畫，提升使用者經驗。
Error States 錯誤頁面
好的錯誤訊息設計，能提供使用者有用的資訊、降低焦慮，適當的幽默還可以提升好感。Chrome Dinosaur是經典的例子，在沒有網路連結時，會有一隻小恐龍出現，只要按下空白鍵，就會有小遊戲出現。在敘述中，有禮貌地告知使用者可以如何解決問題。
請參考：
Confirmation Dialog 確認訊息
Mailchimp的Confirmation screen是經典中的經典。Mailchimp是一個Email Marketing的工具，使用者設計完Email內容後，要一次寄出大量的信件，想必讓人十分緊張。
Mailchimp結合Branding，運用詼諧的方式，讓使用者會心一笑，網友瘋狂轉傳跟Chimpanzee擊掌的照片。
2.3 Think about Versatility/Scalability 思考設計的延展性/規模化
設計其實像是衣服，有些單品十分搶眼，但你可能只會穿一次。一個好的設計，可以重複搭配，卻看起來新穎。尤其是B2B的產品，可以根據客戶的要求做調整，盡可能的重複利用設計元素，減少開發時間，卻能帶來有影響力的改變 — 模組化Design Library 即是其中一個Powerful的策略。
先前文章，網頁設計 : Atomic Design簡介及工作實例，提到Atomic Design的設計概念。 善用Design Pattern Library元件庫，可以在短時間內，確保產品外觀與互動的一致性，減少開發時間與精力。
有興趣的朋友可以閱讀：
3. Takeaways 重點整理
恭喜你看完本篇文章！
文章一開始，我們提到了好的設計是會讓人開心的，可以從產品的外觀、功能性及情感切入。由於在現實狀況下，我們無法預期產品使用情況，因此如果能在設計時，將不同的情境納入考量，水平延伸思考，可以減少開發時間、確保使用者經驗的一致性、延伸產品的廣度。包含：
- Think about Devices/Screens 考慮在不同裝置/螢幕大小的表現
Responsive Web Design(RWD)可以最佳化在不同裝置下的使用者經驗，設計的步驟為：清楚網頁目的→了解技術限制(Fluid, Adaptive, Responsive)→進行設計 - Think about Scenarios/Edge Cases 考慮不同情境下的呈現
設計時應該考量不同的使用情境，在文章中提到了五種使用狀態：
– First time use: Tutorials & Onboarding 第一次登入
– Empty States 空白頁面
– Loading Screen 載入動畫
– Error States 錯誤頁面
– Confirmation dialog 確認訊息 - Think about Versatility/Scalability 思考設計的延展性/規模化
善用Design Pattern Library元件庫，可以確保產品一致性並減少開發時間
不過這界線必須小心拿捏，如果一開始想得太廣太深入，可能會侷限了設計的可能性。
寫這篇文章的原因，主要是因為與工程部門溝通時，會發覺自己的設計並不完整、還可以更好。如果能夠盡可能地全面考量，並提出自己設計的理由，更能夠讓團隊信服你的專業程度。
以上是精簡過後的內容，每一個Bullet Point都可以寫成一篇文章。希望這樣的entry point，可以讓大家較輕鬆地吸收。有興趣的朋友可以點擊相關連結，或是在底下留言回覆。
非常感謝大家！我們下個月見 :)
4. References 參考資料
- 非讀不可：德國工業之父好設計的十大準則
- What is the difference between fixed, fluid, adaptive and responsive layouts and why should I care?
- What’s the Difference Between Fluid, Adaptive, and Responsive Design?
- How to be Successful with Responsive Sites
- Designing for the edge cases
- How to design Goldilocks user experiences by keeping these states in mind
- 5 Essential UX Rules for Dialog Design
- The Nine States of Design
- How to fix a bad user interface
- Designing Products That Scale
