UIUX 設計與開發 — awwrated 客觀評價資訊平台，如何利用評分來滿足原本的 Netflix 使用者體驗

Harry Chuang

Published in

AAPD — As A Product Designer

12 min readNov 28, 2019

awwrated 客觀化的評價資訊平台
awwrated.com

開發這個平台，有一半是意外的演出，原本想重新設計並開發一套設計系統並且開放原始碼，去年的一篇關於協助公司所設計和開發的設計系統意外地讓很多人好奇並希望它開源化，但因為是公司的專案，所以不方便釋出原始碼，因此一直想再重新發展一套可以開源化的設計系統。

回到主題，當開始下手要發展這套設計系統時，覺得如果只是把設計系統的元件開發出來，卻沒有實際的用途好像有點不知所以然，想著想著，就決定用這個設計系統來開發一個可以實際體驗的平台，意外地造就了這個平台

aww Design System
https://projects.noeinoi.com/awwrated/storybook
這是目前正在設計和開發的新設計系統，未來我會放到下一篇來說明這個新的設計系統，因為它目前只完成了30%，後來大部份的時間都投入到開發awwrated這個平台，所以下一步會將目前平台上所有使用到的元件補回到這個設計系統中 :)

00 產品發想

自從Netflix拿掉了評價機制改用推薦機制的時候，開始在想他們會不會只是想把賣不掉的影集和電影推薦給大家吧~畢竟花了大把鈔票來製作自己的內容，所以可以想像評價機制的存在可能讓某些原創影片收看率降底，肯定不是好事~

在這樣的脈絡下，他們可能決定用推薦機制的說法說服觀眾，當然以上是我的想像，這個想像後來也從awwrated這個平台得到了一些驗證，驗證Netflix的推薦機制的確有諸多影響到使用者體驗。

有陣子，在網路上尋找有沒有類似的平台，把Netflix的評分找回來，有的! https://flixable.com/ 就是這個平台，但他的影片內容大多是屬於歐美地區，Netflix在每個國家和地區所發佈的影片內容其實是不大一樣的，所以也代表這個問題還無法在台灣或其他亞洲地區獲得解決。

所以既然這個問題一直沒人來解決，不如就自己來試看看好了~

01 有了產品主題，那下一步呢?

接下來投入使用者體驗的潛行調查，因為Facebook上有一個算蠻大型的一個Netflix非官方討論社群，基本上這裡應該九成的人是TA吧 :D

社群上很多人會推薦不同的影片、詢問某部片的評價、或是想知道最近有哪些新片…等。慢慢爬文可以看到，很多人對於Netflix的推薦機制是不信任的，怕踩雷，這個議題可以再延伸到不同內容(音樂、遊戲…)的體驗。

一般來說類似Netflix這類型的推薦機制，對一般使用者來說它可能更適合用在Spotify這類的音樂平台上，原因很簡單，就算被推薦錯了，其實不痛不癢，因為使用者可以直接跳過這首被推薦的歌曲。

但觀影的體驗是非常不同的，每部影集少則三十分，長則一小時起跳。

一開始看著Netflix洋洋漓漓寫了關於推薦機制的使用者體驗文章，也曾相信，也許這的確是很不錯的使用者體驗，但我錯了，試著花時間觀看Netflix所推薦的各類影片，才發現花了一小時看了一部自己不愛或覺得有點雷的影片，除非Netflix真的會讀心，不然一般使用者花了一段時間才發現自己並不愛這部影片時，會立即感受到好像被詐欺了~

影片不像音樂，單純感受前30秒就可以知道自已喜不喜愛這個內容，所以一旦推薦錯誤內容，浪費的就是時間。

另外一種類型也不適合推薦機制的就是電玩遊戲，它是既花錢又花時間去體驗的內容，一旦沒有搞好推薦的準確度，可能使這些積怨會更深入這些遊戲玩家者 XD

所以可以理解，為什麼在社群上大家還是都在詢問某部影片的評價，而不冒然花時間去觀看，可想而知大家真的踩雷踩怕了…幫大家找回Netflix上的影片客觀評價資訊，就變成了我想做的事情~協助解決這個痛點。

02 在設計與程式開發過程中，與使用者對談並且快速試錯及修正

設計的需求和目的其實很簡單，就是把Netflix上的所有影片一字排開，並且在上面顯示該影片的評分資訊，而目前最大宗的影片評分平台就是IMDB和爛蕃茄評論。

UIUX設計 — Test 1.0

最初的設計版本，很簡略地顯示每部影片的評價資訊，並且有排名的提示。然後一個下拉選單呈現影片類別和排序方法。

關於程式開發的部份，自己對於前端有些接觸，就自己下海開發了。利用下班和週末的閒置時間來設計和開發，那陣子很常半夜睡不著覺就持續Coding，因為想趕快測試產品的成效。
後台資料的部份以Wordpress為基礎，因為相對快速簡單。Wordpress已經相當成熟，在API的串接上也省事很多，當然它也一定程度的限制。所以未來如果平台受歡迎，也許會再改用其他的後端架構。而前端的部份就用了比較熟悉的React作為開發。

當這個階段的設計及開發有一些雛形後，就開始進行一些使用者測試及訪談。還好有前同事V大(深度Netflix使用者)及社群上認識的一個A大他們的建議，後續在界面上調整了很多，其中更正最大的就是篩選的體驗。歐美比較偏向乾淨的界面，自己其實也很受歐美簡潔風格的影響，不自覺想隱藏太多雜亂的功能。但也因為簡潔的關係，在直覺的體驗上也會受到影響。

V大推薦的影片評價平台(如下圖)，這樣的篩選體驗很常見所以相當直覺，像是A大一開始並不曉得有篩選的功能在這個初版的設計界面上，所以後來就做了相當大的調整 :D

