設(shè)計(jì)總結(jié):群管工具的交互剖析

5 評論 7632 瀏覽 48 收藏 24 分鐘

最近正在負(fù)責(zé)的一個(gè)項(xiàng)目已經(jīng)進(jìn)入第五期的需求迭代了,我認(rèn)為非常有必要對這個(gè)項(xiàng)目做一次設(shè)計(jì)小結(jié),并且也借此機(jī)會將產(chǎn)品分享給各位小伙伴們。在這個(gè)項(xiàng)目中雖然我是從事交互設(shè)計(jì)的工作,但由于歷經(jīng)多個(gè)產(chǎn)品經(jīng)理的輪轉(zhuǎn),因此多數(shù)需求和用研都是我在跟進(jìn),從項(xiàng)目啟動到日活9000,我是唯一從頭至尾參與其中的產(chǎn)品成員,下面我會從產(chǎn)品的背景、使用場景、交互流程、頁面展示等各個(gè)方面娓娓道來。

1、產(chǎn)品背景

現(xiàn)有的群管軟件在市面上并不常見,免費(fèi)好用的更是少之又少,這并不是因?yàn)檫@類工具沒有需求。在研究競品的過程中,我對此現(xiàn)象總結(jié)了三點(diǎn)主要原因:1、該類產(chǎn)品容易受到微信官方的打壓和排斥;2、微信如果強(qiáng)化群功能也會導(dǎo)致這類工具的迅速死亡;3、存在第三方工具普遍存在的痛點(diǎn)——微信改變規(guī)則很可能將導(dǎo)致整體功能的調(diào)整,因此開發(fā)成本和維護(hù)成本都比較大。這三個(gè)原因?qū)е逻@類軟件收費(fèi)很貴,功能操作比較粗糙,學(xué)習(xí)成本高。而我們團(tuán)隊(duì)開發(fā)該產(chǎn)品旨在完善功能模塊、降低用戶的學(xué)習(xí)成本,提高用戶體驗(yàn)。群管工具的需求點(diǎn)較多、使用場景復(fù)雜,設(shè)計(jì)過程中遇到了很多阻礙,因此對我來說是不小的挑戰(zhàn),讓我在項(xiàng)目推進(jìn)過程中有了不小的成長。

2、用戶類型

這款群管軟件是幫助微信社群運(yùn)營人員管理和裂變的協(xié)助型工具,提高他們的工作效率,以最低的時(shí)間成本得到最大的回報(bào)的一款社群管理工具。使用我們工具的大都有四類人群,一是淘客微商類運(yùn)營者,他們主要是在社群里推廣自己的商品,以盈利最大化為目的;二類是教育培訓(xùn)、知識分享型社群運(yùn)營者,他們將群作為一個(gè)班級體進(jìn)行線上培訓(xùn),將群按照等級劃分設(shè)置入群權(quán)限,同時(shí)也舉辦線下活動擴(kuò)大規(guī)模;三類是娛樂游戲、興趣交友群,這類群大都采用線上推廣、線下活動的運(yùn)營模式。

3、產(chǎn)品目的

本次產(chǎn)品的目的主要有三個(gè):

(1)幫助運(yùn)營微信群的用戶可以更高效的管理社群;

(2)幫助運(yùn)營微信群的用戶挖掘社群價(jià)值;

(3)幫助運(yùn)營人員拓展和擴(kuò)大群規(guī)模;

4、產(chǎn)品描述

4.1 產(chǎn)品框架

