FIREFOX on TV

FirefoxUX | ZhenshuoFang | 20130412

1. Design Values2. Web vs. TV3. Design Concepts

• Core UX• Hub UX• Social UX

TABLEOFCONTENTS

DESIGNVALUES1

FirefoxUX | 4

뜟멾띴멾럿멾롤멾룉멾뤈멾륽멾맒멾멝ǍdzRelated Firefox Design Values

Plays well with others

ExuberantFinely crafted

High user-performance

WEBVSTV2

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 | 11

WEBVSTV

The Emotion

Web TV

• Individual • More serious

• Social • More relaxed

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

DESIGNCONCEPTS3

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

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