No. 98

Secondo alcuni studi del 2010 e del 2011, più di un utente internet su otto nel Regno Unito, negli USA e in Francia (e circa un teenager Americano su quattro) usa una console di gioco per andare online.1

Non si tratta di una novità: le capacità di internet furono introdotte nelle console nel 1997 con Game.com, che permetteva agli utenti di caricare i propri punteggi collegando un modem dial-up e perfino di controllare le email e di visitare siti se dotati di apposita cartuccia per andare su internet.

Ad oggi, le tre console principali (la Xbox 360 di Microsoft, la PlayStation 3 di Sony e la Nintendo Wii) hanno tutte la possibilità di connettersi a internet. La Xbox 360 è l'unica di queste che non ha un browser ufficiale, ma Microsoft ha annunciato che a breve realizzerà IE9 per la sua console. Alcune aziende si sono spinte così in là da progettare esperienze specifiche per le console, come la versione 2007 di Google Reader per la Wii, che ora è realizzato per tutte le console TV.

Aggiungete una gran quantità di console portatili dotate di browser, come la PSP di Sony e la linea Nintendo DS ed avremo 15 anni di dispositivi di gioco di tutte le forme e dimensioni con capacità di connessione a internet. Tuttavia, finora abbiamo parlato molto poco dei browser delle console di gioco.

È ora che questo cambi.

Le console di oggi potrebbero offrire esperienze sotto la media con poca scelta di browser, ma non significa che dobbiamo ignorarle. Dopo tutto “Non possiamo predire il comportamento futuro basandoci su una pessima esperienza attuale”, come dice Jason Grigsby.

Dal momento che aumenta il numero di produttori di dispositivi che offrono connessione a internet e di smart TV, adesso è il momento di pianificare il modo in cui i nostri siti si adatteranno a questi nuovi contesti e questo significa abituarsi al panorama delle console di gioco oggi disponibili.

Chi usa il browser di una console di gioco?

Le console che si attaccano alla TV non sono solo per i giocatori. Attualmente vengono reclamizzate e vendute per le loro caratteristiche di "content-delivery", come il Blu-ray e l'accesso a Netflix. Alcune console hanno anche delle app per Twitter, Facebook, Skype e Foursquare, quindi con tutta probabilità un utente potrebbe visitare il vostro sito attraverso una di queste.

Secondo Pew Internet, l'80% dei teenager americani tra i 12 e i 17 anni ha una console di gioco e la metà possiede un dispositivo di gioco portatile. Le console portatili sono più popolari tra i giovani teenager, con i due terzi dei 12/13enni che ne possiede una.

Tra gli adulti, Pew ha scoperto che in generale, è più probabile che gli uomini abbiano una console di gioco ma le donne sono più inclini ad avere una console portatile.

Nel Regno Unito (UK), è più probabile che i giovani adulti tra i sedici e i ventiquattro anni abbiano una console di gioco e il 20% di questi visita i siti web usando la propria console. Tra i bambini di età compresa tra i cinque e i quindici anni, il 5% accede ad internet con una console di gioco più spesso che con altri dispositivi. In effetti, questo gruppo di età è più incline ad accedere ad internet con una console che con un cellulare o un tablet.2

Tra tutte le fasce di età, le console di gioco sono più popolari dei tablet come dispositivi per navigare in internet, probabilmente perché è più probabile che le persone abbiano una console di gioco.

Per farla breve, tanti tipi diversi di persone stanno usando i browser delle console di gioco per una serie di motivi. Nelle case in cui c'è un PC, una console potrebbe essere un altro modo pratico per navigare in internet se c'è competizione per il device più tradizionale. Le console portatili sono popolari anche tra i genitori che non vogliono dare ai propri figli degli smartphone costosi. La Nintendo DS è particolarmente diffusa tra i bambini della scuola primaria; in alcune scuole è perfino usata durante le lezioni.

In passato, abbiamo commesso degli errori pensando a quali task vorrebbero completare gli utenti su dispositivi mobile, ma proprio come migliaia di clienti eBay comprano auto usando i cellulari ogni settimana, alcuni utenti dei browser delle console di gioco fanno già cose che potremmo considerare “avanzate”, come registrarsi sul sito di una banca con una PS3, come hanno cercato di fare venti persone con Kiwibank lo scorso anno.

