Regândirea designului interfeței cu utilizatorul pentru platforma TV

O introducere în ingredientele de bază ale unei interfețe de utilizare TV

O mare majoritate a consumatorilor din zilele noastre taie cablul cu televizorul cu plată, dar asta nu înseamnă că s-au ferit de marele ecran pentru a-și consuma conținutul. Potrivit unui comunicat de date al lui Nielsen, obiceiurile de vizionare ale adulților din SUA au constatat că 92% din toate vizionarea are loc încă pe ecranul televizorului. Acestea sunt numere destul de mari.

Peste 92% din vizionarea adulților din SUA se întâmplă încă pe ecranul televizorului.

Sensul „vizionat la televizor” s-a schimbat foarte mult în ultimele decenii. Nu ne mai limităm la o telecomandă și o cutie de cablu pentru a ne umple ecranele; folosim televizoare inteligente sau transmitem în flux folosind discuri precum Roku, Amazon Fire și Apple TV sau conectăm console de jocuri video precum Xbox și Playstation. Și fiecare dintre aceste dispozitive permite o interfață cu utilizatorul care este mult mai puternică decât ghidul dvs. de modă veche pe ecran.

Plata pentru a viziona emisiuni sau programe VOD prin servicii online bazate pe abonament, cum ar fi Hulu, Netflix sau Amazon reprezintă 26% dintre respondenții online globali (Nielsen). Acesta este un număr semnificativ. Cu toate acestea, 72% dintre respondenți au confirmat că încă plătesc pentru a-și viziona conținutul printr-o conexiune TV tradițională.

Înseamnă asta că conexiunea TV tradițională este aici pentru a rămâne?

Se pare că toți credem că tăietorii de cabluri de acolo ar reprezenta un număr mai mare. Nielsen raportează că 116,4 milioane de case din SUA erau de așteptat să se uite la televizor în sezonul 2015-16. Acesta este un număr mare, iar raportul a mai constatat că aproximativ 9,5 milioane dintre acele case au trecut la TV OTA gratuit. Dintre toate serviciile de streaming, Netflix (60,7%) pare să fie înaintea jocului, urmat de Amazon Prime Video (49,4%) și de Hulu (26%). Cred că unul dintre cele mai mari motive pentru care oamenii taie cablul este că vrem să plătim doar pentru ceea ce folosim.

În comparație cu computerele și chiar telefoanele mobile, proiectarea interfețelor de utilizare pentru televizor este încă un domeniu relativ nou. Este, de asemenea, o platformă fundamental diferită, iar modul în care ne consumăm conținutul este diferit. Proiectarea pentru TV necesită un set unic de considerații, inclusiv dimensiunea ecranului și distanța de vizualizare, constrângeri tehnice și contextul de utilizare. Utilizatorii se află într-o experiență de „aplecare pe spate”, așezând în medie la 10 metri distanță, iar interfața de utilizator și experiența trebuie să reflecte acest lucru. Spre deosebire de tabletele și telefoanele cu ecran tactil, interacțiunile de pe televizoare se fac prin intermediul D-pad (pad-ul de control direcțional) folosind o telecomandă sau un controler pentru jocuri video, ceea ce face reclamă la complexitate.

Afișajul

Televizoarele nu sunt ca tabletele și telefoanele.

Televizoarele s-au schimbat foarte mult de-a lungul timpului, de la o piesă de mobilier uriașă, la un ecran minimalist și elegant atârnat pe un perete. Pe vremea când televizoarele ocupau întreaga sufragerie, foloseau o tehnologie care producea imagini inconsistente peste televizoare, mai ales aproape de margini. Pentru a compensa aceste probleme, televizoarele CRT au fost supuse suprascanării. Aceasta înseamnă doar că imaginile au fost ușor mărite, astfel încât marginile să nu fie în afara limitelor zonei de vizualizare.

