B端產品界面設計下的場景化設計思考

產品老司機手把手教寫文檔,10天線上課程,零基礎掌握產品經理必備7大文檔撰寫法。了解一下>

本文作者從B端產品常見類型出發,圍繞什么是場景化設計、有哪些場景化設計的例子和為什么要進行場景化設計做了全方位的解讀分析,與大家分享。

B端產品設計師,經常會被產品經理告知一個用戶需求:“用戶說,產品的界面不要太多留白,我們的界面上要顯示盡可能多的信息,界面設計要緊湊,再緊湊?!睍r間長了,我們也慢慢默認這是一個指導設計師設計界面的首要準則。

那么,筆者經常會有個疑問,這是用戶的真實訴求嗎?有沒有其他方法來解決此類訴求?畢竟對于界面排版來說,界面信息多,則意味著頁面擁擠,視覺效果不佳。

下面筆者將自己的實踐思考和大家分享,我們具體來聊聊這個設計師們邁不過去的話題。

一、B端產品常見的類型

在B端產品中,常見的類型包括:OA系統、ERP系統、CRM系統、Scrum系統、中臺系統、工具類系統、小程序或APP的后臺管理系統。這些產品界面各不相同,并不都是要求界面展現信息越多越好。

1. OA系統

即自動化辦公系統,是通過軟件的方式使得辦公流程自動化,是信息管理和處理的集合。員工使用OA系統,重點關注的是他們的待辦事項,這時候,對于設計師來說,重點在工作臺界面的設計,讓員工知道我今天需要處理哪些工作,如何進入具體的流程處理頁面,只要我們設計的流程精簡、信息層次分明即可。

2. Scrum系統

是用來做企業項目快速迭代的系統,重點在提供高效、標準的敏捷研發管理解決方案,實現快速管理問題,員工間順暢協作,實現快速研發和迭代產品。在設計Scrum系統的時候,設計師的重點是了解用戶如何使用軟件來管理項目進度的,他們希望如何呈現項目管理的結果,這樣子去進行界面功能的布局和信息內容的布局才是合理的。

3. 中臺系統

集合集團的技術和數據能力,對前臺進行強力支撐。具體的產品比如有員工中心、數據中臺、產品中心等。中臺產品由于業務屬性不強,在界面表達上趨向于簡單化,一般來說表單頁、表格頁、詳情頁等已經足以覆蓋它們的大部分場景。而中臺產品由于用戶使用頻率不高,在界面排版上以專業和清晰為主。

4. 小程序或APP的后臺管理系統

是對前臺用戶界面端展示內容的管理,比如上傳、刪除、編輯等,同時大部分后臺管理系統是給運營用的,因此在設計上只需要功能全,功能找的到就好,相關的操作能一屏的不要兩屏展示,能當前頁的不要跳頁面處理。所以設計師在設計的時候,需要關注功能的整體性流程。

因此,不同產品其業務性質不同,目標用戶群不同,使用場景不同,界面設計需要考慮的重點就不通。

二、場景化設計

1. 什么是場景化設計

在產品設計中,場景化設計是指“誰(who),在什么時間(when),什么地點(where),做了什么事情(what),所面對的環境如何(how)”。具體來說,比如“小明,中午,在辦公室里,打開電腦處理考勤流程,這時正好領導打電話過來,一堆流程無法快速處理”。

在面對產品設計有具體場景的情況下,可以基于場景得出用戶的痛點和需求,針對性的梳理解決方案,通過合理的設計方法,提升用戶的產品體驗。

因此,我們要問:“是什么場景下,用戶要求界面看到的信息越多越好?”到底用戶的痛點是什么:

用戶每天要處理100條左右數據,那么界面設計的數據信息多就能看全這100條數據嗎?

用戶需要對重要數據進行對比查看和分析,那么界面設計的數據多了就能讓他快速進行對比嗎?

界面上除了簡單的表格,什么功能都沒有,用戶如何篩選自己需要的信息,簡單的將數據排出來就可以了嗎?

……

還有很多情況,無論你界面上放置的信息量多大,界面設計多緊湊(模塊間間距4px,表格行高20px,且不說界面丑不丑,這絕對會讓用戶在使用界面后產生視覺疲勞),都無法解決場景化下用戶的痛點。

2. 有哪些場景化設計的例子

(1)淘寶

登錄淘寶首頁,搜索框輸入目標關鍵詞,我們可以看到映入眼簾的是淘寶默認將對應物品的“篩選條件”展開,而匹配上的寶貝列表,處于屏幕二分之一以下區域。為什么這么設計呢?當我們搜索較為寬泛的關鍵詞進入寶貝列表頁后,用戶是處于迷茫狀態的,他并不精確地知道自己要的是什么,而淘寶將精細化篩選條件直接展現給用戶,讓用戶可以根據條件進行精細過濾。當然用戶也可以主動收起過濾條件。

(2)餓了么