Testare nei browser delle console

Sebbene possiate non essere in grado di testare i vostri siti su tutte le console esistenti, è utile essere a conoscenza della loro esistenza e comprendere le loro stranezze così da poter costruire una buona esperienza per quante più persone possibile. Per fare ciò, consideriamo tutti e tre i tipi principali di console:

  1. Console che si collegano a uno schermo TV, come la Nintendo Wii, la PS3 di Sony e la Xbox 360 di Microsoft.
  2. Console portatili come la PSP di Sony e la Nintendo DS.
  3. Console-telefono, progettate primariamente come telefoni ma con pulsanti da console (a differenza delle console con funzionalità da telefono).

Dal momento che stanno spuntando dei siti di community testing in tutto il mondo, ha senso inserirvi alcuni di questi tipi di console, in particolar modo quelle con le feature più diverse.

Per un testing device per una console TV, la Nintendo Wii ha un motion controller che è utile per testare la navigazione di un sito. C'è anche in uscita il nuovo Wii U, che avrà un touchscreen sul controller che si collega alla TV. La PS3 di Sony è utile per controllare la facilità di navigazione con un game controller tradizionale, mentre la Xbox 360 sarà un device importante da provare quando avrà la sua versione dedicata di IE9.

Le due serie più popolari di console portatili sono la Nintendo DS e la Sony PSP. La console portatile più recente di Sony è la PS Vita, che ha un modello con 3G opzionale e può anche essere usata come controller della PS3. I modelli più vecchi delle console portatili Sony con accesso a internet sono la PSP-1000, la PSP-2000, la PSP-3000 e la PSP Go (la PSP-E1000 non ha connessione a internet).

Per la linea DS, la DSi e la 3DS sono utili perché hanno browser diversi. Le più vecchie DS e DS Lite richiedono una cartuccia fisica con un browser e non hanno un browser pre-installato o disponibile via download, quindi è probabile che meno persone navighino su internet utilizzando queste due console.

Testare nelle console TV

Un grande schermo TV non implica una definizione migliore. Il testo può risultare spixellato e difficile da leggere, specialmente quando un browser ingrandisce il contenuto. Sebbene gli schermi TV siano generalmente più grandi degli schermi dei desktop computer, chi li guarda si siede più lontano, quindi potrebbero effettivamente apparire più piccoli.

La PlayStation 3 di Sony

La Playstation 3 di Sony

La PS3 ha un browser NetFront basato su WebKit. La larghezza del browser è ristretta, quindi è molto più piccola della larghezza della TV.

I thumbstick (o funghetti) spostano il cursore e fanno scorrere la pagina. L1 (in alto a sinistra) è il pulsante "Indietro", R1 (in alto a destra) è il pulsante "Avanti". Se si preme il triangolo, si apre un menu con le azioni come "Cerca" e "Preferiti" e il D-pad sposta il cursore per ottenere il focus sui link della pagina.

Si possono aprire più finestre e vi si può accedere usando L3 (spostando a sinistra il thumbstick) e passare da una all'altra usando L2 e R2 (i pulsanti in basso a sinistra e a destra).

Browser support

Nintendo Wii

La Nintendo Wii

