1.表單最重要的第一件事情是建立信任(build trust)

2.提供用戶(hù)足夠的意圖(intention)

3.使用在情境下最適合的控制元件(UI patterns)以減少認(rèn)知負(fù)荷(cognitive load)

4.提供有效的錯(cuò)誤訊息(error message)引導(dǎo)用戶(hù)更正錯(cuò)誤并完成任務(wù)

5.測(cè)試你的產(chǎn)品，來(lái)驗(yàn)證假設(shè)成立

那就廢話不多說(shuō)，開(kāi)始今天的主題“Ep2如何設(shè)計(jì)不難用的表單?實(shí)戰(zhàn)篇”

主題大綱

1.CRAP 你的表單

2.什么是產(chǎn)品需求？

3.表單入門(mén) — 登入頁(yè)面(login form)

CRAP 你的表單

目前在產(chǎn)品設(shè)計(jì)領(lǐng)域里，你時(shí)常會(huì)看到UX、UI、visual、UX/UI Designer等職稱(chēng)，而Visual/ UI 時(shí)常被當(dāng)作產(chǎn)品介面美化或是裝飾的角色，但我個(gè)人覺(jué)得這是一個(gè)常被誤解的現(xiàn)象，其實(shí)視覺(jué)在使用者體驗(yàn)中，占了舉足輕重的部份，我們可以利用CRAP原則去優(yōu)化任何介面設(shè)計(jì)，不僅僅是表單。

事實(shí)上，CRAP是從平面設(shè)計(jì)中衍生出來(lái)的原則：對(duì)比(Contrast)、重復(fù)(Repetition)、對(duì)齊(Alignment)、接近性(Proximity)。

對(duì)比Contrast

對(duì)比在視覺(jué)設(shè)計(jì)(Visual design)當(dāng)中，幫助觀看者的眼睛引導(dǎo)到什么是重要的，而接下來(lái)要做什么。也就是說(shuō)將你想要使用者執(zhí)行的動(dòng)作(Call to action)，或是任何你想要讓使用者注意的東西—做得跟其他元件在同一個(gè)頁(yè)面的元件不同。

哪一個(gè)按鈕(Button)對(duì)你來(lái)說(shuō)你最想點(diǎn)？

來(lái)復(fù)習(xí)一下，假設(shè)這三個(gè)元素在同一個(gè)畫(huà)面時(shí)，從左至右分別是主要?jiǎng)幼?Primary action)、次要?jiǎng)幼?Secondary action)、第三級(jí)動(dòng)作(tertiary action)。

在表單設(shè)計(jì)中，最后要確認(rèn)或送出的按鈕通常都會(huì)以主要?jiǎng)幼鳛橹?，因?yàn)樵诹己玫膶?duì)比下，我們可以讓使用者不需思考要選擇哪個(gè)按鈕，而達(dá)成任務(wù)。

重復(fù)Repetition

重復(fù)主要是在講一致性(consistency)，這個(gè)原則主要是讓你所用的設(shè)計(jì)系統(tǒng)(design system)更容易使用跟被記住。而重復(fù)分為兩種重復(fù)，第一是內(nèi)部一致性(internal consistency)，第二為外部一致性(external consistency)。

內(nèi)部一致性的元素有

? 字型(fonts)

? 顏色(colors)

? 標(biāo)志(icons)

? 標(biāo)題(headings)

? 連結(jié)(links)

? 表單(forms)

? 頁(yè)面排版(page layout)

? 空間(space)

…等等，諸如此類(lèi)的介面元素，也屬于設(shè)計(jì)系統(tǒng)內(nèi)的范疇，其中最著名的設(shè)計(jì)系統(tǒng)，也是我們團(tuán)隊(duì)使用的設(shè)計(jì)系統(tǒng)方法為原子設(shè)計(jì)系統(tǒng)(atomic design system)，有興趣的朋友可以先去買(mǎi)書(shū)來(lái)讀，以后會(huì)再分享自己的經(jīng)驗(yàn)

而外部一致性是指說(shuō)在整個(gè)網(wǎng)路的世界里，其他約定俗成的介面樣式(UI patterns)，好比說(shuō)，連結(jié)的顏色、標(biāo)準(zhǔn)按鈕的形狀等等。

Jakob Nielsen (Nielsen Norman Group 共同創(chuàng)辦人) 曾說(shuō)過(guò)“使用者較多的時(shí)間是在使用其他的網(wǎng)頁(yè)”。也就是說(shuō)，人們對(duì)于網(wǎng)頁(yè)的預(yù)期是被他們?cè)谄渌W(wǎng)頁(yè)上的經(jīng)驗(yàn)所塑形而成的。為了確保易用性，將頁(yè)面標(biāo)題、頁(yè)面導(dǎo)航、收尋等的元素放在約定俗成的位置，可有效地增進(jìn)易用性。

