Ripensare il design dell'interfaccia utente per la piattaforma TV

Un'introduzione agli ingredienti di base di un'interfaccia utente TV

La stragrande maggioranza dei consumatori in questi giorni sta tagliando il cavo con la TV a pagamento, ma questo non significa che si sia allontanato dal grande schermo per consumare i propri contenuti. Secondo un rilascio di dati di Nielsen, le abitudini di visione degli adulti statunitensi hanno rilevato che il 92% di tutte le visualizzazioni avviene ancora sullo schermo televisivo. Questi sono numeri piuttosto enormi.

Oltre il 92% delle visualizzazioni tra gli adulti statunitensi avviene ancora sullo schermo televisivo.

Il significato di "guardare la TV" è cambiato molto negli ultimi decenni. Non siamo più limitati a un telecomando e un decoder via cavo per riempire i nostri schermi; stiamo usando Smart TV o lo streaming usando dischi come Roku, Amazon Fire e Apple TV o collegando console per videogiochi come Xbox e Playstation. E ciascuno di questi dispositivi consente un'interfaccia utente molto più potente della tua vecchia guida su schermo.

Il pagamento per guardare la trasmissione o la programmazione VOD tramite servizi online basati su abbonamento come Hulu, Netflix o Amazon rappresenta il 26% degli intervistati online globali (Nielsen). Questo è un numero significativo. Tuttavia, il 72% degli intervistati ha confermato di pagare ancora per guardare i propri contenuti tramite una connessione TV tradizionale.

Questo significa che la connessione TV tradizionale è qui per restare?

Sembra che tutti pensiamo che i tagliacorda là fuori rappresenterebbero un numero più alto. Nielsen riferisce che 116,4 milioni di case negli Stati Uniti avrebbero dovuto guardare la TV durante la stagione 2015-16. Questo è un numero enorme e il rapporto ha anche rilevato che circa 9,5 milioni di quelle case sono passate alla TV OTA gratuita. Di tutti i servizi di streaming in circolazione, Netflix (60,7%) sembra essere in vantaggio, seguito da Amazon Prime Video (49,4%) e da Hulu (26%). Credo che uno dei motivi principali per cui le persone stanno tagliando il cavo sia che vogliamo pagare solo per ciò che usiamo.

Rispetto ai computer e persino ai telefoni cellulari, la progettazione di interfacce utente per la TV è ancora un'area relativamente nuova. È anche una piattaforma fondamentalmente diversa e il modo in cui consumiamo i nostri contenuti è diverso. Il design per la TV richiede un insieme unico di considerazioni, tra cui le dimensioni dello schermo e la distanza dello spettatore, i vincoli tecnici e il contesto di utilizzo. Gli utenti si trovano in un'esperienza di "sdraiato", seduti a una media di 10 piedi di distanza e l'interfaccia utente e l'esperienza devono riflettere questo. Contrariamente ai tablet e ai telefoni touchscreen, le interazioni sui televisori vengono eseguite tramite D-pad (pad di controllo direzionale) utilizzando un telecomando o un controller per videogiochi, il che aumenta la complessità.

Il display

I televisori non sono come tablet e telefoni.

I televisori sono cambiati molto nel tempo da un enorme mobile goffo a un elegante display minimalista appeso a una parete. Ai tempi in cui i televisori occupavano l'intero soggiorno, utilizzavano una tecnologia che produceva immagini incoerenti sui televisori, specialmente vicino ai bordi. Per compensare questi problemi, i televisori CRT erano soggetti a overscan. Ciò significa solo che le immagini sono state leggermente ingrandite in modo che i bordi non fossero al di fuori dei limiti dell'area di visualizzazione.

Tradizionalmente, le emittenti lo prevedevano e volevano evitare che le loro informazioni critiche venissero mostrate troppo vicino ai bordi dello schermo. Per risolvere questo problema, hanno creato un'area sicura del titolo per visualizzare il testo senza distorsioni e un'area sicura per l'azione in cui l'immagine potrebbe essere visualizzata in sicurezza.

