I Juli 2012 ble vi kontaktet av TV2 Sumo  og Vimond med en forespørsel om vi kunne designe en TV2 Sumo app for den nye Windows 8 app plattformen. Dette var noe vi var veldig interessert i å gjøre! Vi var spent på denne plattformen og det er alltid gøy å jobbe på prosjekter med TV2 sumo og Vimond. Men det var ett par haker: Dette var midt i fellesferien, og den ferdig godkjente appen måtte være klar til lanseringen av Windows 8, 26 Oktober. 

Som utgangspunkt  for designoppgaven fikk vi tilgang til det flotte nye designet til TV2 sumo (www.sumo.tv2.no) som er designet av Gosu. Dette var et veldig bra utgangspunkt, siden designet hadde enkelte likhetstrekk med Windows 8 Store-apper  med bruken av bilder i en mosaikk.

 

Hierarki

 

 

Den største designmessige utfordringen i prosjektet var å få TV2 Sumo sitt innhold til å passe inn i det temmelig strenge hierarkiet til Win 8-apper. Dette krevde at vi flatet ut hierarkiet ganske radikalt. Dette kan virke vanskelig, men det finnes flere mekanismer i rammeverket til Windows 8 som gjør dette litt lettere en det høres ut. Det viktigste vi gjorde var å bruke bredden i appen, og horisontal skrolling, for å få plass til mer innhold på hvert nivå. Ved å gruppere innholdet er det nemlig mulig å få plass til flere nivåer i et hierarki på samme nivået. For eksempel opplevde vi at Hotell Cæsar hadde svært mange nivåer, med forskjellige sesonger, tabber og auditions og lignende.  Allikevel kunne vi plassere alt Hotell Cæsar-innhold på ett nivå! Dette ble løst ved å gruppere innholdet etter sesong eller annen kategori av innhold. Dette resulterte i sider som har mye innhold, og som kan bli ganske lange og tunge å navigere. For å løse dette problemet brukte vi to av funksjonene i Win 8-rammeverket:

 

Semantic Zoom

Semantic zoom hjelper brukeren å raskt få ett overblikk over alt innholdet på siden. Dette er en funksjonalitet vi valgte å bruke gjennomgående i applikasjonen. Hvis du er på fremsiden, kan du semantic zoome ut for å se alle hovedseksjonene, hvis du er på programutlistingen kan du semantic zoome ut for å få et “a til å” register, hvis du er på Hotell Cæsar kan du semantic zoom ut, og se alle sesonger, tabber og lignende på en skjerm.

 

 

Filtrering