În mod tradițional, radiodifuzorii anticipau acest lucru și doreau să evite ca informațiile lor critice să fie afișate prea aproape de marginile ecranului. Pentru a rezolva această problemă, au creat o zonă sigură pentru titlu pentru a afișa textul fără distorsiuni și o zonă sigură pentru acțiune în care imaginea ar putea fi afișată în siguranță.

Din motive în afara controlului nostru, suprascanarea este încă un lucru... chiar și pe noile tale televizoare HD. Cantitatea de suprascanare nu este constantă pe televizoare. Pentru a vă asigura că toate informațiile dvs. principale, cum ar fi titlurile și acțiunile importante, sunt în siguranță, păstrați-le în limitele sigure.

În prezent, nu există un „standard” stabilit pentru zonele de acțiune sigure; este definit în mare parte de platforma în sine. Google își păstrează zona sigură îngustă, iar cea a Apple este puțin mai generoasă. Din numeroasele mele căutări pe web, aceste zone vor varia între 85% și 95% din ecranul unui televizor din centru. Pentru a îndeplini cerințele de pe toate platformele diferite pe care ați putea lucra, aș sugera să utilizați o zonă sigură cu margini de sus și de jos de 60 px și margini laterale de 90 px. Acest lucru înseamnă că toate informațiile tale primare vor trebui să se încadreze în această zonă pentru a putea acomoda toate ecranele TV și pentru a îndeplini cerințele fiecărei platforme.

Pentru a începe noul design al interfeței cu utilizatorul televizorului, creați o nouă pânză de 1920 x 1080. Căptușeala dvs. (zona de siguranță) ar trebui să aibă 90 de pixeli pe părțile laterale (stânga și dreapta), precum și 60 de pixeli pentru partea de sus și de jos. Puteți obține descărcarea gratuită a fișierului dvs. aici.

Navigare

Cum modelează sus-jos-stânga-dreapta interfețele TV.

În calitate de designer, hardware-ul cu care proiectăm va defini unele dintre modelele noastre de design. Pe mobil, glisăm, atingem, apăsăm lung, tragem etc. pentru a efectua acțiuni. Filele și meniurile sunt folosite ca modele de navigare pe dispozitivele noastre. Televiziunea oferă o pânză mare, care poate deveni cu ușurință excesiv de complexă dacă nu este făcută corect. Vederea unor rânduri lungi de conținut pentru a maximiza cantitatea de conținut vizibilă pentru utilizatori a devenit un element standard al interfețelor de utilizare a televiziunii.

Spre deosebire de dispozitivele mobile pe care le controlăm cu degetele, majoritatea interfețelor TV sunt controlate de un D-pad și utilizate la distanță de ecran. Fie pe o telecomandă sau pe un gamepad, D-pad limitează navigarea la patru direcții: sus, jos, stânga și dreapta.

Fiecare platformă are, de asemenea, propriile convenții stabilite. Pe Xbox, de exemplu, declanșatoarele oferă un control „Page Up” și „Page Down”, în timp ce barele de protecție sunt folosite pentru a trece între vizualizările de conținut. Există, de asemenea, o serie de butoane „utilizator cu putere” pe fiecare platformă cu care jucătorii mai experimentați ar fi familiarizați.

Celălalt element critic în interfețele de utilizator TV este starea de focalizare . Fără posibilitatea de a atinge ecranul sau de a folosi un mouse, utilizatorii trebuie să navigheze la elementul pe care doresc să-l selecteze. Pe măsură ce utilizatorul navighează în cadrul aplicației, trebuie evidențiate diferite elemente ale interfeței de utilizare, indicând faptul că un element de navigare este focalizat.

Concentrarea și evidențierea stărilor atunci când proiectați pentru televiziune sunt foarte importante. Această stare de focalizare este elementul care evidențiază o componentă selectabilă și indică locația curentă a utilizatorului pe ecran. Forma în care este afișată focalizarea poate varia; în funcție de componentă, totuși, consecvența va fi întotdeauna esențială. O focalizare clară și foarte vizibilă ajută utilizatorul să recunoască rapid locația actuală de pe ecran și ușurează navigarea. Când un utilizator își îndepărtează o privire momentan de la televizor și apoi își întoarce privirea, ar trebui să fie automat clar ce opțiune este selectată în prezent pentru navigare. Fiecare element de pe ecran trebuie să fie accesibil de către cursor și trebuie să fie întotdeauna clar unde se poate deplasa cursorul.

