What We Can Learn From Game Console Browsers

Slide 1

Slide 1 text

WHAT WE CAN LEARN FROM GAME CONSOLE BROWSERS PRESS START

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Mobile Tablet Desktop

Slide 6

Slide 6 text

Mobile Tablet Desktop

Slide 7

Slide 7 text

“ @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/

Slide 8

Slide 8 text

twitter.com/Squidgerydee/status/503652823624470528/

Slide 9

Slide 9 text

Will Roissetter @_Rossio_ 2:06 AM - 13 Feb 2015 Someone completed their Student Loan Application on a Nintendo DS. twitter.com/_rossio_/status/566176537729175553

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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%

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

“ 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/

Slide 16

Slide 16 text

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/

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Orde Saunders: goo.gl/dxDHUY Sony SmartWatch 2

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Single column mode Default

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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)

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Jason Grigsby’s “The Immobile Web”:

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

developers.google.com/tv/web/docs/design_for_tv “Studies overwhelming show that users prefer fast sites – so it's best to balance any ﬂashy visual appeal with performance considerations.” Performance is a user requirement

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

“ Faruk Ateş It was because of us web developers doing so much UA sniﬃng everywhere that browser vendors were forced to include each other’s strings goo.gl/cqc6Ze

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

@lukew – Luke Wroblewski  (Notes from Cameron Moll’s talk at Breaking Development conference) lukew.com/ﬀ/entry.asp?1710 What is mobile? Can we deﬁne it by the devices people use or where they use them?

Slide 66

Slide 66 text

Mobile?

Slide 67

Slide 67 text

201 Nintendo Wii U Nintendo 3DS XL GameStick

Slide 68

Slide 68 text

HDMI stick plugs into TV

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

“ 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

Slide 79

Slide 79 text

“ 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

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Xbox One Kinect

Slide 89

Slide 89 text

Xbox SmartGlass

Slide 90

Slide 90 text

Xbox Snap Mode

Slide 91

Slide 91 text

Xbox Snap Mode

Slide 92

Slide 92 text

YouTube’s Leanback mode

Slide 93

Slide 93 text

Vimeo Couch Mode

Slide 94

Slide 94 text

Vimeo Couch Mode

Slide 95

Slide 95 text

Vimeo Couch Mode

Slide 96

Slide 96 text

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/

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

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.

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

“ @lukew – Luke Wroblewski (Notes from Cameron Moll’s talk at Breaking Development conference) Cross screen design is just Web design. lukew.com/ﬀ/entry.asp?1710

Slide 101

Slide 101 text

Windows 8 Mobile, Desktop and Xbox One Dashboard

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

PlayStation 4 Eye

Slide 105

Slide 105 text

Leap Motion

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

“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

Slide 109

Slide 109 text

2016 Amazon Fire TV Nexus Player Steam Machines

Slide 110

Slide 110 text

edutechwiki.unige.ch/en/Nintendo_Wii_balance_board

Slide 111

Slide 111 text

gdc2013.nintendo.com

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

Samsung Gear VR Sony Project Morpheus Microsoft Hololens

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

@lukew – Luke Wroblewski (Notes from Cameron Moll’s talk at Breaking Development conference) lukew.com/ﬀ/entry.asp?1710 We can't frame our discussions by devices. We need to plan for what's coming in the future.

Slide 118

Slide 118 text

“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