Guida per lo sviluppatore di Internet Explorer per Xbox 360

In questo argomento vengono fornite le linee guida per gli sviluppatori Web che desiderano ottimizzare i propri siti per Internet Explorer per Microsoft Xbox. Sono disponibili i consigli di progettazione e le descrizioni di alcune differenze tecniche tra Windows Internet Explorer 9 e Internet Explorer per Xbox.

Questo argomento include le sezioni seguenti:

Panoramica

Internet Explorer per Xbox 360 è un ambiente di esplorazione che consente agli utenti di visitare i siti Internet su una televisione a una distanza di circa tre metri dallo schermo. Si basa sulla piattaforma Internet Explorer 9 e include molte delle funzionalità di Internet Explorer 9 per Windows.

La maggior parte dei siti Web funzionanti in Internet Explorer 9 per Windows funziona correttamente anche in Internet Explorer per Xbox senza la necessità di modifiche. Le funzionalità HTML5 introdotte in Internet Explorer 9, come audio e video, CSS2.1 (Cascading Style Sheets, Level 2 Revision 1) e SVG (Scalable Vector Graphics ), sono completamente supportate in Internet Explorer per Xbox.

Questo documento è rivolto agli sviluppatori che desiderano ottimizzare i propri siti per Internet Explorer per Xbox. Contiene consigli di progettazione e le descrizioni di alcune differenze tecniche tra Internet Explorer 9 e Internet Explorer per Xbox.

Hub Web

Quando l'utente avvia Internet Explorer sulla Xbox, l'hub Web viene caricato automaticamente. L'hub Web è la posizione centrale da cui visitare i siti Web. Gli utenti possono scegliere un sito tra i Preferiti, tra quelli visitati di recente o digitarne l'URL nella barra degli indirizzi. Per avviare l'hub Web in qualsiasi momento, l'utente può premere "Y" sul controller o dire "Xbox Web Hub" se dispone di un dispositivo Kinect per Xbox 360 collegato.

Cattura di schermata dell'hub Web

Metodi di input

Cursore non vincolato

In Internet Explorer per Xbox viene utilizzato un modello di cursore non vincolato, illustrato nell'immagine seguente. Tramite il cursore l'utente può interagire con ogni parte del browser allo stesso modo, puntando e facendo clic su collegamenti a pagine Web, sulla barra degli indirizzi, sull'hub Web, sulle impostazioni o su messaggi informativi. Quando il cursore viene spostato sui bordi della schermata, viene eseguito automaticamente lo scorrimento o la panoramica della pagina Web in modo che risulti semplice esplorare le pagine Web solo con la levetta sinistra e il pulsante "A".

Cattura di schermata del cursore non vincolato

Tastiera su schermo

Per gli utenti che non dispongono di un dispositivo Xbox SmartGlass, di una tastiera o di un Chatpad Xbox 360, per l'immissione di testo viene utilizzata una tastiera su schermo:

Cattura di schermata della tastiera su schermo

Controller e Xbox 360

Il controller della Xbox può essere utilizzato per controllare tutte le funzionalità del browser:

Il disegno illustra i pulsanti di controllo di Xbox usati per controllare le funzionalità del browserIl disegno illustra i pulsanti di controllo di Xbox usati per controllare le funzionalità aggiuntive del browser

Xbox SmartGlass

Xbox SmartGlass è un prodotto software che può essere eseguito su uno smartphone o su un tablet (Windows Phone, Windows 8, iOS, Android) per connettersi alla Xbox. Con Internet Explorer 9, Xbox SmartGlass può essere utilizzato come secondo schermo e come controller. Con i dispositivi che supportano i movimenti tocco, il dispositivo può essere utilizzato come un trackpad per spostare il cursore ed è possibile digitare con la tastiera virtuale del dispositivo.

Voce