根據(jù)產(chǎn)品的目的我們分析了用戶行為,按照功能優(yōu)先級來架構(gòu)產(chǎn)品,產(chǎn)品初期只能按照用戶的單一的使用場景來規(guī)劃功能模塊,隨著功能模塊的不斷增加,我們就需要對功能模塊做出合理整合,按照用戶完整的操作場景來規(guī)劃模塊,到目前為止四期的需求已經(jīng)架構(gòu)了不少的功能模塊,現(xiàn)在的版本也是經(jīng)過多次整合的結(jié)果,模塊架構(gòu)雖然很有指向性,但是依然不能清晰引導(dǎo)用戶去完成操作閉環(huán)。這是因?yàn)槲覀兠嫦虻挠脩舨⒎菃我活愋停煌愋偷挠脩羰褂脠鼍案鞑幌嗤?,因此下面的?guī)劃是將這些模塊插件化,讓用戶去組合搭建他們需要的使用場景。基于后期規(guī)劃,在設(shè)計(jì)過程中逐漸將完整和關(guān)聯(lián)的功能模塊整合在一起,將單獨(dú)場景功能作為獨(dú)立模塊,各個(gè)功能模塊之間可以關(guān)聯(lián)使用也可以獨(dú)立使用,用戶可以根據(jù)需求來自定義模塊。

1.3.0版本的客戶端主要分為六個(gè)模塊:

  1. 客服群管:使用場景主要是為了讓用戶可以更好的回復(fù)群成員的問題,防止遺漏信息,提高回復(fù)效率,這個(gè)模塊淘客微商類運(yùn)營用戶使用較多;
  2. 群發(fā)模塊:便于用戶給多群推送多條信息,還可以定時(shí)推送,更加便捷高效,這個(gè)模塊各類社群運(yùn)營人員都比較頻繁使用;
  3. 檢測僵尸粉:有效清理死粉
  4. 加好友:拓展粉絲群
  5. 群管機(jī)器人:自動化管理社群
  6. 統(tǒng)計(jì)查詢:挖掘社群價(jià)值

前兩個(gè)模塊功能都是給群成員發(fā)送消息,但是使用場景截然不同;第三第四項(xiàng)都屬于好友功能;第五項(xiàng)提供了自動服務(wù),在用戶不在電腦前也能有效管理社群;第六項(xiàng)的目的是挖掘社群價(jià)值,運(yùn)營人員可以有針對性的去展開工作。

4.2 產(chǎn)品模塊流程

每個(gè)模塊都有獨(dú)立的操作流程,但是又相互關(guān)聯(lián),不同類型的用戶需要串聯(lián)使用才能形成完整的操作流程。下面是每個(gè)模塊的具體操作流程(某些模塊較復(fù)雜,無法用樹形圖展示清楚,所以這里做了省略,有興趣的朋友可以去體驗(yàn)產(chǎn)品):

4.3 產(chǎn)品交互操作

這里主要從兩個(gè)設(shè)計(jì)難點(diǎn)剖析,一是群管設(shè)置項(xiàng)的交互問題,二是長進(jìn)度交互展示,三是批量篩選交互集錦。

(1)設(shè)置項(xiàng)交互設(shè)計(jì)集錦

群管設(shè)置項(xiàng)是程序執(zhí)行命令和修改命令的入口,根據(jù)不同的場景我們需要采用不同的交互方式,下面我介紹一下每一種交互方式的使用場景,并且闡釋在群管軟件中的各個(gè)場景我采用的交互方式。

① 開關(guān)的利用

開關(guān)一般是一個(gè)總功能的快捷操作項(xiàng),它可以及時(shí)阻止錯(cuò)誤程序的執(zhí)行,類似電流總閘在緊急時(shí)刻可以阻止危險(xiǎn);它也可以讓用戶在不破壞自己設(shè)置好的復(fù)雜流程的情況下控制程序的啟動和關(guān)閉,操作更加自由和快捷。下面是設(shè)計(jì)過程中遇到一些難點(diǎn):

  1. 設(shè)置過程中遇到父子級功能開關(guān),需要注意啟用和關(guān)閉狀態(tài)區(qū)分,例如父級開關(guān)打開,子級選擇可以任意選擇,父級開關(guān)關(guān)閉,子級選擇不可勾選,以此來讓用戶分辨邏輯關(guān)系;
  2. 在設(shè)計(jì)層級較為復(fù)雜的父子級設(shè)置項(xiàng)時(shí),需要拆解層級,一般用戶只能接受兩個(gè)層級關(guān)系,過多的嵌套層級會讓用戶迷惑。