A大也建議到，一般使用者其實都是相當懶惰的，所以能出現一些片單的推薦，讓使用者可以更快地找到喜歡的影片，所以這也納入了界面的修正中。

UIUX設計 — Test 2.0

這次的版本已經很接近目前的版本，在界面上多了編輯推薦的區塊和精選片單區塊，將篩選功能一字排開。

這階段並沒有打算吸引大量的使用者，所以就再一次潛入社群的貼文中用留言的方式去做測試。再從GA和Hotjar的記錄中去了解大家對什麼有興趣，對什麼沒興趣。而測試的方法就是利用GA去埋很多不同的測試事件，比如像是影片點擊事件、片單點擊事件…等。

也和其中的使用者做了一些交談，所以得到一些更進階的細節功能，像是電影和電視劇的篩選功能以及更多的類別像是合家歡的類別…等。

搜尋的功能和APP化也是相當重要的回饋，但因為時間的有限，所以希望有機會在年底或明年初可以開發並實現出來。

中間也在Facebook中開了一個awwrated的社群，專門用來和使用者討論功能和問題回報。
https://www.facebook.com/groups/awwrated/
有興趣的人，歡迎一起加入討論和優化這個平台 :D
另外GA的記錄中顯示大家對於PS4這個頻道真的很有興趣啊 XD 希望明年第一季有機會做PS4的頻道出來~

UIUX設計 — Beta 1.0

這階段已經是可以測試的Beta版。

後來評估編輯推薦的區塊和精選片單的區塊其實很相近，導致於讓人有點混淆，也讓整體區塊變得有點雜亂然後壓縮了上面的空間，所以就把編輯推薦區塊捨棄，統整為精選片單。新增Tab的元件來做為切換電影、影集及精選片單、近期趨勢類別的功能。

UI/UX 細節

I. 界面資訊

A. 影片標題、日期、評分、評分準確度!

評分準確度的概略演算法:
透過IMDB及相關的評分人數來計算出階梯式的準確度。
例如: 0–100人之間的準確度、 101–1000人之間的準確度、 1001–10000人之間的準確度以及大於 10000人後的準確度。
幫助使用者了解這個評分是否客觀，新上映的影片通常前期少數的評分，評分可能偏高也可能偏低，因為人數的不足，會使評分更傾向於主觀，人數增加後，分數也會相對偏向客觀的準確評分。

B. 影片評分、準確度

C. 前往Netflix觀看
(因為這個平台目前是專為Netflix使用者設計的，所以當使用者對某部影片有興趣時，可以直接點擊前往Netflix觀看)

D. 各大評分網站的資訊
(目前較完整的資訊都來自於IMDB，爛蕃茄目前並沒有特別提供評分人數的資訊，前陣子API是可以看得到的，希望未來可以透過API來取得更完整的資訊。而IGN是歐美最大型的遊戲資訊平台有點像是台灣的巴哈姆特，但它也提供像是電影及影集的相關評分，所以當IGN有資料時，也會將它放入評分資訊中)

II.影片排序細節

A. 近期上架(最近上架的影片)
B. 近期好評(評分在7.4以上，並且由上架日期排序)
C. 最熱門(來自所有影片的評分人數做排序)
D. 最好評(評分高於7.4並且評分準確度高於80%，並以分數高至低排序)
E. 新片(影片上映日期由新到舊)
F. 老片(影片上映日期由舊到新)

III. 載入更多按鈕與讀取狀態的整合

其實在開發的時候，我是可以偷懶就偷懶，少做一件事就代表可以省去一些開發時間~在下方的影片中會看到當使用者切換類別時會出現讀取中的狀態，而當點擊讀取更多的按鈕時，也會出現同樣的讀取狀態。

一般來說，正常的開發應該會用兩個不同的元件(按鈕及讀取)來完成，而我則把這兩個元件整合為同一個元件，所以當在上方切換類別時，看到的讀取元件和載入更多的按鈕是同一個，利用了CSS的position:fixed 特性讓讀取元件直接從列表的最下方直接瞬移到畫面正下方，這樣的好處就是省去另外再放一顆讀取的元件 :D

IV. RWD響應式元件

電腦的界面和手機的界面差異還是很多，當在手機的狀態時，希望使用者可以在單手的操作範圍內，完成一些功能的切換和使用。所以就設計和開發了一些可以RWD響應式的元件~

關於響應式元件的開發細節就留到下次設計系統的文章再補述~

03 讓使用者們做測試取得回饋及成效資訊

大膽假設，小心求證!

在Beta1.0完成後，又再度潛入社群中，開始測試不同的圖文，讓使用者們進入平台測試，並且取得相關的使用報告。

固定會在週一的時候到社群發文，然後用不同的貼文內容(像是單一影片的推薦、片單的推薦、最新影片上架…)再透過GA等相關報告取得使用者對於這個平台的興趣水溫。

11月4日-10日經典美劇貼文:
單週帶入的流量約210人

11月11日-17日冷門記錄片貼文:
單週帶入的流量約87人

11月18日-24日新片上架貼文:
單週帶入的流量約2576人

11月25日片單分享貼文:
單日帶入的流量約175人

11月28日當日熱門影片上架分享貼文:
單日帶入的流量約362人

當中最重要的指標是11月18日那週的流量，這則貼文和其他貼文最大的不同就在於，我將平台的局部的功能界面Screenshot成圖片並分享到社群中。
而這驗證了到目前為止的一些想法，就是Netflix的使用者真的想要看到有評分資訊的影片內容，也許他們和我一樣有相同的痛點很久了 XD
這則貼文下方的回應很多都是跟平台相關的詢問~而且對於平台非常正面的回應，這的確有些感動，花了四個月所開發的平台的確有解決部份使用者所遇到的問題。