對(duì)齊Alignment

簡(jiǎn)單的來(lái)說(shuō)，就是把你的物件垂直＆水平對(duì)齊，如果要細(xì)分的話，可以分為：

1.垂直對(duì)齊(Vertical Alignment)

2.置頂或置底對(duì)齊(Top or Bottom Vertical Alignment)

3.中心垂直對(duì)齊(Central Vertical Alignment)

4.水平對(duì)齊(Horizo??ntal Alignment)

5.左右水平對(duì)齊(Left and Right Horizo??ntal Alignment)

6.中心水平對(duì)齊(Central Horizo??ntal Alignment)

7.媒體物件對(duì)齊(Media Object Alignment)

8.邊緣對(duì)齊(Edge Alignment)

9.視覺(jué)優(yōu)化對(duì)齊(Optical Alignment)

而這些會(huì)因?yàn)榍榫诚碌牟煌?，所選用的對(duì)齊手法也不同，而對(duì)齊也是一個(gè)常被使用增進(jìn)易用性的做法。

接近性Proximity

完形理論(Gestalt theory)學(xué)者認(rèn)為，視覺(jué)感知通常會(huì)以整體來(lái)看，而非單一個(gè)體，也就是“整體大于個(gè)體的總合” (The whole is other than the sum of the parts.)，

接近性的原則是指，當(dāng)你將元件放在接近的位置，人會(huì)自然而然的認(rèn)為他們之間是有連結(jié)的。

想了更多有關(guān)完形理論的朋友，可以參考Seal Tseng的“ 用「完形心理學(xué)」，增加介面設(shè)計(jì)有感度! ”在下方會(huì)附上連結(jié)。

什么是產(chǎn)品需求、假設(shè)、使用者故事？

在敏捷開(kāi)發(fā)(Agile development)的流程當(dāng)中，產(chǎn)品經(jīng)理會(huì)將他分析數(shù)據(jù)的結(jié)果，轉(zhuǎn)換成某種假設(shè)(hypothesis)，基于這種假設(shè)上，會(huì)衍生出一個(gè)或多個(gè)產(chǎn)品需求(product requirements)，而這些產(chǎn)品需求是要增進(jìn)團(tuán)隊(duì)的關(guān)鍵績(jī)效指標(biāo)，進(jìn)而增加公司利潤(rùn)或是其他對(duì)于市場(chǎng)的認(rèn)知與學(xué)習(xí)。

你可能會(huì)問(wèn)說(shuō)“Jeremy，這是產(chǎn)品設(shè)計(jì)師的工作嗎？這跟表單設(shè)計(jì)有什么關(guān)系？“事實(shí)上，這是產(chǎn)品經(jīng)理的范疇，但是身為產(chǎn)品設(shè)計(jì)師，必須了解這些是如何產(chǎn)生的，才能更清楚地去厘清最后的產(chǎn)出是否是與產(chǎn)品經(jīng)理的想法是一致的。

在我們團(tuán)隊(duì)中，簡(jiǎn)化的流程約為：產(chǎn)出假設(shè)(hypothesis)→建立敘事故事(epics)→產(chǎn)品需求(product requirements)→使用者故事(user stories)

什么是假設(shè)Hypothesis

所謂的假設(shè)是一個(gè)可測(cè)試的宣言并且是利益關(guān)系人(skateholders)所相信的，時(shí)常有產(chǎn)品經(jīng)理提出。

最常見(jiàn)的寫(xiě)法是：我們相信[主題]有[問(wèn)題]因?yàn)閇原因]，如果我們采取[行動(dòng)]，這個(gè)[指標(biāo)]會(huì)有所改善。

例子：我們相信登入頁(yè)面的轉(zhuǎn)換率較低因?yàn)槲覀儧](méi)有其他選項(xiàng)可以登入，如果我們?cè)诘侨腠?yè)面提供FB和google登入，登入頁(yè)面的轉(zhuǎn)換率會(huì)提高。

什么是敘事故事Epics

敘事故事是由一個(gè)或多個(gè)產(chǎn)品特征或功能集合而成。通常我們以我們要解決什么樣的問(wèn)題開(kāi)始，比方說(shuō)：增加FB登入選項(xiàng)在登入頁(yè)面上。接下來(lái)就是描述產(chǎn)品功能或是需求范圍，也就是我們常用的敘述故事規(guī)格(Epic spec sheet):

介紹

? 概述你想打造的產(chǎn)品特征以及為什么要做他們

? 哪些數(shù)據(jù)會(huì)透過(guò)這個(gè)敘事故事而改善

? 詳細(xì)文件的連結(jié)(通常是使用者故事或是專(zhuān)案的連結(jié))

