Ako navrhnúť používateľské rozhranie/UX pre aplikácie Smart TV

Existuje zabudnutá reklama spoločnosti LG Electronics z roku 2014. Hneď na začiatku prináša niekoľko zaujímavých faktov. Fakt č. 1: 53 % ľudí si neuvedomuje, koľko toho dokáže urobiť s inteligentným televízorom. Fakt č. 2: 75 % ľudí si myslí, že Smart TV sú príliš komplikované. Je zrejmé, že riešením navrhovaným v reklame je lepšie UX/UI vytvorené kórejským technologickým gigantom.

Bohužiaľ, spoločnosti LG sa nepodarilo dosiahnuť lepšiu použiteľnosť. Jej predaj televízorov v nasledujúcich dvoch rokoch prudko klesol. Úprimne povedané, spoločnosti Samsung a Sony nerozlúštili myšlienku použiteľnosti inteligentných televízorov.

Jeden diaľkový ovládač, ktorý vládne všetkým

Spoločnosť Samsung, ktorá je lídrom v tomto odvetví, výrazne investovala do inteligentnej technológie diaľkového ovládania. Vytvoril však len univerzálny diaľkový ovládač s dotykovým tlačidlom a slabým hlasovým ovládaním.

Ako navrhnúť UI/UX pre aplikáciu Smart TV?

Napriek tomu, že niektorí výrobcovia televízorov zverejnili usmernenia pre dizajn svojich systémov Smart TV, ich dokumenty sa týkajú len základných tém alebo pochádzajú z roku 2015.

• Usmernenia pre dizajn LG webOS Smart TV.
• Usmernenia pre dizajn televízorov Samsung Smart TV.
• Usmernenia pre Android Smart TV.

Treba uznať, že náš dizajnérsky tím v týchto príručkách nenašiel veľa pomoci. Hoci je tam niekoľko "taktických" rád, ktoré stoja za zmienku, ako napr. písma.

Tipy na dizajn používateľského rozhrania pre rôzne veľkosti obrazovky

Pozrite sa bližšie na čísla za rozlíšením obrazovky. V číslach je zreteľný vzorec, ktorý funguje vo všetkých populárnych rozlíšeniach obrazoviek, počnúc malou obrazovkou smartfónov a končiac televízormi 4K. Väčšina rozlíšení obrazoviek sa dá rozdeliť na osem. Jedinou nešťastnou výnimkou z tohto pravidla je rozlíšenie obrazovky iPhonu 6, ktoré je 375 x 667.

Väčšina rozlíšení obrazovky je deliteľná číslom 8

• Vzhľadom na túto skutočnosť je dobré vytvoriť násobok 8-pixelovej mriežky a všetky ikony vytvoriť s ohľadom na toto číslo.
• Majte tiež na pamäti, že rôzne obrazovky majú rôzne aktívne zóny, v ktorých je možné pohybovať kurzorom. Preto všetci výrobcovia odporúčajú nastaviť bezpečnú zónu (aspoň 20-24 px) okolo okraja obrazovky, aby ste mali istotu, že vaša aplikácia bude na obrazovke viditeľná na 100 %.
• Okrem toho neváhajte skontrolovať paletu farieb na rôznych televízoroch, pretože ich farebné podanie sa môže na jednotlivých obrazovkách líšiť.

Tipy na dizajn UX pre Smart TV

Okrem toho je v oblasti použiteľnosti a UX televízorov divoký západ. Čiastočne preto, že existuje príliš veľa zložitostí a problémov súvisiacich so samotným procesom vývoja.

