Een cloud-gamingplatform ontwerpen op Android TV - UI / UX Design Case Study

Het was een normale maandag totdat de klant met een nieuw project kwam dat op Android TV moest worden ontworpen. We hadden de ruime ervaring om verschillende UI-lay-outs voor Web, Mobile, Tablet en ook POS-systemen te ontwerpen, maar dit was de eerste keer dat we iets moesten ontwerpen voor een slimme televisie. We waren nieuwsgierig om iets nieuws te ontwerpen en namen het bod aan.

"Er is altijd een eerste keer"

Er was een opwinding onder ons om zoiets voor het eerst te maken. We hadden onze tools klaar, tegelijkertijd begonnen we ook met het verzamelen van de inspiraties en de gegevens die nodig waren om onze eerste Android TV-applicatie te ontwerpen.

Over het project

De klant vertelde ons de vereiste; de app ging over Cloud Gaming Platform. Iets dat heel cool klonk en ons erg enthousiast maakte om te werken. We hebben onderzoek gedaan naar de gebruikers en de functies in de toepassing en hoe kunnen we deze weergeven in Android TV. Het belangrijkste om te overwegen was dat de lay-out van Android TV heel anders is dan de reguliere lay-outs voor internet en mobiel.

Google-materiaalrichtlijnen hebben ons geholpen om aan de slag te gaan met het ontwerp.

Android TV-navigatie

Layout en afstandsbediening voor Android TV

Het eerste wat je moest doen, was het apparaat begrijpen waarop de gebruiker de toepassing zal gebruiken. We begrepen dat de gebruiker verschillende invoerapparaten moest gebruiken. Maar in dit geval gebruikt de gebruiker meestal een Android-afstandsbediening of een GamePad om te navigeren. De navigatie was iets dat we serieus namen, omdat we wilden dat de gebruiker door minimale stappen navigeerde en geen complexiteit zou voelen om de interface te gebruiken.

Image Credits Google Design

We hebben de standaard materiaallay-out gevolgd omdat deze er vertrouwd uitziet voor de gebruiker en veel gemakkelijk te navigeren is. We hebben een sectie gemaakt met horizontale scroll (X-as) en de gebruiker kan van sectie veranderen door de verticale scroll (Y-as). De lade werd bewaard voor het geval de gebruiker ervoor kiest om instellingen te wijzigen, categorieën en andere secundaire functies te verkennen.

Artboard-ontwerpstructuur voor Android TV

Onderzoek

We hebben onderzoek gedaan naar de huidige gamingplatforms zoals Vortex en hebben ook gebruik gemaakt van de gameconsoles zoals Xbox en Play Station. Die lay-outs hebben ons geholpen de spelinterfaces te begrijpen en te begrijpen hoe de gegevens op de televisie worden gepresenteerd. We hebben ook kort gekeken naar populaire interfaces op Android TV zoals Netflix en YouTube voor verschillende lay-outpatronen en gebruiksreferenties.

Image Credits Windows Central

Alle referentietoepassingen die we zagen hadden banners als primaire focus en werden ontworpen alsof de gebruiker gemakkelijk door het 4-directionele navigatiepad kan navigeren. We besloten om lettertypen zo min mogelijk te houden om de gebruiker een vertrouwde en intuïtieve filmervaring te bieden. Ook moest de lettergrootte zichtbaar en groot blijven, omdat de gebruiker 5 tot 10 meter van de televisie zit.

Kleur selectie

kleuren

We hebben altijd al van witte ruimtes gehouden en de applicatie minimaal bekeken, maar in dit geval was wit niet de kleur die de gebruikers op het grote scherm willen zien. Dus besloten we om te gaan met de kleuren Dark en Matt die minder opvallen door de gebruiker. Ook markeerde de donkere achtergrond gamebanners en gaf het een intuïtieve uitstraling.

Omdat de applicatie voor het gamen was, wilden we een polygoonvector op de achtergrond houden om de gebruiker een parallax-ervaring te bieden. De kleuren waren donker waardoor de gebruiker zich kon concentreren op de inhoud van de applicatie.

Gebruikersonderzoek

We hebben gebruikersonderzoek uitgevoerd en 2 categorieën ingedeeld voor de gebruikers.

Gebruikersclassificatie

John houdt ervan nieuwe games te verkennen, terwijl Smith dezelfde game voor een lange tijd wil voortzetten. Dus met deze resultaten kwamen we met functies zoals Aanbevelingen voor John en recent gespeelde games voor Smith. Ook werd de lay-out eenvoudig gehouden, zodat beide gemakkelijk kunnen navigeren en zonder enige moeite games kunnen spelen.

Kaartindeling

De kaartindeling was perfect om gebruikers een filmische ervaring te bieden. De geselecteerde kaart wordt gemarkeerd en verhoogd volgens het ontwerp van het materiaal. We hebben Infinite Scrolling bovenaan gehouden, die alleen banners van de spellen bevat zonder enige tekstuele informatie. Ook daaronder hielden we recent gespeelde spellen met de materiaalindeling en horizontale schuifbalk.

Kaart ontwerp

Het was belangrijk om de gebruiker dezelfde filmische ervaring te bieden als de apps zoals Netflix, YouTube en andere applicaties. We wilden ook dat de gebruiker naadloos door de schermen en de secties kon navigeren.

Eind resultaat

Eindelijk, de winter kwam en het was de tijd voor de actie. We analyseerden alle aspecten en probeerden het visueel weer te geven. De mindmapping en wireframing waren voltooid en de gebruikersinterface was aan de beurt. We hadden alle dingen die we nodig hadden en het moest worden uitgevoerd.

Applicatie structuur

We hadden het resultaat voor het ontwerp dat gaming smaak had, samen met de kleurrijke banners. We hebben de interface ingediend met de positieve feedback. We hebben het ook getest op Android TV en het had de resultaten die we hadden verwacht.

Laatste gebruikersinterface

De reis was avontuurlijk en had veel lessen te leren. Android TV was iets waarin we graag weer zouden ontwerpen. Dit ontwerp leerde ons de diversiteit in de apparaten en de verschillende ervaringen om het te gebruiken.

Bedankt voor het lezen!