是什麼原因讓我們追劇追不停?解析 Netflix 介面 UI/UX 設計

本篇原文刊載於 RAR 設計攻略:https://www.rar.design/netflixuiux
💡 Netflix 點開影片的「略過介紹」這一顆按鈕,每天會被點擊 1 億 3600 萬次;這個介面最一開始是怎樣被設計出來的呢?Neftlix 在 UI/UX 上又有哪些秘密也是被設計好的呢?今天這集影片我們來好好研究一番。

嗨囉,大家好🙂 我是設計師 Riven

各位同學有在看 Netflix 嗎?我的帳號從 2016 年訂閱到現在,最近的韓劇《社內相親》、日本動漫《進擊的巨人》最終季第二部,還有台灣的《華燈初上》Riven 老師全都看完了,不過放心 接下來的內容不會為劇情爆雷。

只是追劇追了這麼久,你有留意過這些影音串流平台的介面設計,有哪些小心機讓你一集接著一集、停不下來,最後一集播完之後,窗外的太陽就跟著現正熱播一起升上來了,說不定看懂這些「故意的設計」,之後追劇會節制一點也說不定哦,趕緊來看看吧。

劇照封面暗藏玄機

Netflix 在推薦你可能喜歡的影片上,可是做了不少研究,演算法必須足夠聰明準確才能推到觀眾真正想看的,而我們知道不論是用網站、手機或電視觀看,點擊所觸發觀看這個動作之前,Neflix 就會去判斷什麼樣的封面劇照是合你口味的。

例如說,不同國家看到的劇照封面就會不一樣;像是全球熱門科幻影集《怪奇物語》就會在不同的地區選用當地喜歡的封面,反映出各地粉絲的習慣與喜好,我們知道現在使用者的注意力是相當短暫的,如果沒有在幾秒鐘以內吸引住他們的目光就會轉去做別的事情,因為人腦僅需 13 毫秒就能了解一張圖片傳達的訊息。

Netflix 創意服務全球總監 Nick Nelson 在部落格中撰文表示,他們在消費者研究中發現,劇照不僅是影響會員選擇節目的最重要因素,更佔有會員瀏覽 Netflix 節目時超過 82% 的注意焦點,會員們平均只用 1.8 秒來考慮要不要看一部影片。

還有幾個 Netflix 在影集劇照分析上的觀察,像是人類對於臉部表情非常有感覺,表達出複雜情緒的臉部表情,,會比極度開心或舒服愉快的表情更能吸引目光,也就是說「情緒」有一種引人入勝的魅力,可能是因為複雜情緒代表後面隱藏非常豐富的故事,另外一個也很好玩的研究發現是,劇情裡的好人不一定最吸引人,反而是辨識度高的極端壞蛋反派角色,在劇照中特別受到歡迎,,尤其是在兒童系列以及動作片系列中,例如在《馴龍高手》電視影集版《馴龍記:飛越邊界 Dragons: Race to the Edge》大反派和噴火龍會讓觀眾們特別有感覺。

而當然,如果你用不同裝置去瀏覽 Netflix 也會顯示不同張的劇照,比如說《勁爆女子監獄》裡面有許多知名演員,但如果在手機裝置上排排站會讓縮圖太複雜,所以會針對小尺寸螢幕去放上更少的人數,這有點像我們 Web UI 講的 RWD 響應式設計。

影劇標準字

而除了劇照的選擇之外,Netflix 在標準字客製上也是別有用心哦,會從原本影集當地的字型延伸到各個語系,而不失去原本的風格。

我們從 justfont 的這篇 IG 分析貼文中可以看見,例如《咒術迴戰》延續了日文字型的架構與比劃,《機智醫生生活》沿用了原本韓文字的造型與顏料質感,《后翼棄兵》則是以明體字型作為基礎,改造成符合劇本風味的標準字。

https://www.instagram.com/p/CSGKxTrHhCG

直接放送預覽影片

Netflix 身為影音串流網站的一哥,有很多原創性的介面與體驗設計,以現在來可能有許多網站會看到,不過最剛開始可能都是源自於 Netflix。

像是剛進入 Netflix 網站,直接一言不合就全螢幕播放最新劇集的影片預覽,吸引目光的畫面配合聲音效果,這個設計就是要「引人入勝」,讓你產生觀看的興趣,這個動作是在解決在以前的影音平台上,要找影片的時候只能靠影片封面圖片跟標題來看,但其實影片是會動且有聲音的,直接看影片片段會對使用者來說更為直覺,那其實以網站技術來說,實現影片的即時預覽這件事不會太困難,但 Netflix 的 User Interface VP 提到過,Netflix 是一直等到大家已經習慣在網路上看電視,以及自適應串流與全球內容傳輸系統,等等的開發面向科技基礎設施完備後,才推出這項播放技術來。

這讓播放預覽可以更舒服、更順暢一點,不過話說回來 Netflix 的預覽並不是一般的預告片或宣傳片,是經過特別設計的劇情提要,目的是快速傳達劇情重點、角色個性和畫面風格,幫使用者更快速、更確定找到的是想要看的內容,讓觀看者花更少的時間尋找,從而觀賞到更多的影片。

直接略過片頭

再來是每次看新的一集影片,剛開始的時候你想跳過片頭,就會去按的這顆「略過介紹」按鈕,官方指出這個東西每天使用次數高達 1 億 3600 萬次,為 Netflix 會員累積省下相當於195年的驚人時間。

