如何設計不難用的UI表單?(理論篇)

產品設計是一門雜學,牽涉的東西多如牛毛,從最基本的美學、人因工程學,商業思考到行為經濟學、心理學。今年年初在諸多的因素影響下,想將自己在工作上的經驗分享給大家。

表單(forms)是什么?

表單在數字產品設計里面,想必是每個產品設計師一定會碰到的設計樣式(UI pattern)。常用于登入,用戶回饋,填寫用戶資料等以及任何需要組織整理數據的手段。

在表單設計當中,已經有許多已被A/B 測試驗證過可以有效增進易用性(usability)并進而增加轉換率(conversion rate),在設計任何表單之前,我們可以通過接下來要介紹的方法,去評估自己所設計的表格。

如何設計良好的表單?

在設計表單之前,我們可以把表單想成是一段對話,一段你跟用戶之間的互動。假設你是一位銷售員,在賣的商品的時候,第一個要建立的是什么?建立信任關系,有了信任關系之后,才會有后續的事情發生。

而設計表單也是一樣的,表單的設計第一件事情就是要提供情境給用戶,讓用戶覺得可以信任目前所看到的資訊,進而將自己的資訊提供給我們。尤其是現在個人資安問題日益嚴重,提供足夠的理由及意圖給用戶,是設計表單的第一步。

接下來要做的事情就是,你要怎么去架構你的對話,舉個最常見的例子Gmail 登入頁面:

當用戶點“登錄 ”之后,會被帶來這個畫面,看似簡單的畫面,其實里面卻暗藏了需多需要注意的部分,姑且分為九個部分去看。

1,因為在上一個頁面,用戶的意圖是要登錄Gmail,因此你可以看到google的logo以及標題為登錄,首先建立信任關系。

2,建立完信任關系之后,接下來就是提供用戶情境。繼續使用Gmail則是讓用戶的意圖獲得足夠的驗證。

3,確認以上兩項之后,用戶就可以填入自己的信息。此時會發生許多有趣的事情,稍后在表單設計最佳典范會提到。

4,如果在當下用戶沒有辦法獲得或是忘記自己的信息,在此情境中,我們就必須提供足夠的信息或是動作(Call to action)讓用戶可以重新取得所想要的信息。

5,第五點也是在傳達Google這家公司是注重信息安全,也是建立信任的一環。當然還有其他意圖,我們在這邊就不細談。

6,防止錯誤發生也是一個在表單設計中很常見的設計思維。用戶在登錄頁面時,有可能不一定是想要登錄,而是注冊,此時我們就需要提供另外一個連結(entry point),防止他迷失在流程中,同理在注冊頁面也時常提供登錄的連結。

7,在這表單最重要的兩個動作是1)填入email. 2)繼續。因此我們可以看到繼續是采用主要動作(primary action)的表現手法,都是以次要動作(secondary action)去表達。

8,這邊提供可以快速切換語言的功能,以免當下你所用瀏覽的語言并非你常用的語言。當我們為提供多國語言的平臺做表單設計時,時常要考慮的就是多國語言的限制,比方說:俄羅斯文有時會比英文長很多,中文是方塊字型因此排版上比較不會有過長的情況,但是字體、字距等等的其他變數也需要考慮的比較多。

9,尤其是在登錄頁面,很多隱私條款或是需要尋求協助,因為法規或法律的因素,會將這些資訊放在最下方以第三級動作(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」,通常這類的錯誤會顯示在操作端附近或是用戶可以馬上看到的位置。

而驗證錯誤,則是在輸入結束后(少量用在輸入過程中),偵測到異常后所產生的回饋,也是我們妥善地使用進而引導用戶走向正確的道路。

上下左右要放哪里

你希望用戶會在欄位的哪個地方看到顯示的錯誤信息?如果錯誤信息沒有擺放在正確的地方,你可能會讓用戶無法完成你的表單。當錯誤產生時,他們需要知道如何去修正并重新送出。

研究指出將錯誤信息放置在欄位的周圍可達到最佳的效果。尤其是右邊以及下方更為直覺。

為什么在右邊是最好的?因為在西方的閱讀系統是由左至右(當然中文也因此受到影響),當用戶從欄位移動到錯誤信息,很自然的會將眼睛移到右方,看到錯誤信息后再將輸入的部分修正。

由于我們現在是處于手機優先的時代,手機上并沒有太多的水平空間可以讓我們運用,因此我們大多數看到的錯誤信息是顯示在下方的。

 

 

 

作者:Jeremy?

插畫:Joyce

每天更新,
全站高品質素材免費下載!