• Nevytvárajte používateľskú cestu na viac ako troch úrovniach.
• Ak je to možné, použite jednovektorovú navigáciu. Napríklad horizontálna používateľská cesta, pri ktorej sa všetky priečinky a podpriečinky otvárajú len vpravo.
• Vždy uvádzajte navigačné symboly ako "späť", "domov", "zrušiť", "vybrať", pokiaľ nechcete, aby používatelia stlačili tlačidlo "exit" zakaždým, keď sa niekde zaseknú.
• Testovacie prostredia sú príliš pomalé a majú chyby. Nepoužívajte ich na vykonávanie výkonnostných testov aplikácií.
• Je vhodnejšie testovať na samotnom zariadení, inak hrozí, že prehliadnete kritické oneskorenia, ktoré sa vyskytujú pri používaní diaľkového ovládania.
• Ak vytvárate webovú aplikáciu, nespoliehajte sa na knižnice ako jQuery alebo módne frameworky ako AngularJS, Ember JS, Backbone atď. Väčšinu ich funkcií nebudú inteligentné televízory podporovať. Okrem toho tieto knižnice môžu výrazne spomaliť aplikáciu (jQuery dosahoval 6 miliónkrát horší výkon ako jednoduchý skript).

Nikto okrem vás sa nepostará o UX vašej aplikácie Smart TV!

Ovládanie aplikácie Smart TV a vstup

Nakoniec sa poďme porozprávať o tom, ako chcete, aby používatelia komunikovali s vašou aplikáciou? Existujú minimálne 4 typy vstupov Smart TV.

• Gestá.
• Hlasové ovládanie.
• Štandardné diaľkové ovládanie.
• Klávesnica/myš Bluetooth.

Gestá a zariadenia pripojené cez Bluetooth používa 1 % používateľov. Systém hlasového ovládania ešte stále nie je dostatočne vyspelý a používatelia ho tiež veľmi nevyužívajú. Systém hlasového ovládania tiež nie je možný, ak vytvárate aplikáciu pre rôzne platformy.

Pri diaľkových ovládačoch je ťažké to, že nakoniec budete mať stovky zariadení, každé s jedinečným kódom kľúča. Napríklad spoločnosti Panasonic, LG a Samsung majú rôzne kódy klávesov pre tlačidlo číslo "1".

V takom prípade by ste mali vytvoriť mapu kľúčov so všetkými podporovanými kľúčmi a zariadeniami. Táto mapa bude slúžiť ako "prekladač" a prepisovať signál z diaľkového ovládania do aplikácie na základe zariadenia, na ktorom je práve spustená.

Na druhej strane môžete vyvinúť alebo integrovať hotovú aplikáciu pre smartfón, ktorá funguje namiesto diaľkového ovládania. V takomto prípade použitia bude môcť používateľ ovládať svoj televízor pomocou smartfónu.

Ak takéto prípady použitia nemáte, nie je potrebné vyvíjať aplikáciu diaľkového ovládania pre smartfón:

1. Vaša aplikácia sa veľmi spolieha na textový vstup/vyhľadávacie pole.
2. Potrebujete bezproblémovú prácu s rôznymi zariadeniami.
3. Chcete poskytnúť zážitok podobný hrám.

Ak nemáte v úmysle používať svoju aplikáciu jedným z týchto spôsobov, neobťažujte sa vytváraním špecializovaného rozhrania mobilného diaľkového ovládania pre inteligentné televízory. Vaša aplikácia si vystačí so štandardným rozhraním diaľkového ovládania. Okrem toho existujú riešenia tretích strán, ktoré môžeme integrovať neskôr namiesto vymýšľania kolesa.

Spodná hranica

Smart TV, ako aj 4K televízory, postupne nahrádzajú staré obrazovky a získavajú si väčšiu používateľskú základňu. A vytváranie mobilných alebo webových aplikácií, ktoré sa dajú používať prostredníctvom televízora, nie je v súčasnosti až takou exkluzívnou záležitosťou. Pri vývoji aplikácie pre Smart TV si však vyžaduje veľkú pozornosť venovanú používateľskému rozhraniu a používateľskému zážitku.

Vyššie uvedené tipy na dizajn sú len špičkou ľadovca. Sú nazvané na zdôraznenie dôležitosti návrhu a komplexného prístupu k vývoju rozhraní a aplikácií. Hoci stačí zanechať svoju požiadavku a detaily nechať na nás!