Per ragioni al di fuori del nostro controllo, l'overscan è ancora una cosa... anche sui tuoi nuovi televisori HD. La quantità di overscan non è coerente tra i televisori. Per assicurarti che tutte le tue informazioni primarie come titoli e azioni importanti siano al sicuro, mantienile all'interno dei margini di sicurezza.

Attualmente non esiste uno "standard" prestabilito per le aree di azione sicure; è per lo più definito dalla piattaforma stessa. Google mantiene la sua area sicura stretta e quella di Apple è un po' più generosa. Dalle mie numerose ricerche sul web, queste zone varieranno tra l'85% e il 95% di uno schermo televisivo dal centro. Per soddisfare i requisiti di tutte le diverse piattaforme su cui potresti lavorare, suggerirei di utilizzare una zona sicura di margini superiore e inferiore di 60px e margini laterali di 90px. Ciò significa che tutte le tue informazioni principali dovranno rientrare in quest'area per adattarsi a tutti gli schermi TV e soddisfare tutti i requisiti della piattaforma.

Per iniziare la tua nuova progettazione dell'interfaccia utente della televisione, crea una nuova tela 1920 x 1080. Il tuo padding (zona sicura) dovrebbe essere di 90 pixel sui lati (sinistro e destro) e di 60 pixel in alto e in basso. Puoi ottenere il download gratuito del tuo file qui.

Navigazione

Come su-giù-sinistra-destra modella le interfacce TV.

Come designer, l'hardware su cui progettiamo definirà alcuni dei nostri modelli di progettazione. Sui dispositivi mobili, scorriamo, tocchiamo, premiamo a lungo, tiriamo, ecc. per eseguire azioni. Schede e menu vengono utilizzati come modelli di navigazione sui nostri dispositivi. La televisione offre una grande tela che può facilmente diventare eccessivamente complessa se non eseguita correttamente. Vedere lunghe file di contenuto per massimizzare la quantità di esso visibile agli utenti è diventato un elemento standard delle interfacce utente televisive.

A differenza dei dispositivi mobili che controlliamo con le dita, la maggior parte delle interfacce utente TV è controllata da un D-pad e utilizzata a distanza dallo schermo. Che si tratti di un telecomando o di un gamepad, il D-pad limita la navigazione a quattro direzioni: su, giù, sinistra e destra.

Ogni piattaforma ha anche le proprie convenzioni stabilite. Su Xbox, ad esempio, i trigger forniscono un controllo "Pagina su" e "Pagina giù" mentre i paraurti vengono utilizzati per scorrere tra le visualizzazioni del contenuto. Ci sono anche una serie di pulsanti "power user" su ciascuna piattaforma con cui i giocatori più esperti avrebbero familiarità.

L'altro elemento critico nelle UI TV è lo stato di messa a fuoco . Senza la possibilità di toccare lo schermo o utilizzare un mouse, gli utenti devono navigare fino all'elemento che desiderano selezionare. Mentre l'utente naviga all'interno dell'app, devono essere evidenziati diversi elementi dell'interfaccia utente che indicano che un elemento di navigazione è a fuoco.

Concentrarsi ed evidenziare gli stati durante la progettazione per la televisione sono molto importanti. Tale stato di messa a fuoco è l'elemento che evidenzia un componente selezionabile e indica la posizione corrente sullo schermo dell'utente. La forma in cui viene visualizzato lo stato attivo può variare; a seconda del componente, tuttavia, la coerenza sarà sempre fondamentale. Una messa a fuoco chiara e altamente visibile aiuta l'utente a riconoscere rapidamente la posizione corrente sullo schermo e facilita la navigazione. Quando un utente distoglie momentaneamente lo sguardo dalla TV e poi restituisce lo sguardo, dovrebbe essere automaticamente chiaro quale opzione è attualmente selezionata per la navigazione. Ogni elemento sullo schermo deve essere raggiungibile dal cursore e dovrebbe sempre essere chiaro dove il cursore può spostarsi successivamente.

