UX 101 episode 1: Don’t make your form suck! part 1如何設計不難用的表單？概論篇
Hi ，大家好！我是Jeremy，一名產品設計師，2017年初加入Agoda，Agoda是一家持續快速成長的線上旅遊平台，目前在全球有30+營運事業部，去年將近有三千四百多萬名遊客在Agoda預定住宿及機票，當許多公司還在用銀彈去瓜分市場時，Agoda依舊是成長與利潤並進的旅遊科技公司。
什麼是UX 101
產品設計是一門雜學，牽涉的東西多如牛毛，從最基本的美學、人因工程學，商業思考到行為經濟學、心理學，族繁不及備載。今年年初在諸多的因素影響下，想將自己在工作上體悟的基本分享給大家，所以才開啟了這個“UX 101”的專案，希望藉由分享自己的觀點，與其他的工作夥伴進行對話。
那就廢話不多說，開始今天的主題 “Ep1 如何設計不難用的表單”
主題大綱
- 什麼是表單
- 如何設計良好的表單
- 表單最佳範例
- 表單中的錯誤訊息
表單(forms)是什麼？
表單在數位產品設計裡面，想必是每個產品設計師一定會碰到的設計樣式(UI pattern)。常用於登入，用戶回饋，填寫用戶資料等以及任何需要組織整理數據的手段。
在表單設計當中，已經有許多已被A/B 測試驗證過可以有效增進易用性(usability)並進而增加轉換率(conversion rate)，在設計任何表單之前，我們可以透過接下來要介紹的方法，去評估自己所設計的表格。
如何設計良好的表單？
在設計表單之前，我們可以把表單想成是一段對話，一段你跟用戶之間的互動。假設你是一位銷售員，在賣的商品的時候，第一個要建立的是什麼？建立信任關係，有了信任關係之後，才會有後續的事情發生。
而設計表單也是一樣的，表單的設計第一件事情就是要提供情境給用戶，讓用戶覺得可以信任目前所看到的資訊，進而將自己的資訊提供給我們。尤其是現在個人資安問題日益嚴重，提供足夠的理由及意圖給用戶，是設計表單的第一步。
接下來要做的事情就是，你要怎麼去架構你的對話，舉個最常見的例子 Gmail 登入頁面
當用戶點“登入”之後，會被帶來這個畫面，看似簡單的畫面，其實裡面卻暗藏了需多需要注意的部分，姑且分為九個部分去看。
- 因為在上一個頁面，用戶的意圖是要登入Gmail，因此你可以看到google的logo以及標題為登入，首先建立信任關係。
- 建立完信任關係之後，接下來就是提供用戶情境。繼續使用Gmail則是讓用戶的意圖獲得足夠的驗證。
- 確認以上兩項之後，用戶就可以填入自己的資訊。此時會發生許多有趣的事情，稍後在表單設計最佳典範會提到。
- 如果在當下用戶沒有辦法獲得或是忘記自己的資訊，在此情境中，我們就必須提供足夠的訊息或是動作(Call to action)讓用戶可以重新取得所想要的資訊
- 第五點也是在傳達Google這間公司是注重資訊安全的訊息，也是建立信任的一環。當然還有其他意圖，我們在這邊就不細談。
- 防止錯誤發生也是一個在表單設計中很常見的設計思維。用戶在登入頁面時，有可能不一定是想要登入，而是註冊，此時我們就需要提供另外一個連結(entry point)，防止他迷失在流程中，同理在註冊頁面也時常提供登入的連結。
- 在這表單最重要的兩個動作是 1) 填入email. 2)繼續。 因此我們可以看到繼續是採用主要動作(primary action)的表現手法，都是以次要動作(secondary action)去表達。主要動作與次要動作的區別在之後的UX 101陸續提到。
- 這邊提供可以快速切換語言的功能，以免當下你所用瀏覽的語言並非你常用的語言。當我們為提供多國語言的平台做表單設計時，時常要考慮的就是多國語言的限制，比方說：俄羅斯文有時會比英文長很多，中文是方塊字型因此排版上比較不會有過長的情況，但是字體、字距等等的其他變數也需要考慮的比較多。
- 尤其是在登入頁面，很多隱私條款或是需要尋求協助，因為法規或法律的因素，會將這些資訊放在最下方以第三級動作(tertiary action)的方式呈現（是說大概也不到5%的人會去仔細看條款）。在同一個畫面中，最好不要超過三種層級的動作，來有效的降低視覺噪音(visual loudness)的比例。
呼，短短的一張表單，竟然有那麼多小細節必須被注意，可見產品設計師每天都在跟那麼多小細節在戰鬥（淚）。
接下來為了讓大家少走冤枉路，整理了一些**最佳範例(Best practices)**供大家參考。
設計表單的最佳範例(Best practices)
以下要分享的Best practices，是我認為產品設計師每天工作上常會碰到的問題。這些案例是由各家平台自行測試過後所呈現出來的結果，但不代表這就是對你的產品最好的解，每一個產品特徵都是需要被經過驗證的，但是也因為有這些前車之鑑，讓產品設計師在每天的工作中少走了一些冤枉路。
去除所有非必要的欄位
Expedia 再經過測試後，發現加了一個額外的欄位(公司名稱)在訂購表單中，讓expedia每年損失了一千兩百萬美元；Marketo也發現一些沒必要的欄位，讓他們的花費增加約25%。
當我們在設計表單時，要避免提供多餘的欄位或是過長的表單，但萬一我們仍然想要收集到使用者的資料，那可以使用條件式邏輯或是非必填的選項來增加完成率。
條件式邏輯是當用戶回答某個問題在你預期的狀況下，你可以顯示後續你想要了解的問題，常用於滿意度調查的表格。
上方置左的標籤(Top-left aligned labels)可最佳化可閱讀性及完成度
Google的UX研究員發現將標籤放在欄位的左上方優化了表單的完成時間，這是因為它需要較少的視覺專注。可以看到左邊的圖中，有較多的視覺往返，而改善後的表單中，是較為垂直的掃描。
現今已經很少看到左手邊的表單設計，但是我們依然可以記住一件事情，就是如何降低阻力，在使用者經驗裡，是非常重要的一件事情。
何時使用單選按鈕(radio button)、複選按鈕(checkboxes)、下拉式選單(dropdown)、切換(toggle)。
哇！講到這邊，估計都可以另外寫一集來分享四個之間的不同。今天就從概論的方式來說明，這四個控制介面元件(control UIs)為表單設計中最常用的四種。
- 單選按鈕(radio button)
一般來說，單選按鈕常用於在一群選項中只能選一個的情況下作使用，這種情況下也可以使用小圖示來表示
- 複選按鈕(checkboxes)
常用於選擇多個選項，例如完成待辦事項清單。
- 下拉式選單(dropdown)
下拉式選單較前兩個複雜，可以做為多選或單選使用。如果可能的話，盡量使用單選或複選按鈕來減少認知負荷和點擊次數。
- 切換(toggle)
切換通常用於只有二選一的狀態，例如：開與關。
知道這些控制元件之後，就可以更有效地選擇哪一個最符合表單情境中的需求。
永遠顯示欄位標籤
如上文所說，欄位標籤通常位於欄位的左上方，而這些標籤應該永遠顯示在同一個位置而不該被預留的文字(placeholder)所取代，原因是當用戶開始輸入時，預留文字將會消失，用戶必須使用他們的記憶去回想剛剛的標籤是什麼。
看到這邊應該會有一些朋友開始質疑「剛剛google的登入表格不就是這樣用的嗎？」沒錯，當然也有特例，而這個特例是最近兩三年蠻常用的一個手法 — 文中標籤(inline label)或是浮動標籤。
當你在跟欄位互動時，預留文字會變成欄位標籤，此用意是為了不要讓表單佔用太多垂直空間，尤其是在手機優先(mobile-first)的時代，垂直空間的運用一直是被關注的重點。
使用預測收尋及自動填寫
當用戶在選擇他們的地址時，最好的方式不是讓他們把完整的地址一一的打出來，而是當用戶開始輸入地址時，預測他們實際的地址並且自動填寫。這可以有效地減少多餘的輸入還有認知負荷。
表單中的錯誤訊息
人非聖賢，孰能無過。但要預防錯誤的發生，便是產品設計師的使命，尤其是在表單設計當中，接下來就要看看如何在表單設計中有哪些錯誤訊息及擺放位置。
兩種錯誤訊息
通常的情況下，錯誤訊息有分兩種，第一種是系統錯誤，第二種是驗證錯誤。
系統錯誤是用於資料在傳輸過程中發生錯誤，其中有很多種可能性，像是突然沒網路，或是伺服器掛掉等等。而最常見到的訊息就是「something went wrong, please try again」，通常這類的錯誤會顯示在操作端附近或是用戶可以馬上看到的位置。
而驗證錯誤，則是在輸入結束後(少量用在輸入過程中)，偵測到異常後所產生的回饋，也是我們妥善地使用進而引導用戶走向正確的道路。
上下左右要放哪裡
你希望用戶會在欄位的哪個地方看到顯示的錯誤訊息？如果錯誤訊息沒有擺放在正確的地方，你可能會讓用戶無法完成你的表單。當錯誤產生時，他們需要知道如何去修正並重新送出。
研究指出將錯誤訊息放置在欄位的周圍可達到最佳的效果。尤其是右邊以及下方更為直覺。
為什麼在右邊是最好的？因為在西方的閱讀系統是由左至右(當然中文也因此受到影響)，當用戶從欄位移動到錯誤訊息，很自然的會將眼睛移到右方，看到錯誤訊息後再將輸入的部分修正。
由於我們現在是處於手機優先的時代，手機上並沒有太多的水平空間可以讓我們運用，因此我們大多數看到的錯誤訊息是顯示在下方的。
所以？下一步是？
講了那麼多，不動手做看看是不會知道要怎麼實踐這些原則的，下一篇Don’t make your form suck! part 2如何設計不難用的表單？實踐篇 ，將會以實際案例跟設計思考流程來解析如何從產品需求設計表單。
撰文：Jeremy
首圖插畫：Joyce
