2019-3-6 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
表單作為平臺(tái)與用戶聯(lián)系最為緊密的一環(huán)，也是影響商業(yè)交易成功與否的重要分水嶺。良好的表單設(shè)計(jì)可以給用戶提供流暢自然的交易體驗(yàn)，保證用戶購(gòu)物情緒的正向增長(zhǎng)，而混亂無(wú)序的表單則引起用戶的負(fù)面情緒，影響甚至阻礙用戶交易的完成，降低用戶的品牌好感度和信賴度。
那么在設(shè)計(jì)過(guò)程中，需要怎樣規(guī)避風(fēng)險(xiǎn)，提升表單頁(yè)面的產(chǎn)品體驗(yàn)?zāi)兀肯旅嫖覀儗⒔Y(jié)合實(shí)際案例，從七個(gè)方面介紹表單設(shè)計(jì)中的常見(jiàn)注意事項(xiàng)。當(dāng)然，這些規(guī)則都是在表單設(shè)計(jì)中的一般準(zhǔn)則，每條準(zhǔn)則都有例外。
01 | 單列瀏覽
表單承載的主要功能是向用戶清楚地傳達(dá)信息，保持有秩序的單列表單形式更利于用戶瀏覽動(dòng)線，它能幫助用戶識(shí)別并填寫內(nèi)容，而多列的表單形式則會(huì)破壞用戶填寫規(guī)律，影響效率。
02 | 豎向排列
在表單中有多個(gè)選項(xiàng)以供用戶選擇時(shí)，將每個(gè)選項(xiàng)以豎向的排列方式位于每個(gè)選項(xiàng)下方時(shí)，更利于用戶閱讀瀏覽的習(xí)慣。
03 | 操作一致
表單填寫過(guò)程中我們應(yīng)當(dāng)避免在整流程中出現(xiàn)按鈕樣式、顏色的變化。需要用戶確認(rèn)的操作行為的一致能有效減少用戶在行動(dòng)時(shí)的困惑和猶豫，確保用戶在表單填寫過(guò)程中的流暢體驗(yàn)，從而實(shí)現(xiàn)最終商業(yè)上的交易成就。
04 | 標(biāo)題不可取代
雖然通過(guò)使用占位符代替標(biāo)題的方式擴(kuò)充了表單的填寫空間，減少了視覺(jué)噪音，但是這種做法并不利于用戶的短期記憶。一旦用戶觸發(fā)輸入，占位符消失，用戶可能會(huì)陷入這里該填寫什么的迷茫，必須刪除所有輸入內(nèi)容后才能再次顯示標(biāo)題，顯然，這是違背人性的。
05 | 輸入域符合預(yù)期
輸入域的長(zhǎng)度與預(yù)期輸入的內(nèi)容成正比，確保輸入字段長(zhǎng)度符合用戶心理預(yù)期，并能在表單中能完整呈現(xiàn)。
06 | 不隱藏基礎(chǔ)幫助信息
作為一個(gè)購(gòu)物流程中的信息確認(rèn)和采集環(huán)節(jié)，需要用戶對(duì)于購(gòu)買的產(chǎn)品有明確的認(rèn)知。因此在設(shè)計(jì)過(guò)程中對(duì)于用戶填寫表單有基礎(chǔ)幫助的信息應(yīng)該做強(qiáng)調(diào)或顯示設(shè)計(jì)，避免出現(xiàn)因?yàn)殡[藏幫助信息導(dǎo)致的客戶投訴。
07 | 減少二次確認(rèn)
基于OTA行業(yè)特性，出行表單業(yè)務(wù)對(duì)標(biāo)電商購(gòu)買表單業(yè)務(wù)需要填寫的信息更為冗長(zhǎng)，層級(jí)更為復(fù)雜，為了減少用戶填寫過(guò)程中的心理負(fù)擔(dān)，降低填寫難度，我們需要對(duì)不必要的信息進(jìn)行刪減或合并，為用戶信息輸入提供便利。
以注冊(cè)環(huán)節(jié)為例，在Web設(shè)計(jì)時(shí)往往會(huì)有二次確認(rèn)密碼的環(huán)節(jié)，但在移動(dòng)端這樣的操作會(huì)增加用戶填寫的負(fù)擔(dān)，因此大部分移動(dòng)端界面上我們不建議對(duì)用戶的密碼信息進(jìn)行二次確認(rèn)，轉(zhuǎn)而通過(guò)使用明文顯示或者優(yōu)化密碼消失交互的方法來(lái)改善這一環(huán)節(jié)的體驗(yàn)。
08 | *號(hào)的使用
沿用通用符號(hào)習(xí)慣，在表單設(shè)計(jì)中若是對(duì)業(yè)務(wù)必填的信息，我們往往采用 * 號(hào)的形式來(lái)幫助用戶區(qū)分信息優(yōu)先級(jí)。但當(dāng)表單中必填信息多于非必填信息時(shí)，大量 * 號(hào)的應(yīng)用反而會(huì)給用戶認(rèn)知增加負(fù)擔(dān)，使得無(wú)法快速識(shí)別哪些是必須填寫的，哪些是不必須填寫的。因此在表單設(shè)計(jì)中，當(dāng)必填項(xiàng)多于非必填項(xiàng)時(shí)，隱藏 * 號(hào)標(biāo)記，轉(zhuǎn)而通過(guò)暗提示標(biāo)記非必填項(xiàng)的形式來(lái)幫助用戶識(shí)別。
09 | 暗提示的應(yīng)用
暗提示作為輔助用戶填寫表單的主要方式，在設(shè)計(jì)上，需要盡可能地減少視覺(jué)噪音，確保文案言簡(jiǎn)意賅，表現(xiàn)形式不干擾用戶。因此，對(duì)比度過(guò)深或過(guò)淺，色彩過(guò)于突出的都不適合用于暗提示的視覺(jué)表現(xiàn)。
在交互上，暗提示也并不是一直存在的。當(dāng)光標(biāo)觸發(fā)表單項(xiàng)時(shí)，暗提示保持顯示，指導(dǎo)用戶輸入。而當(dāng)用戶輸入字段后，暗提示內(nèi)容隱藏，讓用戶專注于已填內(nèi)容。
10 | 設(shè)置默認(rèn)選項(xiàng)
在復(fù)雜表單中，對(duì)于如證件類型、手機(jī)區(qū)號(hào)、國(guó)籍等較為通用的選項(xiàng)，為用戶提供默認(rèn)選擇的交互可以有效簡(jiǎn)化操作步驟，減輕用戶填寫表單的負(fù)擔(dān)，更快地幫助用戶完成表單內(nèi)容的填寫。
11 | 替代輸入
對(duì)于表單填寫過(guò)程中可以固化選擇的信息，應(yīng)讓用戶進(jìn)行選擇操作以代替手動(dòng)輸入，盡可能地讓用戶減少輸入成本。
如：出游人信息采集時(shí)，提供添加常用出游人選項(xiàng)可以幫助減少重復(fù)填寫的負(fù)擔(dān)；證件類型采集時(shí)提供證件類型選項(xiàng)可以減少用戶困惑，在已有的選項(xiàng)中快速選擇；郵箱采集時(shí)自動(dòng)聯(lián)想顯示Email網(wǎng)址可以輔助用戶規(guī)范文本格式，快速完成表單填寫。
12 | 鍵盤匹配
根據(jù)表單填寫類型的不同，自動(dòng)匹配鍵盤類型。如“中文輸入”呼出中文鍵盤，“姓名（英文）”輸入呼出鎖定大寫的英文鍵盤，“手機(jī)號(hào)碼”輸入呼出數(shù)字鍵盤……免去用戶切換鍵盤操作的步驟。
同時(shí)根據(jù)填寫步驟，合理的定義鍵盤右下角的功能鍵，幫助用戶實(shí)現(xiàn)換行/完成的操作，省去用戶收起點(diǎn)開(kāi)鍵盤的重復(fù)動(dòng)作和表單上下填寫項(xiàng)的切換，讓填寫表單的過(guò)程更為順暢，用戶思考不被打斷。
13 | 按鈕層級(jí)
在用戶面對(duì)多個(gè)按鈕的場(chǎng)景選擇時(shí)，我們應(yīng)當(dāng)幫助用戶預(yù)先區(qū)分出主要行動(dòng)和次要行動(dòng)，通過(guò)視覺(jué)語(yǔ)言強(qiáng)調(diào)主要按鈕，弱化次要按鈕，引導(dǎo)用戶進(jìn)行選擇。
14 | 二次確認(rèn)
因移動(dòng)端特性，用戶在填寫場(chǎng)景較為不穩(wěn)定如吃飯途中、行駛途中等，當(dāng)用戶花費(fèi)精力填寫了部分表單信息后，為了防止用戶誤操作而丟失已填信息的場(chǎng)景，需要在此時(shí)進(jìn)行二次操作確認(rèn)，確認(rèn)用戶操作意圖。當(dāng)然，如果用戶沒(méi)有對(duì)表單進(jìn)行任何編輯，這樣的退出操作是不需要二次確認(rèn)的。
15 | 多行文本
在復(fù)雜表單中，面對(duì)填寫內(nèi)容過(guò)長(zhǎng)的同類表單，用戶會(huì)在預(yù)覽時(shí)產(chǎn)生輸入壓力。運(yùn)用字號(hào)、顏色、間距等視覺(jué)手段將相似層級(jí)的信息進(jìn)行邏輯分組，幫助用戶更好地區(qū)分多行文本的信息層級(jí)，便于輸入。
16 | 號(hào)碼組合規(guī)律
對(duì)于一些常用的號(hào)碼字段，可以采用線下通用的數(shù)字組合規(guī)律幫助用戶閱讀和記憶，如電話號(hào)碼的組合規(guī)律為 3 4 4 ，銀行卡號(hào)的組合規(guī)律為 4 4 4 4 3?？崭裨跀?shù)字呈現(xiàn)處的應(yīng)用雖然細(xì)微，但是在長(zhǎng)數(shù)字的閱讀場(chǎng)景中仍能給用戶帶來(lái)識(shí)別便利。
17 | 選項(xiàng)露出
在網(wǎng)頁(yè)端表單設(shè)計(jì)中，用戶在表單填寫中需要對(duì)選項(xiàng)進(jìn)行選擇時(shí)，常用的交互形式是在選擇器的下拉列表中進(jìn)行選項(xiàng)的二次點(diǎn)擊。而在移動(dòng)端設(shè)計(jì)中，觸發(fā)選擇器后的二次點(diǎn)擊會(huì)增加用戶的填寫成本。所以在設(shè)計(jì)時(shí)，當(dāng)選項(xiàng)少于8時(shí)，在表單中直接顯示所有可選項(xiàng)，當(dāng)選項(xiàng)超出過(guò)多時(shí)則在列表浮層中進(jìn)行選擇。
18 | 減少頁(yè)面跳轉(zhuǎn)
在表單填寫中我們期望用戶保持專注，盡量避免產(chǎn)生引導(dǎo)用戶離開(kāi)當(dāng)前頁(yè)面的填寫交互，這種交互跳轉(zhuǎn)很容易打斷用戶固有的行為軌跡。因此運(yùn)用浮層、彈窗等交互來(lái)完成輔助信息的采集是我們較為推崇的交互形式。
19 | 關(guān)聯(lián)標(biāo)記
當(dāng)用戶提交表單信息后，如已填寫的內(nèi)容有偏差，需要明確的標(biāo)記有問(wèn)題的數(shù)據(jù)及錯(cuò)誤原因，幫助用戶找到問(wèn)題并解決問(wèn)題。杜絕報(bào)錯(cuò)信息描述模糊，信息不關(guān)聯(lián)的報(bào)錯(cuò)信息引發(fā)用戶困惑。
20 | 實(shí)時(shí)校驗(yàn)
在某些業(yè)務(wù)場(chǎng)景中，為了幫助用戶在提交信息前校正他所填寫的內(nèi)容，避免大面積報(bào)錯(cuò)場(chǎng)景的出現(xiàn)。我們可以使用實(shí)時(shí)校驗(yàn)的方法，在用戶輸入完成后進(jìn)行判斷及結(jié)果反饋，如登陸注冊(cè)流程的驗(yàn)證碼校驗(yàn)就可以運(yùn)用實(shí)時(shí)校驗(yàn)的報(bào)錯(cuò)方式。
當(dāng)然需要注意的是，運(yùn)用實(shí)時(shí)校驗(yàn)的表單需在用戶明確離開(kāi)此項(xiàng)輸入狀態(tài)時(shí)再進(jìn)行結(jié)果反饋，而非在填寫過(guò)程中進(jìn)行實(shí)時(shí)校驗(yàn)，避免出現(xiàn)填寫時(shí)持續(xù)報(bào)錯(cuò)的情況。
21 | 密碼保護(hù)
在輸入密碼的表單中，部分平臺(tái)會(huì)在密碼輸入時(shí)顯示暗文字段以此保護(hù)用戶隱私，而鑒于前述第七條準(zhǔn)則，移動(dòng)端的密碼已簡(jiǎn)化至只輸入一次，暗文的顯示會(huì)讓用戶無(wú)法確認(rèn)所輸密碼信息。因此在需要隱私保護(hù)的場(chǎng)景下，我們需要完善密碼交互的呈現(xiàn)形式，當(dāng)輸入時(shí)，輸入位短暫顯示為明文，保持1秒或者保持到下一位密碼輸入后再變成暗文，這樣的交互改善可以確保用戶在輸入中明確內(nèi)容，也滿足了其隱私需求。
22 | 提交反饋
在用戶完成整個(gè)任務(wù)環(huán)節(jié)時(shí)，提供成功或失敗的反饋能讓用戶在枯燥的表單填寫后有更強(qiáng)烈的情感反饋。所以在設(shè)計(jì)時(shí)，我們需要提供正向的激勵(lì)夸贊用戶表單填寫成功，在表單沒(méi)有完成時(shí)鼓勵(lì)用戶修改內(nèi)容，重新提交，不可以負(fù)面情緒責(zé)怪用戶。
今年上半年，本著提升途牛產(chǎn)品調(diào)性，為內(nèi)容傳達(dá)提效的初衷，由途牛UED組織并發(fā)起了一次針對(duì)現(xiàn)有關(guān)鍵頁(yè)面升級(jí)的項(xiàng)目，在架構(gòu)升級(jí)全量推進(jìn)初期，我們優(yōu)先選取了酒店表單業(yè)務(wù)作為此次設(shè)計(jì)重構(gòu)的首選試驗(yàn)點(diǎn)。
表單作為一個(gè)偏理性的產(chǎn)品，直接影響著用戶決策到產(chǎn)品轉(zhuǎn)化的數(shù)據(jù)，在此環(huán)節(jié)，更需要降低用戶成本，維持產(chǎn)品決策熱情以實(shí)現(xiàn)商業(yè)價(jià)值上的成功。在酒店表單業(yè)務(wù)改版過(guò)程中，除了應(yīng)用上述七方面的設(shè)計(jì)準(zhǔn)則幫助提升用戶體驗(yàn)，我們也結(jié)合了酒店現(xiàn)有問(wèn)題和產(chǎn)品特性進(jìn)行了更為精細(xì)化的設(shè)計(jì)重構(gòu)。
整合信息框架
—
體制讓步
對(duì)用戶來(lái)說(shuō)，途牛是一個(gè)整體的產(chǎn)品，所有表單的基礎(chǔ)體驗(yàn)應(yīng)該是一致的。以往，基于企業(yè)平臺(tái)的發(fā)展，酒店細(xì)分的國(guó)內(nèi)酒店和國(guó)際酒店兩個(gè)業(yè)務(wù)相對(duì)獨(dú)立，雖然同樣隸屬于下單環(huán)節(jié)，但是業(yè)務(wù)迭代進(jìn)程及側(cè)重方向的不同導(dǎo)致表單前臺(tái)呈現(xiàn)差異較大。
借助途牛整體關(guān)鍵頁(yè)面升級(jí)的項(xiàng)目，在此次酒店業(yè)務(wù)重構(gòu)初期，協(xié)同兩個(gè)業(yè)務(wù)的產(chǎn)品、設(shè)計(jì)、研發(fā)我們共同整合資源，解決歷史遺留體驗(yàn)問(wèn)題，為國(guó)內(nèi)、國(guó)際酒店表單業(yè)務(wù)進(jìn)行整體體驗(yàn)的統(tǒng)一和提升助力。另一方面，UED也通過(guò)酒店業(yè)務(wù)的試點(diǎn)思路，將基礎(chǔ)表單框架進(jìn)行模塊細(xì)分，逐步影響并推廣至全站表單業(yè)務(wù)升級(jí)。
框架構(gòu)建
回顧現(xiàn)有酒店表單業(yè)務(wù)的問(wèn)題，主要體現(xiàn)在內(nèi)容層級(jí)模糊，類型樣式混亂上。這些隨著每一次迭代需求增加而新增的表單項(xiàng)，只是基于業(yè)務(wù)類型進(jìn)行了單模塊的設(shè)計(jì)，而對(duì)于用戶來(lái)說(shuō)，差異化的表單項(xiàng)樣式無(wú)形中增加了填寫時(shí)信息獲取的成本。
基于人體本身的生理構(gòu)造，我們?cè)讷@取文本信息時(shí)，并不會(huì)逐字閱讀，往往采用“掃視”的方式識(shí)別段落輪廓從而獲取信息，規(guī)律性的排列方式也會(huì)幫助持續(xù)這種“掃視”的節(jié)奏，提升信息轉(zhuǎn)化效率。
因此在設(shè)計(jì)上我們遵循相似信息一致性的原則，簡(jiǎn)化重復(fù)冗余的視覺(jué)噪音，將每個(gè)單元表單項(xiàng)模型遵循“上類型+下內(nèi)容”的形式幫助用戶快速對(duì)所需填寫的表單類型建立心理預(yù)期。在大量相同的填寫區(qū)域，統(tǒng)一左側(cè)內(nèi)容標(biāo)題對(duì)齊方式，并通過(guò)字色、字重等形式確保未觸發(fā)時(shí)內(nèi)容標(biāo)題為主，暗提示為輔，填寫后填寫內(nèi)容為主，內(nèi)容標(biāo)題為輔的視覺(jué)表達(dá)，從而在表單的不同階段仍舊保證了用戶對(duì)于主次信息的識(shí)別體驗(yàn)。
品牌信息傳達(dá)
為了減弱表單填寫頁(yè)冰冷感，在框架信息整合的基礎(chǔ)上，我們此次改版也將品牌解構(gòu)，用色彩的形式融入表單頁(yè)面設(shè)計(jì)，將品牌功能化，輔助產(chǎn)品以深化品牌用戶心中形成立體感知。
當(dāng)然品牌功能化的融入也需要有所限制，此次我們主要從氛圍、控件、操作、提示這四個(gè)方面展開(kāi)，在不影響表單主要信息呈現(xiàn)的基礎(chǔ)上，遵循適度、適量?jī)蓚€(gè)原則。
內(nèi)容層級(jí)排序
—
用戶吸引
回顧整個(gè)購(gòu)買流程，填寫訂單業(yè)務(wù)承擔(dān)著維系用戶在產(chǎn)品詳情所產(chǎn)生的內(nèi)容吸引到內(nèi)容轉(zhuǎn)化的責(zé)任，而如何在枯燥的酒店表單中維穩(wěn)甚至加固用戶的內(nèi)容吸引？為此，我們參照了《Actionable Gamification》關(guān)于人性八大核心驅(qū)動(dòng)力中的“擁有感&占有欲”和“失去&避免”這兩條來(lái)幫助我們。
結(jié)合對(duì)用戶使用場(chǎng)景的需求分析，我們將信息在用戶心中的關(guān)注度進(jìn)行了重新排序，首屏弱化了用戶已經(jīng)在詳情頁(yè)明確的酒店名稱，轉(zhuǎn)而對(duì)用戶需在此環(huán)節(jié)明確的房型、入住時(shí)間、離店時(shí)間等內(nèi)容進(jìn)行了強(qiáng)化和整合，明確產(chǎn)品歸屬。同時(shí)為了加固用戶的內(nèi)容吸引，我們前置了酒店“超值價(jià)”、“可免費(fèi)取消”等信息來(lái)解除用戶對(duì)于產(chǎn)品價(jià)格和沉沒(méi)成本的疑慮，從而正向地激勵(lì)用戶完成后續(xù)的表單填寫。
細(xì)分模塊
除了對(duì)首屏信息的排序重置外，對(duì)于需要用戶填寫的每個(gè)單元模塊我們也做出了一些調(diào)整。
如取消險(xiǎn)模塊，此前為避免客訴，將所有需要用戶確認(rèn)和查看的信息都進(jìn)行了高亮提示和行動(dòng)引導(dǎo)。這些信息雖然是我們需要用戶知道的，但并不一定是用戶在填寫時(shí)想要詳細(xì)了解的，過(guò)多的信息干擾反而影響了有用信息識(shí)別，也降低了用戶填寫表單的效率。因此新版表單重構(gòu)時(shí)我們將協(xié)議信息整合至末尾統(tǒng)一確認(rèn)，同時(shí)對(duì)文字、icon進(jìn)行視覺(jué)減負(fù)，統(tǒng)一弱化輔助信息呈現(xiàn)，轉(zhuǎn)而強(qiáng)調(diào)用戶需要確認(rèn)的取消險(xiǎn)金額和投保人模塊。
從上圖國(guó)際酒店改版前后的方案進(jìn)行對(duì)比可見(jiàn)，每個(gè)細(xì)分模塊都有著或多或少細(xì)節(jié)的調(diào)整，當(dāng)然還有沒(méi)有展現(xiàn)的輔助信息交互浮層框架的統(tǒng)一。這些信息呈現(xiàn)的形態(tài)與交互的邏輯也都遵循著前文“保持秩序、描述清晰、化繁為簡(jiǎn)、幫助用戶、信息分組、減少跳轉(zhuǎn)、及時(shí)反饋”這七大原則，每一個(gè)細(xì)節(jié)都可以展開(kāi)來(lái)細(xì)細(xì)剖析，這里就不多加贅述了。
結(jié)語(yǔ)
—
蚍蜉亦可撼樹，在產(chǎn)品升級(jí)的過(guò)程中，用戶體驗(yàn)的提升往往需要依靠像表單這樣一個(gè)個(gè)微小的業(yè)務(wù)作為突破點(diǎn)，從而裂變反哺至全局。此次酒店表單重構(gòu)項(xiàng)目從產(chǎn)品角度來(lái)看，功能上并沒(méi)有改變，而通過(guò)代入用戶場(chǎng)景，用戶感知，用戶行為習(xí)慣等方面進(jìn)行細(xì)節(jié)的體驗(yàn)升級(jí)。后續(xù)我們還將進(jìn)行更加深入地探索與迭代，將體驗(yàn)升級(jí)持續(xù)擴(kuò)散至其他業(yè)務(wù)，為每一位途牛用戶帶來(lái)更便捷、更自然的出行體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://ssll180.com