移動端Cell欄表單設計問題匯總

7 評論 29236 瀏覽 73 收藏 7 分鐘

表單是用戶用來獲取服務的重要輸入工具,也是收集UGC的重要入口,更是用戶與服務商交互的重要途徑,主要交互過程:用戶輸入、編輯數據,提交給系統,系統給予相關的反饋和提示,設計過程中需要注意以下事項:

表單分組

表單的輸入項要根據業務規則劃分好組,把同一類或相關的內容放在一組,減少用戶認知和思考;

比如LinkedIn,把個人基本信息、工作經歷、教育背景、技能專長都各自進行了分組,QQ的個人設置也根據內容相關性進行了分組:

linkedinQQ

設置默認選項

為某些輸入項提供比較貼心的默認值(默認值需要能滿足大部分用戶的需求)。

比如團購產品選擇地點的時候,默認值為當前的城市,攜程訂酒店的時間默認值就是從今天到明天:

城市和時間

給用戶的格式要求

輸入項有格式要求的,用戶輸入前提示用戶,不能等用戶輸入完提交時才讓用戶知道有格式要求。

很多產品注冊時,在用戶填完所有信息提交時,才提示用戶密碼格式不對,需要數字和字母的組合,在用戶填寫的時候卻沒任何提示,盡量在用戶輸入前提示用戶格式要求、選填或必填。下圖是免撥注冊和apple sotre賬號信息頁面,在用戶輸入前就提示了密碼的格式要求和選填/必填:

免撥和apple-sotre

錯誤提示

錯誤需要及時提示,不能等提交表單時再一一提示,否則很容易挑戰用戶的耐心。

例如免撥創建名片的表單,手機號碼位數不對時,焦點離開號碼輸入框的時候立刻將號碼變紅,提示用戶號碼輸入有問題:

免撥錯誤提示

輸入焦點和鍵盤

進入表單填寫頁面時,可以把輸入焦點自動放入第一個輸入項,同時彈出輸入鍵盤,讓用戶少點擊一步,要注意:如果表單頁面的內容較多且下面的內容比較重要時,不能自動彈出輸入鍵盤,以防輸入鍵盤擋住下面的內容。

隨著表單項往下一個個填的時候,已填寫的表單項要自動往上移,確保焦點所在的輸入項的輸入框一定不會被輸入鍵盤擋住。

注意幾點細節:

  • 手機號碼3 4 4分開,方便用戶閱讀;
  • 輸入郵箱時,提供后綴選擇,減少用戶輸入;
  • 輸入地點,提供當前位置和熱點城市供用戶選擇;
  • 焦點在輸入框內且框內有內容的時候,輸入框右側提供刪除按鈕,可一鍵刪除框內所有內容;

原生電話吧和免撥

匹配和識別

輸入鍵盤自動根據輸入類型匹配,比如輸入電話號碼,那么焦點移入該輸入框時自動把鍵盤切換為數字鍵盤,以減少用戶手動操作次數;在填寫表單的非最后一項時,點擊輸入鍵盤右下角的return、換行時,可以自行切換到下一個輸入項。

比如IOS原生通訊錄添加新聯系人時,點擊鍵盤右下角的return和換行都會自動切換到下一輸入項:

IOS原生電話本

盡量減少頁面的跳轉

能在一個頁面完成的盡量不要再跳轉新頁面;如果編輯的時候跳轉新頁面編輯,那一定要在編輯前的頁面可以看到設置值。下圖的兩種性別設置方法,個人更喜好第一種,因為第一種減少了頁面的跳轉,降低了用戶的認知:

微博和微信

微信和來往的個人信息的每項都是跳轉新頁面編輯的,但是在總頁面上就能看到設置值

微信和淘寶

二次確認

表單填到一半,點擊返回或退出最好能有二次對話框確認。

鍵盤輸入始終是移動端的痛點之一,好不容易才完成幾項內容的填寫,不小心點了后退或退出就白忙活了,加上使用環境的影響(比如在公交車上、地鐵上),誤操作概率更大,所以如果表單填到一半退出,一定要二次對話框確認,如果什么都沒填退出,則不需要二次確認了。

 

本文由 @BingSun 原創投稿,并經人人都是產品經理編輯。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問 cell的概念是什么呢

    回復
  2. 不錯,學習了~

    來自北京 回復
  3. ??

    來自陜西 回復
  4. 很實用,好的產品設計就是應該方便用戶,減少用戶思考的,學習了

    來自北京 回復
  5. 很實用

    來自廣東 回復
  6. 學習了

    來自北京 回復
  7. 學習了,很有啟發~

    來自江蘇 回復