$30 off During Our Annual Pro Sale. View Details »

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. 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