設計總結:群管工具的交互剖析

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

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

1、產品背景

現有的群管軟件在市面上并不常見,免費好用的更是少之又少,這并不是因為這類工具沒有需求。在研究競品的過程中,我對此現象總結了三點主要原因:1、該類產品容易受到微信官方的打壓和排斥;2、微信如果強化群功能也會導致這類工具的迅速死亡;3、存在第三方工具普遍存在的痛點——微信改變規則很可能將導致整體功能的調整,因此開發成本和維護成本都比較大。這三個原因導致這類軟件收費很貴,功能操作比較粗糙,學習成本高。而我們團隊開發該產品旨在完善功能模塊、降低用戶的學習成本,提高用戶體驗。群管工具的需求點較多、使用場景復雜,設計過程中遇到了很多阻礙,因此對我來說是不小的挑戰,讓我在項目推進過程中有了不小的成長。

2、用戶類型

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

3、產品目的

本次產品的目的主要有三個:

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

(2)幫助運營微信群的用戶挖掘社群價值;

(3)幫助運營人員拓展和擴大群規模;

4、產品描述

4.1 產品框架

根據產品的目的我們分析了用戶行為,按照功能優先級來架構產品,產品初期只能按照用戶的單一的使用場景來規劃功能模塊,隨著功能模塊的不斷增加,我們就需要對功能模塊做出合理整合,按照用戶完整的操作場景來規劃模塊,到目前為止四期的需求已經架構了不少的功能模塊,現在的版本也是經過多次整合的結果,模塊架構雖然很有指向性,但是依然不能清晰引導用戶去完成操作閉環。這是因為我們面向的用戶并非單一類型,不同類型的用戶使用場景各不相同,因此下面的規劃是將這些模塊插件化,讓用戶去組合搭建他們需要的使用場景。基于后期規劃,在設計過程中逐漸將完整和關聯的功能模塊整合在一起,將單獨場景功能作為獨立模塊,各個功能模塊之間可以關聯使用也可以獨立使用,用戶可以根據需求來自定義模塊。

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

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

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

4.2 產品模塊流程

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

4.3 產品交互操作

這里主要從兩個設計難點剖析,一是群管設置項的交互問題,二是長進度交互展示,三是批量篩選交互集錦。

(1)設置項交互設計集錦

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

① 開關的利用

開關一般是一個總功能的快捷操作項,它可以及時阻止錯誤程序的執行,類似電流總閘在緊急時刻可以阻止危險;它也可以讓用戶在不破壞自己設置好的復雜流程的情況下控制程序的啟動和關閉,操作更加自由和快捷。下面是設計過程中遇到一些難點:

  1. 設置過程中遇到父子級功能開關,需要注意啟用和關閉狀態區分,例如父級開關打開,子級選擇可以任意選擇,父級開關關閉,子級選擇不可勾選,以此來讓用戶分辨邏輯關系;
  2. 在設計層級較為復雜的父子級設置項時,需要拆解層級,一般用戶只能接受兩個層級關系,過多的嵌套層級會讓用戶迷惑。

② 手動保存

即用戶操作完設置項后需要手動點擊保存才會生效

  • 問題:需要手動觸發保存,操作路徑較長,影響用戶體驗;適用于一次性設置,操作頻率較少的情況;
  • 優勢:避免誤操作造成的程序運行錯誤;

手動保存的兩種設計方式:

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

③ 即時生效

即使生效即自動保存:用戶設置的過程中程序自從記住設置狀態

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

在群管軟件中比較少采用這種交互方式,我們的設置項內容較為復雜,有很多輸入和編輯的選項,如果采用即時生效的交互方式往往會造成執行錯誤。

④ 保存狀態和修改狀態的切換

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

設計實例

層級較多,設置項復雜的情況下,就需要合理的采用以上三種交互方式,群管軟件的設置項(更名群管機器人)模塊就相當典型的闡釋了各種不同場景下采用的不同交互方式,下面我采用頁面交互的方式來闡釋各種場景的操作交互。

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

關閉功能開關→ 啟動修改→ 修改配置→ 保存配置→ 開啟功能開關

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

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

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

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

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

場景三:用戶需要一定時間段內接觸踢人設置,但是不想修改任何設置項,此時只需要關閉總功能開關,簡單快捷。

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

(2)長進度交互設計集錦

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

設計實例:

① 實例一 單任務進程

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

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

② 實例二 多任務進程

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

該任務球有兩個主要功能:

  1. 為了提示用戶長進程的及時狀態;
  2. 遇到突發狀況,方便用戶及時在任務球上作出快速操作:暫?;蛘呷∠?/li>

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

(3)批量篩選交互設計集錦

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

設計實例:

①實例一 多層級的篩選

下面就結合加好友功能給大家詳細剖析設計方案的推進。首先,我先介紹一下加好友功能的使用場景:

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

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

下面我從兩個方面闡述加好友模塊的篩選對象設計:

1)展示vs篩選

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

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

2)層級的遞進

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

這個操作邏輯大致分為三步:選擇群對象→ 篩選群成員→ 剔除對象→ 開始發送驗證→ 進入進程

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

② 實例二 ?對象的搜索和篩選

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

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

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

結語

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

 

本文由 @UX-ICY 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

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

    來自上海 回復
    1. 可見,disable狀態就行

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

    來自上海 回復
    1. XMind

      來自浙江 回復