Esempi di design che potrebbero lasciare gli utenti a chiedersi dove si trovano nell'app. Questi esempi non forniscono un'indicazione visiva sufficiente (stato di messa a fuoco) del posizionamento. Gli utenti dovrebbero essere in grado di vedere chiaramente dove si trovano in ogni momento senza doversi spostare verso l'alto o verso il basso. Dovresti essere in grado di distogliere lo sguardo dal televisore e tornare indietro e conoscere ancora la tua posizione.

Tipografia

Lettura da dieci metri di distanza.

Le app TV sono spesso indicate come esperienze di dieci piedi, un termine che si riferisce a una distanza comune tra te e la tua televisione. Contrariamente ad altri dispositivi come dispositivi mobili e desktop, la televisione è impostata per essere più un ambiente "appoggiati alla schiena e rilassati". Data questa distanza, dobbiamo trattare un'interfaccia utente in modo leggermente diverso rispetto a quanto faremmo sul Web o sui dispositivi mobili.

Gli schermi TV sono generalmente più grandi dei dispositivi mobili e dei monitor dei computer desktop, ma vengono visualizzati da una distanza maggiore. La leggibilità diventa una caratteristica importante, il che significa che la dimensione del testo e altri elementi devono essere adattati di conseguenza. A seconda della tua età, 18px sarebbe probabilmente la dimensione più piccola leggibile e appropriata solo per etichette non essenziali, come una linguetta per sopracciglia. Anche così, come regola generale, le dimensioni dei caratteri scelte non dovrebbero mai essere inferiori a 24 pt. Questa è quella che considero la dimensione minima del carattere per soddisfare ogni tipo di utente.

La chiave per una buona tipografia in TV è testare costantemente. Il tipo sottile e piccolo sul tuo monitor apparirà pulito e nitido, ma una volta su un televisore, potrebbe sembrare spento o diventare incomprensibile.

Linee di scansione

Cosa sono le linee di scansione?

A differenza degli schermi di desktop, dispositivi mobili e tablet, l'immagine su uno schermo televisivo è composta da linee di scansione pari e dispari. La televisione esegue il rendering di queste linee in fasi che si alternano rapidamente tra le linee di scansione pari e dispari. Qualsiasi singolo pixel (o linea di pixel) che cade su una singola linea di scansione sfarfallerà. Per evitare lo sfarfallio dei tuoi elementi sullo schermo, dovresti sempre mantenere le linee su numeri pari e non più sottili di 2 pixel. Questo è un aspetto da considerare quando si lavora su progetti multipiattaforma e ci si prepara a trasferire i propri progetti da dispositivi touch (cellulari e tablet), dove spesso ci si può ritrovare a creare pulsanti di bordo da 1px, per la televisione.

Un altro modo per evitare queste linee o forme sfocate è assicurarsi che i tuoi disegni siano sempre pixel perfetti. L'esempio seguente è un buon esempio di linee create utilizzando numeri dispari. Come puoi vedere, possiamo vedere chiaramente gli effetti di questo e diventa inquietante per gli occhi.

Colore

Gli schermi TV hanno dei limiti.

Il primo elemento da tenere a mente è che i televisori hanno un valore gamma molto più elevato rispetto ai dispositivi desktop, tablet e portatili. Il modo migliore per descrivere in che modo la gamma influisce sulla qualità dell'immagine è che la gamma rappresenta il livello di differenza di luminosità tra ogni passaggio nella scala di grigi o quanto i neri "veloci" diventano più luminosi. Percepiamo il doppio della luce come solo una frazione più luminosa. Diverse marche e modelli di TV variano ampiamente in termini di luminosità, display e altre impostazioni. Come il tipo, il colore dovrebbe essere testato presto e spesso sui televisori.

