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.

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
23. Orde Saunders: goo.gl/dxDHUY Sony SmartWatch 2
29. 2004 Nintendo DS Sony PSP 1000 Nintendo DS Lite 200 N/A N/A N/A N/A
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
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)
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
52. 2009 Nintendo DSi Nintendo DSi XL PSP 3000 PSP GO 18% N/A
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
60. Mozilla/5.0 (PlayStation Vita 1.69) AppleWebKit/ 531.22.8 (KHTML, like Gecko) Silk/3.2
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
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
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
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/
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
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
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