Navrhovanie platformy cloudových hier na Android TV - prípadová štúdia dizajnu UI / UX

Bolo to pravidelné pondelok, kým klient neprišiel s novým projektom navrhnutým pre Android TV. Mali sme bohaté skúsenosti s navrhovaním rôznych rozložení používateľského rozhrania pre webové, mobilné, tabletové a tiež POS systémy, ale toto bolo prvýkrát, čo sme museli navrhnúť niečo pre inteligentnú televíziu. Boli sme zvedaví navrhnúť niečo nové a prijať ponuku.

„Vždy existuje prvýkrát“

Bolo medzi nami vzrušenie vytvoriť niečo také prvýkrát. Mali sme pripravené naše nástroje a súčasne sme začali zhromažďovať inšpirácie a údaje potrebné na navrhnutie našej prvej aplikácie pre Android TV.

O projekte

Klient nám povedal požiadavku; táto aplikácia sa týkala platformy Cloud Gaming Platform. Niečo, čo znelo naozaj dobre, nás nútilo pracovať. Vykonali sme prieskum o používateľoch a funkciách v aplikácii a o tom, ako by sme ich mohli reprezentovať v Android TV. Najdôležitejšie bolo zvážiť, že rozloženie Android TV je odlišné od bežných rozložení webu a mobilu.

Pokyny k materiálu nám pomohli začať s návrhom.

Navigácia pre Android TV

Rozloženie a diaľkový ovládač Android TV

Prvá vec, ktorú musíte urobiť, bolo porozumieť zariadeniu, v ktorom používateľ bude aplikáciu používať. Dozvedeli sme sa, že používateľ mal na používanie rôzne vstupné zariadenia. V tomto prípade však užívateľ na navigáciu väčšinou použije diaľkové ovládanie Android alebo GamePad. Navigácia bola vec, ktorú sme brali vážne, pretože sme chceli, aby používateľ prešiel minimálnymi krokmi a nemalo by sa cítiť zložité používať rozhranie.

Obrázkové kredity Google Design

Sledovali sme štandardné rozloženie materiálu, ktoré vyzerá ako známe pre užívateľa a je ľahko navigovateľné. Vytvorili sme sekciu s horizontálnym posunom (os X) a užívateľ môže zmeniť sekciu vertikálnym posúvaním (os Y). Zásuvka sa uchovala pre prípad, že sa užívateľ rozhodne zmeniť nastavenia, preskúmať kategórie a ďalšie sekundárne funkcie.

Štruktúra dizajnu umeleckých dosiek pre Android TV

výskum

Preskúmali sme súčasné herné platformy, ako je Vortex, a vzali sme tiež referencie z herných konzol ako Xbox a Play Station. Tieto rozloženia nám pomohli pochopiť herné rozhrania a spôsob prezentácie údajov v televízii. Taktiež sme sa krátko pozreli na populárne rozhrania na Android TV, ako sú Netflix a Youtube, kvôli rôznym vzorom rozloženia a použitelnosti.

Image Credits Windows Central

Všetky referenčné aplikácie, ktoré sme videli, mali primárne zameranie na bannery a boli navrhnuté tak, aby používateľ mohol ľahko prechádzať 4-smerovou navigačnou podložkou. Dospeli sme k záveru, že písma sú čo najmenšie, aby sme používateľovi dali známy a intuitívny filmový zážitok. Veľkosť písma sa tiež musela udržiavať viditeľná a veľká, pretože používateľ sedí vo vzdialenosti 5 až 10 stôp od televízora.

Výber farieb

farby

Vždy sme mali radi biele medzery a minimálny vzhľad aplikácie, ale v tomto prípade nebola biela farba, ktorú by používatelia chceli vidieť na veľkej obrazovke. Preto sme sa rozhodli ísť s tmavými a matnými farbami, ktoré by boli pre používateľa menej viditeľné. Tmavé pozadie tiež zvýraznilo herné bannery a dávalo mu intuitívny vzhľad.

Keďže sa táto aplikácia týkala hier, chceli sme ponechať polygónový vektor na pozadí, aby sme používateľovi poskytli zážitok z paralaxy. Farby boli tmavé, čo užívateľovi pomohlo zamerať sa na obsah aplikácie.

Užívateľský prieskum

Uskutočnili sme prieskum používateľov a pre používateľov sme klasifikovali 2 kategórie.

Klasifikácia používateľov

John miluje objavovanie nových hier, zatiaľ čo Smith chce pokračovať v rovnakej hre ešte dlho. Takže s týmito výsledkami sme prišli s funkciami, ako sú Odporúčania pre Johna a Nedávno hrané hry pre Smith. Rozloženie bolo tiež jednoduché, aby sa mohli bez námahy pohybovať a hrať hry.

Rozloženie karty

Rozloženie karty bolo perfektné, aby používateľom poskytlo filmový zážitok. Vybraná karta zvýrazní a zvýši podľa dizajnu materiálu. Neustále sme posúvali nekonečné posúvanie, ktoré obsahovalo iba bannery hier bez akýchkoľvek textových informácií. Aj pod tým sme udržiavali Naposledy hrané hry s rozložením materiálu a horizontálnym posúvaním.

Dizajn karty

Bolo dôležité poskytnúť používateľovi rovnaký filmový zážitok, aký poskytujú aplikácie ako Netflix, Youtube a ďalšie aplikácie. Tiež sme zamýšľali používateľa, aby mal bezproblémovú navigáciu po obrazovkách a sekciách.

Konečné výsledky

Nakoniec prišla zima a nastal čas na akciu. Analyzovali sme všetky aspekty a snažili sme sa ich vizuálne znázorniť. Mapovanie mysle a wireframing boli dokončené a užívateľské rozhranie malo na rade. Mali sme všetko, čo sme potrebovali, a muselo sa to vykonať.

Štruktúra aplikácie

Výsledkom bol dizajn, ktorý mal herný vkus, spolu s farebnými prúžkami. Zadali sme rozhranie, v ktorom boli pozitívne spätné väzby. Testovali sme to tiež na Android TV a malo výsledky, ktoré sme očakávali.

Konečné používateľské rozhranie

Cesta bola dobrodružná a mala veľa lekcií. Android TV bolo niečo, čo by sme radi znova navrhli. Tento dizajn nás naučil rozmanitosť zariadení a rôzne skúsenosti s ich používaním.

Ďakujem za čítanie!