2023-11-20 周周
最近翻譯了一篇國(guó)外設(shè)計(jì)師在做 B 端儀表盤(pán)頁(yè)面的設(shè)計(jì)過(guò)程和思考,最后我會(huì)通過(guò)文章進(jìn)行分析,看看我們能從這個(gè)設(shè)計(jì)案例中學(xué)到哪些東西。
這個(gè)設(shè)計(jì)案例以創(chuàng)作者為中心,驅(qū)動(dòng)創(chuàng)作者更好的創(chuàng)作內(nèi)容,關(guān)注創(chuàng)作者成長(zhǎng)。跟我們?nèi)粘=佑|的優(yōu)設(shè)平臺(tái)也有很大的相似之處,從文章中也可以感知內(nèi)容創(chuàng)作平臺(tái)是如何驅(qū)動(dòng)設(shè)計(jì)師進(jìn)行輸出和提升的。
這也是一個(gè)很典型的設(shè)計(jì)項(xiàng)目復(fù)盤(pán)案例,可以幫助我們?cè)O(shè)計(jì)師學(xué)習(xí)從 0 到 1 完成設(shè)計(jì)復(fù)盤(pán)。
譯文:
在這個(gè)案例研究中,我想要分享的是我們?nèi)绾谓鉀Q讓創(chuàng)作者在 Graphy 創(chuàng)意平臺(tái)上時(shí)刻了解他們的進(jìn)展和成長(zhǎng)的問(wèn)題。
我作為這個(gè)項(xiàng)目唯一的設(shè)計(jì)師主導(dǎo)這個(gè)項(xiàng)目,負(fù)責(zé)這個(gè)項(xiàng)目的方向制定和設(shè)計(jì)執(zhí)行。我的主要職責(zé)包含提出產(chǎn)品創(chuàng)意、改善用戶體驗(yàn)、視覺(jué)設(shè)計(jì)、與產(chǎn)品相關(guān)利益相關(guān)者合作。
自始至終,我得到了我的設(shè)計(jì)主管巴蒂、產(chǎn)品和技術(shù)同行的支持,他們向我提供了反饋意見(jiàn)和評(píng)論。
2023 年初,Graphy 推出了一個(gè)企業(yè)對(duì)消費(fèi)者的平臺(tái)(B2C),旨在幫助內(nèi)容創(chuàng)作者通過(guò)直播生成內(nèi)容并從中盈利。
將自己想象成以為教授金融的內(nèi)容創(chuàng)作者,你可以通過(guò) Graphy 直播平臺(tái)進(jìn)行直播并教授你的觀眾,通過(guò)你的知識(shí)業(yè)務(wù)進(jìn)行獲利。
在 Graphy 平臺(tái),創(chuàng)作者可以通過(guò)兩種途徑變形:
Graphy 直播平臺(tái)首頁(yè)
如果你曾經(jīng)在線創(chuàng)建過(guò)內(nèi)容,您會(huì)明白這是一項(xiàng)艱巨的工作,他需要毅力和一致性,同時(shí)它要求創(chuàng)作者自發(fā)地有意愿地去創(chuàng)作內(nèi)容。作為一個(gè)平臺(tái),我們有責(zé)任讓這一旅程為我們的創(chuàng)作者帶來(lái)鼓勵(lì)和回報(bào)。
一種方法是幫助他們跟蹤和了解他們的進(jìn)展,這將使他們能夠了解到什么對(duì)他們有用,以及他們可能需要改變什么才能使指標(biāo)發(fā)生變化。
因此,我們決定做一個(gè)分析儀表盤(pán)為創(chuàng)作者提供需要的數(shù)據(jù)點(diǎn),以更好的幫助他們了解他們?cè)谄脚_(tái)上的內(nèi)容創(chuàng)作歷程。
雖然我們沒(méi)有可以跟蹤創(chuàng)作者成長(zhǎng)與分析儀表盤(pán)的一階效應(yīng)(即影響因素),但是有一個(gè)可以幫助我們了解創(chuàng)作者認(rèn)為儀表盤(pán)很有用的指標(biāo)就是:參與率和留存率。因此,這些是我們這個(gè)項(xiàng)目的成功指標(biāo)。
1. 最初的想法和感受
當(dāng)我第一次聽(tīng)到「分析」和「儀表盤(pán)」這兩個(gè)詞時(shí),最先涌上我的腦海里的是大量的數(shù)字、一組圖表和一個(gè)狹小的屏幕。之前沒(méi)有設(shè)計(jì)過(guò)儀表盤(pán),這個(gè)似乎讓人不知所措。
2. 舊設(shè)計(jì)稿作為一種概念的證明
我們有一個(gè)舊的設(shè)計(jì),之前我們的其他設(shè)計(jì)師很快就把他們組合在一起了。這樣做的目的是給我們的利益相關(guān)者和領(lǐng)導(dǎo)層展示概念證明。(因?yàn)檫@個(gè)直播平臺(tái)是我們正在進(jìn)行的 0-1 項(xiàng)目中的一個(gè))
舊設(shè)計(jì)稿的信息架構(gòu)
舊設(shè)計(jì)稿
3. 簡(jiǎn)要介紹
我收到的任務(wù)簡(jiǎn)單說(shuō)就是重新思考整個(gè)儀表盤(pán)設(shè)計(jì)并改善用戶體驗(yàn)。
4. 舊設(shè)計(jì)稿分析的見(jiàn)解
首先,舊的設(shè)計(jì)似乎充滿了各種信息,可能會(huì)給用戶帶來(lái)巨大的認(rèn)知負(fù)擔(dān)。第二個(gè)觀察發(fā)現(xiàn)存在大量的用戶操作點(diǎn),反過(guò)來(lái)可能會(huì)造成困擾并阻礙平滑導(dǎo)覽。
我需要考慮的事情:
5. 構(gòu)思
除了解決舊的設(shè)計(jì)稿中觀察到的問(wèn)題之外,我還想縮小范圍,從新的角度來(lái)處理手上的任務(wù)。
首先提出最基本的問(wèn)題:創(chuàng)作者最想在平臺(tái)上了解創(chuàng)作旅程中的哪些事情?
以下是我最初列出的幾點(diǎn):
創(chuàng)作者關(guān)于他們的創(chuàng)作旅程最想了解的幾件事
我還對(duì)如何為用戶提供更好的儀表盤(pán)體驗(yàn)提供了一些想法,我把這些內(nèi)容都列了出來(lái),并于團(tuán)隊(duì)分享,以便他們?cè)谠摲椒ㄉ媳3忠恢隆?/p>
這個(gè)儀表盤(pán)應(yīng)該是什么樣的?
6. 研究和見(jiàn)解
基于研究工作臺(tái)設(shè)計(jì)靈感時(shí),我發(fā)現(xiàn)屏幕上的展示非常的雜亂,堆滿了過(guò)多的圖像和圖表,難以閱讀,很難去理解這些儀表盤(pán)上的信息。
然而,在讀了一些關(guān)于工作臺(tái)設(shè)計(jì)的文章之后,我意識(shí)到很多專(zhuān)家建議在屏幕上盡可能多的顯示數(shù)據(jù),這一個(gè)概念看上去違反直覺(jué)的,更加促使我去挖掘這些建議背后的基本原理。
在與團(tuán)隊(duì)負(fù)責(zé)人的交談中,我們討論了儀表盤(pán)通常供數(shù)據(jù)和業(yè)務(wù)分析使用。他們有資格并熟練地以某種方式閱讀數(shù)據(jù),并且需要同時(shí)查看大量的指標(biāo)。然而,我的用戶不是分析師,而是創(chuàng)作者。它可以是任何人,比如你和我。背景很重要!
在設(shè)計(jì)儀表盤(pán)時(shí),我想要確保它易于導(dǎo)航和使用。創(chuàng)作者到這里來(lái)尋求見(jiàn)解,而不是感到不知所措。它應(yīng)該被設(shè)計(jì)的簡(jiǎn)單的,不會(huì)過(guò)于繁瑣。
當(dāng)做競(jìng)品分析的時(shí)候,我研究了其他產(chǎn)品使用的方法。我的重點(diǎn)是具有類(lèi)似以消費(fèi)者為基礎(chǔ)目標(biāo)受眾的公司,而不是以分析師為核心的受眾。我發(fā)現(xiàn)一些令人影響深刻且相關(guān)的例子,包括 Airbnb, Vimeo, Unsplash 和 YouTube.
競(jìng)品分析頁(yè)面
我發(fā)現(xiàn)并從競(jìng)品分析中得出:
7. 信息架構(gòu)
此時(shí),與產(chǎn)品經(jīng)理進(jìn)行頭腦風(fēng)暴并最終確定我們希望分析儀表盤(pán)顯示的所有數(shù)據(jù)點(diǎn)似乎是正確的。正如我們看到的,舊的設(shè)計(jì)頁(yè)面有很多的數(shù)據(jù)點(diǎn)。我想在這里澄清兩件事情:
Analytics 儀表盤(pán)菜單
8. 視覺(jué)設(shè)計(jì)
這些是該項(xiàng)目的第一個(gè)版本的設(shè)計(jì)
當(dāng)用戶登錄點(diǎn)擊 Analytics 菜單后,就會(huì)看到「概覽」頁(yè)面。
所有的信息和數(shù)據(jù)點(diǎn)被分為三部分:概覽、內(nèi)容、支付
這使得用戶可以輕松得通過(guò)儀表盤(pán)導(dǎo)航并使用數(shù)據(jù)。
①概覽
概覽頁(yè)面
在一系列的頭腦風(fēng)暴會(huì)議后,我們決定并希望創(chuàng)作者聚焦于三個(gè)主要的指標(biāo),以幫助他們更快的成長(zhǎng)。這三個(gè)指標(biāo)是:觀看次數(shù)、關(guān)注數(shù)量和收入。
在這里,我們可以看到創(chuàng)作者內(nèi)容的全生命周期的總觀看次數(shù)、他們擁有的關(guān)注人數(shù)以及他們產(chǎn)生的收入。
在總生命周期數(shù)下方,我們顯示了過(guò)去 28 天的變化。
為什么顯示全生命周期數(shù)據(jù)而不是每個(gè)月的數(shù)據(jù)呢?那是因?yàn)?,因?yàn)槠脚_(tái)剛剛推出,創(chuàng)作者還沒(méi)有足夠的數(shù)據(jù)供我們每月展示。因此,我們決定首先展示生命周期,并最終轉(zhuǎn)向每月數(shù)據(jù)。
輔助提示提供了有關(guān)特定指標(biāo)的含義的更多信息,并告知用戶該數(shù)據(jù)是全部生命周期。
我們決定將圖表與數(shù)字一起展示,以便用戶輕松了解他們的增長(zhǎng)模式。
正如之前我在本案例中研究的那樣,我希望用戶在我們平臺(tái)上的內(nèi)容創(chuàng)作旅程時(shí)還可以感受到獎(jiǎng)勵(lì)和動(dòng)力。同時(shí),我不希望儀表盤(pán)過(guò)于繁瑣和事務(wù)性。
因此,我們決定在指標(biāo)中 添加這個(gè) Banner 條以及最新更新(自上次出現(xiàn)在該儀表盤(pán)上以來(lái)),例如關(guān)注者的增加、支持者的增加等。此類(lèi)信息會(huì)激勵(lì)用戶訪問(wèn)儀表盤(pán)并更好的了解他們的成長(zhǎng),而不是害怕它。向他們展示哪怕是最小的提升都會(huì)讓他們對(duì)自己的旅程感到滿意。
除了總體指標(biāo)之外,我們還決定展示他們最近的直播表現(xiàn)。這是創(chuàng)作者普遍希望跟蹤的內(nèi)容,以了解他們最近發(fā)布內(nèi)容的表現(xiàn)。
②內(nèi)容頁(yè)面
內(nèi)容界面
包含內(nèi)容選項(xiàng)卡,我們決定顯示與觀看次數(shù)、觀看時(shí)間、最近直播相關(guān)的所有數(shù)據(jù)點(diǎn),這些指標(biāo)都與創(chuàng)作者在我們平臺(tái)上創(chuàng)建的內(nèi)容相關(guān)。
實(shí)時(shí)觀看次數(shù)是創(chuàng)作者直播時(shí)獲得的直播觀看總數(shù)。
錄制觀看次數(shù)是錄制的直播流獲得的觀看總數(shù)。(每個(gè)直播都由平臺(tái)錄制,供學(xué)習(xí)者稍后觀看)
餅圖與觀看次數(shù)一起展示,以便清晰的區(qū)分實(shí)時(shí)觀看次數(shù)和錄播觀看次數(shù)之間的差異,以便讓看到數(shù)據(jù)的讀者一目了然地了解比例的要點(diǎn)。
③選擇數(shù)據(jù)可視化類(lèi)型
我考慮了多種數(shù)據(jù)可視化選項(xiàng),但最終選擇了折線圖,因?yàn)樗?jiǎn)單、熟悉且易于使用。
決定在折線圖中使用多線條,可以輕松比較總觀看次數(shù)、實(shí)時(shí)觀看次數(shù)和記錄觀看次數(shù)。
圖表圖例也是可操作的復(fù)選框,用戶可以勾選或者不勾選,來(lái)決定每條線的顯示與不顯示。
這些圖例是這樣設(shè)計(jì)的,因此用戶對(duì)他們想要查看的數(shù)據(jù)和想要隱藏的數(shù)據(jù)有更多的選擇權(quán)。與沒(méi)有復(fù)選框和用戶必須始終看三行的情況相反,這在某種情況下會(huì)導(dǎo)致信息過(guò)載。
數(shù)據(jù)可視化中的顏色展示
數(shù)據(jù)可視化中的顏色展示非常的重要,關(guān)乎到儀表盤(pán)上使用的數(shù)據(jù)可視化的顏色選擇,為了更好地理解怎樣在 dataviz 中使用顏色,我參考了一些資源,例如 Material Design, mysidewalk Style Guide, Chartio, Datawrapper Academy 等。
我還檢查了色盲模擬器中的顏色,以驗(yàn)證我使用的所有顏色是否對(duì)于具有任何色盲或者對(duì)訪問(wèn)具有困難的人來(lái)說(shuō)都是可以區(qū)分的。
④默認(rèn)值設(shè)計(jì)
在用戶界面中設(shè)置默認(rèn)值是 UI 界面設(shè)計(jì)和信息設(shè)計(jì)的一個(gè)重要方面。例如,當(dāng)我們?cè)诳紤]數(shù)據(jù)過(guò)濾的默認(rèn)持續(xù)時(shí)間時(shí),選擇正確的值非常的重要。在本例中,默認(rèn)過(guò)濾持續(xù)時(shí)間設(shè)置為 28 天,有以下幾個(gè)因素決定:
平臺(tái)的新穎性:鑒于該平臺(tái)相對(duì)較新且創(chuàng)作者最近才加入,因此選擇較短的時(shí)間范圍(28 天)作為默認(rèn)值,他提供了他們最近的表現(xiàn)的相關(guān)快照。
趨勢(shì)之間的平衡:短于一個(gè)月(例如一周)的時(shí)間被認(rèn)為太短,無(wú)法提供有意義的趨勢(shì)數(shù)據(jù)。另一方面,較長(zhǎng)的持續(xù)時(shí)間可能會(huì)因?yàn)檫^(guò)多的數(shù)據(jù)點(diǎn)而讓用戶不知所措。這樣,28 天的設(shè)置就達(dá)到了平衡。
行業(yè)標(biāo)準(zhǔn):研究和競(jìng)品分析表明。大多數(shù)儀表盤(pán)都會(huì)顯示月度數(shù)據(jù)。與這種模式保持對(duì)齊可以提供熟悉度和友好的體驗(yàn)。
從本質(zhì)上來(lái)說(shuō),默認(rèn)值設(shè)置的選擇在確保向用戶提供相關(guān)且易于理解的信息,最終增強(qiáng)界面的整體可用性方面發(fā)揮著關(guān)鍵作用。
⑤支付
支付頁(yè)面
在「支付」選項(xiàng)卡中,我們顯示與收入和結(jié)算相關(guān)的所有數(shù)據(jù)點(diǎn)。結(jié)算金額是創(chuàng)作者根據(jù)每個(gè)月產(chǎn)生的收入從 Graphy 平臺(tái)收到的金額。
在將近兩月的上線后,儀表盤(pán)顯示了值得注意的指標(biāo):
我覺(jué)得我們還可以做更多的事情,來(lái)使分析儀表盤(pán)體驗(yàn)更加直觀和信息豐富。這個(gè)想法不僅僅是為了展示數(shù)據(jù),而且是為了幫助創(chuàng)作者從中獲得認(rèn)識(shí)和見(jiàn)解。我們還可以通過(guò)幫助創(chuàng)作者將這些見(jiàn)解轉(zhuǎn)化為可操作的行為,讓體驗(yàn)更上一層樓,幫助他們改變指標(biāo)。
其中一個(gè)想法是,我們可以展示創(chuàng)作者旅程中的里程碑。假設(shè)一個(gè)創(chuàng)作者已經(jīng)獲得了一定數(shù)量的關(guān)注者,當(dāng)他們登錄時(shí),我們可以用五彩紙屑動(dòng)畫(huà)進(jìn)行慶祝,并提供有關(guān)他們的里程碑的更多詳細(xì)信息。打個(gè)比方,到達(dá)這個(gè)里程碑需要多長(zhǎng)時(shí)間,這是轉(zhuǎn)折點(diǎn)、高光時(shí)刻等。
另一個(gè)想法是,我們可以顯示表現(xiàn)最好的直播以及有關(guān)它們的更多詳細(xì)信息,例如直播期間提出了多少問(wèn)題、反應(yīng)時(shí)間戳、參與度、峰值觀看次數(shù)等。這可以幫助創(chuàng)作者了解哪些內(nèi)容可以表現(xiàn)更好以及原因。
文章來(lái)源:優(yōu)設(shè)網(wǎng) 作者:阿琦Aqi
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)(tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。
關(guān)鍵詞:UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com