UX 101 episode 2 : Don’t make your form suck part 2 如何設計不難用的表單?實戰篇

Jeremy Hsu(徐偉智)
AAPD — As A Product Designer
13 min readApr 15, 2019

大家好,我是Jeremy,一位產品設計師@Agoda. 今年三月底開啟了UX 101的專題,想藉由分享自己的觀點,並與其他夥伴進行對話。

還沒有看過上一篇的朋友可以透過以下連結觀賞全文,或是透過上一篇(EP1)的小結了解這篇的目的。

上篇(EP1)小結:

  1. 表單最重要的第一件事情是建立信任(build trust)
  2. 提供用戶足夠的意圖(intention)
  3. 使用在情境下最適合的控制元件(UI patterns)以減少認知負荷(cognitive load)
  4. 提供有效的錯誤訊息(error message)引導用戶更正錯誤並完成任務
  5. 測試你的產品,來驗證假設成立

那就廢話不多說,開始今天的主題“Ep2 如何設計不難用的表單? 實戰篇”

主題大綱

  1. C.R.A.P 你的表單
  2. 什麼是產品需求?
  3. 表單入門 — 登入頁面(login form)

C.R.A.P 你的表單

目前在產品設計領域裡,你時常會看到UX、UI、visual、UX/UI Designer等職稱,而Visual/ UI 時常被當作產品介面美化或是裝飾的角色,但我個人覺得這是一個常被誤解的現象,其實視覺在使用者體驗中,占了舉足輕重的部份,我們可以利用C.R.A.P原則去優化任何介面設計,不僅僅是表單。

事實上,C.R.A.P是從平面設計中衍生出來的原則:對比(Contrast)、重複(Repetition)、 對齊(Alignment)、接近性(Proximity)。

對比Contrast

對比在視覺設計(Visual design)當中,幫助觀看者的眼睛引導到什麼是重要的,而接下來要做什麼。也就是說將你想要使用者執行的動作(Call to action),或是任何你想要讓使用者注意的東西 — 做得跟其他元件在同一個頁面的元件不同。

哪一個按鈕(Button)對你來說你最想點?

來複習一下,假設這三個元素在同一個畫面時,從左至右分別是主要動作(Primary action)、次要動作(Secondary action)、第三級動作(tertiary action)。

在表單設計中,最後要確認或送出的按鈕通常都會以主要動作為主,因為在良好的對比下,我們可以讓使用者不需思考要選擇哪個按鈕,而達成任務。

重複Repetition

重複主要是在講一致性(consistency),這個原則主要是讓你所用的設計系統(design system)更容易使用跟被記住。而重複分為兩種重複,第一是內部一致性(internal consistency),第二為外部一致性(external consistency)。

內部一致性的元素有

  • 字型(fonts)
  • 顏色(colors)
  • 標誌(icons)
  • 標題(headings)
  • 連結(links)
  • 表單(forms)
  • 頁面排版(page layout)
  • 空間(space)

…等等,諸如此類的介面元素,也屬於設計系統內的範疇,其中最著名的設計系統,也是我們團隊使用的設計系統方法為原子設計系統(atomic design system),有興趣的朋友可以先去買書來讀,以後會再分享自己的經驗

外部一致性是指說在整個網路的世界裡,其他約定俗成的介面樣式(UI patterns),好比說,連結的顏色、標準按鈕的形狀等等。

Jakob Nielsen (Nielsen Norman Group 共同創辦人) 曾說過 “使用者較多的時間是在使用其他的網頁”。也就是說,人們對於網頁的預期是被他們在其他網頁上的經驗所塑形而成的。為了確保易用性,將頁面標題、頁面導航、收尋等的元素放在約定俗成的位置,可有效地增進易用性。

對齊Alignment

簡單的來說,就是把你的物件垂直&水平對齊,如果要細分的話,可以分為:

  1. 垂直對齊(Vertical Alignment)
  2. 置頂或置底對齊(Top or Bottom Vertical Alignment)
  3. 中心垂直對齊(Central Vertical Alignment)
  4. 水平對齊(Horizontal Alignment)
  5. 左右水平對齊(Left and Right Horizontal Alignment)
  6. 中心水平對齊(Central Horizontal Alignment)
  7. 媒體物件對齊(Media Object Alignment)
  8. 邊緣對齊(Edge Alignment)
  9. 視覺優化對齊(Optical Alignment)

而這些會因為情境下的不同,所選用的對齊手法也不同,而對齊也是一個常被使用增進易用性的做法。