Netflix 產品創新部門總監 Cameron Johnson 近日發表文章說到,觀眾有時候會想複習最愛的影片精彩瞬間,比方說爽感十足的動作場景,真相大白、劇情出現驚人轉折的時刻等等,當時團隊有個想法,是在 Netflix 提供倒轉與快轉 10 秒的功能,當觀眾若是一時分心、漏看其中一幕,可以倒轉回看。

而至於為什麼需要快轉10秒?他則認為觀眾可能會想跳過片頭,馬上繼續看接下來的故事,為此團隊做了研究,發現 Netflix 會員對於節目開始前5分鐘手動跳過的機率約有 15%,這讓團隊有了信心,相信有很多觀眾會想略過片頭介紹,不只如此,團隊不想設計對於多種不同需求也許都有一點點幫助的功能,而是比較想設計出只有一種用途,但是非常有幫助的一項功能,目標是讓這項功能越單純越好,同時讓觀眾保有選擇權,可在觀賞影集或動畫選擇再看一次熟悉的片頭與主題曲,按鍵只在需要時出現在畫面上就好,而且最好只需要點擊一次就能發揮作用。

至於這個按鍵的名稱,團隊集思廣益想了幾個方案,包括「跳過片頭」、「略過開頭」、「快轉跳過」、「略過介紹」等等,甚至只有「略過」2字,接著再對隨機選中的 Netflix 會員進行功能測試,最初於美國、英國、加拿大等地的 250 個節目(不包括電影)中放入這個按鍵,而且一開始只在電腦網頁版上推出,這個看似簡單的功能得到觀眾的大量迴響,而且在社群媒體上也獲得非常多好評,其中又以「略過介紹」這個名稱的效果最好。

Cameron Johnson 還透露團隊一名工程師說道:「我覺得就算放一個『免費獲得杯子蛋糕』的按鍵,點擊數搞不好還比不上『略過介紹』。」。

到了2017年8月,Netflix也在電視App上新增了「略過介紹」功能,隔年5月則在手機App推出,特別的是,當電腦螢幕畫面上出現「略過介紹」按鍵時,按下鍵盤的「s」鍵其實也能略過介紹(Skip Intro),不必用到滑鼠來點擊,這可能是很少人知道卻很實用的Netflix快捷鍵。

時至今日,實在很難想像觀賞Netflix節目時若無「略過介紹」按鍵可按,會是什麼樣的情況,它已經變成大家愛用的功能,甚至其他串流服務也有類似設計,帶給全球觀眾無數便利的瞬間體驗。

比讚評價與倍速播放

Netflix 除了在介面設計上下了不少功夫,於使用者體驗上 也就是那些看不見的感受和感覺,我也有一些有趣的發現,像是不曉得大家有沒有看過,在 Netflix 進入到台灣以前,在看完每部影片之後,會跳出五顆星級的評價,是在後來才改成比讚跟倒讚,甚至之後還要推出雙手比讚,那這樣的設計,我們可以很直觀地猜到,比讚會比評幾顆星更容易觸發使用者的行動,也就是點個讚會比猶豫要給幾顆星來得簡單,而根據官方數據顯示這也的確可以增加兩倍以上評價的次數,不過我在這篇 2017 年的這篇網站新聞中發現這還有另一個用途,就是我們習慣的 Google 地圖上看餐廳幾顆星評價,這數字可以有效地幫助他人得到推薦,但這個評論對讓自己獲得更好推薦沒有多大幫助。

反觀,當人們看到按「讚」或按「爛」的拇指時,就知道它們的用途是幫助系統學習人們的喜好,這可以讓演算法推出更適合你的影片,而另一個 Netflix 在體驗最佳化做的事情是倍速播放,這並不是一個多麽新穎的功能,早在 YouTube 上就已經很多人習慣用 1.5 或 2 倍播放,也許你現在就是開兩倍在看,但 Netflix 在當時可是經歷了一番掙扎,對於這項功能,美國盲人協會和聾啞人協會都表示了相當的讚賞,認為這對於視聽障礙人士是十分重要的功能,但對於內容提供者們來說 像是演員和導演,卻反對以這種奇怪的節奏觀看他們的作品,最後選擇了推出了 0.5 和 0.75 倍慢速,以及 1.25, 1.5 快速播放的方案。

重點總結

好啦,以上就是我覺得 Netflix 在 UI/UX 設計上,很值得一起討論跟學習的地方

當然要將使用者體驗做最到好,除了介面之外還有許多細節也需要照顧,像是網路系統速度跟影片播放的最佳化等等。

在描寫 Netflix 管理策略的《零規則》這本書也有提到,Netflix 從郵遞影碟公司轉型成線上串流服務,從收購提案被百事達拒絕到海放 DVD 專賣店,現在在全球已經上線一百九十幾個國家跟地區,同時有超過一億六千七百萬名訂閱戶,其企業文化強調的「以人為本」,應用在 Netflix 的許多設計上就是「以使用者為核心」,這也是 UI 與 UX 設計的本質。

Netflix 用有力的資本跟科技創新的執行力,證明了這件事情。

各位同學在追劇的時候,有沒有也注意到什麼有趣的地方呢?,歡迎到 YouTube 影片下方留言跟我們分享,我是 Riven 我們下次見。

--

--

--

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
林育正 Riven

林育正 Riven

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

More from Medium

Does UI/UX Also Need A “No-Code Movement”?

Wireframes: Streamline your web design process

5 Lessons Learned During Our Website Redesign

UI/UX Designer’s Toolkit