Tweet
Tweet

Slide 1

Slide 1 text

Are you browsing comfortably? Steve Workman @steveworkman #sideviewconf

Slide 2

Slide 2 text

TV is still the centre of family entertainment http://www.flickr.com/photos/62274237@N06/5663134445/

Slide 3

Slide 3 text

“Unlike the 1950s family, however, they are also doing their own thing. They are tweeting about a TV show, surfing the net or watching different content altogether on a tablet.” James Thickett, Ofcom’s Director of Research http://www.flickr.com/photos/bool eansplit/8414735791/

Slide 4

Slide 4 text

There is a market for the web on your TV Big TV NAS Xbox Wii Media Centre PC

Slide 5

Slide 5 text

7 million households can get the internet on their TV (39%) Source: Ofcom CMR 2013

Slide 6

Slide 6 text

7% of households have a Smart TV

Slide 7

Slide 7 text

Over half of all households have a games console 97% 75% 53% 53% 51% 38% 35% 24% 22% 8% 7% Digital television DVD player Games console DVR Smartphone MP3 player DAB digital radio Tablet E-reader 3D ready TV Smart TV Household take-up of digital communications / AV devices 2013 Source: Ofcom CMR 2013

Slide 8

Slide 8 text

The Trinity of TVs: User position, User input, Device output Input Output Position Solve for all devices

Slide 9

Slide 9 text

I’m all the way over here, can you read that text?

Slide 10

Slide 10 text

Small text is fine close up http://sizecalc.com/

Slide 11

Slide 11 text

At 10’ keeping the same perceived size means bigger font sizes http://sizecalc.com/

Slide 12

Slide 12 text

A good rule of thumb is to double the size of the text on the screen http://www.flickr.com/photos/vanf/5327651828

Slide 13

Slide 13 text

What’s the resolution of your TV? 1080p, obviously Viewport Size TVs Aspect Ratio 800x500 Wii 16:10 980x514 Wii U 19:10 960x540 Samsung TV 16:9 1024x574 Google TV 16:9 1041x586 Xbox 360 16:9 1094 x 928 PS3 11:10 1236x701 Xbox One 16:9 1280x720 LG TV 16:9 1920x1080 Panasonic TV 16:9

Slide 14

Slide 14 text

“The Web browser viewport did not provide a good guide to how things should lay out. In fact, relying on viewport alone lead to arguably poor designs. Luke Wroblewski (@lukew) Nov 3rd 2013 http://www.lukew.com/ff/entry.asp?1817

Slide 15

Slide 15 text

No keyboard, no mouse, no touch… no hope?

Slide 16

Slide 16 text

TVs are complicated enough as they are

Slide 17

Slide 17 text

Smart TV remotes have tried to make input simpler, and failed

Slide 18

Slide 18 text

Second-screen input apps are filling the gap http://www.flickr.com/photos/perolofforsberg/7496942606/

Slide 19

Slide 19 text

Voice input will come along one day Image courtesy of Microsoft http://news.xbox.com/media

Slide 20

Slide 20 text

Assume there’s a D-pad, anything else is a bonus problem

Slide 21

Slide 21 text

Q: Do you browse the internet on your TV? No. Experience is awful. Very occasionally No. It's slow and annoying No Rarely. It's easier to use phone/tablet/laptop which are usually all in the same room as the TV. No because the TV processor is really slow No. I find the entire process annoying and tedious.

Slide 22

Slide 22 text

http://www.flickr.com/photos/earcos/4812384484 Your Smart TV in 2013 has the equivalent power of an iPhone 3GS

Slide 23

Slide 23 text

TV browsers aren’t exactly stellar Wii PS3 iOS 4 Xbox 360 PS Vita Wii U iOS 6 Panasonic Samsung TV iOS 7 Google TV Toshiba TV Chrome (Desktop) 0 50 100 150 200 250 300 350 400 450 500 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 HTML5 Test Score

Slide 24

Slide 24 text

LG 2012 model TVs run this browser… By Ufopedia (Own work) [Public domain], via Wikimedia Commons

