目標導向設計法的應用:愛奇藝PC站風云榜改版總結

0 評論 8394 瀏覽 38 收藏 9 分鐘

本文通過愛奇藝PC站改版的例子,介紹了目標導向設計法在實際工作中的一次應用。

愛奇藝PC站的風云榜,是一個提供各種頻道榜單的薈萃之地。其存在的主要功能,是讓用戶能夠了解熱門的劇目,從中選擇想看的影片,也能夠了解最近都在流行些什么。然而,該模塊很久沒有更新,在內容展示上有著比較大的問題,導航上也存在使用不便的情況。因此,產品提出優化。在這次優化的過程中,我使用了之前介紹過的“目標導向設計法”來指導我的設計,效果顯著。下面跟大家具體介紹一下。

項目的基本信息

首先,先來看一下原版的風云榜長什么樣:

改版前的風云榜頁面

改版前,風云榜首頁的結構是:一行兩個榜單,其中一個是列表的樣式,另一個是類似Windows Phone的磁貼樣式;兩種樣式交叉使用。左邊是導航欄,將風云榜中的所有頻道都列了出來。

產品提出的需求,一是優化首頁的排版,增加視頻的點擊率;二是優化導航,使導航在瀏覽的過程中能夠方便用戶選擇任何他想選擇的頻道。

產品同學用原型圖簡單地表達了一下她的想法,如下圖所示:

產品提出的原型圖

以上是該項目的基本信息。

目標導向設計法

下面我們來使用目標導向設計法進行設計。首先,需要明確設計目標,也就是產品目標和用戶目標。

分析一下,項目的產品目標是什么呢?舊版頁面信息展現不合理,點擊率低;改版希望通過優化信息展現,提升點擊率。舊版導航條在瀏覽過程中頻道的展示不全;改版希望改善導航條的交互,使用戶在上下滾動瀏覽的時候,可以方便選擇任何頻道。因此產品目標就是:提升視頻點擊率;優化導航,使導航在瀏覽時能選擇任意頻道。

那么用戶目標呢?來到風云榜查看各種榜單的用戶,不外乎兩種目的:

  1. 查看自己喜歡的類別的榜單;
  2. 通過榜單了解熱播劇,并以此為依據選擇自己想看的熱播劇。

這也就是我們的用戶目標。帶著產品目標和用戶目標,我們開始一步步設計。

首先我們來具體分析一下舊版的信息展現到底有什么問題:

1. 頁面中的榜單有兩種呈現樣式,且區別很大。由于圖片天然地更能吸引人的注意力,因此每一行比較突出的榜單,都是采用磁貼排版的那個;而采用列表呈現的榜單,自然會被冷落得多。這影響了信息到達用戶的效率。

2. 榜單的兩種樣式,采用了交叉出現的形式,比較跳躍,用戶在此種形式的引導下,實現是折線型的,不夠順暢(最為順暢的一定是拐角最小的,越直線越好)。

所以,舊版的排版,使用戶在瀏覽時只注意到磁鐵樣式(封面圖拼成)的那個榜單,容易忽略文字榜單;且視線曲折,容易疲勞。所以重新設計時要對榜單進行重新排版,優化用戶的瀏覽體驗,以期達到我們的設計目標。

我們再來研究一下競品。騰訊視頻的PC站,似乎對榜單沒有太大的興趣,只有在VIP會員頻道有個“熱片榜”:

騰訊的熱片榜,雖然名為“榜”,實際只是“最熱”tab下的影片篩選。

優酷視頻的PC站,在“排行”頻道里,有“指數排行榜”和“訂閱排行榜”:

這種排版更適合音樂類型的展示,對于影視類這種封面圖比較重要的類型,展示效果比較一般。

值得一提的是,愛奇藝視頻的首頁,在這里也可以作為“競品”來參考。因為用戶最熟悉的,一定是默認的首頁的樣式;而風云榜的入口,也是在首頁。因此首頁對于風云榜的設計,也有不小的參考意義:

在和我們靠譜的產品經理同學討論之后,又綜合了以上的信息,我給出了以下的設計方案:

排版上參照了愛奇藝PC站首頁的樣式,在排版上統一采用一行5個封面圖,展示有規律,便于用戶迅速get到信息;同時使用封面圖也符合影視信息展示的特點。

這樣的排版,能夠方便用戶找到自己感興趣的類別,同時迅速瀏覽熱門的視頻,最符合上下滾動瀏覽網頁的姿勢。

再來看導航:

對于導航,將一些次常用的頻道收起,其余常用頻道常駐在屏幕左側。為了保證在最小的分辨率下,一屏也能展示完整常駐的頻道,因此規定最多展示14個頻道(包含“更多”)。

順提一下,在設計鼠標hover到“更多”時出現的面板時,嘗試了兩列和三列,以及頻道前是否加icon等多種方案,最后采用兩列且不加icon,因為這種展現是最高效、最清晰的。

新的版本上線后,數據分析師給出了分析結果:

  • 各頁面的點擊率&人均點擊次數大都有不同程度漲幅
  • 風云榜首頁和四大頻道頁均為正向波動,其中電影頻道點擊率和人均點擊次數分別上漲20%和34%。

從分析結果來看,改版的效果不錯。這得益于設計前對目標的總結,以及設計時以目標為導向進行設計。

以上通過一個例子,介紹了目標導向設計法在實際工作中的一次應用。歡迎大家取經,也歡迎大家交流吐槽。

相關閱讀

目標導向設計法01:如何才能讓交互方案更靠譜?

目標導向設計法02:如何確定設計目標?

目標導向設計法03:確定設計目標之后,交互方案該如何展開?

 

作者:新設計青年,微信公眾號:新設計青年。

本文由 @新設計青年 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!