Med Windows 8 kommer de nye Windows Store-appene. Microsoft har laget mye, og god dokumentasjon for å hjelpe deg med å lage gode apper, men dessverre har de gjort en forferdelig jobb med å organisere informasjonen, så her kommer en rask oppsummering av det viktigste du må vite for å lage en god og funksjonell Windows Store-app. 

 

Hierarki:

Windows 8 store hierarki

Windows 8 store hierarki

Det finnes to typer Windows Store-apper. Apper med flat struktur og hierarkiske apper. Apper med flat struktur er for eksempel nettlesere, spill og lignende. Men de fleste apper vil nok være hierarkiske applikasjoner.

Hierarkiske apper har kanskje den mest overaskende begrensningen: De skal ha 3 nivå, hverken mer eller mindre. Dette kan virke som en noe streng regel, og den fører til eksisterende hierarkier ofte må flates ut. For brukeren er dette en bra begrensning, siden det gjør appene veldig oversiktlige og lette å navigere. Ett tips for å få dette til å fungere er å inkludere gode filtere, så brukeren kan filtrere på de nivåene i hirarkiet som er fjernet. De tre nivåene i en hierarkisk app heter hub, section og detail.

 

Hubben

Hubben er toppnivået i hierarkiet. Den fungerer litt som en toppmeny, og tanken er at innhold fra de forskjellige seksjonene skal boble opp til hubben. Dette skal få brukeren til å ville utforske innholdet. Alt innholdet i hubben er vist i fliser, og den ligner egentlig på startskjermen til Windows 8. Størrelsen på flisene er opp til designeren, og det oppfordres til å ha variasjon i uttrykket. Avstanden mellom de forskjellige flisene er derimot satt av Microsoft. Hubben er delt inn i grupper, og hver gruppe reflekterer de viktigste innholdet i neste nivå i appen.

 

Section

Seksjonene kan være utformet på mange måter avhengig av hva innholdet er. Det kan for eksempel være fliser som i hubben eller det kan være lister. Hvert element i seksjonen linker til en egen detaljside. Seksjonene kan også grupperes på lik linje med hubben. En app kan ha flere seksjoner med svært forskjellig utforming.

 

Details

Detaljsidene tilsvarer en artikkelside på en webside. Dette er siden hvor selve innholdet er. Utformingen av detaljsidene er avhengig av hvilke innhold den har, og designeren av appen står relativt fritt her.

 

Fokuser på innhold

Microsoft har en læresetning som heter ”content before chrome”. Med dette mener de at alt som er unødvendig skal fjernes fra skjermen. De eneste knappene som skal brukes i selve appen er primærfunksjoner, hvor brukeren er  avhengig av knappene for å gjennomføre appens hovedfunksjon. Alle andre interaksjonselementer flyttes til app-baren, som er tilgjengelig fra bunnen av skjermen. Unødige linjer, skygger og lignende fjernes også fra skjermen, så alt fokuset er på selve innholdet i appen. Dette er med på å gi Windows store-appene et gjenkjennelig utseende.

 

”Be fast and fluid”

Microsoft har bygd inn en rekke animasjoner i rammeverket til Windows store-applikasjonene. Disse animasjonene forsterker de underliggende konseptene til interaksjonen, og bør benyttes på den måten som Microsoft har spesifisert. Microsoft har óg laget et eget bibliotek med berøringsbevegelser. Ved å bruke disse vet brukeren alltid hvordan applikasjonene vil oppføre seg, og gjør opplevelsen forutsigbar.

 

Windows 8 touch language

Windows 8 touch language

Design for berøring

 Windows Store-apper skal brukes både på tablets og på vanlige PCer. Derfor har Microsoft bestemt at all interaksjon skal være designet for berøring. Dette betyr at man ikke kan bruke høyreklikk, eller mouse-over som interaksjon. Det betyr og at alle berøringsflater bør være store og gode. Dette er i grunnen ikke et problem, siden designreglene som Microsoft har laget for applikasjonene sørger for at dette blir overholdt. I det arbeidet jeg har gjort med Windows Store-apper har jeg aldri måtte tenke på at dette er for berøring.  Det har gitt seg selv.

  

Skalér og “snap” på god måte.

Windows Store-apper skal kunne kjøres på skjermstørrelser fra 1024 x 768 og oppover. Det er viktig at Windows Store-apper er designet sånn at de fungerer like bra på små som store skjermer. Dette kan gjøres ved å vise mer innhold på større skjermer, ved å reorganisere innholdet så det fyller skjermen bedre eller ved å skalere opp innholdet. Hvilken strategi som velges er avhengig av hva innholdet er. Hvis appen er ett spill er det naturlig at innholdet skaleres. Hvis det er en nyhets-app med nyhetssaker er det naturlig å vise mer innhold på en større skjerm. En god måte å løse dette i apper som skal vise mer innhold er å sette en maks høyde for innholdet i appen. Dette gjør at du kan ha full kontroll på hvordan innholdet ser ut på en liten og på en stor skjerm.

I tillegg til dette vil alt innhold på Windows Store-apper skalere på skjermer med større pixeltetthet. Dette gjøres ved at all grafikk har 3 versjoner. På denne måten vil større pixeltetthet gi bedre kvalitet, ikke mindre størrelse på innholdet.

Alle Metro-apper har også to alternative visninger: fullskjerm og “snap view”. I snap view vises appen som en 320 px bred kolonne. Dette er ikke en valgfri visning, og alle applikasjoner må kunne snappe. Hvis du ikke designer en snap-visning vil appen allikevel snappe, og dette kan ha uforutsette resultater. Det er også mulig å ha apper med portrett visning. Dette er derimot en valgfri visning, så det er mulig å slå av denne visningsformen.

 

Bruk Microsoft sine ”contracts”

 Kontrakter er funksjonalitet som er bygd inn i Windows 8 grensesnittet. Det betyr for det første at du slipper å kode løsningene, men det betyr også at applikasjonen din kan integreres med andre applikasjoner og også med selve operativsystemet. Det finnes en rekke kontrakter. De mest vanlige er: søk, deling, fil-velger, koblinger og innstillinger. Ved å bruke søk-kontrakten kan du for eksempel søke etter innhold i din app selv om du ikke er i selve appen. Dette kan lede til hyppigere bruk av applikasjonen. Dele-kontrakten er også genial: denne vet automatisk hvilke delemuligheter som er tilgjengelig og du slipper å implementere de forskjellige delemuligheter selv.

 

Lag en bra forsideflis

Flisene er inngangspunktet til appene og det lønner det seg derfor å investere litt tid i designet til flisen. Fliser kan vise forskjellig innhold, og kan for eksempel varsle brukeren om nytt innhold i appen din. Målet med å designe en bra flis er at brukeren skal få lyst til å utforske, leke med, og bruke appen din.

 

Dette er bare hovedkriteriene for å lage en god Windows Store-app, og det finnes mange resurser tilgjengelig hvor for eksempel typografi og grid er forklart i detaljer.