firefox on tv
DESCRIPTION
Proposed: Firefox on TVTRANSCRIPT
FirefoxUX | 4
뜟멾띴멾럿멾롤멾룉멾뤈멾륽멾맒멾멝ǍdzRelated Firefox Design Values
Plays well with others
ExuberantFinely crafted
High user-performance
FirefoxUX | 6
• Vertical• Tab & link based• Text oriented • Mouse control
Web
• Horizontal• Screen & channel based• Visual oriented • Remote control
TV
WEBVSTV
The Display
FirefoxUX | 7
Web TV
WEBVSTV
The Experience
• Active• Lean forward experience
• Passive• Lean back experience
10 ft
FirefoxUX | 8
WEBVSTV
The Content
Web TV
• Content generation• Mostly texts• Different types of contents (Photos, videos, tables, etc)
• Content consumption• Mostly videos and photos• Less variation of content types
FirefoxUX | 9
WEBVSTV
The Task
Web TV
• Continuous browsing (reading, writing, etc)• Typing
• Lightweight browsing (quick search, SNS update, etc)• Less typing
FirefoxUX | 10
WEBVSTV
The User
Web TV
• Mostly one user• Own multiple devices• User is more focused
• More than one user• Multiple devices, some are shared • User is more distracted
FirefoxUX | 12
WEBVSTV
Design Principles
• Simplicity comes first• Visual appealing is key• Minimize typing• Keep in mind the 10ft environment • Respect user’s existing mental model• Social and fun experience
FirefoxUX | 14
Core UX Hub UX Social UXConnect TV with the Internet TV as a hub of all devices Design a social TV experience
DESIGNCONCEPTS
Three Themes
FirefoxUX | 15
Core UXConnect TV with the Internet
DESIGNCONCEPTS
Core UX
• TV optimized display• TV optimized navigation • Get my Firefox everywhere • Task oriented UI
FirefoxUX |
• Maximize content area: Fullscreen by default Get rid of web noise (Ads, comments, etc)• Better readability: Bigger everything (fonts, padding, etc) Fluid transition (smooth scrolling, animation, sound feedback, etc)
16
DESIGNCONCEPTS
TV Optimized Display
Fullscreen on TV by default Reader mode on TV
FirefoxUX |
• Simple navigation Everything is 1 or 2 navigation away Shortcut for common command• Chromeless UI Contextual/floating control UI No navigation bar, cursor or tabs Voice and gesture control• Pair a typing device
17
DESIGNCONCEPTS
TV Optimized Navigation
Pair a typing device
Contextual control UI
FirefoxUX |
• Sync relevant TV content Bookmarks, history, password, themes, etc• Awesome bar suggestions based on TV context• New Start page on TV
18
DESIGNCONCEPTS
Get my Firefox everywhere
start page on TV
FirefoxUX |
• Sidebar for lightweight browsing Quick search something while watching a show Social network sidebar• Private browsing mode• TV based search engines (wiki earch field, IMBD search field, etc)
19
DESIGNCONCEPTS
Task Oriented UI
Search sidebar
FirefoxUX | 20
Hub UXTV as a hub of all devices
DESIGNCONCEPTS
Hub UX
• Multiscreening• Better control with mobile
FirefoxUX |
• Mirrored display Send a page or link from phone to TV• Location based Sync Disconnect when leaving the room• Lightweight pairing Share locally Display photo on TV without uploading it to web
21
DESIGNCONCEPTS
Multiscreening
Send photo to TV
FirefoxUX |
• Display content on TV, but control on mobile
22
DESIGNCONCEPTS
Better control with mobile
Control TV using mobile
FirefoxUX | 23
Social UXDesign a social TV experience
DESIGNCONCEPTS
Three Themes
• Sharing• Multiple users
FirefoxUX |
• Parental control and notifications from TV to mobile• TV share to TV Chat, web RTC, co-watching a show, etc Create and share TV channel or playlist
24
DESIGNCONCEPTS
Sharing
TV share to TV