Det andre vi gjorde for å gjøre navigasjon raskere og enklere var å bruke filtre i tittellinjen. Dette gjør at det er raskt for brukere å finne det innholdet de er ute etter. For eksempel bruker vi dette på filmutlistingen for å velge genre.  Selv om vi brukte disse verktøyene og designgrepene var det utfordrende å få et svært komplekst hierarki til å passe inn i et strikt trenivås-hierarki. Fordelen med å ha gjennomført denne jobben er at det skaper en svært oversiktlig brukeropplevelse, siden brukeren alltid vet hvordan applikasjonen fungerer. Hierarkiet i Windows 8-apper har som sagt 3 nivåer. (les mer om Windows 8 apper og hierarki her: http://sayitblogg.no/hvordan-lage-gode-windows-store-apper/ ) Disse tre nivåene er hubben, seksjonene og detaljsiden.

 

Hubben

Hubben i TV2 Sumo er delt inn i de forskjellige hovedkategoriene av innhold på TV2 Sumo. I tillegg har siden en høydepunkt seksjon hvor TV2 kan løfte frem innhold. Det er mulig å bruke semantic zoom på hubben, for raskt å få overblikk over alle kategoriene som er tilgjengelig. Hubben skal til enhver tid vise det nyeste innholdet, og dermed hjelpe brukeren med å finne nytt og spennende innhold. Fra hubben er det mulig å navigere rett til en programside, eller til en underseksjon, for å kunne se alt innhold. Layouten i hubben følger windows 8 sitt faste gridd.

 

Seksjonene

Hver seksjon i hubben har en seksjonside. Disse sidene lister ut alt innhold som er tilgjengelig i applikasjonen. For eksempel viser programmer seksjonen en liste med alle programmer fra A til Å. Også her har vi brukt semantic zoom, for å få opp et alfabet. Dette gjør det raskt å hoppe til det showet du ser etter.  Sesjonsidene inneholder og hurtigfiltre i toppen, for å raskt kunne velge type innhold.

 

Detaljesidene

Videofilene finnes alltid på detaljsidene.  For en TV-serie med flere sesonger og episode er disse organisert horisontalt. Det er mulig å organisere episodene med siste episode først, eller med første episode først. Det er også mulig å raskt velge en sesong, eller annen underkategori fra filtrene på siden.

 

Live

Live TV er løst litt annerledes en de andre sidene. Her viser seksjonssiden kanalene horisontalt, med en programoversikt. Programmene startes ved å trykke på de i listen. Det er også mulig å starte noen programmer før de har gått på TV. Dette vises ved at avspillbare programmer har et “play symbol”.  Programmene starter i fullskjermsvisning.

 

Wireframing

Wireframing er relativt enkelt for Windows 8 apper. I dokumentasjonen på www.design.windows.com finnes detaljert grid og font informasjon, og ved å bruke dette er det svært raskt å tegne hovedstrukturen i applikasjonen. Microsoft har også noen PSD filer tilgjengelig, med wireframe maler. Jeg brukte ikke disse ettersom mitt weapon of choice er Fireworks. Det hadde vært til stor hjelp om Microsoft lagde resurser for flere verktøy en Photoshop. Wireframing av appen er også svært viktig for godkjenningsprosessen til Microsoft. De krever detaljert dokumentasjon av informasjonsarkitekturen, og gode wireframes er det ideelle utgangspunktet for å få til dette.

 

Content before chrome

Ett av hovedprinsippene til Windows 8-apper er “content before chrome”. Dette betyr at all unødig funksjonalitet og ornamentering bør fjernes fra selve skjermen. De eneste knappene som bør ligge i selve skjermbildet er de som er helt nødvendig for å gjennomføre hovedscenarioene til applikasjonen. Annen funksjonalitet og knapper flyttes enten til applikasjonsbaren, eller erstattes av funksjonalitet i Windows 8-kontraktene som er tilgjengelig fra charm-baren. For å lese mer om dette, se http://sayitblogg.no/hvordan-lage-gode-windows-store-apper

Utfordringen med dette var i all hovedsak å gå igjennom det nye designet til Sumo, og se hvilke funksjonalitet som eksisterte, hva som var nødvendig for å gjennomføre hovedscenarioet (å se på TV-innhold) og hva som kunne flyttes til kanten av appen. Deretter måtte vi bestemme hvor de forskjellige  funksjonene skulle flyttes. For søk, innstillinger og deling ble Windows-kontrakter brukt, så disse ble flyttet til charm-baren. Favoritter, legg til mine kanaler og lignende funksjoner ble flyttet til app-baren. Her skiller Microsoft mellom globale og lokale funksjoner. Globale funksjoner plasseres til høyre og kontekstuelle funksjoner plasseres til venstre

 

Windows 8 app-silhuetten

Et annet grep som er nødvendig for å få “Metro”-looken er å bruke Windows app-silhuetten.  Den er godt forklart i Windows-dokumentasjonen. Det bør kanskje nevnes her at Windows ikke er 100% streng med at alle apper skal følge disse retningslinjene, men det er et bra utgangspunkt å forholde seg til. Mangelen av knapper bidrar også til den distingte Windows 8-looken.  Dette virker kanskje ikke intuitivt, men det er en tanke bak det: Alt som vises på skjermen er nemlig trykkbart. Dette er kansje en litt annen tilnærming en vi er vant til, men når brukeren er vant til plattformen funker det bra.

 

 

Utfordringer og begrensinger

Det var en rekke utfordringer og begrensinger som påvirket funksjonaliteten og utseende til denne appen. Tidsfaktoren var den største utfordringen og begrensingen i dette prosjektet. Det var funksjonalitet vi designet, men som ikke ville la seg implementere innenfor de tidsrammene vi hadde. Det var og funksjonalitet vi ønsket oss, men som ville kreve endringer som var for store til å la seg gjennomføre innenfor disse rammene. Det var og flere teknologiske begrensinger, som satt ganske klare rammer for prosjektet.   Alt i alt var dette et veldig spennende prosjekt, på en spennende plattform. Min erfaring er at Windows 8 Store-app plattformen gir muligheter til å levere gode og forutsigbar brukeropplevelser, og jeg håper at dette er en teknologi som folk vil ta i bruke. Hvis noen har spørsmål om plattformen eller ønsker mer informasjon om mine erfaringer med Windows 8-apper er det bare å kommentere. Fortell gjerne hva du tror om Windows 8 plattformen.