② 手動保存

即用戶操作完設(shè)置項(xiàng)后需要手動點(diǎn)擊保存才會生效

  • 問題:需要手動觸發(fā)保存,操作路徑較長,影響用戶體驗(yàn);適用于一次性設(shè)置,操作頻率較少的情況;
  • 優(yōu)勢:避免誤操作造成的程序運(yùn)行錯(cuò)誤;

手動保存的兩種設(shè)計(jì)方式:

  • 逐項(xiàng)保存:適用于設(shè)置項(xiàng)較為復(fù)雜,設(shè)置路徑較長的情況,可以實(shí)時(shí)反饋給用戶是否輸入錯(cuò)誤以及危險(xiǎn)提示,也可以很好的防止丟失的危險(xiǎn);
  • 總保存:適用于設(shè)置項(xiàng)簡單,用戶花費(fèi)較少的時(shí)間可以一次性操作完成的情況;

③ 即時(shí)生效

即使生效即自動保存:用戶設(shè)置的過程中程序自從記住設(shè)置狀態(tài)

  • 問題:立馬生效,用戶容易誤操作導(dǎo)致功能運(yùn)行錯(cuò)誤;適用于間歇性運(yùn)行的程序,否則容易造成出錯(cuò);
  • 優(yōu)勢:實(shí)時(shí)保存可以減少他們的輸入以及"所見即所得",讓他們看到設(shè)置所帶來的變化,讓他們覺得你的程序很cool?

在群管軟件中比較少采用這種交互方式,我們的設(shè)置項(xiàng)內(nèi)容較為復(fù)雜,有很多輸入和編輯的選項(xiàng),如果采用即時(shí)生效的交互方式往往會造成執(zhí)行錯(cuò)誤。

④ 保存狀態(tài)和修改狀態(tài)的切換

這里說的保存修改狀態(tài)一般是針對手動保存的交互方式。在移動端,一般會將其分為兩個(gè)頁面,而在桌面端的設(shè)計(jì)中,往往會避免多頁面的跳轉(zhuǎn),因此在同一個(gè)頁面需要展示多種狀態(tài),所以在設(shè)置項(xiàng)的設(shè)計(jì)過程中需要將保存狀態(tài)和修改狀態(tài)明晰地區(qū)分開,這樣能夠減少用戶對當(dāng)前狀態(tài)的混亂感,防止出現(xiàn)忘記保存或者多次重復(fù)保存的狀況。

設(shè)計(jì)實(shí)例

層級較多,設(shè)置項(xiàng)復(fù)雜的情況下,就需要合理的采用以上三種交互方式,群管軟件的設(shè)置項(xiàng)(更名群管機(jī)器人)模塊就相當(dāng)?shù)湫偷年U釋了各種不同場景下采用的不同交互方式,下面我采用頁面交互的方式來闡釋各種場景的操作交互。

從頁面邏輯可以看出整個(gè)操作的流程為:

關(guān)閉功能開關(guān)→ 啟動修改→ 修改配置→ 保存配置→ 開啟功能開關(guān)

這樣的功能流程看似十分復(fù)雜,但確是防止高頻用戶誤操作的最好方式,也能滿足普通用戶的快捷修改。經(jīng)過用戶調(diào)研,用戶在使用踢人設(shè)置的過程中經(jīng)常會遇到以下幾個(gè)操作場景:

場景一:踢人操作出現(xiàn)問題,但不知道具體原因,用戶需要及時(shí)停止后進(jìn)行具體排查,總功能的開關(guān)可以很好的滿足這種緊急需求;

在場景一中一般采用的操作流程為:關(guān)閉功能開關(guān)→ 啟動修改→ 修改配置→ 保存配置→ 開啟功能開關(guān)

場景二:用戶發(fā)現(xiàn)某一個(gè)項(xiàng)配置有誤,但是影響不大,可以在功能執(zhí)行的同時(shí)去修改配置項(xiàng),修改的過程中程序依然按照修改之前的配置項(xiàng)執(zhí)行操作,當(dāng)用戶觸發(fā)保存按鈕時(shí)才會按照新的配置項(xiàng)執(zhí)行;

