hvordan tenke ux for windows store apps
DESCRIPTION
Denne presentasjonen vil gi innsikt i hvordan man kan tenke UX for Windows Store Apps. Presentasjonen er utviklet av Felipe Longe i Peanuts AS.TRANSCRIPT
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
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