歡迎光臨四川省巨高科技有限公司

聯系我們|網站地圖|巨高資訊

13880394188

網站建設 WEBSITE CONSTRUCTION

巨高科技專注成都網站建設和網站優化推廣16年,提供PC網站+手機網站+微網站+手機APP四站合一,成都網站制作優選品牌,成都網絡整合營銷顧問

當前位置:首頁>網站建設 >建站資訊 >手機版網站建設中長表單只有這樣設計才能留住用戶 >

手機版網站建設中長表單只有這樣設計才能留住用戶

來源:成都網站建設 時間:2017-11-29 點擊次數:1581

  移動端的應用越來越廣泛,用戶不再局限于B端產品的需求,網站建設中越來越多的企業選擇同步做手機版網站?;诳蛻魳I務需求,有時候用戶在操作過程中,不可避免的需要填寫很多表單,針對于移動端長表單,應該如何設計才能給用戶更好的體驗呢?

  移動端網頁長表單的設計,按照設計思路的不同,一般有三種主方案,如下所示:

  主方案1——我們常見的設計形式,一個界面將所有表單信息展示出來;

  主方案2——將不同的分組表單放在不同的下一級界面,用戶填寫之后返回;

  主方案3——分步操作,一個界面完成一組表單內容,點擊下一步進入下一組表單;

  主方案1的設計討論

  優點:一個界面將所有表單信息展示出來,如果想查找某些填寫的信息也變得更容易,相對于主方案2和3,減少了頁面跳轉操作和查看。

  缺點:基于移動端界面承載能力較弱,一個界面將表單所有展示出來,用戶一次性瀏覽和操作起來壓力較大,容易使操作流程失敗,導致成功率大大降低。

  針對于主方案1,用戶完成表單完成后,提交按鈕有三種主要的設計方法,一種是提交按鈕放在表單最后,一種是提交按鈕放在導航欄上。另一種是,提交按鈕底部懸浮。如下圖所示:

  方案1.0,如果提交按鈕放在表單之后,那么用戶的視覺流和操作感覺是一致的,流暢而自然。但是會出現一個問題,用戶在輸入信息時,鍵盤調用會遮擋到提交按鈕。Android手機上的輸入法都可以點擊輸入法上的按鈕將鍵盤推下去。而iOS原生輸入法沒辦法推下去,只能點擊其他非編輯區域才能推下鍵盤。這樣就顯得很麻煩,用戶可能會忽略掉提交按鈕。

  方案1.1,解決了提交按鈕會被鍵盤擋住的缺陷,但是視覺流和操作行為錯亂,用戶在屏幕底部輸入完成之后,視覺和手指要返回到頂部操作。

  方案1.2,提交按鈕底部懸浮,解決了方案1.1的視覺流和操作紊亂的問題,解決了方案1.0提交按鈕被隱藏的問題,但是當輸入文本,調出鍵盤時,依舊會被擋住。

  使用底部懸浮按鈕的場景是操作按鈕非常重要,例如手機淘寶的立即購買和加入購物車。

  同時底部懸浮按鈕不適用于文本操作類。例如文章說的長表單文本輸入。當輸入文本,調出鍵盤時,依舊會被擋住。

  底部懸浮按鈕適用于非文本輸入的使用場景。從手機淘寶、新浪微博可以看出,適用于在界面中非文本輸入、提供一個功能入口或者是界面非文本輸入的選擇信息的確認。

  主方案2的設計討論

  優點:與主方案3相比不同分組表單之前切換查看信息方便快捷。申請流程的首頁簡潔,填寫信息全部隱藏到下一級界面。

  缺點:來回跳轉,操作負荷較大,會把用戶繞暈。

  在方案2.0中用戶填寫完成的分組和未分組填寫分組區分不開,將方案2.0進行優化,例如填寫完成后,會出現已完成的標簽,提示用戶已完成和未完成不同的狀態(如方案2.1)

  主方案3的設計討論

  Facebook曾針對分步注冊與非分步注冊做過A/B Test,其結論指出分步注冊的轉化率遠高于非分步注冊。由此可見,非分步注冊強行減少注冊頁面,不如適當拉長戰線,給用戶輕負荷的操作,讓用戶在不知不覺中完成注冊流程。

  優點:流程分步操作,相對于主方案1,用戶操作成功率大幅度提高。

  缺點:如果用戶操作到了第三步,需要返回第一步確認填寫信息的準確性,那么用戶需要兩次返回。

  用戶填寫的信息做保存(緩存),用戶返回上一步,填寫的數據做保留。H5依舊適用,用戶填寫的數據保存在數據庫,用戶返回上一步時,同時刷新載入數據庫記錄的數據。

  對于方案3.0和3.1 。下一步按鈕不同。究竟采取哪種?方案3.0視覺流和操作流是正常情況,且不存在按鈕被鍵盤擋住,所以方案3.0最佳。

  網站健身中的移動端長表單設計總結分析:

  主方案1、2和3,都有各自不同的優缺點。

  一個交互流程的好壞,一個最重要的標準之一是讓用戶順利完成操作流程,保證操作流程的成功率,才能完成用戶的目標。以此標準來看,主方案3是最好的。

  接下來探討一個細節問題,就是提交按鈕是放在頂部導航欄、信息內容區內還是底部懸浮?

  這里分為4種情況:

  情況1:內容區加上操作按鈕不被鍵盤覆蓋。建議按鈕放在內容區內。

  情況2:必填的內容未被鍵盤覆蓋,非必填被覆蓋,建議操作按鈕放在導航欄上,例如朋友圈、QQ空間和新浪微博。

  情況3:必填的表單超過一屏,建議按鈕放在內容區。

  放在導航欄上不行的原因有兩個:

  視覺流錯誤,從上往下,信息量很大,用戶滑動瀏覽時,會忽略且很難聯想點擊右上角下一步,行業常見放在導航欄上是因為必填的不超過一屏;

  當必填項過多時,要滑動屏幕才能填完。 把按鈕放在右上角的導航欄,當用戶還沒填寫完成,那么在按鈕放在導航欄上很容易去點擊,容易引導用戶犯錯。

  情況4:必填超過一屏,且無非文本輸入,建議可適用底部懸浮。

  綜上,我們在網站建設的過程中總結了很多設計經驗,網頁設計并非簡單的內容組合排版,網頁設計需要站在用戶的角度思考問題,方便用戶,為用戶解決問題。更多人性化的體驗因素直接影響網頁作品的完整度及成熟度。

中超直播pptv体育 陕西11选五前三组遗漏 新发行股票 申城棋牌大厅下载 天津体彩11选五技巧 35选7开奖走势 怎么看股票历史走势 沈阳娱网棋牌下载 甘肃11选5数据分析 30选5今天基夲走势图 三组平特四在连肖
在線客服
在線客服
服務熱線