Designa en molnspelplattform på Android TV - UI / UX Design Fallstudie

Det var en vanlig måndag tills klienten kommer med ett nytt projekt som ska designas på Android TV. Vi hade stor erfarenhet av att designa olika UI-layouter för webb, mobil, surfplatta och även POS-system men det var första gången vi var tvungna att designa något för en smart tv. Vi var nyfiken på att designa något nytt och tog budet.

“Det finns alltid en första gången”

Det var en spänning bland oss ​​att skapa något liknande för första gången. Vi hade våra verktyg färdiga, samtidigt började vi också samla in inspiration och data som behövdes för att designa vår första Android TV-applikation.

Om projektet

Klienten berättade om kravet; appen handlade om Cloud Gaming Platform. Något som låter riktigt coolt och gjorde att vi verkligen var glada att arbeta. Vi genomförde forskningen om användarna och funktionerna i applikationen och hur kan vi representera den i Android TV. Det viktigaste att tänka på var att Android TV-layouten är väldigt annorlunda än de vanliga layouterna för webb och mobil.

Googles riktlinjer för material hjälpte oss att komma igång med designen.

Android TV-navigering

Android TV-layout och fjärrkontroll

Den första saken att göra var att förstå enheten där användaren kommer att använda applikationen. Vi förstod att användaren hade olika inmatningsenheter att använda. Men i detta fall kommer användaren oftast antingen att använda en Android Remote eller en GamePad för att navigera. Navigeringen var det vi tog på allvar eftersom vi ville att användaren skulle navigera genom minimala steg och inte skulle känna komplexitet för att använda gränssnittet.

Bildkrediter Google Design

Vi följde standardmateriallayouten eftersom den ser bekant ut för användaren och mycket lätt att navigera. Vi skapade en sektion med horisontell rullning (X-axel) och användaren kan ändra sektion med den vertikala rullningen (Y-axeln). Lådan förvarades om användaren väljer att ändra inställningar, utforska kategorier och andra sekundära funktioner.

Artboard Design Structure för Android TV

Forskning

Vi undersökte de nuvarande spelplattformarna som Vortex och tog även referens från spelkonsolerna som Xbox och Play Station. Dessa layouter hjälpte oss att förstå spelgränssnitten och hur informationen presenteras i TV: n. Vi tittade också kort på populära gränssnitt på Android TV som Netflix och Youtube för olika layoutmönster och användbarhetsreferens.

Bildkrediter Windows Central

Alla referensapplikationer som vi såg hade banners som huvudfokus och var utformade som att användaren enkelt kan navigera genom den fyra riktningsnavigeringsplattan. Vi kom fram till att hålla teckensnitt så mindre som möjligt för att ge användaren en bekant och intuitiv filmupplevelse. Teckensnittstorleken var också tvungen att hålla synlig och stor eftersom användaren sitter 5–10 fot från TV: n.

Färgval

Färger

Vi hade alltid älskat vita utrymmen och minimalt utseende på applikationen, men i det här fallet var vitt inte den färg som användarna vill se på den stora skärmen. Så vi bestämde oss för att gå med mörk- och mattfärgerna som skulle märkas mindre av användaren. Dessutom markerade den mörka bakgrunden spelbaner och gav den en intuitiv look.

Eftersom applikationen var för spelet tänkte vi hålla en polygonvektor i bakgrunden för att ge användaren en parallaxupplevelse. Färgerna var mörka vilket hjälpte användaren att fokusera på innehållet i applikationen.

Användarforskning

Vi genomförde användarundersökningar och klassificerade 2 kategorier för användarna.

Användarnas klassificering

John älskar att utforska nya spel medan Smith vill fortsätta samma spel under lång tid. Så med dessa resultat kom vi med funktioner som rekommendationer för John och nyligen spelade spel för Smith. Dessutom höll layouten enkel så att båda kan navigera enkelt och spela spel utan några ansträngningar.

Kortlayout

Kortlayouten var perfekt för att ge användarna en filmupplevelse. Det valda kortet kommer att markeras och höjas enligt materialdesign. Vi fortsatte Infinite Scrolling till toppen som bara innehåller banners för spelen utan textinformation. Under det här har vi nyligen spelade spel med materiallayouten och horisontell rullning.

Kortdesign

Det var viktigt att ge användaren samma filmupplevelse som apparna som Netflix, Youtube och andra applikationer tillhandahöll. Vi tänkte också att användaren skulle ha sömlös navigering genom skärmarna och avsnitten.

Slutliga resultat

Slutligen kom vintern och det var dags för actionen. Vi analyserade alla aspekter och försökte representera det visuellt. Sinnekartläggningen och wireframing slutfördes och användargränssnittet hade sin tur. Vi hade alla saker vi behövde och det måste genomföras.

Applikationsstruktur

Vi fick resultatet för designen som hade spelsmak tillsammans med de färgglada banners. Vi skickade gränssnittet där de positiva feedbacken var. Vi testade det också på Android TV och det hade de förväntade resultaten.

Sista UI

Resan var äventyrlig och hade många lektioner att lära. Android TV var något där vi skulle älska att designa igen. Denna design lärde oss mångfalden i enheterna och de olika upplevelserna att använda den.

Tack för att du läste!