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
   

   View Slide

2. Voice
   Touch
   D-Pad
   Stylus
   Second Screen
   2 screens
   No keyboard
   Plugs into
   any screen
   3D
   Gesture
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Mobile Tablet Desktop
   

   View Slide

6. Mobile Tablet Desktop
   

   View Slide

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/
   

   View Slide

8. twitter.com/Squidgerydee/status/503652823624470528/
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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%
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

17. “
    Jason Grigsby
    We can’t predict future
    behavior from a current
    experience that sucks
    slideshare.net/grigs/the-immobile-web
    

    View Slide

18. D-Pad
    Analogue stick/thumbstick
    R1
    R2
    L2
    L1
    “Bumpers”
    “Triggers”
    

    View Slide

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

    View Slide

20. 2004
    N/A N/A
    Nintendo DS Lite
    200
    Nintendo DS
    Sony PSP 1000
    

    View Slide

21. View Slide

22. View Slide

23. Orde Saunders: goo.gl/dxDHUY Sony SmartWatch 2
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. 2004
    Nintendo DS
    Sony PSP 1000 Nintendo DS Lite
    200
    N/A N/A
    N/A N/A
    

    View Slide

30. View Slide

31. View Slide

32. 2007
    Nintendo Wii
    Microsoft Xbox 360
    PSP 2000
    18% N/A
    Sony PlayStation 3
    

    View Slide

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
    

    View Slide

34. Single column mode
    Default
    

    View Slide

35. 2007
    11% 33%
    Nintendo Wii
    Microsoft Xbox 360
    PSP 2000
    Sony PlayStation 3
    18% N/A
    

    View Slide

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
    

    View Slide

37. View Slide

38. 24% 33%
    9
    2007
    Nintendo Wii
    Microsoft Xbox 360
    PSP 2000
    Sony PlayStation 3
    18% N/A
    11% 33%
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. Jason Grigsby’s “The Immobile Web”:
    

    View Slide

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
    

    View Slide

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
    

    View Slide

47. Google TV Design Patterns: goo.gl/nqus5Z
    5% margin on each edge
    Overscan
    

    View Slide

48. Ofcom Communications Market Report 2014:
    2012 2013 2014
    65%
    77%
    82%
    Have you ever used the internet
    connection on your smart TV set?
    

    View Slide

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
    

    View Slide

50. View Slide

51. View Slide

52. 2009
    Nintendo DSi
    Nintendo DSi XL
    PSP 3000 PSP GO
    18% N/A
    

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. 201
    Xperia Play
    Nintendo 3DS
    Sony PS Vita
    52% 49%
    

    View Slide

58. L1: TEXT CURSOR
    LEFT
    R1: TEXT CURSOR RIGHT
    HOLD DOWN AND TOUCH
    SCREEN TO SELECT TEXT
    

    View Slide

59. View Slide

60. Mozilla/5.0 (PlayStation
    Vita 1.69) AppleWebKit/
    531.22.8 (KHTML, like
    Gecko) Silk/3.2
    

    View Slide

61. View Slide

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
    

    View Slide

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
    

    View Slide

64. “
    Jeremy Keith at An Event Apart Chicago
    Design to standards, not
    browsers. Test for capabilities,
    not user agent strings.
    

    View Slide

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?
    

    View Slide

66. Mobile?
    

    View Slide

67. 201
    Nintendo Wii U
    Nintendo 3DS XL
    GameStick
    

    View Slide

68. HDMI stick
    plugs into TV
    

    View Slide

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

    View Slide

70. R1: FORWARD
    L1: BACK
    Y: ZOOM OUT
    X: ZOOM IN
    A: SELECT
    THUMSTICK: SCROLL
    D-PAD: CHANGE FOCUS
    SELECT: BROWSER MENU
    

    View Slide

71. View Slide

72. View Slide

73. 201
    Nintendo Wii U
    Nintendo 3DS XL
    GameStick
    56% 42%
    17% 36%
    94% 52%
    

    View Slide

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
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

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
    

    View Slide

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
    

    View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. 201
    Xbox One Nintendo 2DS
    Sony PlayStation 4
    OUYA
    51% 40%
    10
    

    View Slide

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
    

    View Slide

88. Xbox One Kinect
    

    View Slide

89. Xbox SmartGlass
    

    View Slide

90. Xbox Snap Mode
    

    View Slide

91. Xbox Snap Mode
    

    View Slide

92. YouTube’s Leanback mode
    

    View Slide

93. Vimeo Couch Mode
    

    View Slide

94. Vimeo Couch Mode
    

    View Slide

95. Vimeo Couch Mode
    

    View Slide

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/
    

    View Slide

97. View Slide

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.
    

    View Slide

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
    

    View Slide

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
     

     View Slide

101. Windows 8 Mobile, Desktop and Xbox One Dashboard
     

     View Slide

102. 59% 47%
     201
     Xbox One Nintendo 2DS
     51% 40%
     10
     Sony PlayStation 4
     OUYA
     

     View Slide

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
     

     View Slide

104. PlayStation 4 Eye
     

     View Slide

105. Leap Motion
     

     View Slide

106. Kinect Human Interface Guidelines – goo.gl/bmrW1
     “Children will tend to make faster, wilder or more
     exaggerated movements for the same gesture.”
     

     View Slide

107. “DepthJS is a
     browser extension
     (currently Chrome
     & Safari) that
     allows the
     Microsoft Kinect
     to talk to any web
     page.
     goo.gl/cwMXX
     

     View Slide

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
     

     View Slide

109. 2016
     Amazon Fire TV
     Nexus Player
     Steam Machines
     

     View Slide

110. edutechwiki.unige.ch/en/Nintendo_Wii_balance_board
     

     View Slide

111. gdc2013.nintendo.com
     

     View Slide

112. View Slide

113. Samsung Gear VR
     Sony Project Morpheus
     Microsoft Hololens
     

     View Slide

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
     

     View Slide

115. View Slide

116. View Slide

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.
     

     View Slide

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
     

     View Slide

119. GAME OVER
     CONSOLE.MABAN.CO.UK
     

     View Slide

120. GAME OVER
     CONSOLE.MABAN.CO.UK
     

     View Slide