2018-5-12 博博
基于業(yè)務(wù)需求(常見(jiàn)于B端產(chǎn)品),有時(shí)候用戶在操作過(guò)程中,不可避免的需要填寫很多表單。針對(duì)于移動(dòng)端長(zhǎng)表單,我們應(yīng)該如何去正確的設(shè)計(jì)呢?
1.三種主方案
2.主方案1的設(shè)計(jì)討論
3.主方案2的設(shè)計(jì)討論
4.主方案3的設(shè)計(jì)討論
5.總結(jié)
針對(duì)長(zhǎng)表單的設(shè)計(jì),按照設(shè)計(jì)思路的不同,可以分為三種主方案,如下所示:
PS:圖中的舉例的關(guān)鍵字段僅僅為舉例需要。
主方案1:我們常見(jiàn)的設(shè)計(jì)形式,一個(gè)界面將所有表單信息展示出來(lái)。
主方案2:將不同的分組表單放在不同的下一級(jí)界面,用戶填寫之后返回。
主方案3:分步操作,一個(gè)界面完成一組表單內(nèi)容,點(diǎn)擊下一步進(jìn)入下一組表單。
優(yōu)點(diǎn):一個(gè)界面將所有表單信息展示出來(lái),如果想查找某些填寫的信息也變得更容易,相對(duì)于主方案2和3,減少了頁(yè)面跳轉(zhuǎn)操作和查看。
缺點(diǎn):基于移動(dòng)端界面承載能力較弱,一個(gè)界面將表單所有展示出來(lái),用戶一次性瀏覽和操作起來(lái)壓力較大,容易使操作流程失敗,導(dǎo)致成功率大大降低。
針對(duì)于主方案1,用戶完成表單完成后,提交按鈕有三種主要的設(shè)計(jì)方法,一種是提交按鈕放在表單最后,一種是提交按鈕放在導(dǎo)航欄上。另一種是,提交按鈕底部懸浮。如下圖所示:
方案1.0,如果提交按鈕放在表單之后,那么用戶的視覺(jué)流和操作感覺(jué)是一致的,流暢而自然。但是會(huì)出現(xiàn)一個(gè)問(wèn)題,用戶在輸入信息時(shí),鍵盤調(diào)用會(huì)遮擋到提交按鈕。Android手機(jī)上的輸入法都可以點(diǎn)擊輸入法上的按鈕將鍵盤推下去。而iOS 原生輸入法在輸入法中沒(méi)辦法推下去,只能點(diǎn)擊其他非編輯區(qū)域才能推下鍵盤。這樣就顯得很麻煩,用戶可能會(huì)忽略掉提交按鈕。
方案1.1解決了提交按鈕會(huì)被鍵盤擋住的缺陷,但是視覺(jué)流和操作行為錯(cuò)亂,用戶在屏幕底部輸入完成之后,視覺(jué)和手指要返回到頂部操作。
方案1.2提交按鈕底部懸浮,解決了方案1.1的視覺(jué)流和操作紊亂的問(wèn)題,解決了方案1.0提交按鈕被隱藏的問(wèn)題,但是當(dāng)輸入文本,調(diào)出鍵盤時(shí),依舊會(huì)被擋住。
使用底部懸浮按鈕的場(chǎng)景是操作按鈕非常重要,例如手機(jī)淘寶的立即購(gòu)買和加入購(gòu)物車。
同時(shí)底部懸浮按鈕不適用于文本操作類。例如文章說(shuō)的長(zhǎng)表單文本輸入。當(dāng)輸入文本,調(diào)出鍵盤時(shí),依舊會(huì)被擋住。
底部懸浮按鈕適用于非文本輸入的使用場(chǎng)景。從手機(jī)淘寶、新浪微博可以看出,適用于在界面中非文本輸入、提供一個(gè)功能入口或者是界面非文本輸入的選擇信息的確認(rèn)。
優(yōu)點(diǎn):與主方案3相比不同分組表單之前切換查看信息方便快捷。申請(qǐng)流程的首頁(yè)簡(jiǎn)潔,填寫信息全部隱藏到下一級(jí)界面。
缺點(diǎn):來(lái)回跳轉(zhuǎn),操作負(fù)荷較大,會(huì)把用戶繞暈。
在方案2.0中用戶填寫完成的分組和未分組填寫分組區(qū)分不開,將方案2.0進(jìn)行優(yōu)化,例如填寫完成后,會(huì)出現(xiàn)已完成的標(biāo)簽,提示用戶已完成和未完成不同的狀態(tài)(如方案2.1)
Facebook曾針對(duì)分步注冊(cè)與非分步注冊(cè)做過(guò)A/B Test,其結(jié)論指出分步注冊(cè)的轉(zhuǎn)化率遠(yuǎn)高于非分步注冊(cè)。由此可見(jiàn),非分步注冊(cè)強(qiáng)行減少注冊(cè)頁(yè)面,不如適當(dāng)拉長(zhǎng)戰(zhàn)線,給用戶輕負(fù)荷的操作,讓用戶在不知不覺(jué)中完成注冊(cè)流程。
優(yōu)點(diǎn):流程分步操作,相對(duì)于主方案1,用戶操作成功率大幅度提高。
缺點(diǎn):如果用戶操作到了第三步,需要返回第一步確認(rèn)填寫信息的準(zhǔn)確性,那么用戶需要兩次返回。
用戶填寫的信息做保存(緩存),用戶返回上一步,填寫的數(shù)據(jù)做保留。H5依舊適用,用戶填寫的數(shù)據(jù)保存在數(shù)據(jù)庫(kù),用戶返回上一步時(shí),同時(shí)刷新載入數(shù)據(jù)庫(kù)記錄的數(shù)據(jù)。
對(duì)于方案3.0和3.1 。下一步按鈕不同。究竟采取哪種?方案3.0視覺(jué)流和操作流是正常情況,且不存在按鈕被鍵盤擋住,所以方案3.0最佳。
主方案1、2和3,都有各自不同的優(yōu)缺點(diǎn)。
一個(gè)交互流程的好壞,一個(gè)最重要的標(biāo)準(zhǔn)之一是讓用戶順利完成操作流程,保證操作流程的成功率,才能完成用戶的目標(biāo)。以此標(biāo)準(zhǔn)來(lái)看,主方案3是最好的。
接下來(lái)探討一個(gè)細(xì)節(jié)問(wèn)題,就是提交按鈕是放在頂部導(dǎo)航欄、信息內(nèi)容區(qū)內(nèi)還是底部懸?。?/span>
情況1:內(nèi)容區(qū)加上操作按鈕不被鍵盤覆蓋,建議按鈕放在內(nèi)容區(qū)內(nèi)。
情況2:必填的內(nèi)容未被鍵盤覆蓋,非必填被覆蓋,建議操作按鈕放在導(dǎo)航欄上,例如朋友圈、QQ空間和新浪微博。
情況3:必填的表單超過(guò)一屏,建議按鈕放在內(nèi)容區(qū)。不建議放在導(dǎo)航欄上的原因有兩個(gè):
a.視覺(jué)流錯(cuò)誤,從上往下,信息量很大,用戶滑動(dòng)瀏覽時(shí),會(huì)忽略且很難聯(lián)想點(diǎn)擊導(dǎo)航欄上的操作,行業(yè)常見(jiàn)放在導(dǎo)航欄上是因?yàn)楸靥畹牟怀^(guò)一屏。
b.當(dāng)必填項(xiàng)過(guò)多時(shí),要滑動(dòng)屏幕才能填完。 把按鈕放在右上角的導(dǎo)航欄,當(dāng)用戶還沒(méi)填寫完成,那么在按鈕放在導(dǎo)航欄上很容易去點(diǎn)擊,容易引導(dǎo)用戶犯錯(cuò)。
情況4:必填超過(guò)一屏,且無(wú)非文本輸入,建議可使用底部懸浮。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com