居家看 Netflix 也看吸引你的UX設計秘密

更新於 發佈於 閱讀時間約 5 分鐘
raw-image

在多屏生活下,爭奪注意力已成為新時代的戰爭形式。尤其Netflix的數據專家指出一個典型用戶通常在屏幕上瀏覽10到20個標題,其中只會針對大約3個左右去了解細節,所以沒有在60到90秒吸引觀眾目光,他們很可能會失去興趣並轉移到其他活動上。那他們到底是如何贏得用戶的焦點呢!


讓數據先說話

成功登錄Netflix後,相信有訂閱的人都知道每次使用都要選擇使用者,表面上看起來是提供用戶方便,根據不同家庭成員,繼續收看沒看完的電影或影集,但事實上, Netflix團隊可以根據用戶的選擇建立更精準的畫像,即將每個數據進行特徵化。畢竟,傳統的觀看方式,是無法徹底瞭解用戶是誰,並基於推薦模型分別展示不同的內容給用戶,以達到精準化運營目標。

用戶分群

用戶分群

個性化內容,根據人事時地物做變化

個性化內容,根據人事時地物做變化

AI演算輔助選圖

Netflix技術團隊透過特有的AVA演算法截取影片的每一片段(frames)的靜態圖像加以分析標註,再透過排行推薦機制,自動篩選出適合的廣告圖像和對應的廣告標語吸引用戶的目光,例如擷取一小時的怪奇物語片段,大約能得到 86,000張靜態圖像,再從中取出適合的宣傳照(太神了!設計師快沒工作了XD)

篩選流程

篩選流程

各原創影集篩選的片段

各原創影集篩選的片段

作為自動化篩選的一部份,每個片段包含許多不同的變量,其中標註的特徵屬性主要分為:


視覺元(Visual Metadata)

通常是可衡量的視覺組成元素,例如:亮度、顏色、對比度和動態模糊度等。

視覺元素數值

視覺元素數值

情境元(Contextual Metadata)

情境當中發生的綜合因素。例如透過臉部辨識評估演員的情緒和肢體語言或利用攝影鏡頭的角度,洞悉到攝影師的意圖,觀察到整體的氣氛和語氣。

臉部辨識檢測角色的臉部表情

臉部辨識檢測角色的臉部表情

利用鏡頭運動的光流分析-以黑鏡影集為例

利用鏡頭運動的光流分析-以黑鏡影集為例

構圖元(Composition Metadata)

根據攝影和電影的視覺美學設計中的一些核心原則,例如:三分法、景深和對稱性。

raw-image

針對上述彙總的元素建立模型推薦出合適的廣告圖像並排除性、裸露、未經授權的品牌以及暴力犯罪等內容,綜合搭配文案和評論等其他非圖像元素,列出最終的推薦優先級

廣告圖和文案

廣告圖和文案

持續A/B測試

Netflix團隊用戶研究發現「在訂閱服務前,你最想了解的一件事是什麼呢?」針對這個問題,大約有46%的受訪者表示說想知道所有可看的電影和電視節目(其實這也是小弟第一次認識Netflix的心聲),因此,他們著手進行假設,如果透漏一點電影和電視節目的資訊或許就可以吸引用戶註冊使用(如下圖的背景呈現出部分最新的電影和電視劇)

第一屏-Netflix首頁

第一屏-Netflix首頁

然而,結果卻不如預期,並發現用戶動機不足,因此需要更多對於消費者的利益點激發,例如支持哪些設備觀看等。不斷地發揮實驗的精神,透過問題的假設,再到實驗對比出最合適的解決方案。

產品的價值利益點-Netflix首頁

產品的價值利益點-Netflix首頁

創造爽點

相較於市面上的串流產品,Netflix解決不少過去用戶體驗上的問題,舉例來說,智能下載的功能可以在Wi-Fi的情境下啟用,自動下載好下一集,避免使用到用戶的行動流量。當用戶觀賞完該集後,系統也會刪除看過的那一集,減少佔用用戶的儲存空間。

智能下载-手機端

智能下载-手機端

當然,還有支持多國語言和字幕的選擇,除了方便流通在世界各國外也開闢更多元的使用場景,舉例來說,可以造福廣大想學語言的人,解決找不到好教材的問題。

多語言字幕-網頁端

多語言字幕-網頁端

善用比較錨定