打開餓了么訂外賣,根據定位,餓了么會根據用戶目前所在的地理位置主動推送紅包和優惠券。同時通過定位,餓了么個性化推送用戶信息,形成用戶基于地理位置的個性化首頁,主動幫助用戶篩選外賣信息,減少用戶過濾和搜索,讓用戶直達自己最在意的信息。

(3)簡書

在簡書中,當你對一篇文章點贊的時候,簡書會彈出一個toast提示,提示用戶還未關注作者,是否需要關注TA。簡書認為,當你點贊作者文章的時候,就是欣賞作者的一種表現,那么你既然點贊了,順帶關注TA吧,這樣子后期作者的動態,就可以隨時了解了。

三、“界面信息呈現越多越好”到底在表達什么?

通過對場景化設計的了解,我們可以知道,當用戶在表達:“讓界面能看到的信息越多越好,界面設計的緊湊點吧?!本筒辉偈且粋€簡單的問題了,背后有著更深刻的更需要被剖析的原因。

B端產品的難點是業務復雜性,業務一復雜,設計分析和設計復雜度就指數級上升了。簡單的“界面設計緊湊”,并不能有效得解決用戶的痛點。下面我們來看一個B端案例,用“場景化設計”的方法去處理“讓界面設計的緊湊點吧”這個問題。

表格數據展示的例子

表格頁通常都會給予查詢條件,但是有些表格的查詢字段很多,有十幾個,這時候全部鋪在頁面上很占空間,導致用戶能看到的表格數據就不多了。這時候用戶說,界面在設計緊湊點吧。

第一步:梳理用戶使用該界面的場景,且窮盡

  1. 數據分析員(who),在數據篩選前(when),在辦公室(where),打開電腦查看數據創建者錄入進去的數據(what),面對一堆數據,需要從各個維度將數據篩選出來,太心累(how)。
  2. 數據分析員(who),在篩選數據時(when),輸入篩選條件和點擊查詢按鈕,查看需要的數據(what),不停地輸入篩選條件,查詢數據,再輸入再查詢,導致效率很低(how)。
  3. 數據分析員(who),在每次篩選數據后(when),要對一些同緯度的數據進行對比(what),但是數據在一屏展示不下,需要翻頁查看,很困難(how)。

通過對用戶使用該界面場景的描述,有利于我們發現很多用戶在使用界面過程中我們沒有注意到的細節,洞察設計機會點

第二步:根據場景挖掘設計機會

從以上3個用戶使用界面的場景,我們可以發現,數據分析員每天要查看的數據是很多的,同時要從一堆數據中篩選出自己需要的數據,并且進行數據對比,較為復雜。因此,單純的讓界面呈現多的信息和界面設計的緊湊,并不能解決用戶的痛點。

面對以上第一條:我們可以將數據分析員常用的篩選條件平鋪出來,將不常用的放入高級查詢。

面對以上第二條:由于數據分析員需要不停的篩選和查詢不同維度的數據,而每天需要查詢的維度又是差不多的,那么我們可以允許用戶保存常用的查詢條件。

面對以上第三條:當篩選出數據后,數據分析員需要對數據進行對比,由于數據是系統自動過濾出來的,所以給予用戶主動的”拖拽“換行功能,可以保證用戶將重要數據在一屏中呈現。

同時,在數據分析員無需篩選數據,僅僅全局瀏覽數據的時候,可以把查詢條件收起來。

第三步:輸出基于用戶場景的設計方案

由此,我們的界面變成了這樣子:

優化前:

基于粗暴的緊湊設計:

基于場景化設計:

四、總結

當我們接到產品經理說:讓用戶的界面信息越多越好吧。這樣子的粗暴需求后,我們可以試著去考慮“場景化設計”。

“界面設計的緊湊可以讓用戶看到更多的信息”這個想法雖然是合理的,但是單一的追求這個目標,會導致界面顯得過于擁擠和降低用戶體驗,對于用戶來說:“1、界面信息結構展現清晰。2、快速找到重要的信息。3、高效完成任務?!辈攀呛侠淼?。而不是一味的追求在當前屏幕里塞滿盡可能多的信息。

 

本文由 @知果 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. Nice

    回復
    1. ??????

      回復
  2. 請問如何聯系作者?

    回復
    1. 把您聯系方式給我,我加您

      回復
    2. [email protected],評論區里微信號發不出來,被告知有違禁詞

      回復
    3. 已經發您郵件啦

      回復
  3. 好文,有實際操作性,重點很準,好頂贊! ;-)

    回復
    1. 謝謝呀,以后還會多寫噠

      回復
  4. 文章可以轉載嗎

    回復
    1. 請問您是轉載哪里呀

      回復
    2. 公眾號

      回復
    3. 可以呀,期待合作

      回復
  5. 感覺說的很清楚!

    回復
    1. 嗯嗯,棒棒的

      回復
钱龙捕鱼漏洞技巧