Alcune linee guida da seguire quando si scelgono i colori: i colori vivaci potrebbero diventare duri per gli occhi quando si guarda la televisione di notte o in una stanza buia. Evita l'uso eccessivo di colori saturi (soprattutto il rosso) e l'uso intenso del bianco in elementi o sfondi di grandi dimensioni. Il bianco puro creerà aloni e altre distrazioni visive. Quando si scelgono i bianchi, si consiglia di scegliere un valore esadecimale #f1f1f1 per evitare lo sfarfallio. Per aumentare la leggibilità, assicurati di creare un contrasto sufficiente tra i tuoi elementi

La regola generale consiste nell'evitare gli spigoli vivi tra i colori molto contrastanti (soprattutto i colori accesi accanto ai colori scuri) ed evitare i colori "caldi" come i rossi e i gialli molto saturi. Questi sanguineranno più facilmente rispetto ai colori meno saturi o ai colori più freddi come il blu e il verde.

Prova sempre i colori su un televisore reale per capire come le tue scelte di colore si traducono sul grande schermo. Se possibile, visualizza in anteprima la tua app su più TV perché i colori possono variare notevolmente tra i modelli di TV. Collega semplicemente il cavo HDMI dal tuo televisore e provalo.

Le basi

Piccole cose da considerare.

Questi elementi dovrebbero essere usati per guidare i tuoi progetti nel loro insieme. Le considerazioni più importanti quando si progettano le interfacce utente della TV sono la semplicità e l'interazione leggera.

Sebbene molti dei fondamenti e delle migliori pratiche per l'interaction design siano ancora validi, il televisore viene utilizzato in modo più rilassato, a differenza di un computer o di un dispositivo mobile. L'interfaccia utente di un televisore dovrebbe essere chiara, semplice e visiva. Il design richiede semplicità e chiarezza con una bassa densità di informazioni. Gli elementi devono essere grandi e sufficientemente distanziati per essere letti a distanza. Presenta una serie chiara di azioni o opzioni per ogni schermata.

Questo design è pulito e semplice, utilizzando dei bei trattamenti con carte grandi. Gli stati di messa a fuoco si ottengono con la scala e le ombre discendenti allineate con il resto del design pulito. I metadati sono visibili anche solo al passaggio del mouse, il che consente agli utenti di rimanere concentrati sulla carta corrente.

Posiziona i contenuti o le opzioni più importanti per primi sullo schermo in modo che siano facilmente visualizzabili e navigabili dall'utente. I livelli di schermo non necessari devono essere rimossi. Entrare in diversi livelli e uscire di nuovo deve essere facile e ovvio.

Il fattore più cruciale nella progettazione di un'applicazione TV è includere una navigazione chiara e precisa per le operazioni dell'utente. Se la navigazione è ambigua, gli utenti si sentiranno confusi e insicuri.

In breve, gli utenti dovrebbero sempre sapere esattamente dove si trovano all'interno di un'applicazione. Ricorda, l'utente utilizza solo i controlli di base per navigare. Sposta, Ritorna, Invio e altre funzioni di navigazione di base devono essere chiare. Gli utenti dovrebbero essere in grado di utilizzare le operazioni che desiderano con queste azioni.

In qualità di designer, il nostro compito è creare e progettare interfacce utente che consentano agli utenti di accedere ai contenuti in modo chiaro e facile da navigare. Non possiamo aspettarci che gli utenti adattino le nuove abitudini solo per poter vedere i nostri contenuti. Piuttosto, dobbiamo adattare le nostre interfacce utente in modo che possano essere gestite al buio da qualcuno che ci sta dando meno delle sue intenzioni e con un dispositivo di input molto limitato. È una bella sfida, ma il potenziale guadagno è enorme. Divertiti a progettare!

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche