如何搞定數(shù)據(jù)生產(chǎn)后臺(tái)的設(shè)計(jì)體驗(yàn)優(yōu)化?B端案例實(shí)戰(zhàn)!
給用戶提供的是一款專業(yè)資料查詢閱讀的 App,用戶最看重的是資料覆蓋是否全面,內(nèi)容是否嚴(yán)謹(jǐn)。這就辛苦了公司的數(shù)據(jù)生產(chǎn)團(tuán)隊(duì),必須非常及時(shí)和高效率地拿到一手原始資料,進(jìn)行翻譯編輯校對(duì)等工作后發(fā)布給用戶閱讀。
為了保證效率和質(zhì)量,公司自行開(kāi)發(fā)數(shù)據(jù)生產(chǎn)后臺(tái),數(shù)據(jù)團(tuán)隊(duì)成員在此協(xié)作數(shù)據(jù)生產(chǎn)。具體邏輯如下圖所示:
- 主編是最高權(quán)限角色。負(fù)責(zé)創(chuàng)建數(shù)據(jù)生產(chǎn)任務(wù),并且對(duì)最終生產(chǎn)的數(shù)據(jù)質(zhì)量進(jìn)行把關(guān)后發(fā)布給用戶。
- 編輯負(fù)責(zé)領(lǐng)取數(shù)據(jù)生產(chǎn)中的編輯任務(wù),完成任務(wù)后提交給審核。
- 審核對(duì)編輯生產(chǎn)的數(shù)據(jù)進(jìn)行校對(duì),如果不符合可打回編輯修改,符合數(shù)據(jù)可提交給主編進(jìn)行終審。
隨著數(shù)據(jù)生產(chǎn)后臺(tái)的迭代,功能越來(lái)越多。原來(lái)的頁(yè)面框架已經(jīng)承載不了,因此我決定重新梳理,系統(tǒng)優(yōu)化體驗(yàn)。
找到重點(diǎn)
B 端系統(tǒng)邏輯很復(fù)雜,為了能系統(tǒng)的優(yōu)化體驗(yàn),我試圖用某對(duì)象有若干屬性,屬性有不同的狀態(tài)。狀態(tài)不同操作不同,不同操作有不同的權(quán)限這個(gè)框架來(lái)梳理。
這個(gè)框架梳理到接近完成時(shí)我放棄了。僅僅是鳥(niǎo)瞰全局就花了很多時(shí)間,如果再接著梳理細(xì)節(jié),還不知道要花多久才能正式開(kāi)始設(shè)計(jì)。
于是我轉(zhuǎn)換思路,評(píng)估不同頁(yè)面的體驗(yàn)問(wèn)題嚴(yán)重程度,從難到易逐個(gè)擊破。評(píng)估的方法用某個(gè)頁(yè)面哪個(gè)角色執(zhí)行哪些任務(wù),任務(wù)頻次、重要程度如何。
根據(jù)評(píng)估結(jié)果,顯然「條目編輯頁(yè)」和「工作臺(tái)頁(yè)」是最應(yīng)該優(yōu)化的。
梳理任務(wù)
下圖就是「條目編輯頁(yè)」的老版本界面。根據(jù)不同的角色功能略有不同,但總體來(lái)說(shuō)都是用戶依次切換條目,并根據(jù)每個(gè)條目提供的參考資料等對(duì)內(nèi)容進(jìn)行編輯或?qū)徍恕?/p>
別急著馬上找頁(yè)面上明顯的問(wèn)題,為了徹底消滅體驗(yàn)問(wèn)題,首先應(yīng)該梳理不同角色在頁(yè)面上做的操作。
如下圖所示,編輯角色選擇未編輯的條目查看任務(wù)說(shuō)明后編輯內(nèi)容和設(shè)置參考文獻(xiàn),之后保存草稿表示完成該條,接著繼續(xù)選擇未編輯的條目進(jìn)行操作,直到所有條目完成后提交子任務(wù)。
審核和主編角色的審核流程基本一致,區(qū)別在于主編能自由打回到前面環(huán)節(jié)的任一角色。審核和主編在選擇待審核條目后,查看內(nèi)容和任務(wù)說(shuō)明,對(duì)于不合格的條目能自行編輯或者填寫(xiě)審核意見(jiàn),待子任務(wù)全部處理完成后提交。
如果審核和主編在首次審核提交后有不合格的條目,那編輯得再次修改提交,審核和主編也要再次審核。和首次區(qū)別在于需要查看或者撰寫(xiě)審核/申訴意見(jiàn)。
根據(jù)以上流程圖,將角色和核心任務(wù)抽象后,可以簡(jiǎn)化為 5 個(gè)步驟(選擇子任務(wù)在前一個(gè)頁(yè)面完成,不算在內(nèi)),如下圖所示。
如果把步驟放在頁(yè)面上,除了左側(cè)主菜單占用太大面積,整個(gè)操作動(dòng)線依次從上到下從左到右似乎沒(méi)什么問(wèn)題,但真是如此嗎?
確定問(wèn)題
我們之所以用電腦而不是手機(jī)來(lái)做數(shù)據(jù)生產(chǎn)管理系統(tǒng),是因?yàn)樵陔娔X上有更大的屏幕來(lái)呈現(xiàn)內(nèi)容,鍵盤(pán)鼠標(biāo)精準(zhǔn)快捷地操作也能提高效率。如果我們仔細(xì)分析每個(gè)步驟用戶的需求,就發(fā)現(xiàn)并沒(méi)有合理地利用電腦大屏幕的優(yōu)勢(shì)。
對(duì)于步驟 1 選擇待處理?xiàng)l目而言,因?yàn)橛脩粢幚硗晁袟l目后才能提交,因此最好能一目了然的知道哪些條目需要處理,哪些不需要??梢苑浅7奖愕剡x擇待處理的條目,用列表呈現(xiàn)更好。
對(duì)于步驟 2 查看附屬內(nèi)容,絕大多數(shù)都是在對(duì)條目主體內(nèi)容進(jìn)行編輯之前查看,處理過(guò)程中偶爾需要打開(kāi)看一眼。因此不需要一直展現(xiàn)占據(jù)空間。應(yīng)該提供隱藏,這樣能給真正需要展示大量信息的步驟 3 處理主體內(nèi)容留出更多空間。
優(yōu)化方案
經(jīng)過(guò)以上分析,最終得到「條目編輯頁(yè)」的優(yōu)化方案。
- 去掉全局導(dǎo)航,提供返回工作臺(tái)按鈕。給用戶長(zhǎng)時(shí)間處理?xiàng)l目的沉浸環(huán)境,也給真正需要展示的內(nèi)容留出更多空間。
- 提供工具欄。不同的角色有不同的操作,后續(xù)可能會(huì)增加其他操作。彈性的工具欄區(qū)域可以滿足以后的擴(kuò)展。
- 條目改為列表。顯示每個(gè)條目的狀態(tài),幫助用戶一覽全局,快速選擇應(yīng)該操作的條目。
- 附屬內(nèi)容可顯示或隱藏。將更多空間留給主體內(nèi)容。
優(yōu)化后的「條目編輯頁(yè)」與 Keynote 的界面神似,我在設(shè)計(jì)前并沒(méi)有想到去參考辦公軟件。
只能說(shuō)制作幻燈片的步驟抽象后和條目編輯的步驟幾乎一致。另外如今的網(wǎng)頁(yè)早已不是純粹展示信息的地方,隨著前端技術(shù)發(fā)展,大多數(shù) SaaS 其實(shí)和本地軟件的交互、功能一樣復(fù)雜。所以網(wǎng)頁(yè)和本地軟件的邊界也越來(lái)越模糊。
「工作臺(tái)」的優(yōu)化相對(duì)來(lái)說(shuō)更簡(jiǎn)單。根據(jù)產(chǎn)品規(guī)劃,很長(zhǎng)時(shí)間內(nèi)我們都不會(huì)增加新的大模塊。左側(cè)導(dǎo)航優(yōu)勢(shì)是利于擴(kuò)展,但占用的面積過(guò)大。改成頂部導(dǎo)航后,留給主任務(wù)與子任務(wù)列表的空間更大,利于各種角色監(jiān)視任務(wù)進(jìn)度,或者選擇某個(gè)任務(wù)去執(zhí)行。
結(jié)果反饋
該優(yōu)化上線之后得到了數(shù)據(jù)生產(chǎn)團(tuán)隊(duì)的夸獎(jiǎng),并且上線之后一年功能迭代沒(méi)有調(diào)整整體框架,說(shuō)明我制訂的框架擴(kuò)展性不錯(cuò)。
在經(jīng)歷這個(gè)項(xiàng)目之前,我好久沒(méi)有做 B 端產(chǎn)品的設(shè)計(jì)。為了鍛煉我的 B 端設(shè)計(jì)技能,我特地沒(méi)有去網(wǎng)上看相關(guān)的設(shè)計(jì)經(jīng)驗(yàn)文章,或者找競(jìng)品分析。學(xué)習(xí)別人的思路和方案難免也被別人的框架給固化。要知道不是每次都有競(jìng)品可以分析,總會(huì)涌現(xiàn)出新的平臺(tái)和產(chǎn)品類型,有能力應(yīng)對(duì)新平臺(tái)沒(méi)有競(jìng)品的情況,才是真正厲害的設(shè)計(jì)師。
通過(guò)這個(gè)項(xiàng)目我掌握了不同角色的任務(wù)分析,用戶任務(wù)的抽象,根據(jù)步驟的需求和內(nèi)容類型決定模塊的大小和控件。相信這些技能以后也可以復(fù)用在其他新型 B 端產(chǎn)品的設(shè)計(jì)。
作者:龍爪槐守望者
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)
本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/17742.html