B端產(chǎn)品界面設(shè)計(jì)下的場景化設(shè)計(jì)思考

17 評論 12650 瀏覽 69 收藏 13 分鐘

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

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

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

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

一、B端產(chǎn)品常見的類型

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

1. OA系統(tǒng)

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

2. Scrum系統(tǒng)

是用來做企業(yè)項(xiàng)目快速迭代的系統(tǒng),重點(diǎn)在提供高效、標(biāo)準(zhǔn)的敏捷研發(fā)管理解決方案,實(shí)現(xiàn)快速管理問題,員工間順暢協(xié)作,實(shí)現(xiàn)快速研發(fā)和迭代產(chǎn)品。在設(shè)計(jì)Scrum系統(tǒng)的時候,設(shè)計(jì)師的重點(diǎn)是了解用戶如何使用軟件來管理項(xiàng)目進(jìn)度的,他們希望如何呈現(xiàn)項(xiàng)目管理的結(jié)果,這樣子去進(jìn)行界面功能的布局和信息內(nèi)容的布局才是合理的。

3. 中臺系統(tǒng)

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

4. 小程序或APP的后臺管理系統(tǒng)

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

因此,不同產(chǎn)品其業(yè)務(wù)性質(zhì)不同,目標(biāo)用戶群不同,使用場景不同,界面設(shè)計(jì)需要考慮的重點(diǎn)就不通。

二、場景化設(shè)計(jì)

1. 什么是場景化設(shè)計(jì)

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

在面對產(chǎn)品設(shè)計(jì)有具體場景的情況下,可以基于場景得出用戶的痛點(diǎn)和需求,針對性的梳理解決方案,通過合理的設(shè)計(jì)方法,提升用戶的產(chǎn)品體驗(yàn)。

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

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

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

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

……

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

2. 有哪些場景化設(shè)計(jì)的例子

(1)淘寶

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

(2)餓了么

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

(3)簡書

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

三、“界面信息呈現(xiàn)越多越好”到底在表達(dá)什么?

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

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

表格數(shù)據(jù)展示的例子

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

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

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

通過對用戶使用該界面場景的描述,有利于我們發(fā)現(xiàn)很多用戶在使用界面過程中我們沒有注意到的細(xì)節(jié),洞察設(shè)計(jì)機(jī)會點(diǎn)

第二步:根據(jù)場景挖掘設(shè)計(jì)機(jī)會

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

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

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

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

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

第三步:輸出基于用戶場景的設(shè)計(jì)方案

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

優(yōu)化前:

基于粗暴的緊湊設(shè)計(jì):

基于場景化設(shè)計(jì):

四、總結(jié)

當(dāng)我們接到產(chǎn)品經(jīng)理說:讓用戶的界面信息越多越好吧。這樣子的粗暴需求后,我們可以試著去考慮“場景化設(shè)計(jì)”。

“界面設(shè)計(jì)的緊湊可以讓用戶看到更多的信息”這個想法雖然是合理的,但是單一的追求這個目標(biāo),會導(dǎo)致界面顯得過于擁擠和降低用戶體驗(yàn),對于用戶來說:“1、界面信息結(jié)構(gòu)展現(xiàn)清晰。2、快速找到重要的信息。3、高效完成任務(wù)。”才是合理的。而不是一味的追求在當(dāng)前屏幕里塞滿盡可能多的信息。

 

本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 那如果不同用戶對于查詢條件有著不同的使用頻率,發(fā)現(xiàn)有的高頻的查詢條件被放到了高級查詢中,每次都要點(diǎn)一下,是不是怎么了用戶的操作成本?問下如何有效解決

    回復(fù)
    1. 那就讓用戶自定義查詢條件喔

      回復(fù)
  2. Nice

    回復(fù)
    1. ??????

      回復(fù)
  3. 請問如何聯(lián)系作者?

    來自北京 回復(fù)
    1. 把您聯(lián)系方式給我,我加您

      來自浙江 回復(fù)
    2. 343492638@qq.com,評論區(qū)里微信號發(fā)不出來,被告知有違禁詞

      來自北京 回復(fù)
    3. 已經(jīng)發(fā)您郵件啦

      來自浙江 回復(fù)
    4. benzhensheji@163.com我也跟一個,

      回復(fù)
  4. 好文,有實(shí)際操作性,重點(diǎn)很準(zhǔn),好頂贊! ??

    來自上海 回復(fù)
    1. 謝謝呀,以后還會多寫噠

      來自浙江 回復(fù)
  5. 文章可以轉(zhuǎn)載嗎

    來自北京 回復(fù)
    1. 請問您是轉(zhuǎn)載哪里呀

      回復(fù)
    2. 公眾號

      來自北京 回復(fù)
    3. 可以呀,期待合作

      回復(fù)
  6. 感覺說的很清楚!

    來自貴州 回復(fù)
    1. 嗯嗯,棒棒的

      回復(fù)