在場景二中一般采用的操作流程為:啟動修改→ 修改配置→ 保存配置

場景三:用戶需要一定時(shí)間段內(nèi)接觸踢人設(shè)置,但是不想修改任何設(shè)置項(xiàng),此時(shí)只需要關(guān)閉總功能開關(guān),簡單快捷。

在場景三中一般采用的操作流程為:關(guān)閉功能開關(guān)

(2)長進(jìn)度交互設(shè)計(jì)集錦

所謂長進(jìn)度,即程序執(zhí)行操作需要一個(gè)較長的過程,這個(gè)過程需要很好的反饋給用戶,讓其能夠明確程序的進(jìn)度從而明白自己的下一步操作,這里的交互方式會密切影響用戶體驗(yàn)。群管工具中的長進(jìn)程隨處可見,在設(shè)計(jì)初始就需要一個(gè)統(tǒng)一規(guī)劃,例如哪些場景需要暫停;哪些場景需要查看具體進(jìn)程;多個(gè)長進(jìn)度同時(shí)進(jìn)行時(shí)的界面反饋;長進(jìn)程發(fā)生錯(cuò)誤或者程序意外退出時(shí)的界面反饋等等。

設(shè)計(jì)實(shí)例:

① 實(shí)例一 單任務(wù)進(jìn)程

下面展示的是群管工具中“檢測僵尸粉”模塊的頁面進(jìn)度,以此作為案例來說明長進(jìn)度的交互操作:

除了給用戶標(biāo)明每個(gè)步驟的進(jìn)程狀態(tài)以外,這里還涉及用戶在其他頁面操作過程中對此進(jìn)度的提示,例如在檢測僵尸粉的進(jìn)程中去修改群管機(jī)器人的設(shè)置項(xiàng),頂部tab會標(biāo)注出正在loading中的狀態(tài),提示用戶該模塊下的功能正處于長進(jìn)程中。

② 實(shí)例二 多任務(wù)進(jìn)程

當(dāng)用戶在等待長進(jìn)程的過程中將軟件關(guān)閉或者最小化,去操作其它工作,一段時(shí)間后進(jìn)程就容易被用戶忽視和忘記,因此可能會錯(cuò)過很多及時(shí)重要信息,例如群發(fā)進(jìn)度:定時(shí)群發(fā)有沒有定時(shí)發(fā)送,去查看用戶相應(yīng)的信息反饋。但是又不能每個(gè)任務(wù)都強(qiáng)制提醒用戶,這會造成信息打擾,引起用戶的煩躁情緒。因此我們采用了一個(gè)比較中庸的設(shè)計(jì)方案——“任務(wù)球”。桌面任務(wù)球是當(dāng)程序在后臺運(yùn)行時(shí)始終懸浮在桌面上一個(gè)任務(wù)進(jìn)度反饋球,體積很小,不會打擾和干擾用戶的正常工作,用戶可以在進(jìn)行其它工作時(shí)隨時(shí)隨地查看進(jìn)程狀態(tài),并且對其作出及時(shí)操作。這個(gè)任務(wù)球功能還沒有上線,還在設(shè)計(jì)階段,下面是一個(gè)初步方案:

該任務(wù)球有兩個(gè)主要功能:

  1. 為了提示用戶長進(jìn)程的及時(shí)狀態(tài);
  2. 遇到突發(fā)狀況,方便用戶及時(shí)在任務(wù)球上作出快速操作:暫?;蛘呷∠?/li>

因此在設(shè)計(jì)過程中不會存取歷史記錄,完成的和取消的任務(wù)都會及時(shí)告知用戶后自動消失,保證任務(wù)球的展示清晰明了。想查看具體進(jìn)度的用戶也可以點(diǎn)擊相應(yīng)的list進(jìn)入軟件的對應(yīng)功能模塊查看詳情后再施行操作。

(3)批量篩選交互設(shè)計(jì)集錦

