<listing id="rn17l"></listing>
<var id="rn17l"><dl id="rn17l"><progress id="rn17l"></progress></dl></var>
<var id="rn17l"></var>
<var id="rn17l"><strike id="rn17l"></strike></var>
<var id="rn17l"></var>
<cite id="rn17l"></cite>
<menuitem id="rn17l"></menuitem>
<menuitem id="rn17l"></menuitem>
<var id="rn17l"><dl id="rn17l"></dl></var> <var id="rn17l"><strike id="rn17l"></strike></var>
<var id="rn17l"></var><var id="rn17l"></var>
品牌咨詢電話 4001-607-668

是的,我又寫表單設計了。去年寫了一篇《B端產品如何簡化表單輸入?這里有 7 個小技巧》,本以為遇到表單設計沒什么好怕的了,但沒多久就遇到了特別復雜的表單,有大幾百個錄入項。當然,比設計表單更崩潰的是用戶要填寫這些表單?,F實情況是,很多企業中大量員工的日常工作就埋沒在這些冗長復雜的表單之中。

往期回顧:

 

B端產品如何簡化表單輸入?這里有 7 個小技巧

如何簡化表單輸入,是體驗設計的重要環節,對于效率第一的 B 端產品來說更是重中之重。

閱讀文章 >>

 

不得不承認,對于特別復雜的B端表單,「簡化」只是提升其易用性的方法之一。遇到數據量大,層級深,數據之間有交叉或嵌套關系的表單時,還需要考慮該如何分析拆解、組織呈現這些數據。

這次分享的內容,就是將以上策略整合成一套適用性更廣泛的結構化方法。

將用戶操作成本降至最低

《Web表單設計——點石成金》提到一對概念「Inside Out 由內而外」和「Outside In 由外而內」。簡單理解,這是兩個看待事物的視角?!窱nside Out」是從系統或軟件角度出發,向用戶要求「請提供我需要的信息」;「Outside In」則是從用戶視角看待系統:用戶如何理解這些內容?他們會獲得什么?能做什么?

這兩種視角之間的矛盾就是:用戶進行更少操作 VS 系統獲取更多信息。

要幫用戶解決這個矛盾,需要向系統投入更多技術資源,從而能讓系統代替用戶承擔更多工作負擔。解決方法的技術成本有高有低,但從優化效果來看可大致分成三個等級:

如何應對復雜的B端表單設計?來看這個結構化方法(上)

第一級:用戶無感的數據獲取方式

例如

  • 平臺間的對接:通過平臺對接獲得完整、規范的數據。
  • 系統自動獲取數據:獲取來源包括用戶已經輸入過的數據,或者根據用戶已輸入數據計算出來的其他數據,也包括設備數據。注意某些數據獲取需要獲得用戶允許。

第二級:允許用戶提供其他類型的信息

例如

  • OCR技術:利用圖像識別技術,用戶上傳圖片代替表單輸入,系統將圖像內容轉換為文本后填入對應輸入框。
  • 批量導入:用戶上傳文件,系統讀取后將數據填入對應輸入框。
  • 語音輸入:在對文本格式要求不嚴格的場景下支持語音輸入。

第三級:從量上降低操作成本

例如

  • 選擇代替輸入:維護一套數據,讓用戶從輸入變為選擇。此方式除了減少鍵盤敲擊次數,還可保證填入的內容符合格式規范。
  • 設置合理默認值:默認值可能取自統計數據,也可能基于用戶個性化數據。默認值不僅可免去輸入過程,還可以作為建議值給用戶提供指導。
  • 訪問剪貼板:例如在MacOS Sierra和iOS10以上的蘋果設備之間,可以無縫復制粘貼文本和圖片。

設計聰明貼心的表單

在跟客戶經理聊天的時候會發現,那些我們自以為簡單明白的設計,對用戶來說竟然如同天書。神馬?我們不是竭盡所能降低了用戶操作成本嗎?為什么能順利完成表單的用戶屈指可數?

