Hvordan tenke UX for Windows Store AppsFelipeLongé

Jobber i

Felipe LongéSenior konsulent

med å utvikleprogramvare og

brukeropplevelser

@felonge@peanuts_as

Gjør mer m

ed mindre

Stolthet i håndverk

Vær rask og flytende

Autentisk digital

Vinn som

én

Forprosje

kt

Skissering

Visuell

design

Agenda FelipeLongé

Del 1 – Forberede

brukeropplevlsen

Del 2 – Retningslinjer for

design

Forprosjekt

Definer hva applikasjonen skal være best på i dens kategori

En setning

Vær konkret

Virkelig differensiert

Velg noen scenarier som støtter «best på»-utsagnet

List opp alle scenarier

Stryk de som ikke trengs

Eksempel: Mat Med Venner er den beste appen I dens kategori til å hjelpe brukere og deres venner å finne en restaurant å spise i kveldFjerne scenariene som ikke støtter "Best på“-utsagnet

• Finn restauranter som vennene mine ønsker å spise på

• Søk etter en restaurant

• Les en anmeldelse

• Få detaljer, priser, beliggenhet, kontaktinfo osv.

• Finn restauranter som jeg ønsker å spise på

• Vise, sende eller skrive ut retninger

• Samhandle med restauranteiere

• Vis eller dele bilder av en restaurant

• Se foreslåtte restauranter

• Skriv en anmeldelse

• Finn restauranter som jeg ønsker å spise på

• Finn aktiviteter - før og etter spising

• Katalogisere alle restaurantene en har besøkt

• Bestem med venner hvilen restaurant en vil gå til

• bokmerke restauranter

• Lage en app konto og profil

• Angi eller endre plassering

• Dele mine opplevelser med venner

Skissering

Fra skisse til prototype

skisse

wireframe

mockup

prototype

Iterativ prosess

Mockflow og Balsamiq har Windows 8 «templates»

Windows 8 Stencil Kit: uistencils.com

PowerPoint templates: windows8templates.com/

Hjelpemidler

Windows 8 Stencil Kit: uistencils.com

Mockflow og Balsamiq har Windows 8 «templates»

Visuell design

Fokus på visuell design

40-50% av utviklingstid brukes til design og UX

Viktig å bruke design prinsipper

Gjerne avvik fra design prinsipper, men med tydelig intensjon

Metro

OppsummeringForprosjekt, skissering og visuell design

Definer hva applikasjonen skal være «best på» i dens kategori

Velg scenarier som støtter opp mot «best på»-utsagnet

Lag skisser, wireframes, mockups og/eller protoyper

Bruk «templates» og hjelpemider for skissering

Visuell design er viktigere for Windows Store apps enn på andre

platformer

Viktig å kunne design prinsipper (også for utviklere)

Avvik kun med intensjon

Vær rask og flytende

Stolthet i håndverk

Autentisk digitalt

Vinn som én

Gjør mer med mindre

Fjern distraksjoner

«Chrome» forstyrrer

Innhold

1:09

O Green World Gorillaz Demon days

Navigasjonsmønster

Hierarkimønster

Hierarkimønster

Passer best tilstore samlinger av innholdseksjoner eller kategorier

Hub

Seksjoner

Detaljer

Hub

Seksjon

Detaljer

Flat

Flat navigationsmønster

Passer best tilFlere faner, dokumenter,

meldinger, spill sesjoner, osv. Relativt få seksjoner

Side 1

Side 2

Navigasjonsbar

Navigasjonsbar

App bars

Label Label Label Label Label Label

Label Label Label Label Label Label

Valg 1

Valg 2

Valg 3

Huskeliste for funksjoner i app barTenk på context

Vær konsistent med posisjonering

Skille mellom funksjonalitet med seperator eller plassering i ulike

hjørner

Følg konvensjoner

Konvensjoner for funksjoner i app bar «New/Add/Start/Create/Compose» bruker ikon og plasseres nede til

høyre

Kommandoer kan vises ved selektering og plasseres nede til venstre

«Accept/Reject» bruker på nede til venstre og nede til høyre

Ikoner som forandrer visningen av elementer plasseres på venstre side

Semantic Zoom

Zoomet in

Zoomet ut

Zoomet in

Zoomet ut

OppsummeringGjør mer med mindre

«Chrome» forstyrrer for innholdet

Hierarki eller flat navigasjonsmønster gjenkjennes av brukeren

Følg app bar konvensjoner

Semantic Zoom brukes i hub - gir oversikt over seksjoner

Vær rask og flytende

Stolthet i håndverk

Autentisk digitalt

Vinn som én

Gjør mer med mindre

Stolthet i handverk

Gjør mer med mindre

Typografi

Segoe UI Type ramp

Page headers

Sub-headersBody copyTertiary info

42pt

20pt

11pt

11pt

11pt

9pt

42pt

20pt

11pt

9pt

Cambria Type ramp

9ptRegularBold

11ptRegularBold

20ptRegularBold

Rutenettet

Basic units

Størrelser og proporsjoner

1

3

2

1

2

3

Dolor Sit AmetElitMattisDiam