Exemple de modele care ar putea lăsa utilizatorii să se întrebe unde se află în aplicație. Aceste exemple nu oferă suficientă indicație vizuală (starea de focalizare) a poziționării. Utilizatorii ar trebui să poată vedea clar unde se află în orice moment, fără a fi nevoiți să se miște în sus sau în jos. Ar trebui să puteți privi în altă parte de la televizor și să vă aflați în continuare poziția.

Tipografie

Citind de la trei metri distanță.

Aplicațiile TV sunt adesea denumite experiențe de trei picioare, un termen care se referă la o distanță comună dintre tine și televizor. Spre deosebire de alte dispozitive, cum ar fi dispozitivele mobile și desktop, televizorul este setat să fie mai degrabă un mediu de „relaxare și relaxare”. Având în vedere această distanță, trebuie să tratăm o interfață de utilizare puțin diferit decât am face-o pe web sau pe mobil.

Ecranele TV sunt în general mai mari decât dispozitivele mobile și monitoarele computerelor desktop, dar sunt văzute de la o distanță mai mare. Lizibilitatea devine o caracteristică importantă, ceea ce înseamnă că dimensiunea textului și a altor elemente trebuie ajustate în consecință. În funcție de vârsta dvs., 18 px ar fi probabil cea mai mică dimensiune care poate fi citită și este potrivită numai pentru etichetele neesențiale, cum ar fi o filă de sprâncene. Chiar și așa, ca regulă generală, dimensiunile de font alese nu trebuie să fie niciodată mai mici de 24 de puncte. Aceasta este ceea ce aș considera dimensiunea minimă a fontului pentru a se potrivi fiecărui tip de utilizator.

Cheia pentru o tipografie bună la televizor este să testați constant. Tipul subțire și mic de pe monitor va arăta curat și clar, dar odată pe un televizor, poate părea stins sau deveni de neînțeles.

Scan Lines

Ce sunt liniile de scanare?

Spre deosebire de ecranele desktop, mobile și tablete, imaginea de pe ecranul televizorului este compusă din linii de scanare impare și pare. Televizorul redă aceste linii în faze, alternând rapid între liniile par și impare de scanare. Orice pixel unic (sau linie de pixeli) care cade pe o singură linie de scanare va pâlpâi. Pentru a evita pâlpâirea articolelor pe ecran, ar trebui să păstrați întotdeauna liniile cu numere pare și nu mai subțiri de 2 pixeli. Acesta este un lucru de luat în considerare atunci când lucrați la proiecte multi-platformă și vă pregătiți să vă transferați design-urile de pe dispozitive tactile (mobil și tabletă), unde vă puteți găsi adesea creând butoane de bordură de 1px, pentru televizor.

O altă modalitate de a evita aceste linii sau forme neclare este să te asiguri că desenele tale sunt întotdeauna perfecte în pixeli. Exemplul de mai jos este un bun exemplu de linii care sunt create folosind numere nepare. După cum puteți vedea, putem vedea clar efectele acestui lucru și devine neliniștitor pentru ochi.

Culoare

Ecranele TV au limite.

Primul element de reținut este că televizoarele au o valoare gamma mult mai mare decât dispozitivele desktop, tablete și handset. Cel mai bun mod de a descrie modul în care gamma afectează calitatea imaginii este că gama reprezintă nivelul de diferență de luminozitate între fiecare pas în scala de gri sau cât de „rapid” negrul devin mai strălucitori. Percepem de două ori lumina ca fiind doar cu o fracțiune mai strălucitoare. Diferitele mărci și modele de televizoare variază foarte mult când vine vorba de luminozitate, afișaj și alte setări. Ca și tipul, culoarea ar trebui testată devreme și adesea pe televizoare.