Il sensore Kinect consente di visitare senza problemi i siti Web preferiti e di usare le funzioni comuni del browser. La voce non può essere utilizzata per visitare collegamenti specifici all'interno di una pagina Web, tuttavia sono supportati i controlli comuni quali Go Back/Forward per spostarsi tra le pagine e Play/Pause per i video HTML5.

Di seguito sono elencati i comandi vocali supportati:

Hub Web

"Go Back"

Passa all'elemento successivo nello stack Indietro

"Go Forward"

Passa all'elemento successivo nello stack Avanti

"Hide Web Hub"

Nasconde l'hub Web

"Show Keyboard"

Visualizza la tastiera virtuale

"Hide Keyboard"

Nasconde la tastiera virtuale

"Add Favorite"

Aggiunge la pagina Web ai Preferiti

"Remove Favorite"

Rimuove la pagina Web dai Preferiti

"Settings"

Hub Web

"Favorites"

Apre l'elenco Preferiti

"Recent"

Apre l'elenco Recenti

"Featured"

Apre l'elenco In primo piano

"Item..."

Apre un sito (nell'elenco Recenti)

"Nome sito" (dinamico)

Apre un sito (nell'elenco In primo piano)

"Nome sito" (dinamico/personalizzabile)

Apre un sito (nell'elenco Preferiti)

 

Livello pagina Web

"Go Back"

Passa all'elemento successivo nello stack Indietro

"Go Forward"

Passa all'elemento successivo nello stack Avanti

"Web Hub"

Apre l'hub Web nell'ultimo stato di visualizzazione

"Favorites"

Apre l'hub Web con l'elenco Preferiti

"Add Favorite"

Aggiunge la pagina Web ai Preferiti

"Remove Favorite"

Rimuove la pagina Web dai Preferiti

"Previous Favorite"

Passa all'elemento precedente nell'elenco Preferiti

"Next Favorite"

Passa all'elemento successivo nell'elenco Preferiti

"Settings"

Hub Web

"Play"

Riproduce un video sullo schermo

"Pause"

Mette in pausa un video sullo schermo

"Full Screen"

Apre il video corrente a schermo intero

 

Considerazioni relative alla distanza dallo schermo

Distanza dallo schermo

La distanza di tre metri dallo schermo è adatta per le esperienze ottimizzate per un ambiente spazioso. La maggior parte degli utenti di Xbox collega la propria Xbox a una televisione e si siede a una distanza di circa tre metri dallo schermo. Questa distanza può rendere molto difficile l'esecuzione di operazioni di base sulle pagine Web tradizionali. I caratteri piccoli ad esempio possono risultare difficili da leggere e i menu visualizzati al passaggio del mouse e i collegamenti ridotti possono risultare difficili da scegliere.

Quando progetti una pagina Web per la TV, l'area visualizzabile dovrebbe contenere meno informazioni e le informazioni presenti dovrebbero riguardare un insieme di attività definito. Considera anche la possibilità di eseguire l'operazione desiderata automaticamente o di selezionare tale operazione per impostazione predefinita. Cerca di mantenere tutto il contenuto a portata di mano e completamente visualizzabile su schermo senza la necessità di scorrere in basso.

  • I tipi di carattere e gli elementi grafici del sito devono essere più grandi per risultare visibili a una certa distanza. In proporzione l'utente si siede più lontano dalla TV che da un monitor per computer delle stesse dimensioni.
  • Per evitare un aspetto confuso sulla TV, inserisci spazi vuoti più grandi tra gli elementi della pagina. Questi spazi vuoti vengono chiamati spaziatura interna e sono un aspetto fondamentale per semplificare la visualizzazione e l'esplorazione di contenuti Web.
  • I monitor di grandi dimensioni hanno uno spazio orizzontale utilizzabile maggiore rispetto al monitor di un desktop, quindi è più facile gestire l'esplorazione lateralmente o per sovrapposizione, conservando prezioso spazio verticale per il contenuto.

Contenuto e funzionalità

Le esperienze Web adatte a una distanza di tre metri sono ottimizzate per il consumo di contenuto, a differenza degli scenari di creazione e produttività. Un sito Web per video creati dall'utente può ad esempio supportare l'esplorazione, la riproduzione, il caricamento, la modifica e l'assegnazione di tag ai video. Una versione per i tre metri può essere invece ottimizzata per l'esplorazione e la riproduzione e potrebbe non offrire la possibilità di modificare il contenuto. Rimuovi i collegamenti e le funzionalità che non hanno senso su una TV come quelle per il download e il caricamento.

Mantieni le barre laterali di scorrimento in primo piano. Per fare ciò, potrebbe essere necessario ridurre il numero di elementi delle pagina. Se desideri ottimizzare il tuo sito tramite CSS (Cascading Style Sheets), puoi inserire le categorie in elementi div e nascondere le categorie eliminate con display:none.

Interazioni: la semplicità è fondamentale

Gli utenti interagiscono con Internet Explorer tramite diversi dispositivi di input, incluso il controller, Xbox SmartGlass, Chatpad Xbox 360 e la voce. Tieni presente che alcune interazioni funzionanti per il mouse e la tastiera sono molto difficili da riprodurre tramite il tocco o un controller. Evita di usare interazioni di trascinamento della selezione, di posizionamento del cursore su un'area e a tempo.

Esplorazione e collegamenti

Rispetto all'esplorazione sul desktop, l'esperienza tramite TV presenta due differenze principali: l'utente è più lontano e il controller o il dito è meno preciso del mouse. Per semplificare l'esplorazione, oltre a ingrandire gli elementi, può anche risultare necessario rimuovere collegamenti non appropriati per la TV o che non vengono aperti di frequente.

Quando progetti un'interfaccia di esplorazione, fai in modo che l'utente selezioni con facilità i collegamenti e gli altri elementi enfatizzando le selezioni e rendendole più grandi e maggiormente visibili.

  • Aggiungi uno stato di selezione ai collegamenti e ai pulsanti per evidenziare quando il puntatore si trova sulla destinazione
  • Ingrandisci tutte le destinazioni di clic, come collegamenti, pulsanti ed elementi simili, con un'ampia spaziatura interna per ottenere un'area di destinazione più grande
  • Gli elementi come le caselle di chiusura agli angoli delle finestre popup ridotte per non interferire in un'interfaccia da 60 cm, sono impossibili da vedere o molto difficili da selezionare con un mouse dalla distanza di tre metri
  • Evita di usare elementi popup perché possono distrarre e risultare difficili da chiudere

Nelle immagini seguenti sono ad esempio illustrate delle barre di spostamento verticali. Il primo esempio è progettato per l'interazione del mouse. Lo spazio tra i collegamenti è troppo piccolo per il tocco e il controller:

Figura che illustra una pagina progettata per l'interazione del mouse

L'esplorazione di questi collegamenti richiede un'abilità troppo elevata da parte degli utenti di dispositivi basati sul tocco o su un controller. La selezione del collegamento sbagliato può essere frustrante.

Nella seconda immagine, la barra di spostamento è stata modificata aggiungendo spazio tra i collegamenti e inserendo dei separatori che aiutano l'utente a vedere più chiaramente l'area di destinazione selezionata:

Figura che illustra la barra di spostamento con collegamenti più lontani e separatori

Layout

Dimensioni

Internet Explorer per Xbox utilizza una combinazione di zoom e zoom ottico per offrire una presentazione dei siti ottimizzata per la TV. I siti Web vengono ingranditi automaticamente in modo che corrispondano alla larghezza dello schermo e che il testo sia più grande e leggibile da una certa distanza. Esistono diversi fattori che determinano questo livello di zoom automatico, incluse le proporzioni della TV (16:9 o 4:3), la risoluzione (480p, 720, 1080) e le misure dell'area "sicura", ovvero un'area di buffer intorno al bordo dello schermo televisivo.

Poiché Internet Explorer per Xbox ottimizza automaticamente i livelli di zoom per i diversi componenti hardware, i fattori da considerare sono pochi:

  • I siti Web progettati per una larghezza di 1024 pixel hanno in genere un aspetto ottimale. Internet Explorer adatta automaticamente la pagina Web alla larghezza corretta ingrandendo il layout.
  • Molte TV hanno uno schermo widescreen (16:9). Si consiglia di utilizzare un layout che sfrutti la larghezza dello schermo, anziché richiedere lo scorrimento verticale.
  • Internet Explorer per Xbox non supporta l'uso di più finestre, pertanto evita le finestre popup.

Elementi con posizione fissa

Gli elementi con una posizione fissa (CSS position: fixed) possono interferire con le operazioni di scorrimento. Evita di posizionare gli elementi in questo modo.

Considerazioni relative al testo

Per aumentare la leggibilità del testo, verifica che sia sufficientemente grande per essere letto da una distanza di tre metri e scegli dei colori che non affaticano l'occhio.

  • Evita di usare testo più piccolo di 12 pt.
  • Molte televisioni hanno un livello di luminosità superiore rispetto a un monitor di computer. Utilizzando un colore chiaro per il testo su uno sfondo scuro puoi ridurre l'affaticamento dell'occhio.

Linee guida per i colori

  • Evita di usare il bianco puro (rgb(255, 255, 255)) come colore di sfondo. Utilizza invece rgb(200, 200, 200)
  • In Internet Explorer l'area "sicura" ai bordi dello schermo viene colorata come il colore di sfondo dell'elemento body.
  • Testa il sito Web sia su TV di bassa qualità che su apparecchi HDTV recenti.

Approcci per quattro tipi di schermo: TV, PC, tablet, dispositivo mobile

Per raggiungere il maggior numero di consumatori, molti siti Web sono progettati e testati per vari fattori di forma di dispositivo, inclusi PC desktop e portatili, tablet e dispositivi mobili.

Pagine Web multiple specifiche del dispositivo

Alcuni siti Web hanno ambienti specifici del dispositivo (ad esempio un sito per dispositivi mobili). Questa soluzione può essere appropriata per alcuni scenari. Se ad esempio progetti un'esperienza speciale per Xbox diversa da quella per dispositivi mobili e computer desktop, potrebbe essere utile creare un ambiente distinto e autonomo. Può tuttavia risultare costoso gestire più versioni indipendenti di un unico sito.

Una soluzione comune in questi casi è rilevare la stringa agente utente (sul client o sul server) e reindirizzare l'utente a una pagina Web specifica per il dispositivo in uso. Per rilevare la Xbox, cerca il token "Xbox" nella stringa agente utente.

Pagina Web unica

Data la proliferazione dei fattori di forma di esplorazione Web e dei metodi di input, per la maggior parte dei siti Web è consigliabile utilizzare una pagina Web unica funzionante su vari dispositivi. Di seguito sono elencati alcuni fattori da considerare quando crei una sola pagina per diversi dispositivi:

  • Progetta per il mouse, la tastiera, il tocco e il controller
  • Progetta per una larghezza di 1024 pixel oppure
  • Usa la progettazione adattiva. Puoi usare le media query CSS o JavaScript per modificare il layout della pagina in base alle proprietà del dispositivo che la sta caricando.
    • Nei dispositivi mobili considera la possibilità di ridurre la qualità delle immagini in modo da risparmiare larghezza di banda e migliorare le prestazioni
    • Riduci al minimo lo scorrimento orizzontale nei dispositivi stretti per migliorare la leggibilità
  • Evita di usare plug-in. Utilizza audio e video HTML5 (H.264/AAC/MP3)
  • Evita l'uso di finestre popup

Argomenti correlati

Considerazioni tecniche su Internet Explorer per Xbox

 

 

Mostra:
© 2015 Microsoft