Slide 25

Slide 25 text

We make the web on TV bearable with add-ons Big TV NAS Xbox Wii Media Centre PC

Slide 26

Slide 26 text

Scenarios DESKTOP • Position: 18” from screen • Input: keyboard and mouse, maybe touch • Output: high-resolution screen, large viewport, modern MOBILE TV • Position: 10’ from screen • Input: d-pad, maybe keyboard, maybe touch, maybe voice • Output: high-resolution screen, small viewport, probably old browser • Position: 6-10” from screen • Input: touch • Output: high-resolution screen, very small viewport, modern browser

Slide 27

Slide 27 text

Are there any solutions? Is it even possible to design for all devices?

Slide 28

Slide 28 text

Can you make a responsive UI for all display sizes?

Slide 29

Slide 29 text

Can you make a responsive UI for all display sizes?

Slide 30

Slide 30 text

Can you make a responsive UI for all display sizes?

Slide 31

Slide 31 text

Can you make a responsive UI for all display sizes?

Slide 32

Slide 32 text

Responsive, content-driven sites work well

Slide 33

Slide 33 text

Content sites designed for reading on small screens, also work well on big screens

Slide 34

Slide 34 text

Non-responsive sites are hard to read without increasing the text size

Slide 35

Slide 35 text

Some sites look awful no matter what

Slide 36

Slide 36 text

The 10’ experience is very different from the 10” experience, and right now, responsive web design treats them the same

Slide 37

Slide 37 text

“screen size doesn’t give us a complete picture of what we need to know to design an appropriate interface [for TV]” Luke Wroblewski (@lukew) Oct 31st 2013 http://www.lukew.com/ff/entry.asp?1816

Slide 38

Slide 38 text

When is a TV not a TV? http://www.flickr.com/photos/dantaylor/7668446592 All of these devices respond to media=“screen”

Slide 39

Slide 39 text

If we can’t tell that it’s a TV, perhaps we should ask the user

Slide 40

Slide 40 text

Couch Mode Aaron Gustafson https://github.com/easy-designs/easyCouchMode.js

Slide 41

Slide 41 text

Couch Mode Aaron Gustafson https://github.com/easy-designs/easyCouchMode.js

Slide 42

Slide 42 text

Pixel-based Ems-based Works great on big-text screens http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ Define media queries in ems

Slide 43

Slide 43 text

The outlook for TV technology is good Wii PS3 iOS 4 Xbox 360 PS Vita Wii U iOS 6 Panasonic Samsung TV iOS 7 Google TV Toshiba TV Chrome (Desktop) Xbox One PS4 0 50 100 150 200 250 300 350 400 450 500 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 HTML5 Test Score

Slide 44

Slide 44 text

Xbox One’s focus on entertainment and media is exciting http://www.youtube.com/watch?v=xhe6jV-APwM

Slide 45

Slide 45 text

For TV, perhaps all you need is Chromecast

Slide 46

Slide 46 text

TV Represents the tip of the iceberg • TVs are here now, and it is easy to show a website on it • Google Glass can display websites, those screens are half an inch from your eye, but are the equivalent of a 32” TV, 8 feet away • Wearable technology is emerging and will produce more situations that we cannot predict and assume what the user will want

Slide 47

Slide 47 text

“The number of problems we can solve automatically for our users are dwindling. We can’t know reliably how much bandwidth a user might have available to them, whether they’re outside or stationary, or whether they’re mirroring their display to a wider screen—or, or, or." Ethan Marcotte (@beep) Nov 2nd 2013 http://unstoppablerobotninja.com/entry/responsive-web-design-screens-and-shearing-layers/

Slide 48

Slide 48 text

Ultimately, right now, we need to ask Input User- provided context Output Position Solve for user- provided screen type Solve for “TV remotes” Solve for user- provided position , and that’s ok

Slide 49

Slide 49 text

Thank you Tweet @steveworkman #sideviewconf Slides at http://speakerdeck.com/steveworkman/are-you-browsing-comfortably NO SIGNAL