? 行銷(xiāo)策略、法務(wù)需求

?早期線框圖(early wireframes)

產(chǎn)品需求

? 產(chǎn)品特征的需求

設(shè)計(jì)需求

? 產(chǎn)品經(jīng)理與設(shè)計(jì)師共同討論細(xì)節(jié)

? 模板(mockups)、原型(prototypes)

工程需求

? 產(chǎn)品經(jīng)理與工程師共同討論細(xì)節(jié)

? 必須包含一定要完成的工程細(xì)節(jié)

雖然設(shè)計(jì)需求只是四項(xiàng)中的一項(xiàng)，但是時(shí)常會(huì)因?yàn)楫a(chǎn)品或工程需求的變動(dòng)而改變。

什么使用者故事user stories

使用者故事是一種用來(lái)敘述我們所要打造的產(chǎn)品特征給終端使用者，最常用的模板是：

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

會(huì)這樣使用的原因是在于我們可以藉由這段話去跟工程師溝通而不用說(shuō)實(shí)際是怎么做的。

打個(gè)比方：“當(dāng)我是一位該網(wǎng)站的用戶(hù)，我想要直接用FB登入，所以我可以不需要去記住密碼。 ”

而使用者故事通常都是產(chǎn)品經(jīng)理與設(shè)計(jì)師開(kāi)始一個(gè)產(chǎn)品特征的媒介，其中會(huì)因?yàn)槎啻蔚挠懻摱掷m(xù)修正。最后的結(jié)論會(huì)被寫(xiě)成驗(yàn)收條件(acceptance criteria)

而驗(yàn)收條件通常列出一系列的條件，而這些條件必須被滿足才可以在用戶(hù)端開(kāi)啟這個(gè)產(chǎn)品特征。

表單設(shè)計(jì)入門(mén) — 登入頁(yè)面

當(dāng)初任職的第一份任務(wù)就是優(yōu)化APP的登入頁(yè)面，不要看登入頁(yè)面好像很簡(jiǎn)單，從EP1的案例就可以看出來(lái)，登入頁(yè)面可是掌控了使用者流程到命脈，要如何在使用者的第一步盡量的減少摩擦與阻力，是非常值得反覆測(cè)試并驗(yàn)證自己的假設(shè)。

除非你是從零開(kāi)始要設(shè)計(jì)一款A(yù)PP，大多時(shí)候產(chǎn)品經(jīng)理都會(huì)用使用者故事作為溝通的橋梁并且說(shuō)明產(chǎn)品特征。以下所列舉出的案例(Awesome glasses)，是希望接近真實(shí)的情況讓各位新舊朋友進(jìn)入產(chǎn)品開(kāi)發(fā)過(guò)程，并非設(shè)計(jì)登入頁(yè)面的鐵則且也未經(jīng)過(guò)測(cè)試，僅是希望分享我個(gè)人如何思考怎么去拆解需求與調(diào)整版面以達(dá)到易用性?xún)?yōu)化，在這里再次強(qiáng)調(diào)，任何的設(shè)計(jì)都是需要被驗(yàn)證的。

那廢話不多說(shuō)，馬上來(lái)看我們的案例的介面以及流程。對(duì)于沒(méi)有接觸過(guò)這個(gè)領(lǐng)域的朋友可能需要多看幾遍消化。

使用者故事一：當(dāng)我是一位Awesome glasses的用戶(hù)，我希望登入頁(yè)面用起來(lái)更流暢，所以我才不需要需思考怎么注冊(cè)或登入。

有的朋友會(huì)問(wèn)「這使用者故事聽(tīng)起來(lái)怎么好像非常含糊不清，不太清楚產(chǎn)品經(jīng)理想要表達(dá)的意思是什么？」沒(méi)錯(cuò)，歡迎來(lái)到真實(shí)世界！使用者故事或產(chǎn)品需求有時(shí)候是刻意寫(xiě)很曖昧，因?yàn)榇蠖鄷r(shí)候產(chǎn)品經(jīng)理知道要達(dá)到什么的效果，卻不太清楚要怎么達(dá)到，而這就是設(shè)計(jì)師可以提出解決方案與貢獻(xiàn)的機(jī)會(huì)。

首先來(lái)CRAP我們的頁(yè)面

對(duì)比Contrast：將強(qiáng)弱連結(jié)進(jìn)行對(duì)比的優(yōu)化

1.使用Google+的紅色增強(qiáng)“使用Google登入”的視覺(jué)音量(visual loudness)

2.以主要按鈕(Primary button)和次要按鈕(Secondary button)做為區(qū)隔。同理，調(diào)整登入頁(yè)面的忘記密碼

重復(fù)Repetition：調(diào)整內(nèi)部一致性與外部一致性