接近性 Proximity

完形理論(Gestalt theory)學者認為,視覺感知通常會以整體來看,而非單一個體,也就是“整體大於個體的總合” (The whole is other than the sum of the parts.),

接近性的原則是指,當你將元件放在接近的位置,人會自然而然的認為他們之間是有連結的。

想了更多有關完形理論的朋友,可以參考Seal Tseng的“用「完形心理學」,增加介面設計有感度!” 在下方會附上連結。

什麼是產品需求、假設、使用者故事?

在敏捷開發(Agile development)的流程當中,產品經理會將他分析數據的結果,轉換成某種假設(hypothesis),基於這種假設上,會衍生出一個或多個產品需求(product requirements),而這些產品需求是要增進團隊的關鍵績效指標,進而增加公司利潤或是其他對於市場的認知與學習。

你可能會問說“Jeremy,這是產品設計師的工作嗎?這跟表單設計有什麼關係?“事實上,這是產品經理的範疇,但是身為產品設計師,必須了解這些是如何產生的,才能更清楚地去釐清最後的產出是否是與產品經理的想法是一致的。

在我們團隊中,簡化的流程約為:產出假設(hypothesis)→建立敘事故事(epics)→產品需求(product requirements)→使用者故事(user stories)

什麼是假設 Hypothesis

所謂的假設是一個可測試的宣言並且是利益關係人(skateholders)所相信的,時常有產品經理提出。

最常見的寫法是: 我們相信 [主題][問題] 因為 [原因],如果我們採取[行動],這個[指標]會有所改善。

例子: 我們相信登入頁面轉換率較低因為我們沒有其他選項可以登入,如果我們在登入頁面提供FB和google登入登入頁面的轉換率會提高。

什麼是敘事故事 Epics

敘事故事是由一個或多個產品特徵或功能集合而成。通常我們以我們要解決什麼樣的問題開始,比方說:增加FB登入選項在登入頁面上。接下來就是描述產品功能或是需求範圍,也就是我們常用的敘述故事規格(Epic spec sheet):

介紹

  • 概述你想打造的產品特徵以及為什麼要做他們
  • 哪些數據會透過這個敘事故事而改善
  • 詳細文件的連結 (通常是使用者故事或是專案的連結)
  • 行銷策略、法務需求
  • 早期線框圖(early wireframes)

產品需求

  • 產品特徵的需求

設計需求

  • 產品經理與設計師共同討論細節
  • 模板(mockups)、原型(prototypes)

工程需求

  • 產品經理與工程師共同討論細節
  • 必須包含一定要完成的工程細節

雖然設計需求只是四項中的一項,但是時常會因為產品或工程需求的變動而改變。

什麼使用者故事 user stories

使用者故事是一種用來敘述我們所要打造的產品特徵給終端使用者,最常用的模板是:

當我是X,我想要做Y,所以我可以Z (As an X, I want to do Y, so that I can Z)

會這樣使用的原因是在於我們可以藉由這段話去跟工程師溝通而不用說實際是怎麼做的。

打個比方:“當我是一位該網站的用戶,我想要直接用FB登入,所以我可以不需要去記住密碼。

而使用者故事通常都是產品經理與設計師開始一個產品特徵的媒介,其中會因為多次的討論而持續修正。最後的結論會被寫成驗收條件(acceptance criteria)

而驗收條件通常列出一系列的條件,而這些條件必須被滿足才可以在用戶端開啟這個產品特徵。

表單設計入門 — 登入頁面

當初任職的第一份任務就是優化APP的登入頁面,不要看登入頁面好像很簡單,從EP1的案例就可以看出來,登入頁面可是掌控了使用者流程到命脈,要如何在使用者的第一步盡量的減少摩擦與阻力,是非常值得反覆測試並驗證自己的假設。

除非你是從零開始要設計一款APP,大多時候產品經理都會用使用者故事作為溝通的橋樑並且說明產品特徵。以下所列舉出的案例(Awesome glasses),是希望接近真實的情況讓各位新舊朋友進入產品開發過程,並非設計登入頁面的鐵則且也未經過測試,僅是希望分享我個人如何思考怎麼去拆解需求與調整版面以達到易用性優化,在這裡再次強調,任何的設計都是需要被驗證的。

那廢話不多說,馬上來看我們的案例的介面以及流程。對於沒有接觸過這個領域的朋友可能需要多看幾遍消化。

使用者故事一:當我是一位Awesome glasses的用戶,我希望登入頁面用起來更流暢,所以我才不需要需思考怎麼註冊或登入。

有的朋友會問「這使用者故事聽起來怎麼好像非常含糊不清,不太清楚產品經理想要表達的意思是什麼?」沒錯,歡迎來到真實世界!使用者故事或產品需求有時候是刻意寫很曖昧,因為大多時候產品經理知道要達到什麼的效果,卻不太清楚要怎麼達到,而這就是設計師可以提出解決方案與貢獻的機會。

首先來C.R.A.P我們的頁面

對比 Contrast:將強弱連結進行對比的優化

  1. 使用Google+的紅色增強“使用Google登入”的視覺音量(visual loudness)
  2. 以主要按鈕(Primary button)和次要按鈕(Secondary button)做為區隔。同理,調整登入頁面的忘記密碼

重複 Repetition:調整內部一致性與外部一致性

  1. 內部一致性:元件間的距離與空間,使用8px的倍數去構成頁面的間距,以維持垂直韻律(Vertical Rhythm)
  2. 外部一致性:以線代框,移除白色透明度的框,增加標題與背景的對比度,並使用文中標籤,符合現下大部分的表單形式。

對齊 Alignment:將大標題對齊“上一頁”的按鈕,把整個表單向上提升,當鍵盤出現時,不會擋在主要按鈕的前面。

接近性 Proximity:將相近功能的選項放在接近的區域,因此把登入與註冊分開

看到這邊,會感覺這個使用者故事好像不只一個可以改的地方,這時候產品經理會依照開發資源去調整這則故事,或是將這則故事轉成敘事故事包含更多小的改動。

使用者故事二:當我是一位Awesome glasses的新用戶,我想要用FB登入,所以我可以不需要去記住任何密碼

由於第一則使用者故事,我們把登入相關的按鈕放在同一個區域,所以這則故事處理上來就相對簡單。當我在做這類的故事的時候,最常用的手法就是標竿分析(Benchmarking),去調查競爭對手或是你覺得有同樣功能及特徵的產品,做為參考,但要注意的是,別人測試成功的案例不代表放在你的產品上也會測試成功。

而設計師在闡述自己的設計時,必須要有足夠的論點,否則在溝通上就站不住腳:

  1. 採用相通的手法,以Facebook的藍色做為按鈕的背景色。 缺點:按鈕的顏色些許融入整個畫面的背景,有可能造成易用性的疑慮
  2. 依照內部一致性的原則,將有關社群網站登入的方法,以同一種顏色去做處理。
  3. 經過標竿分析與再行銷(Retargeting)的考量,強化FB的登入按鈕

通常像這種故事,我都會在第一次的時候提供三個左右的版本給產品經理,原因是當有三個版本時,就不再是二選一的選擇題,而是進行對話,更加了解產品經理他的想法,有時候設計師必須利用設計選項來釐清最剛開始的需求。

使用者故事三:當我是一位Awesome glasses的新用戶,我想再註冊的時候了解我註冊後會對我有什麼好處,所以我願意花時間去註冊

再不改變流程的情況下,通常能做的事情非常有限,但是不代表不能做,換個角度想,可能也是另外一個去驗證文案的機會。

原本的文案是:讓眼鏡不再只是眼鏡,更是生活的一部分。

更改過的文案是:登入即可享有最高50%OFF的優惠,快來搭配你每天的風格吧!

更改過的文案提供不一樣的動機讓使用者會想要登入而獲取更大的優惠。在這邊你也可以測試你的產品聲音與語調(voice & tone),簡單的來說,就是把產品擬人化,看看你的目標客群(target customer)對哪一種角色最有興趣,進而提升參與度(Engagement Rate)。

當然也可以更換背景為更生活的圖片,要注意的是圖片本身與介面元件的對比度,是否為影響整體閱讀而導致易用性下降。

感謝你閱讀完這篇文章,在撰寫的過程中一直反覆思考以及回顧日常的工作流程與經驗,希望透過自己的分享,可以幫助到即將踏進這個領域的朋友,或是已經在這個領域許久卻還未找到自己設計方法的朋友,一點點思考設計的流程及方式。

下集預告

由於第一篇的發表,收到很多朋友的來信詢問到底什麼是UX設計師,在下一集UX101,將會分享我自己在每天工作中所用的工具以及一些每天的任務及習慣,敬啟期待!

撰文:Jeremy

首圖插畫:Joyce

--

--