Proposed: Firefox on TV

1. FIREFOX on TV
FirefoxUX | ZhenshuoFang | 20130412

2. 1. Design Values
2. Web vs. TV
3. Design Concepts
• Core UX
• Hub UX
• Social UX
TABLEOFCONTENTS

3. DESIGNVALUES1

4. FirefoxUX | 4
Related Firefox Design Values
Plays well with others
ExuberantFinely crafted
High user-performance

5. WEBVSTV2

6. FirefoxUX | 6
• Vertical
• Tab & link based
• Text oriented
• Mouse control
Web
• Horizontal
• Screen & channel based
• Visual oriented
• Remote control
TV
WEBVSTV
The Display

7. FirefoxUX | 7
Web TV
WEBVSTV
The Experience
• Active
• Lean forward experience
• Passive
• Lean back experience
10 ft

8. 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

9. FirefoxUX | 9
WEBVSTV
The Task
Web TV
• Continuous browsing
(reading, writing, etc)
• Typing
• Lightweight browsing
(quick search, SNS update, etc)
• Less typing

10. 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

11. FirefoxUX | 11
WEBVSTV
The Emotion
Web TV
• Individual
• More serious
• Social
• More relaxed

12. 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

13. DESIGNCONCEPTS3

14. FirefoxUX | 14
Core UX Hub UX Social UX
Connect TV with the Internet TV as a hub of all devices Design a social TV experience
DESIGNCONCEPTS
Three Themes

15. FirefoxUX | 15
Core UX
Connect TV with the Internet
DESIGNCONCEPTS
Core UX
• TV optimized display
• TV optimized navigation
• Get my Firefox everywhere
• Task oriented UI

16. 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

17. 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

18. 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

19. 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

20. FirefoxUX | 20
Hub UX
TV as a hub of all devices
DESIGNCONCEPTS
Hub UX
• Multiscreening
• Better control with mobile

21. 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

22. FirefoxUX |
• Display content on TV, but control on mobile
22
DESIGNCONCEPTS
Better control with mobile
Control TV using mobile

23. FirefoxUX | 23
Social UX
Design a social TV experience
DESIGNCONCEPTS
Three Themes
• Sharing
• Multiple users

24. 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

25. FirefoxUX |
• Karaoke browsing or co-browsing experience
Collaborate playlist for TV
Add to queue from multiple sources
• Multi-devices paired with TV for gaming
25
DESIGNCONCEPTS
Design a social experience
Multiple devices for gaming
Shared queue for video playing