Câteva recomandări de urmat atunci când alegeți culorile: Culorile strălucitoare pot deveni dure pentru ochi când vă uitați la televizor noaptea sau într-o cameră întunecată. Evitați utilizarea excesivă a culorilor saturate (în special roșu) și utilizarea intensă a albului în elemente sau fundaluri mari. Albul pur va crea halouri și alte distrageri vizuale. Atunci când alegeți albii, este recomandat să alegeți o valoare hex #f1f1f1 pentru a evita orice pâlpâire. Pentru a crește lizibilitatea, asigurați-vă că creați suficient contrast între elementele dvs

Regula generală este să evitați marginile ascuțite între culorile foarte contrastante (în special culorile strălucitoare lângă culorile închise) și să evitați culorile „fierbinte”, cum ar fi roșul și galbenul foarte saturate. Acestea vor sângera mai ușor decât culorile mai puțin saturate sau culorile mai reci, cum ar fi albastrul și verdele.

Testați întotdeauna culorile pe un televizor real pentru a înțelege cum alegerile dvs. de culoare se traduc pe ecranul mare. Dacă este posibil, previzualizați aplicația pe mai multe televizoare, deoarece culorile pot varia dramatic între modelele de televizoare. Pur și simplu atașați cablul HDMI de la televizor și testați-l.

Cele elementare

Lucruri mici de luat în considerare.

Aceste elemente ar trebui folosite pentru a vă ghida designul în ansamblu. Cele mai importante considerente atunci când vă proiectați interfețele de utilizator TV sunt simplitatea și interacțiunea ușoară.

În timp ce multe dintre elementele fundamentale și cele mai bune practici pentru proiectarea interacțiunii încă se aplică, televizorul este folosit într-un mod mai relaxat, spre deosebire de computer sau dispozitiv mobil. Interfața de utilizare a unui televizor ar trebui să fie clară, simplă și vizuală. Designul necesită simplitate și claritate cu o densitate scăzută a informațiilor. Elementele trebuie să fie mari și suficient de îndepărtate pentru a fi citite de la distanță. Prezentați un set clar de acțiuni sau opțiuni pentru fiecare ecran.

Acest design este curat și simplu, folosind tratamente frumoase de carduri mari. Stările de focalizare sunt realizate cu scară și umbre care sunt aliniate cu restul designului curat. Metadatele sunt, de asemenea, vizibile doar la trecerea cu mouse-ul, ceea ce permite utilizatorilor să rămână concentrați pe cardul curent.

Plasați cel mai important conținut sau opțiuni mai întâi pe ecran, astfel încât să fie ușor de vizualizat și navigat de către utilizator. Nivelurile de ecran inutile trebuie eliminate. Intrarea în diferite niveluri și ieșirea din nou trebuie să fie ușor și evident.

Cel mai important factor atunci când proiectați o aplicație TV este includerea unei navigații clare și precise pentru operațiunile utilizatorului. Dacă navigarea este ambiguă, utilizatorii se vor simți confuzi și nesiguri.

Pe scurt, utilizatorii ar trebui să știe întotdeauna exact unde se află într-o aplicație. Rețineți că utilizatorul folosește doar comenzile de bază pentru a naviga. Mutare, Return, Enter și alte funcții de bază de navigare trebuie să fie clare. Utilizatorii ar trebui să poată utiliza operațiunile pe care le doresc cu aceste acțiuni.

În calitate de designeri, misiunea noastră este să creăm și să proiectăm interfețe de utilizator care să ofere utilizatorilor acces la conținut într-un mod clar și ușor de navigat. Nu ne putem aștepta ca utilizatorii să adapteze noi obiceiuri doar ca să poată vedea conținutul nostru. Mai degrabă, trebuie să ne adaptăm interfețele cu utilizatorul astfel încât să poată fi operate în întuneric de cineva care ne oferă mai puțin decât intenția lor totală și cu un dispozitiv de intrare foarte limitat. Este destul de o provocare, dar potențialul câștig este enorm. Distrează-te cu designul!

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator