Player - New feature & redesign
為了增加略過片頭片尾、快轉縮圖功能，重新整合iOS & Andirod App播放器。盤點所有播放器功能，且建置icon system方便全平台之視覺維護，同時加速工作速度。
try it ☞
Player - New feature & redesign
My role
播放器為影音串流平台的重要功能，影響層面甚廣，除了播放戲劇，也有穿插廣告、不同會員身分變換...等等，需進行跨部門溝通。於此專案與PM、各平台工程師、QA工程師、未付費用戶 AVOD（Advertising Video on Demand）、付費會員 SVOD（Subscription Video on Demand） 等負責部門合作。
其中我負責競品分析、UX設計、wireframe繪製、icon統整、畫面設計、Hi-fi設計＆工程交接，產品刻畫完成最後則需ui review。
Result
1. 新增「略過片頭尾」等功能
本次專案因應用戶回饋，成功實作於iOS與Android兩大系統且如期上線。有效降低客服抱怨，降低人力資源。
2. 顧及商業考量下，優化使用者體驗
於發想設計時，專注於三大原則：
1. 操作直覺簡單
2. 功能目的清楚且單一
3. 視覺規範統整
依此原則，經過競品研究且提出優缺分析，設計出體驗更佳之播放器。同時，移除出現「一點擊畫面」即直接出現廣告，與優化廣告版位，使其成為輪播形式，最大化畫面利益。
3. 建置Design System
藉由此機會重新統整LINE TV之設計語彙、icon繪製邏輯。優化畫面統一性，且強化LINE TV品牌識別度。將來專案實作，更能有效率的執行專案，降低時間與人力的耗損。
Time
2022 05 - 08
Team
Product design
PM
iOS / Android Team
Content Team
Maketing Team
Data
Platform
Android app、iOS app、TV
Project context
影音串流平台中，播放器為用戶主要使用功能之一。舊有播放器功能已上線超過兩年時間不曾優化，用戶期望在有限時間之內，能消化更多戲劇，紛紛回饋對於跳過片頭與片尾之需求。本專案即針對用戶使用習慣進行播放器優化與新增刪減功能，確保用戶能更順暢使用LINE TV。
目前App播放器的互動設計有較多問題，在功能延展性上較為侷限，甚至影響觀劇體驗。目標希望提升用戶之觀劇體驗，針對觀劇當下情境進行設計。
Current Problems
1
點擊即暫停
在過去的設計中將Player設計為一「觸碰螢幕隨即暫停」，且一旦出現操作行為隨即隱藏控制選項。
目前推測此邏輯是因：需滿足廣告露出訴求, 因而犧牲使用者體驗，進而產生以下問題：
-
使用者需不斷地往返控制選項
-
無法在播放過程中選擇自己所需功能
-
與一次性之功能衝突（one time action），點擊同時即會暫停影片。
2
功能資訊混亂、位置分散
目前App播放器功能眾多，但呈現方式無統一（icon、文字交錯）。亮度、音量功能操作隱晦，僅能實際使用猜測功能。
1
AD display once user touch screen, which disturbing user experience
2
Icons without consistent system.
2
Hidden function cause confusion.
Goal
User goal / 快速便捷的使用功能
- 讓使用者可以在觀劇過程中更快速的選擇所需的需求和設定
Project goal / 短期：使用直覺、輕易新增功能 ；長期：引導成為VIP
短期目標
- 讓Player control 使用更直覺且讓未來在新增功能上更有彈性
長期目標
- 新增功能上線後, 能夠成為吸引用戶成為會員或VIP的因素
Design Challenge
1 . 考量行銷利益進行設計
在不打斷觀劇的過程之中還是能夠顯示蓋板廣告
2 . 同時考量不同身份用戶使用情境
AVOD(註冊會員)和VIP的Player設計能夠統一
3 . 清楚表達功能顯示層級
Player UI 主功能和次功能有明確的層級之分，同時可意識到快捷功能 (例: 快倒轉十秒, 調整亮度/音量)
Project Scope
本次專案針對播放器優化，盤點現 有功能且進行分析，依需求增減相關功能。
以下為此次設計項目：
新增功能
新增略過片頭尾功能，讓用戶能在有限時間中觀看更多戲劇。
播放器優化
使播放器功能更加容易使用，用戶能直覺操作
Design Process
本專案包含原有功能優化與新增略過片頭尾功能，因功能繁複，設計流程來回研究與分析，皆依以下流程完成設計：
1 . Discover - 2 week
-
競品分析
-
略過片頭尾功能
-
播放器功能
-
-
了解播放器現有問題，與功能盤點、定義痛點
-
釐清設計挑戰
2 . Design - 1.5 week
-
ideation
-
wireframe & low - fidelity
-
Hi-fi mock up
3 . Delivery - 1 week
-
透過Kick off會議，與開發人員、PM來回確認實作可能性
4 . UI Review - 2 week
-
確認完成畫面與設計相符
-
模擬各式情境，確保流程順暢
Discover
Research & Competitive Analysis
針對了解市面之影音串流平台之播放器，本次專案研究各式影音串流平台：Netflix、Disney+、愛奇藝、Youtube、KKTV、Amazon等。分別研究「略過片頭尾」、「播放器操作」兩大項目。
透過實際操作播放器功能，了解各功能呈現邏輯並進一步進行優缺分析。因播放器需同時考量不同用戶身份別，針對AVOD用戶之廣告顯示邏輯，同樣須納入研究項目。
略過片頭尾
現有市面上現有影音串流平台，幾乎皆提供略過片頭片尾服務，而透過Netflix官方指出，其平台之「略過介紹」每天使用次數高達 1 億 3,600 萬次（約兩億名用戶）。由此可推斷觀看串流平台之使用者，相當頻繁地使用此項功能。
略過片頭尾競品分析，以下分別為競品分析之畫面為範例：
Disney+
1
Skipping the outro on Disney displays detailed information to help users learn more about the next episode.
Small view for the ending song, offering option for user to keep in this episode.
IQYI
2
Skip the outro of IQYI using the progress bar to indicate when the next episode will automatically start.
Netflix
3
The 'Skip Intro' button on Netflix will remain visible until the introduction to the end.
What we found
透過競品分析，我們發現略過片頭片尾功能的有相通痛點：
1. 秒數倒數過快、令人產生壓迫。
2. 無法重複or立即使用功能令人挫折。
播放器＆廣告 /
針對各競品之播放器提供之功能與呈現方式進行研究分析，可近一步瞭解到各品牌之著重點與策略，故設計同時應一並將企業理念納入考量，強化品牌感。
實際操作畫面後，分析流程如下：
Step 1
競品功能盤點
透過表格，紀錄統整實際功能、呈現方式與使用流程紀錄。
Step 2
競品優缺分析
將競品分析成果統整，能透過此表格整理競品之優缺點。
Step 3
平台功能分析與優化方向
了解功能之缺點後，套用至LINE TV自身產品，提出優化建議與實作方向。
What we found
1. 功能icon統一，更能帶出品牌感受
2. 依商業目標不同而調整提供不同之服務與功能
Netflix
1
2
3
KKTV
1
2
3
3
Disney+
1
2
3
2
KKTV/ AD
4
2
播放器介面研究
可以發現各品牌對於主要與次要功能，皆有不同設計與擺放位置，關係到品牌策略。
1
目前市面播放器共通主要功能為「播放、暫停」，普遍放置於中央主要位置。
2
顯示時間雖同樣為必要功能，顯示方式皆有不同。可能為剩餘時間或已觀看時間。
3
次要功能放置於畫面上方或下方，統一顯示格式，使用戶能快速解讀各功能。如：倍數、字幕、集數等等。
4
播放器之廣告之內容，則大可區分為外來廣告或平台內部戲劇推薦，能預先提醒用戶廣告出現為佳。
Ideation
針對播放器呈現方式，透過不同組合進行討論分析，著重閱讀性與便捷與否。針對音量、亮度功能，以middle fidelity 實作Protype，確認操作順暢與否。
「略過片頭尾」實作方向：
1. 以動態文字，取代秒數倒數，以提示用戶自動播放功能。
2. 功能皆可重複叫出且使用。
「播放器優化」實作方向：
1. 功能設計著重用戶便捷性，可快速判斷並使用相關功能
2. 明顯區分SVOD與AVOD用戶權益，引導AVOD用戶付費訂閱
3. 於不同裝置依然維持視覺統一性，強化品牌感受
Explorations - Skip intro
Option 1 按鈕與原功能並列
Option 2 收攏原功能
Pros：所有功能一字排開，簡單明瞭
Cons：用戶判斷時間增長，提升互動成本
Pros：用戶可專注於略過片頭尾功能
Cons：icon示意需透過學習去了解內部功能
Option 3 按鈕置中強調功能
Pros：清楚強調主要功能
Cons：不存在於與現有LINE TV規範
Explorations - Tool bar
Option 1 文字
Pros：樣式統一
Cons：文字判讀時間，較圖像長
Option 2 icon
Pros：畫面簡約
Cons：用戶可能需另外學習icon意義
Option 3 文字 + icon
Pros：資訊清晰，判斷快速
Cons：畫面較為擁擠
Explorations - Volume & Brightness
Option 1 左半範圍置中
Option 2 icon顯示相對數值
Option 3 Bar強調設定
Pros：操作範圍廣，容易使用
Cons：數值於畫面中較不易判讀
Pros：隨亮度大小轉換icon狀態，互動感強
Cons：操作可能阻擋icon
Pros：寬度顯示明顯
Cons：風格與規範不符
Ideation in business perspective
播放器設計為「觸碰畫面則立即出現廣告」，與用戶體驗互相衝突，中斷了用戶使用功能之流程。
用戶於影片播放途中，觸碰螢幕有各種目的，甚至誤觸可能。於此邏輯下，直接出現暫停頁廣告遮擋會影響用戶體驗，建議移除。
又暫停頁廣告之於公司立場為必要收益來源，故與廣告單位來回討論後，設計針對商業角度提出「使用暫停功能時，出現“輪播”廣告」之設計方向。
過去廣告單位，於一次觸碰下，僅能販售單則廣告。經由設計優化後，於同一版位可露出不只一則廣告，助於廣告販售。且顧及畫面整潔度，將外部廣告與內部廣告整合，於輪播廣告中設立優先順序：以外廣為優先，播畢後則出現內部廣告。
以上設計不但改善用戶體驗，同時對於廣告上提供更多選擇可販售行銷。
The close icon is the sole method for closing ads, ensuring that accidental closures are avoided.
AD will change every 15 mins that can offer market team different source to sell.
Logo / image of customer
AD title
CTA 'Let's GO'
Design solution - New features
新增功能 - 略過片頭尾&快轉縮圖
略過片頭尾（Skip intro and outro）主要設計為：
1. 略過不重要之重複資訊，設計為第一集無略過片頭功能
2. 進入觀劇氛圍的儀式感：功能出現時機點：開始片頭後2秒
- 讓使用者有意識已進入片頭後，能使用略過功能
- 維持10秒後自動消失，提供充足時間可使用、且自動消失不打擾。
- wording顯示邏輯以「用戶視角」為主，故選擇以 進入戲劇 為略過片頭文字。
略過片頭
搭配播放icon，強調播放戲劇功能
Solution:
-
略過片頭出現集數：第二集
-
研究發現用戶會在「有限的時間內」觀看戲劇，故重複性資訊對於觀者而言是非必要觀看的片段。為求節省時間，會希望能跳過。片頭在第一集對於用戶而言，為全新、尚未觀看之影片，故於第二集時，再提供此略過功能。
-
-
進入片頭「兩秒後」即出現功能
-
讓用戶進入觀劇之氛圍後，和緩的提供略過片頭功能，讓用戶能明確觀察到此服務。
-
-
文字選用「進入戲劇」、以Icon強調播放功能
-
對於用戶而言，首要之急是實際觀看影劇內容。在「略過片頭」與「進入戲劇」兩選項間，選擇「進入戲劇」更明顯傳達用戶之目的，icon則提示持續播放功能、引導繼續觀看。
-
略過片尾
1
可讓用戶於15秒內決定停留此集與否
15秒內可直接點擊，以播放下集
2
1
最後10秒出現下集資訊，同時再次提醒用戶即將自動播放
Solution:
-
進入片尾「兩秒後」即出現功能
-
邏輯與略過片頭相同，希望用戶能意識到進入片尾後，能夠使用略過片尾功能。
-
-
略過片尾出現順序
1
「略過片尾功能」
2
「提示文字」
-
透過動態之時間差，將傳達資訊簡單化。首先提供可主動使用之略過片尾功能；後提示文字以動態跳出：說明即將自動進入下集。
-
預設15秒後自動跳轉。
-
文字選用「立即播放下集」
-
同片頭邏輯，文案期望強調「用戶預期目的」。故比起略過片尾，於CTA上選擇立即播放下集；同時維持播放icon邏輯，使用戶了解動作意義。
-
-
立即播放下集 直接略過下集片頭
-
主動點擊力捷播放下集，則表示用戶有意願繼續觀劇，自動替用戶略過影片片頭，進入正片，減少觀劇時間。
-
快轉縮圖（Thumbnail）
LINE TV之Web播放器提供「快轉縮圖」之功能，為求平台體驗一致、強調品牌感，故於本次專案一同增加此功能。
設計同時，需考量縮圖比例與時間顯示等關係，且與mobile web維持統一視覺語言。
快轉縮圖
Solution:
-
拖拉進度條時，其餘Player control功能皆隱藏。讓用戶可更清楚目前戲劇進度與相關時間。
-
圓角細節，使平台視覺語言統一。
Design solution - Player Redesign
播放器（Player）
實作方向：應播放器應考量用戶使用習慣，類似操作與功能擺放靠近，且能明確指引功能內容。
廣告出現時機點為「點選暫停」後，出現改版廣告。
New design
鎖頻功能與其他功能位置分開，避免誤觸。
亮度、音量，以icon示意，用戶可直覺使用。
剩餘時間幫助用戶提高掌控感。
Press狀態之下，按鈕放大，提高反饋感。
標題示意當集集數＆標題，使用戶清楚當集資訊
考量用戶習慣與體驗，功能依重要程度與特性設計layout，確認touch area，使流程更加直覺。
1
提高各功能識別度，依不同需求調整icon大小，區隔功能層級。
2
3
icon重新繪製，設定規範，加強品牌統一性。
Old & New comparison
Player control
Oid
New
Problems:
-
音量、亮度無提示，容易誤觸功能
-
功能設計是視覺元素不統一
Solution:
-
亮度、音量以icon呈現，清楚提示用戶相關功能
-
時間顯示「剩餘時間」，提升用戶對於觀看戲劇之掌握度
-
右下功能統一icon與文字同時呈現，確保訊息溝通清楚
-
預設為文字顯示，實際使用後則切換為設定資訊。例：倍速 → 1.5倍。
-
AD
Oid
New
Problems:
-
點擊畫面後立即出現 ，侷限開發立即點擊功能
-
廣告內容應以去除廣告為誘因，不適合放置其餘戲劇廣告
Solution:
-
版位單純，加上黑色dim，廣告訊息清楚
-
外部廣告優先於內部廣告，且內廣不建議推薦其他戲劇，應以移除廣告為誘因。
音量&亮度
Oid
New
Problems:
-
需實際嘗試，才能了解到亮度或音量實際功能位置
Solution:
-
使用同時不遮蔽影片畫面，方便用戶判斷設定，無需判讀數字。
-
不管拖拉或點擊皆可進入調整模式，減低用戶使用錯誤之挫折感受。
集數drawer
Oid
New
Problems:
-
觀看進度無從得知，用戶自行尋找劇情
-
VIP設計為黃色底搭配白色文字，閱讀性低，不符合WCAG建議規範。
Solution:
-
提供進度條，用戶之時間掌握度提高
-
調整Tag設計為，黃底黑文字，月讀性佳
-
顯示當集縮圖，提高觀劇吸引力
播放器操作教學
Oid
New
結合手勢icon與文字說明，讓用戶快速了解操作方式。
按鈕示意可點擊，實際整面皆為touch area，使操作能更加快速。
利用短線示意總畫面為兩頁。
Problems:
-
出現時機：首次下載app且首次進入播 放器
-
用戶此時目的為觀劇，而非了解操作，高可能性感到厭煩且直接關閉。
-
Solution:
-
出現時機：第一次使用播放器功能時，即出現使用教學
-
於實際使用前，先利用兩面教學簡短說明操作邏輯，協助用戶更順暢使用平台。
-
-
以icon以手勢直接呈現，更直覺教學用戶實際動作
1
時機恰當，操作無負擔
進入片頭曲＆片尾曲後，兩秒才出現略過功能，能讓用戶更清楚理解到目前可略過之段落。
2
統一視覺，使用直覺
統一icon規範，且透過畫面安排，將類似功能聚合，讓用戶使用更加直 覺。
3
需要的時候才教你
過去版本中，一進入播放器就顯示教學。調整為，「第一次」叫出播放器時，出現教學，更能符合用戶情境。
Outcome & Impact
Business impact
同時考量商業與用戶體驗下，新增廣告輪播系統，讓廣告單位有更多版位能販售，成功達到雙贏局面。
廣告不應該影響用戶得主要內容，確認使用暫停功能後方出現廣告。而此輪播版位能讓廣告樣式更加多樣化，以提供更多資源給廣告商做選擇，增加更多收益的可能性。
設計規範統整
過去平台的Icon並無特別規範，故介面上之視覺語言無統一、粗細不同，導致畫面不和諧。
藉由本次專案設定規範，依此規範繪製icon系統。區分為16px、20px、24px等大小，線段寬度以2px繪製、依視覺調整份量感。將來所有專案凡有icon之需求，皆以此系統為主，使平台視覺更加統一和且諧性。
略過片頭尾功能反應兩極
略過片頭尾之功能，於用戶反饋中的問題中，一直維持相當高的佔比。專案實際上線後，提出略過片頭尾功能需求的用戶真正減少。但未料到的是，於平台參加「LINE POINTS 觀劇贈點」活動之用戶，因略過片尾之功能，用戶憂心會影響到實際參加活動的時間、進而影響個人權益。
於此新增問題，考量參與活動用戶佔平台用戶僅約0.4%，故維持本次設計方向。待用戶學習與習慣此新功能，於此同時加強公告通知與客服同仁協助解決相關問題。
總結
本次專案為優化平台重要功能：播放器，實作於iOS與Android兩大系統，同時新增略過片頭尾之功能。
舊有播放器設計中，因商業考量高於使用者體驗，故出現「一點擊畫面」即直接出現廣告，且同時影響到SVOD用戶（Subscription Video on Demand）體驗，點擊同時直接暫停影片。
本次設計更加著重使用者體驗，專注於三大原則：
1. 操作直覺簡單
2. 功能目的清楚且單一
3. 視覺規範統整
依此原則，經過競品研究且提出優缺分析，設計出體驗更佳之播放器。同時，與行銷同仁一同優化廣告版位，最大化畫面利益。
新版播放器優化項目：
1. 簡化點擊操作
點擊後，播放器應立即啟動，而不會立即觸發廣告。暫停功能將與廣告顯示分開，避免混淆用戶體驗。點擊操作應啟動播放器，而暫停功能將觸發廣告顯示。
2. 清楚以icon提示，減少畫面模糊地帶
使用清晰直觀的圖示來指示功能，減少用戶的歧義和混淆。確保音量和亮度圖示易於辨識，並放置在適當的位置，以便更好地與用戶進行互動。
3. 建置icon繪製規範，強化畫面統一性
建立完整的的icon設計準則，以確保播放器與LINE TV平台，在整體視覺上呈現一致的外觀。
規範中，包括定義標準的icon尺寸和線段寬度，以呈現更好的視覺和諧性。
What's next?
1. 統一平台播放器
本次優化範圍限縮於App畫面，為求平台統一性，期望能將Web之播放器加以優化，更加靠齊App畫面。另外，藉由數據追蹤，能進一步了解，成功由播放器轉變為付費用戶之功能與比例。以此了解目前轉換率且加以優化，讓播放器效能最大化。
2. 追蹤實際略過片頭尾使用數據
針對用戶反饋之略過片頭尾功能，研究後提出新設計以滿足用戶所需。
下一步期望可進行更精細設定，例如略過不同內容、同時甚至能統一關閉或開啟此項功能。