在做篩選對象的交互設(shè)計(jì)時(shí),往往需要考慮兩個(gè)層面,一是用戶操作成本,二是用戶學(xué)習(xí)成本;操作成本是指同樣達(dá)到一個(gè)終點(diǎn)的路程,用戶走哪條比較快和方便;學(xué)習(xí)成本是方便和快速的捷徑用戶能否快速理解,是否需要用戶更多的時(shí)間去學(xué)習(xí)和習(xí)慣。在設(shè)計(jì)過程中需要兼顧二者是一個(gè)很大的挑戰(zhàn)。

設(shè)計(jì)實(shí)例:

①實(shí)例一 多層級的篩選

下面就結(jié)合加好友功能給大家詳細(xì)剖析設(shè)計(jì)方案的推進(jìn)。首先,我先介紹一下加好友功能的使用場景:

  • 場景一:微商等營銷人員需要擴(kuò)充自己的朋友圈做一對一的銷售和廣告,需要加所有相關(guān)群內(nèi)的成員為好友;
  • 場景二:微信號導(dǎo)流,把營銷號上的好友引流到門檻更高的個(gè)人大號,分流管理和推銷;
  • 場景三:加回檢測出的僵尸粉,爭取再次寵幸的機(jī)會。

在設(shè)計(jì)之前除了研究各個(gè)場景以外,還有一個(gè)很重要事情是研究微信客戶端的加好友規(guī)則,由于我們的軟件屬于第三方軟件,因此設(shè)計(jì)和開發(fā)之前需要弄清楚微信的加好友規(guī)則。我們的軟件是為用戶提供批量加好友的服務(wù),a所以還需要去探究微信批量加好友的潛在規(guī)則和風(fēng)險(xiǎn)。在開發(fā)推進(jìn)中我們遇到了很多阻礙,例如微信在不斷改變每天有效發(fā)出好友驗(yàn)證的數(shù)量,發(fā)送頻率過快容易封號等等。基于以上種種條框,在有效空間內(nèi)畫原型是一件十分艱難和頭疼的事,需要平衡用戶體驗(yàn)、程序可實(shí)現(xiàn)性以及微信平臺的規(guī)則限制等多種因素。

下面我從兩個(gè)方面闡述加好友模塊的篩選對象設(shè)計(jì):

1)展示vs篩選

展示和篩選看起來沒有對立性,但在加好友的設(shè)計(jì)中是一個(gè)非常重要的平衡點(diǎn)。加好友模塊不是簡單的選擇好友然后發(fā)送驗(yàn)證的過程,它涉及兩個(gè)操作場景:一是無差別的針對群對象進(jìn)行選擇操作,向群內(nèi)所有成員發(fā)送好友驗(yàn)證;二是有針對性的選擇群內(nèi)部分成員發(fā)送好友驗(yàn)證。針對兩種操作場景展示的界面可以說是完全不一樣,前者需要以群作為主要展示對象,后者以群內(nèi)成員作為主要展示對象。需要同時(shí)滿足以上兩種操作場景,并且還需要滿足一些其它功能需求,例如針對場景一需要剔除一些對象(見第三點(diǎn)),這樣會導(dǎo)致展示上相對復(fù)雜,即一個(gè)頁面就要讓兩種需求的用戶快速找到達(dá)到目的地的路線。下面我給出我的設(shè)計(jì)方案,也希望大家可以指正:

以上的展示方式可以滿足兩種操作場景,無差別操作只需要對左側(cè)的群列表實(shí)施操作,就可以進(jìn)行下一步的發(fā)送;也可以方便的查看各個(gè)群內(nèi)的成員,實(shí)施針對性操作。但由于這種設(shè)計(jì)將勾選群和全選成員的操作合二為一,導(dǎo)致少部分用戶反饋使用過程中不會全選群成員。由于軟件操作場景的特殊性導(dǎo)致的篩選操作過多,盡量減少勾選項(xiàng)有利于用戶對操作層級的認(rèn)知,所以我認(rèn)為這個(gè)認(rèn)知點(diǎn)可以通過新手引導(dǎo)的方式告知用戶,簡單的學(xué)習(xí)和認(rèn)知就能換取用戶更加快捷方便的操作便可以被認(rèn)為是合格的設(shè)計(jì),設(shè)計(jì)并非死板教條地應(yīng)用模版,需要根據(jù)場景來找到相對最優(yōu)的解決問題的路徑。

