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

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

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

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

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

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

一、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),重點關(guān)注的是他們的待辦事項,這時候,對于設(shè)計師來說,重點在工作臺界面的設(shè)計,讓員工知道我今天需要處理哪些工作,如何進入具體的流程處理頁面,只要我們設(shè)計的流程精簡、信息層次分明即可。

2. Scrum系統(tǒng)

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

3. 中臺系統(tǒng)

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

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

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

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

二、場景化設(shè)計

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

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

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

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

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

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

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

……

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

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

(1)淘寶

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

(2)餓了么

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

(3)簡書

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

優(yōu)化前:

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

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

四、總結(jié)

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

“界面設(shè)計的緊湊可以讓用戶看到更多的信息”這個想法雖然是合理的,但是單一的追求這個目標(biāo),會導(dǎo)致界面顯得過于擁擠和降低用戶體驗,對于用戶來說:“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)有的高頻的查詢條件被放到了高級查詢中,每次都要點一下,是不是怎么了用戶的操作成本?問下如何有效解決

    回復(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. 好文,有實際操作性,重點很準(zhǔn),好頂贊! ??

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

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

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

      回復(fù)
    2. 公眾號

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

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

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

      回復(fù)
专题
69313人已学习26篇文章
学会数据化运营能够提升效率,让你的工作事半功倍。
专题
14622人已学习14篇文章
用户生命周期是每个产品经理都必须要注意的一个点,它能够衡量用户对产品产生的价值,也是运营手段的最终衡量指标。本专题的文章分享了如何做好用户生命周期管理。
专题
13816人已学习13篇文章
用户体验是用户在使用产品过程中建立起来的一种纯主观感受。本专题的文章分享了如何撰写用户体验报告。
专题
13126人已学习14篇文章
好的产品是对人性的窥视,无论是做产品,做运营,懂点心理学还是很有帮助的。本专题的文章分享了消费者心理学。
专题
15737人已学习15篇文章
本专题的文章分享了B端组件的设计指南。
专题
14471人已学习13篇文章
在产品的运营过程中,无论是产品、运营还是市场团队,都希望能清晰地了解用户的行为路径,通过用户行为分析,优化用户体验,实现更精准的运营和营销。