La Wii ha un browser Opera 9 largo 800px (l'altezza varia a seconda dello schermo). Il remote controller, utilizzato come un puntatore laser, vibra quando si passa sopra ad un link. Spostando il cursore sul bordo dello schermo e premendo il grilletto si fa scorrere la pagina. I pulsanti + e - fanno lo zoom in e lo zoom out. Schiacciando 1 sul remote controller si va nei preferiti, il 2 mostra una versione della pagina senza gli stili di layout.

Il remote controller diventa pesante dopo aver scritto per un po' o cercando di scegliere i link sulla pagina, quindi navigare può essere difficile a meno che i link non siano grandi. Questo diventa problematico su quei siti in cui le aree cliccabili sono piccole e vicine le une alle altre.

Spesso, un sito comincia a caricare, poi si blocca e si ritorna immediatamente alla schermata iniziale della console senza alcun messaggio di allerta o di errore.

  • Supporto HTML5: Non è riuscito a partire
  • Test CSS3: Non è riuscito a partire

Testare sulle console portatili

Come le TV moderne, le console portatili hanno degli schermi larghi piuttosto che alti, come un telefono cellulare in modalità "portrait". Questo implica che molti siti web responsive mostrano una versione da grande schermo del sito, nonostante sarebbe più appropriato un design da schermo piccolo.

Sony PS Vita

The Sony Playstation Vita

L'ultimo prodotto della linea PS, la Vita, è la prima ad includere un'opzione 3G. Ha un touchpad sul retro utilizzato in alcuni giochi per togliere i pollici di mezzo durante il gioco ma il browser non lo utilizza.

Il browser della Vita è una versione di NetFront basata su WebKit. Stranamente, si identifica come Silk nella stringa user agent, ossia come il browser del Kindle Fire di Amazon.

I siti si possono vedere solo in modalità "landscape" a 960x544 a 220ppi, quindi la maggior parte mostra una visualizzazione ottimizzata per lo schermo largo piuttosto che la versione per schermo piccolo. Si possono aprire fino ad otto finestre contemporaneamente.

Sebbene la Vita sia un prodotto Sony, la sua experience non è comparabile con la PS3: il browser fa affidamento in maniera pesante sul touchscreen e apparentemente non trae alcun vantaggio dai controlli di gioco sul dispositivo.

Browser support

  • Test HTML5: 58/500
  • Test CSS3: 32%

Nintendo DSi

The Nintendo DSi

La linea DS si distingue per i suoi due schermi e per lo stilo. Lo schermo inferiore è un touchscreen resistivo, come quello che si trova sui sedili degli aerei, invece che capacitivo (come quello di uno smartphone). Gli schermi della DSi hanno dimensioni relativamente piccole (256x192) e un basso ppi.

La DS si avvale di entrambe gli schermi per mostrare un sito ottimizzato per piccoli schermi, trattandoli come un'unica lunga colonna. Nei siti non ottimizzati, il sito viene reso su entrambe i monitor: su uno è zoomato, sull'altro è ridotto. Non c'è il multi-touch, quindi non c'è il "pinch-to-zoom", il che rende difficile leggere lunghe righe di testo. Non ci sono stili per i font come bold o italic e la dimensione del testo è limitata ad un certo intervallo.3

Browser support

  • Test HTML5: 89/500
  • Test CSS3: fallito

Nintendo 3DSXL

The Nintendo 3DSXL

Questo dispositivo ha uno stilo e tre fotocamere: due sul retro per le immagini 3D e video e una frontale. Non c'è bisogno di occhiali speciali per vedere le cose in 3D, ma il dispositivo deve essere tenuto esattamente al giusto angolo e alla giusta distanza. La profondità dell'effetto può essere aggiustata con uno slider fisico.

Solo lo schermo superiore è 3D ed è più grande di quello di sotto, che è un resistive touchscreen 2D. Gli schermi sono fisicamente più grandi del modello 3DS più piccolo, ma le dimensioni dei pixel sono identiche (800x240 su quello superiore, 320x240 su quello inferiore), quindi il testo è squadrato. Quando si scorre una pagina sullo schermo superiore, appaiono dei gap su ciascun lato per via della differenza delle dimensioni dei due schermi.

I modelli più vecchi di DS offrono un browser Opera, ma quelli più nuovi hanno un browser NetFront installato di default, accessibile dalla schermata iniziale.

I siti vengono mostrati in 2D, ma le immagini che usano il formato MPO possono essere visualizzati in 3D sullo schermo superiore. Le immagini MPO sono una combinazione di due file JPEG, pertanto il fallback è un unico JPEG. Il problema è che le immagini MPO embedded al momento non possono essere viste in 3D inline utilizzando il browser installato sul device: devono essere scaricate ed aperte come file.

Il D-pad viene usato per passare da un link all'altro: viene disegnata una linea attorno agli elementi che sono selezionati. Il thumbstick è utilizzato per lo scroll.

Ci sono delle icone per lo zoom sul touchscreen e i pulsanti X e Y fanno anche lo zoom in e lo zoom out. I pulsanti sul dorso vanno avanti e indietro nella cronologia del browser.

Facendo lo zoom in, il text-wrap automatico forza la lunghezza delle righe per adattare la larghezza alla viewport. Il browser può essere usato mentre il gioco è in pausa in background, il che permette ai giocatori di controllare i tutorial o i walkthrough mentre si gioca. Ho notato che questa feature appare anche su altre console.

Nei test, alcuni siti non si sono caricati completamente perché erano troppo grossi e il sistema ha esaurito la memoria. Lo stesso problema è stato rilevato anche sulla DSi.

Browser support

  • HTML5 test: 98/500
  • CSS3 test: 42%

Testare sui telefoni console

I produttori hanno cercato di combinare le console portatili con i telefoni fin dal Nokia N-Gage del 2003. Oggi, il più interessante di questi è il Sony Ericsson Xperia Play, che sembra un telefono ma ha dei controlli slide-out in stile PlayStation.

The Sony Ericsson Xperia

Lo schermo è di qualità molto più alta della PS Vita. Ha Android 2.3 (Gingerbread). Ogni volta che si apre la parte del controller di gioco, l'orientamento dello schermo viene impostato a landscape. In generale, i siti si vedono bene e il browser è a livello di quelli che si trovano sugli altri smartphone moderni.

Anche se è più un telefono che una console di gioco, è importante considerare questo device ibrido. Al crescere della competizione tra smartphone e console di gioco, potremmo vederne sempre di più.

Browser support

  • Test HTML5: 212/500
  • Test CSS3: 42%

All'orizzonte

C'è tutta una serie di dispositivi che stanno per essere prodotti e che presenteranno nuove sfide per i designer e gli sviluppatori. La navigazione internet sulle console è destinata ad aumentare man mano che i produttori realizzano nuovi device con migliori browser e maggiori capacità, come feature quali NFC per i micropagamenti nella Wii U in arrivo e il supporto del controllo vocale e delle gesture Kinect nel browser IE9 che sarà presto disponibile nella Xbox 360. Ci sono già stati interessanti esperimenti con le interfacce gestuali nei browser usando un Kinect e DepthJS.

Secondo schermo

Tutte e tre le maggiori console TV hanno o stanno per attrezzarsi con un secondo schermo. La PlayStation 3 può già connettersi con la PS Vita e permetter all'utente di giocare sul device direttamente dalla console PS3 (Vita Remote Play). Può anche essere usata come un secondo controller.

Nintendo se ne sta uscendo con un'offerta simile, la Wii U: una console aggiornata e un gamepad portatile con un touchscreen che può essere usato come una tastiera. Gli utenti possono condividere con la TV quello su cui stanno navigando sul gamepad facendo uno "swipe" sul contenuto verso la TV.

Nel frattempo, Microsoft ha annunciato SmartGlass, che permetterà agli utenti di connettere uno smartphone alla propria Xbox e di usarlo come schermo secondario. Piuttosto che connettersi con un dispositivo su misura, la console interagisce con qualunque telefono o tablet.

Con SmartGlass e un Kinect potrebbe perfino essere possibile “tirare” il contenuto da uno schermo all'altro, come dimostrato nell'hack di Aral Balkan.

Nuovi device

Nuovi giocatori stanno inoltre portando nuovi interessanti dispositivi sul mercato. Uno di questi è il Razer Switchblade. È in parte un computer Windows, in parte una console portatile. Le immagini sui tasti della tastiera cambiano a seconda del contenuto che si sta visualizzando. Con un fattore di forma simile al netbook, ha un trackpad di quattro pollici all'interno dell'area della tastiera che può essere anche utilizzato come un piccolo schermo secondario. Si dice che usi una versione di IE7 con un punteggio basso di 40 nel test HTML5.

L'Ouya, una console di gioco TV annunciato e finanziato su Kickstarter dovrebbe uscire nel Marzo del 2013. Avrà un controller convenzionale e la console girerà su Android. Non si sa ancora quale browser avrà, ma avrà delle capacità di navigazione web.

Progettare con le console in testa

I browser delle console vivono in un'area scomoda tra il mobile e il tablet, tra il desktop e la TV. Spesso agiscono come browser mobile e desktop, ma il modo in cui interagiamo con loro è veramente variegato.

Jason Grigsby parla di questa sfida nella sua presentazione The Immobile Web: gli HDTV e gli iMacs hanno la stessa dimensione di pixel, ma un desktop lo si guarda da pochi centimetri di stanza, mentre la TV da qualche metro. Su una TV, un design linearizzato che è comune per gli schermi piccoli potrebbe in realtà essere più appropriato rispetto ad un design per uno schermo ampio. La differenza non sta nella larghezza dello schermo, ma nella distanza da cui lo si guarda. Infatti, i design pattern della TV di Google suggeriscono perfino di simulare questa esperienza usando un cellulare come “modello” quando si progetta.

È inoltre molto difficile capire se un sito sia visualizzato su una TV. Le stringhe degli user agent non sono un detection method affidabile o future-friendly, dal momento che molti imitano le stringhe di altri browser. Inoltre, i media type vengono spesso ignorati, come ha notato Patrick Lauke.

Aggiungete a questo mix la possibilità che un utente visualizzi un sito sulla TV mentre interagisce con esso su un device con un secondo schermo e le cose si complicano ulteriormente.

Cosa possiamo fare adesso

Stiamo progettando per mouse e tastiere, per i tastierini numerici con il T9, per i controller di gioco portatili, per le interfacce touch. In breve, abbiamo davanti a noi un numero molto più grande di dispositivi, di modalità di inserimento e di browser di quanti non ne abbiamo mai avuti prima.

Ethan Marcotte, Responsive Web Design

Non possiamo creare esperienze su misura per tutti i possibili use case su tutti i device, ma possiamo usare quello che sappiamo della navigazione su ciascuna console per creare una miglior esperienza generale. Come abbiamo fatto progettando con il mobile in mente, considerare in che modo può essere usato un sito su una console potrebbe avere un effetto domino nel rendere più semplice l'utilizzo generale.

Usate il progressive enhancement, così che le persone possano accedere al contenuto del vostro sito anche su un device che non supporta certe feature. Ottimizzatelo, così che si scarichi velocemente. Inserite i breakpoint media query dove è appropriato per il contenuto, piuttosto che basandovi sulla larghezza dei comuni dispositivi. Considerate come si potrebbe compilare una form su una console e cercate di aggiungere il riconoscimento vocale ai campi.

Si è tentati a concentrarci solo sulle esperienze dei display retina, ma dobbiamo anche considerare come apparirà un sito dall'altro estremo della gamma: le persone non cambiano la propria TV così spesso come fanno con altri device, quindi assicuratevi che un design funzioni ancora bene sugli schermi configurati male, spixellati e con poco contrasto. Inoltre, come ha notato Cennydd Bowles, mentre la densità di pixel aumenta in alcuni posti, diminuisce in altri man mano che appaiono schermi economici su sempre più dispositivi.

Ci siamo già passati. Come ci ha insegnato Future Friendly, la sfida di progettare per un numero sempre crescente di contesti potrebbe apparire scoraggiante, ma è inevitabile. Se ci teniamo a rendere accessibile il nostro sito a tutti, allora dobbiamo cominciare a guardare oltre il desktop e il mobile. È ora di considerare seriamente i browser delle console di gioco.

Note

[1] Secondo il 2011 Ofcom report (PDF) e il 2010 Pew Internet study. Ofcom è l'ente regolatore indipendente del Regno Unito per l'industria delle comunicazioni e fa sondaggi sia internazionali sia specifici per il Regno Unito riguardanti il mercato delle comunicazioni. Il Pew Research Center è un “fact tank” che fornisce informazioni su questioni, attitudini e trend Americani.

[2] Le statistiche per lo UK sono tratte di nuovo dai 2011 Ofcom reports: uno sui devices utilizzati per visitare i siti internet per fascia di età e l'altro sull'alfabetizzazione sui media dei bambini del Regno Unito (PDF).

[3] Potete leggere una critica approfondita del browser della DSi sul mio blog personale.

Illustrazioni: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Anna Debenham

Anna DebenhamAnna è una front-end developer freelance che vive a Brighton, UK. È specializzata nella realizzazione di siti e web app utilizzate nel settore scolastico.