2)層級的遞進(jìn)

在一個(gè)頁面上展示較為復(fù)雜的層級關(guān)系往往會讓用戶迷茫,但是分頁一步一步引導(dǎo)用戶去操作又不能完美滿足各種場景的用戶需求,因此在確保功能完整的情況下我采用了在一個(gè)頁面內(nèi)完成所有篩選操作的交互方式。話不多說,上個(gè)動圖大家感受下操作邏輯:

這個(gè)操作邏輯大致分為三步:選擇群對象→ 篩選群成員→ 剔除對象→ 開始發(fā)送驗(yàn)證→ 進(jìn)入進(jìn)程

將群作為tab列表切換查看,用戶可以在查看群成員的同時(shí)自由選擇,無論是無差別的針對群做操作,還是針對性的對群內(nèi)成員操作,都可以高效的滿足用戶的操作場景。發(fā)送前的剔除是針對以上操作的所有群內(nèi)成員的剔除,可以剔除群主身份和已發(fā)送過驗(yàn)證的群成員對象。最后進(jìn)入發(fā)送流程,在發(fā)送流程的進(jìn)程中還可以追加發(fā)送對象。這個(gè)進(jìn)程可以根據(jù)賬號的實(shí)際情況設(shè)置發(fā)送頻率和每日的發(fā)送上線,防止出現(xiàn)操作過于頻繁而導(dǎo)致封號的現(xiàn)象。在發(fā)送進(jìn)程中還能查看具體的發(fā)送狀態(tài),例如已發(fā)送對象、待發(fā)送對象和已通過對象。

② 實(shí)例二 ?對象的搜索和篩選

篩選對象和搜索對象需要共存一般發(fā)生在多選篩選的情況下,正常情況下,搜索的對象就是即將篩選的對象,然而在多選操作的情況下,模糊搜索的對象可能其中部分幾個(gè)是用戶需要選擇的有效對象,因此在搜索列表中需要展示一下幾個(gè)重要信息:

  1. 全部對象;
  2. 搜索后的對象;
  3. 選擇的對象。

開始的設(shè)計(jì)比較簡單粗暴,僅僅在列表中給了一個(gè)搜索入口(如左圖),用戶反饋篩選起來比較不方便,經(jīng)過對用戶行為的深度研究,發(fā)現(xiàn)用戶有二次篩選的習(xí)慣。因此在接下來的改版會將列表篩選做如右圖的優(yōu)化,加入僅顯示已選的入口,用戶可以在選擇部分對象后,在列表中進(jìn)行二次篩選,并且我將搜索入口和二次篩選入口做了分割,二者互不干擾,邏輯也更加清晰。

結(jié)語

以上的交互方式會應(yīng)用在各個(gè)操作模塊,為此做了一套設(shè)計(jì)規(guī)范,讓開發(fā)提高效率,為用戶降低學(xué)習(xí)成本。除了以上的交互分享,還有很多細(xì)節(jié)需要改進(jìn)和總結(jié),這款軟件馬上會迎來2.0的重大升級,整個(gè)視覺體驗(yàn)和交互體驗(yàn)都會有很好的升級,最后在這里自賣自夸一下,給大家推薦這個(gè)微信群管工具——wetool,做微商和社群的朋友可以來體驗(yàn)一下。

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 想問下 總開關(guān)關(guān)閉的情況下,分開關(guān)按鈕可見嗎? 遇到同樣問題~

    來自上海 回復(fù)
    1. 可見,disable狀態(tài)就行

      來自浙江 回復(fù)
  2. 想知道流程圖是用什么軟件畫的?

    來自上海 回復(fù)
    1. XMind

      來自浙江 回復(fù)