其實對用戶來說,表格是一個最直觀瞭解訂閱方案的方式,尤其選項不能太多,過多反而增加用戶選擇上的困擾,且無法有效引導到預達到的商業目標。以小弟待的電商產業來說,經常使用錨定效應做商品方案的對比,通常都可以達到不錯的效果。但當然也是看適用的場景囉!

Netflix收費方案選擇

Netflix收費方案選擇

選擇過多且評斷標準不同-某電信資費表格

選擇過多且評斷標準不同-某電信資費表格

小結

坦白說,小弟是Neflix的老粉,在使用過程中,一直覺得有種莫名想看的感覺,尤其將UX透過另一種方式表現,以數據為核心發展出的創新思維,也是我們設計師需要多多加強的部份,結合感性和理性的數據發揮最大的影響力



文章部分內容翻譯至Netflix技術部落格和公開演講內容,如有翻譯上有錯誤或不順暢的地方還需要各位前輩多多指教~資料來源:

Netflix Technology Blog, AVA: The Art and Science of Image Discovery at Netflix

Navin Iyengar, Design Like a Scientist


如果喜歡我的文章,歡迎[追蹤]小弟,陪你一起長大長肉🙏,想要定期收到有趣的內容,可以查看下面的部落格囉


留言
avatar-img
留言分享你的想法!
avatar-img
Wayne老摳摳UX設計師的沙龍
12會員
15內容數
2022/01/21
一個UX設計師在成長過程中,除了設計思維的提升外,對於細節的掌握也需要特別的注意,尤其交付Wireframe和UI Flow時。一個系統化的自查表可以避免許多曾犯的錯誤ㄧ再發生,減少設計稿來回次數,也不用再穿防彈衣跟開發技術人員討論了。
Thumbnail
2022/01/21
一個UX設計師在成長過程中,除了設計思維的提升外,對於細節的掌握也需要特別的注意,尤其交付Wireframe和UI Flow時。一個系統化的自查表可以避免許多曾犯的錯誤ㄧ再發生,減少設計稿來回次數,也不用再穿防彈衣跟開發技術人員討論了。
Thumbnail
2022/01/20
從Material Design發表至今,Google的設計語言已經7歲了!然而,隨著生活環境的改變,人們的需求也從實用層面轉變到情感價值。因此,Google在2021年5月的開發者大會中推出最新的設計語言Material You,並特別強調其「個人化」使用者體驗。
Thumbnail
2022/01/20
從Material Design發表至今,Google的設計語言已經7歲了!然而,隨著生活環境的改變,人們的需求也從實用層面轉變到情感價值。因此,Google在2021年5月的開發者大會中推出最新的設計語言Material You,並特別強調其「個人化」使用者體驗。
Thumbnail
2022/01/19
在開發產品過程中,不難發現研發和設計團隊時常因各自所處的角度不同,使得在溝通來回上花了不少時間。所以小弟整理些過去常在工作場景下遇到的一些資訊技術的專有名詞,化解那些雞同鴨講的無效溝通。
Thumbnail
2022/01/19
在開發產品過程中,不難發現研發和設計團隊時常因各自所處的角度不同,使得在溝通來回上花了不少時間。所以小弟整理些過去常在工作場景下遇到的一些資訊技術的專有名詞,化解那些雞同鴨講的無效溝通。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
Thumbnail
視覺層級並不侷限於平面設計,在用戶體驗及介面上更是一個重要的核心之一。視覺層級除了讓畫面的視覺編排更加精緻好看,更重要的功能是能讓畫面有效地被組織,讓觀者更容易理解。
Thumbnail
在這篇文章中,我們將帶領讀者深入探討數位圖片管理的核心——「連結影像」與「嵌入影像」的使用技巧。這是每位從事視覺設計、版面編排和數位藝術的創作者必須掌握的基本知識。在進行數位設計時,如何選擇這兩種不同的圖片處理方式,不僅關係到作品的最終呈現,還直接影響到工作流程的效率和靈活性。 追尋影像的軌跡
Thumbnail
在這篇文章中,我們將帶領讀者深入探討數位圖片管理的核心——「連結影像」與「嵌入影像」的使用技巧。這是每位從事視覺設計、版面編排和數位藝術的創作者必須掌握的基本知識。在進行數位設計時,如何選擇這兩種不同的圖片處理方式,不僅關係到作品的最終呈現,還直接影響到工作流程的效率和靈活性。 追尋影像的軌跡
Thumbnail
當今數位化快速發展的時代,圖像處理已經成為平面設計、出版業以及廣告製作中不可或缺的一環。Adobe Illustrator和InDesign作為行業內公認的專業設計軟件,它們在處理各式各樣的影像方面擁有強大的功能,但同時也伴隨著諸多需要注意的細節。今天,讓我們深入探討置入影像時的細節管理,從色彩模式
Thumbnail
當今數位化快速發展的時代,圖像處理已經成為平面設計、出版業以及廣告製作中不可或缺的一環。Adobe Illustrator和InDesign作為行業內公認的專業設計軟件,它們在處理各式各樣的影像方面擁有強大的功能,但同時也伴隨著諸多需要注意的細節。今天,讓我們深入探討置入影像時的細節管理,從色彩模式
Thumbnail
某天我隨意地在瀏覽社交媒體,當時我也不過就是將手機螢幕多停留了在"剪髮"的短影片...大概停了五秒吧!結果不得了了,接下來每滑個幾則,就會穿插剪髮相關的訊息,甚至跨越平台也是,每瀏覽幾則就會不斷的放送剪髮資訊,我整個手機像被跟蹤了一樣,這實在讓我對於這神奇的演算法感到敬畏。
Thumbnail
某天我隨意地在瀏覽社交媒體,當時我也不過就是將手機螢幕多停留了在"剪髮"的短影片...大概停了五秒吧!結果不得了了,接下來每滑個幾則,就會穿插剪髮相關的訊息,甚至跨越平台也是,每瀏覽幾則就會不斷的放送剪髮資訊,我整個手機像被跟蹤了一樣,這實在讓我對於這神奇的演算法感到敬畏。
Thumbnail
你想用影片勾引眼球,但拍片製作花錢費力又耗時? 今天要和你分享如何運用剪映的AI功能, 一鍵就將文字跳級變身影片, 包含素材、配音和字幕通通搞定。 欸? 覺得效果好像還好嗎? 還會再加碼分享優化秘訣, 讓效果更專業,得到更多流量拓展你的影響力。 優化後你覺得如何呢? 一起留言討論吧! 傳統影片製作流
Thumbnail
你想用影片勾引眼球,但拍片製作花錢費力又耗時? 今天要和你分享如何運用剪映的AI功能, 一鍵就將文字跳級變身影片, 包含素材、配音和字幕通通搞定。 欸? 覺得效果好像還好嗎? 還會再加碼分享優化秘訣, 讓效果更專業,得到更多流量拓展你的影響力。 優化後你覺得如何呢? 一起留言討論吧! 傳統影片製作流
Thumbnail
常常聽到影像處理、Python、OpenCV等技術,最近又在流行機器學習、深度學習、CNN、人工神經網路,常常不知從何開始學習,如果有一本書能把這些知識從頭到尾講清楚有多好,再加上如果有最常用的案例實作,一定可以完整將這個現在最賺錢行業的領域變成一技之長。
Thumbnail
常常聽到影像處理、Python、OpenCV等技術,最近又在流行機器學習、深度學習、CNN、人工神經網路,常常不知從何開始學習,如果有一本書能把這些知識從頭到尾講清楚有多好,再加上如果有最常用的案例實作,一定可以完整將這個現在最賺錢行業的領域變成一技之長。
Thumbnail
平面設計概念與簡報設計息息相關,沒有設計背景的上班族其實也可以輕鬆地應用起來。設計理念並不是互相排斥的獨立原則,幾種理念可以在同一頁投映片中互補合作,讓觀眾有序地理解和接收到你想傳遞的訊息。承接上文,就讓我們來看一下,接近性、圍繞性、主體/ 背景以及留白,如何把這幾種設計理念帶進你下一份簡報之中吧。
Thumbnail
平面設計概念與簡報設計息息相關,沒有設計背景的上班族其實也可以輕鬆地應用起來。設計理念並不是互相排斥的獨立原則,幾種理念可以在同一頁投映片中互補合作,讓觀眾有序地理解和接收到你想傳遞的訊息。承接上文,就讓我們來看一下,接近性、圍繞性、主體/ 背景以及留白,如何把這幾種設計理念帶進你下一份簡報之中吧。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News