【產品乾貨】還在重複老套的表單設計?該來點新的了
來自專欄艾體驗AIUX
對於交互設計師來說,自然十分了解表單的重要性。一個好的表單設計可以幫助用戶減少操作成本,提升使用的愉悅度。用戶用地開心,產品的轉化率和留存率自然就起來了。
重要性大家都明白,但具體如何優化表單設計呢?方法自然是一搜一籮筐,但表單的設計也要結合用戶使用的場景。下面小紅帽&日簽君會結合一些實際的場景跟大家聊一聊表單的優化。
優化表單的信息層級
考慮用戶使用場景
小紅帽曾經遇到過一款針對外賣騎手的產品,因為一次bug,使得產品頁面的確認鍵變得格外大,是不是看著覺得有點壓迫,失去了呼吸感?但用戶卻對這次「意外」十分喜歡。為什麼???
在得到正式的回答之前,小紅帽讓日簽君做了一件比較令人費解的事——關掉手機自動亮度,慢慢地把手機亮度降下來,直到降到了最低。如果你想知道發生了什麼的話,不如你也試試降低手機亮度?
把手機亮度降低後,是不是發現即使在很暗的情況下,依然能夠定位到那個大按鈕呢?也許「正常情況下」我們很難理解,為什麼要在這種狀態下看這個界面呢?
想知道答案並不難,只需要想像自己是一名外賣騎手即可。騎手整日奔波在商家——消費者之間,數據流量、GPS定位這些模塊都是必開啟的功能,這就使得智能手機的電量消耗十分地快。儘管會準備充電寶以備不時之需,但還是需要盡量降低屏幕亮度以節省電量,又大又醒目的按鍵可以減少騎手的誤操作。
重新整合信息結構
儘管復用一些結構模塊可以幫助設計師減少設計時間,提升效率。但復用不代表照搬,設計師需要拆分表格內的細節信息,根據使用目的及場景對信息進行結構化處理(按信息重要結構排序)重新整合信息結構。
日簽君曾經收到過一個陌生來電,一般來說,除了快遞外賣大概也沒有人會再給日簽君打電話了吧。而日簽君並沒有點過外賣,難道是哪個小可愛給我寄快遞了?可檢查了一下,這個號碼並沒有被標記為快遞送餐!
難道是詐騙犯?那可得好好會會了!點進未接來電詳情,正打算回撥的時候,日簽君才發現,原來只是誤會一場。
由於只是臨時問詢,且雙方已經加了微信好友,所以日簽君並沒有存號碼,還好通過簡訊回憶起了這個人。儘管目前大多數系統,將簡訊和通話分離,但實際上呢?我們要對應的並不是一串電話,而是電話後的人。
這個例子,重新整合了信息結構,以時間線的形式,將簡訊和通話進行了部分融合,重新讓人與人連接,而不是人與電話的連接。
表單信息設計
儘可能使用單列列表布局
為什麼要儘可能地使用單列列表布局呢?儘管閱讀時,大多數人都會遵照「Z」字布局,但表單作為一個非連續性的獨立信息,Z字布局就會讓用戶的目光時時發生轉移。相反單列表單的填寫路徑更單一,使得填寫的動作流也更直覺和高效。
但針對關聯性很強的同層級信息,多列布局的呈現方式會讓用戶感覺到信息填寫的連貫性和完整性。比如Airbnb的註冊表單里,用戶的出生年月日填寫就用多列布局呈現,但排列在整個表單最後的多列布局並不會影響前面的信息填寫動作流。
儘可能地減少用戶操作
安東尼·德·聖艾修伯里曾經說過一句很有名的話:「完美的狀態,不是不再需要增加什麼,而是無可刪減。」
除了刪減信息,優化用戶操作行為也是表單設計用戶的操作如何通過設計進行優化呢?由於時間關係,最後為大家做幾個小小的總結,希望能供大家參考:
使用分段控制項而不是下拉菜單,讓所有操作都是立即可見的,別讓用戶增加額外思考和選擇成本
嘗試使用滑動條減少需要輸入的部分
根據前期整理的信息對信息進行重新的分組排布,避免信息堆砌,幫助用戶快速發現可用信息並減少閱讀和填寫的心理負擔
其實,與其被動接受信息,倒不如主動獲取信息。畢竟分享別人再分享的東西,怎麼都還是覺得有點尷尬吧~
推薦閱讀:
※設計對用戶友好表單的8個要點
※哪一刻,你意識到平窮限制了你的想像
※淺談HTML表單(二):表單元素
※超實用HR工具包:5000個表單、3000個案例、200個PPT模板,做HR的都應該收藏!
※輸油場站「表單化」精細管理