What We Can Learn From Game Console Browsers

4a2968e45944bd53db8026919975422e?s=47 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.

4a2968e45944bd53db8026919975422e?s=128

Anna Debenham

October 21, 2015
Tweet

Transcript

  1. WHAT WE CAN LEARN FROM GAME CONSOLE BROWSERS PRESS START

  2. Voice Touch D-Pad Stylus Second Screen 2 screens No keyboard

    Plugs into any screen 3D Gesture
  3. 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
  4. 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
  5. Mobile Tablet Desktop

  6. Mobile Tablet Desktop

  7. “ @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/
  8. twitter.com/Squidgerydee/status/503652823624470528/

  9. Will Roissetter @_Rossio_ 2:06 AM - 13 Feb 2015 Someone

    completed their Student Loan Application on a Nintendo DS. twitter.com/_rossio_/status/566176537729175553
  10. 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
  11. 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
  12. 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%
  13. 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
  14. 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
  15. “ 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/
  16. 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/
  17. “ Jason Grigsby We can’t predict future behavior from a

    current experience that sucks slideshare.net/grigs/the-immobile-web
  18. D-Pad Analogue stick/thumbstick R1 R2 L2 L1 “Bumpers” “Triggers”

  19. 2000 PlayStation 2 Sega Dreamcast 199 199 Apple Bandai Pippin

    Game.com
  20. 2004 N/A N/A Nintendo DS Lite 200 Nintendo DS Sony

    PSP 1000
  21. None
  22. None
  23. Orde Saunders: goo.gl/dxDHUY Sony SmartWatch 2

  24. None
  25. None
  26. None
  27. None
  28. None
  29. 2004 Nintendo DS Sony PSP 1000 Nintendo DS Lite 200

    N/A N/A N/A N/A
  30. None
  31. None
  32. 2007 Nintendo Wii Microsoft Xbox 360 PSP 2000 18% N/A

    Sony PlayStation 3
  33. 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
  34. Single column mode Default

  35. 2007 11% 33% Nintendo Wii Microsoft Xbox 360 PSP 2000

    Sony PlayStation 3 18% N/A
  36. 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
  37. None
  38. 24% 33% 9 2007 Nintendo Wii Microsoft Xbox 360 PSP

    2000 Sony PlayStation 3 18% N/A 11% 33%
  39. 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
  40. 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)
  41. None
  42. None
  43. None
  44. Jason Grigsby’s “The Immobile Web”:

  45. 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
  46. 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
  47. Google TV Design Patterns: goo.gl/nqus5Z 5% margin on each edge

    Overscan
  48. Ofcom Communications Market Report 2014: 2012 2013 2014 65% 77%

    82% Have you ever used the internet connection on your smart TV set?
  49. 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
  50. None
  51. None
  52. 2009 Nintendo DSi Nintendo DSi XL PSP 3000 PSP GO

    18% N/A
  53. None
  54. None
  55. None
  56. None
  57. 201 Xperia Play Nintendo 3DS Sony PS Vita 52% 49%

  58. L1: TEXT CURSOR LEFT R1: TEXT CURSOR RIGHT HOLD DOWN

    AND TOUCH SCREEN TO SELECT TEXT
  59. None
  60. Mozilla/5.0 (PlayStation Vita 1.69) AppleWebKit/ 531.22.8 (KHTML, like Gecko) Silk/3.2

  61. None
  62. “ 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
  63. 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
  64. “ Jeremy Keith at An Event Apart Chicago Design to

    standards, not browsers. Test for capabilities, not user agent strings.
  65. @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?
  66. Mobile?

  67. 201 Nintendo Wii U Nintendo 3DS XL GameStick

  68. HDMI stick plugs into TV

  69. 201 Nintendo Wii U Nintendo 3DS XL GameStick 17% 36%

  70. R1: FORWARD L1: BACK Y: ZOOM OUT X: ZOOM IN

    A: SELECT THUMSTICK: SCROLL D-PAD: CHANGE FOCUS SELECT: BROWSER MENU
  71. None
  72. None
  73. 201 Nintendo Wii U Nintendo 3DS XL GameStick 56% 42%

    17% 36% 94% 52%
  74. 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
  75. None
  76. None
  77. None
  78. “ 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
  79. “ 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
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. 201 Xbox One Nintendo 2DS Sony PlayStation 4 OUYA 51%

    40% 10
  87. 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
  88. Xbox One Kinect

  89. Xbox SmartGlass

  90. Xbox Snap Mode

  91. Xbox Snap Mode

  92. YouTube’s Leanback mode

  93. Vimeo Couch Mode

  94. Vimeo Couch Mode

  95. Vimeo Couch Mode

  96. 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/
  97. None
  98. 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.
  99. 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
  100. “ @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
  101. Windows 8 Mobile, Desktop and Xbox One Dashboard

  102. 59% 47% 201 Xbox One Nintendo 2DS 51% 40% 10

    Sony PlayStation 4 OUYA
  103. 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
  104. PlayStation 4 Eye

  105. Leap Motion

  106. Kinect Human Interface Guidelines – goo.gl/bmrW1 “Children will tend to

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

    allows the Microsoft Kinect to talk to any web page. goo.gl/cwMXX
  108. “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
  109. 2016 Amazon Fire TV Nexus Player Steam Machines

  110. edutechwiki.unige.ch/en/Nintendo_Wii_balance_board

  111. gdc2013.nintendo.com

  112. None
  113. Samsung Gear VR Sony Project Morpheus Microsoft Hololens

  114. 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
  115. None
  116. None
  117. @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.
  118. “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
  119. GAME OVER CONSOLE.MABAN.CO.UK

  120. GAME OVER CONSOLE.MABAN.CO.UK