Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What We Can Learn From Game Console Browsers

Anna Debenham
October 21, 2015

What We Can Learn From Game Console Browsers

With 19% of people in the UK accessing the internet using a game console, it’s time to look beyond desktop, mobile and tablet browsers. Browsing the internet on a game console presents us with new challenges, such as designing for the 10-foot UI, and building sites that could be interacted with using voice, gesture, a second-screen, or using a d-pad or a smart watch.

It may all sound a bit far-fetched, but considering how your site will be used by people using console browsers will not only benefit your current users, but also prepare you for the oncoming zombie-apocalypse of internet-enabled devices.

Anna Debenham

October 21, 2015
Tweet

More Decks by Anna Debenham

Other Decks in Technology

Transcript

  1. InnoTab 3S Photosmart eStation Polaroid iM1836 Samsung Galaxy MX Fuhu

    Nabi 2 Samsung Gear S Anywhere you can stick a screen, eventually there will be a browser
  2. Jason Grigsby, ‘4 @grigs 3:58 AM - 17 Feb 2015

    Browser testing the hotel’s exercise equipment during my workout as you do. #AEAATL Aanand Prasad @aanand 8:49 PM - 9 Mar 2015 @aanand is this the internet of things Ethan Marcotte @beep Mar 9 @beep @aanand Does that tap have a browser? Anna Debenham @anna_debenham Mar 9 @aanand Can I get that in the Tapp Store? Paul Annett @PaulAnnett Mar 9
  3. “ @cameronmoll – Cameron Moll Don’t fall prey to the

    convenience of device silos. The devices that we use are converging. The lines are blurring between what is mobile, tablet and desktop these days. lanyrd.com/2013/bdconf-orlando/scfzkg/
  4. Will Roissetter @_Rossio_ 2:06 AM - 13 Feb 2015 Someone

    completed their Student Loan Application on a Nintendo DS. twitter.com/_rossio_/status/566176537729175553
  5. 26% 16% 14% 27% 10% 7% online gaming dvds/ blueray

    catch-up TV web browsing video clips live TV % of UK households that use the device for additional services Ofcom International Communications Report 201 goo.gl/UKs1m
  6. Game consoles used to go online in the UK, 2009-2014

    Ofcom Report on adults’ media use and attitudes, 201 http://goo.gl/PrRGqv 11% 13% 10% 14% online gaming 2011 2014 2013 2009
  7. 2014 26% 23% 17% 15% % of people in the

    UK who used consoles to visit websites in 2011 and 2014, by age Ofcom International Communications Report 2011 goo.gl/MWME4 18% 14% 10% 20% 4% 2011 16-24 25-34 35-44 45-54 55-64 65+ 1%
  8. 27% 24% 19% 93% % of 12-17 year olds in

    the US who use that device to go online Pew Internet, Social Media and Young Adults report 2010 goo.gl/mzWti
  9. Pew Internet, Social Media and Young Adults report 2010: goo.gl/mzWti

    18% of adults own a portable console 37% of adults own a TV console
  10. “ Bron Thomson, Managing Director of Springload Last year, we

    noticed that 20 people tried to join Kiwibank from their PlayStation 3 paulrobertlloyd.com/2012/05/kiwibank/
  11. Orde Saunders @decadecity 1:34 PM - 9 Apr 2013 Got

    the browser support spec for a UK TV network - PlayStation must be fully supported but no support required for IE7 twitter.com/decadecity/status/321602054609068034/
  12. “ Jason Grigsby We can’t predict future behavior from a

    current experience that sucks slideshare.net/grigs/the-immobile-web
  13. B: SCROLL 2: SINGLE COLUMN MODE ZOOM OUT
 B-: BACK

    A: SELECT B+LEFT: SEARCH 1: FAVOURITES ZOOM IN
 B+: FORWARD B & UP: RELOAD B & DOWN: FAVOURITES B & RIGHT: ENTER URL
  14. R2:NEXT WINDOW L2 PREVIOUS WINDOW SELECT: ADD TO BOOKMARKS L1:

    BACK D-PAD: CHANGE FOCUS RIGHT THUMBSTICK: SCROLL R3 (PUSH IN): ZOOM LEFT THUMBSTICK: MOVE CURSOR L3 (PUSH IN): VIEW ALL WINDOWS START: ENTER URL R1: FORWARD BROWSER MENU EXIT SELECT
  15. 24% 33% 9 2007 Nintendo Wii Microsoft Xbox 360 PSP

    2000 Sony PlayStation 3 18% N/A 11% 33%
  16. LT: ZOOM OUT RT: ZOOM IN SELECT BACK WEB HUB

    L3 (PUSH IN): SMART ZOOM MOVE TEXT CURSOR POSITION LEFT/RIGHT DELETE PAN START: FORWARD/ENTER BACK: BACK
  17. 1 2 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident

    5.0; Xbox), Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; Xbox)
  18. developers.google.com/tv/android/docs/gtv_android_patterns#Environment • Use a mobile phone as the model for

    the UI. • Add more blank space between elements • Leave vertical space for content Google’s 10ft Environment Design Guidelines • Provide visual feedback
  19. developers.google.com/tv/android/docs/gtv_android_patterns#Environment • Use a mobile phone as the model for

    the UI. • Add more blank space between elements • Leave vertical space for content Google’s 10ft Environment Design Guidelines • Provide visual feedback
  20. Ofcom Communications Market Report 2014: 2012 2013 2014 65% 77%

    82% Have you ever used the internet connection on your smart TV set?
  21. developers.google.com/tv/web/docs/design_for_tv “Studies overwhelming show that users prefer fast sites –

    so it's best to balance any flashy visual appeal with performance considerations.” Performance is a user requirement
  22. “ Faruk Ateş It was because of us web developers

    doing so much UA sniffing everywhere that browser vendors were forced to include each other’s strings goo.gl/cqc6Ze
  23. Simon Willison @simonw 2:06 AM - 13 Feb 2015 IE

    for Win Phone 8.1 user-agent includes the strings Android, Mobile Safari, Chrome, iPhone, Mac OS X, KHTML & Gecko twitter.com/simonw/status/536549139081752576 Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 520) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537
  24. “ Jeremy Keith at An Event Apart Chicago Design to

    standards, not browsers. Test for capabilities, not user agent strings.
  25. @lukew – Luke Wroblewski
 (Notes from Cameron Moll’s talk at

    Breaking Development conference) lukew.com/ff/entry.asp?1710 What is mobile? Can we define it by the devices people use or where they use them?
  26. R1: FORWARD L1: BACK Y: ZOOM OUT X: ZOOM IN

    A: SELECT THUMSTICK: SCROLL D-PAD: CHANGE FOCUS SELECT: BROWSER MENU
  27. ZR: MOVE TO RIGHT TAB (HOLD WITH ZL TO TILT

    SCROLL) R: FORWARD RIGHT ANALOGUE STICK: ZOOM IN/OUT X: OPEN/CLOSE CURTAIN A: OPEN LINK B: BACK Y: DISPLAY BOOKMARK MENU START: ZOOM IN SELECT: ZOOM OUT TV: OPEN TV CONTROLS ZL: MOVE TO LEFT TAB (HOLD WITH ZR TO TILT SCROLL) L: BACK LEFT ANALOGUE STICK: SCROLL (PUSH IN TO HIDE/SHOW TOOLBAR) D-PAD: FOCUS ON A LINK HOME: QUIT BROWSER
  28. “ Tetsuya Sasaki – Nintendo Let’s make a browser that

    users can use on a daily basis, something that can really handle everything we’ve come to expect from a browser and do it more naturally. http://goo.gl/M22vgq
  29. “ Satoru Iwata – Nintendo …we want to prove to

    them through this Wii U Internet Browser that browsing itself can be an entertainment. http://goo.gl/M22vgq
  30. SHOW ADDRESS BAR MOVE CURSOR SCROLL LT: ZOOM OUT LB:

    PREVIOUS TAB SCROLL ENTER BACK RB: NEXT TAB RT: ZOOM IN SHOW MENU BACK TO HOME SCREEN
  31. Mat Marquis @wilto 3:34 PM - 5 Nov 2012 Moral

    of the “iPad Mini is undetectable” story: making something better for some people might make it better for way more people than that. twitter.com/wilto/status/265598075328933889/
  32. oxo.com/universaldesign.aspx …when all users' needs are taken into consideration in

    the initial design process, the result is a product that can be used by the broadest spectrum of users.
  33. Henny @iheni 10:20 PM - 30 Sep 2014 Ofcom study:

    80% of people who use subtitles/CC are not deaf or hard of hearing cc @researchthing #a11yresearch http://www.3playmedia.com/2014/05/27/ofc… https://twitter.com/iheni/status/517061412867538944
  34. “ @lukew – Luke Wroblewski (Notes from Cameron Moll’s talk

    at Breaking Development conference) Cross screen design is just Web design. lukew.com/ff/entry.asp?1710
  35. R2: NEXT TAB L2: PREVIOUS TAB SEARCH OR ENTER URL

    UPLOAD SCREENSHOT MOVE CURSOR TOUCHPAD:
 UNUSED FOCUS ON NEXT CLOSEST LINK L1: TEXT CURSOR LEFT OPTIONS MENU R1: TEXT CURSOR RIGHT BACK ENTER SCROLL
 (PUSHED IN): ZOOM BACK TO HOME SCREEN
  36. Kinect Human Interface Guidelines – goo.gl/bmrW1 “Children will tend to

    make faster, wilder or more exaggerated movements for the same gesture.”
  37. “DepthJS is a browser extension (currently Chrome & Safari) that

    allows the Microsoft Kinect to talk to any web page. goo.gl/cwMXX
  38. “Today's project takes us to a place where that we

    have not visited often, using the Kinect in a browser, melding HTML5, JavaScript and the Kinect... goo.gl/nvtI3
  39. Josh Carpenter @joshcarpenter 5:10 AM - 17 May 2015 Experimenting

    with CSS VR web design. Something we're working hard on for next wave of WebVR :) twitter.com/joshcarpenter/status/599789128020963330
  40. @lukew – Luke Wroblewski (Notes from Cameron Moll’s talk at

    Breaking Development conference) lukew.com/ff/entry.asp?1710 We can't frame our discussions by devices. We need to plan for what's coming in the future.
  41. “Disruption will only accelerate. The quantity and diversity of connected

    devices—many of which we haven't imagined yet—will explode, as will the quantity and diversity of the people around the world who use them.” futurefriend.ly