1.內(nèi)部一致性：元件間的距離與空間，使用8px的倍數(shù)去構(gòu)成頁(yè)面的間距，以維持垂直韻律(Vertical Rhythm)

2.外部一致性：以線代框，移除白色透明度的框，增加標(biāo)題與背景的對(duì)比度，并使用文中標(biāo)簽，符合現(xiàn)下大部分的表單形式。

對(duì)齊Alignment：將大標(biāo)題對(duì)齊“上一頁(yè)”的按鈕，把整個(gè)表單向上提升，當(dāng)鍵盤(pán)出現(xiàn)時(shí)，不會(huì)擋在主要按鈕的前面。

接近性Proximity：將相近功能的選項(xiàng)放在接近的區(qū)域，因此把登入與注冊(cè)分開(kāi)

看到這邊，會(huì)感覺(jué)這個(gè)使用者故事好像不只一個(gè)可以改的地方，這時(shí)候產(chǎn)品經(jīng)理會(huì)依照開(kāi)發(fā)資源去調(diào)整這則故事，或是將這則故事轉(zhuǎn)成敘事故事包含更多小的改動(dòng)。

使用者故事二：當(dāng)我是一位Awesome glasses的新用戶(hù)，我想要用FB登入，所以我可以不需要去記住任何密碼

由于第一則使用者故事，我們把登入相關(guān)的按鈕放在同一個(gè)區(qū)域，所以這則故事處理上來(lái)就相對(duì)簡(jiǎn)單。當(dāng)我在做這類(lèi)的故事的時(shí)候，最常用的手法就是標(biāo)竿分析(Benchmarking)，去調(diào)查競(jìng)爭(zhēng)對(duì)手或是你覺(jué)得有同樣功能及特征的產(chǎn)品，做為參考，但要注意的是，別人測(cè)試成功的案例不代表放在你的產(chǎn)品上也會(huì)測(cè)試成功。

而設(shè)計(jì)師在闡述自己的設(shè)計(jì)時(shí)，必須要有足夠的論點(diǎn)，否則在溝通上就站不住腳：

1.采用相通的手法，以Facebook的藍(lán)色做為按鈕的背景色。缺點(diǎn)：按鈕的顏色些許融入整個(gè)畫(huà)面的背景，有可能造成易用性的疑慮

2.依照內(nèi)部一致性的原則，將有關(guān)社群網(wǎng)站登入的方法，以同一種顏色去做處理。

3.經(jīng)過(guò)標(biāo)竿分析與再行銷(xiāo)(Retargeting)的考量，強(qiáng)化FB的登入按鈕。

通常像這種故事，我都會(huì)在第一次的時(shí)候提供三個(gè)左右的版本給產(chǎn)品經(jīng)理，原因是當(dāng)有三個(gè)版本時(shí)，就不再是二選一的選擇題，而是進(jìn)行對(duì)話，更加了解產(chǎn)品經(jīng)理他的想法，有時(shí)候設(shè)計(jì)師必須利用設(shè)計(jì)選項(xiàng)來(lái)厘清最剛開(kāi)始的需求。

使用者故事三：當(dāng)我是一位Awesome glasses的新用戶(hù)，我想再注冊(cè)的時(shí)候了解我注冊(cè)后會(huì)對(duì)我有什么好處，所以我愿意花時(shí)間去注冊(cè)

再不改變流程的情況下，通常能做的事情非常有限，但是不代表不能做，換個(gè)角度想，可能也是另外一個(gè)去驗(yàn)證文案的機(jī)會(huì)。

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

更改過(guò)的文案是：登入即可享有最高50%OFF的優(yōu)惠，快來(lái)搭配你每天的風(fēng)格吧！

更改過(guò)的文案提供不一樣的動(dòng)機(jī)讓使用者會(huì)想要登入而獲取更大的優(yōu)惠。在這邊你也可以測(cè)試你的產(chǎn)品聲音與語(yǔ)調(diào)(voice & tone)，簡(jiǎn)單的來(lái)說(shuō)，就是把產(chǎn)品擬人化，看看你的目標(biāo)客群(target customer)對(duì)哪一種角色最有興趣，進(jìn)而提升參與度(Engagement Rate)。

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

感謝你閱讀完這篇文章，在撰寫(xiě)的過(guò)程中一直反覆思考以及回顧日常的工作流程與經(jīng)驗(yàn)，希望透過(guò)自己的分享，可以幫助到即將踏進(jìn)這個(gè)領(lǐng)域的朋友，或是已經(jīng)在這個(gè)領(lǐng)域許久卻還未找到自己設(shè)計(jì)方法的朋友，一點(diǎn)點(diǎn)思考設(shè)計(jì)的流程及方式。

作者：Jeremy?

插畫(huà)：Joyce