Lorem ipsum Dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam

Lorem ipsum

Dolor sit amet dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit.dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit. dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit.

Dolor sit amet dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit.

Lorem ipsum

dolor sit amet,

consectetur adipiscing

elit. Aliquam suscipit

mattis diam venenatis

varius. Consectetur

adipiscing elit. dolor sit

amet, consectetur

adipiscing elit. Aliquam

suscipit mattis diam

venenatis varius.

Consectetur

Hub

Seksjon

OppsummeringStolthet i håndverk

Segoe UI brukes til UI elementer

Cambria brukes til lesing av lengre tekster

Følg rutenett standard eller avvik med intensjon

Størrelser og proporsjoner gir variasjon og prioritet på elementer

Vær rask og flytende

Stolthet i håndverk

Autentisk digitalt

Vinn som én

Gjør mer med mindre

Stolthet i handverk

Gjør mer med mindre

Vær rask og flytende

Stolthet i handverk

Animasjoner

Bibliotek for animasjoner Følgende animasjoner er allerede pre designet og lagt inn for bruk

• App navigation

Enter Page / Exit Page

• Animate content

Enter Content / Exit Content

Expand / Collapse

Reposition

Crossfade

Fade In / Fade Out

Peek

Update Badge

Reveal / Hide

• Selection

Pointer animations

Swipe Select / Swipe Deselect

Swipe Reveal

• Show or hide supplemental UI

Show Edge UI / Hide Edge UI

Show Panel / Hide Panel

Show Pop Up / Hide Pop Up

• Collections and lists

Add / Delete from list

Drag and drop animations

Vis progress

Fortell brukeren at applikasjonen jobberDeterminate bar

Indeterminate bar

Indeterminate Ring

Ikke determinert innlasting

Gradvis innlasting

Gradvis innlasting

Gradvis innlasting

Logger på i bakgrunnen

Kobler til i bakgrunnen

Levende fliser

Levende fliser

Badge varsling

Levende flis

Levende flis

Levende flis

Fest til Start

Primær flis

Stor sekundær flisrektangulær

Liten sekundær fliskvadratisk

Ikon/snarvei

oppdaterer brukeren

«Push»-notifikasjoner

MicrosoftCloud Service

«Toast» meldinger

«Toast»-påminnelser

«toast» meldinger

Snarvei til påminnelse

«Push»-notifikasjoner

OppsummeringVær rask og flytende

En får mange pre designet animasjoner som er klar for bruk

Vis progress med determinerte og ikke determinerte «loading bars»

Bruk levende fliser – Primære og sekundære fliser

Bruk «Toast» meldinger for tidskritiske beskjeder til brukeren

Vær rask og flytende

Stolthet i håndverk

Autentisk digitalt

Vinn som én

Gjør mer med mindre

Stolthet i handverk

Gjør mer med mindre

Vær rask og flytende

Stolthet i handverk

Autentisk digitalt

Vær rask og flytende

Metaforer og «skeuomorphism»

flere ark

bok format

bla om funksjon

iOS

minimalistisk kun

innholdTilleggsfunksjoner er skjult for brukeren

Windows 8 app

bokhylleMerkelapp

på nye bøker

iOS

virtuelt

Windows 8 app

nål

bøy

markering

bryter

iOS

Windows 8 app

Ikoner

Fil plukker

OppsummeringAuthentisk digitalt

Microsoft distansierer seg fra metaforer og «skeumorphism» i sine

apps

Virkeligheten har begrensinger, mens det virtuelle går utover

virkeligheten

Ikonene og filplukkeren er et godt eksempel på fjerning av visuell

dekorasjon

Gjerne avvik fra design prinsipper, men med tydelig intensjon

Vær rask og flytende

Stolthet i håndverk

Autentisk digitalt

Vinn som en

Gjør mer med mindre

Stolthet i handverk

Gjør mer med mindre

Vær rask og flytende

Stolthet i handverk

Autentisk digitalt

Vær rask og flytende

Vinn som én

Autentisk digitalt

Start

Search

Settings

Share

Devices

Charms

Søk

Del

Innstillinger

Snap

133 6/29/2011MICROSOFT CONFIDENTIAL

Snap

Alle apper kan snappes (320px)

Gjør snap visningen unik

Preserver contekst og status

Sikt på å beholde funksjonalitet

La brukeren beholde kontrollen

Design for alle typer PC

135 6/29/2011MICROSOFT CONFIDENTIAL

136 6/29/2011MICROSOFT CONFIDENTIAL

Adaptive Bruk adaptive kontrollere for å gjøre bruk av plass.

FixedSkalere layout til å passe alle skjermstørrelser med ViewBox kontroller. Bruk letterboxing og bilde skalering.

OppsummeringVinn som en

Ta gjerne imot datapakker for deling men også handter deling

Gjør appen din søkbar – brukeren vil alltid kunne søke i appen din fra

charms

Innstillinger gjelder for hvor du er

Snap gjør multitasking enklere

Design for alle typer PC

windowsuserexperiencetraining.com

Hvordan tenke UX for Windows Store Apps

Takk

Spørsmål?

@felonge@peanuts_as