究其原因,我們還是單純的從系統視角「Inside Out」看待問題。如果能切換成用戶視角「Outside In」,在預判用戶可能會遇到的問題時就清晰了很多:用戶在填寫每個輸入框都經歷了「填寫前」、「填寫中」、「填寫后」這三個階段。

如何應對復雜的B端表單設計?來看這個結構化方法(上)

  • 在「填寫前」用戶可能會疑惑:這個是什么意思?為什么要填這個?怎么填?
  • 在「填寫中」用戶需要知道:我填對了嗎?我完成了嗎?
  • 在「填寫后」用戶會想要反饋:我成功了嗎?怎么失敗了?是我自己的問題嗎?我該怎么修正錯誤?

所以從用戶視角看,用戶需要的是一個聰明貼心的輸入框,即在「填寫前」、「填寫中」、「填寫后」這三個階段中即時給予用戶幫助和回應。

1. 填寫前

在填寫具體的表單項之前,用戶需要理解和清楚要做什么,做這個的目的是什么,他能獲得什么,以及該如何做。常見的方法是利用標簽和占位符對這些問題進行解釋,但標簽和占位符字數有限,必要時可以借助提示文字輔助說明。

如何應對復雜的B端表單設計?來看這個結構化方法(上)

△ 菜鳥裹裹首頁頂部搜索框,在點擊之前,占位符描述操作目的;點擊之后,占位符解釋操作方法。

2. 填寫中

從系統角度看,我們希望用戶按照系統要求的規則輸入信息,即「系統的實現模型」。從用戶角度看,用戶可能不知道、不理解規則,即「用戶的心理模型」。如果「實現模型」和「心理模型」兩者出現分歧,用戶操作心流就會遇到阻塞,甚至出錯。

為了掃除障礙,需要設計師利用同理心或者調研的方式來理解用戶心理模型(B端產品基本很難單純利用同理心),利用設計手段,將「實現模型」包裝成用戶可以接受和理解的「心理模型」。

如何應對復雜的B端表單設計?來看這個結構化方法(上)

△ 系統報錯提示,大部分用戶根本無法理解

用戶出錯的另一個原因是,情境中存在干擾因素,例如時間緊迫或注意力不集中(開車時使用導航軟件),環境吵鬧,在戶外可能有惡劣天氣干擾。因此在設計時需要考慮到用戶操作可能處于怎樣的情境之下,用戶會遇到哪些障礙和問題?然后幫助用戶過濾情境中的各種干擾因素,盡快完成任務。

這個階段的設計要點,就是要防錯容錯。比起用戶反復出錯和修改,如果系統能容錯并自動轉化成規范的格式,是再好不過了(雖然現實中要評估開發成本)。

如何應對復雜的B端表單設計?來看這個結構化方法(上)

△ 轉賬頁面的防錯設計

如何應對復雜的B端表單設計?來看這個結構化方法(上)

△ 批量操作的防錯設計

如何應對復雜的B端表單設計?來看這個結構化方法(上)

△ 系統應當允許用戶輸入多種格式的數據,并將其轉化為格式化的數據

3. 填寫后

填寫后,要讓用戶知道自己完成的怎么樣:成功了要給予鼓勵,并引導前往下一個任務,如果失敗了,要幫助用戶找到原因和解決方案。及時清晰的反饋,可以讓用戶明確當前狀況,消除不確定性,縮短在每個節點的逗留時間,快速完成任務最終達到目標。

如何應對復雜的B端表單設計?來看這個結構化方法(上)

△ 驗證到用戶輸入的手機號碼已注冊,推測用戶可能忘記密碼

如何應對復雜的B端表單設計?來看這個結構化方法(上)

△ 用戶在完成某任務后,在等待結果過程中,引導用戶處理其他并行任務。

以上是今天的主要內容,關于從整體上思考如何組織和呈現各種復雜程度的表單,我們下期繼續

現在就與思拓客服交流

4001-607-668

您也可進行在線咨詢或預約項目顧問

无码少妇一区二区三区免费