• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hvordan tenke ux for windows store apps
 

Hvordan tenke ux for windows store apps

on

  • 955 views

Denne presentasjonen vil gi innsikt i hvordan man kan tenke UX for Windows Store Apps. Presentasjonen er utviklet av Felipe Longe i Peanuts AS.

Denne presentasjonen vil gi innsikt i hvordan man kan tenke UX for Windows Store Apps. Presentasjonen er utviklet av Felipe Longe i Peanuts AS.

Statistics

Views

Total Views
955
Views on SlideShare
932
Embed Views
23

Actions

Likes
1
Downloads
3
Comments
0

3 Embeds 23

http://www.linkedin.com 14
https://twitter.com 5
http://localhost 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Snapped hub
  • DetailsDynamisk knapp ut fra status
  • Snapped detaljevisning
  • Landscape leser
  • Portrett leser

Hvordan tenke ux for windows store apps Hvordan tenke ux for windows store apps Presentation Transcript

  • Hvordan tenke UX for Windows Store Apps Felipe Longé
  • Felipe Longé @felonge @peanuts_as Senior konsulentJobber i med å utvikle programvare og brukeropplevelser
  • Agenda Felipe LongéDel 1 – Forberede brukeropplevlsen Del 2 – Retningslinjer for design Forprosjekt Autentisk digital SkisseringVisuell design Vær rask og flytende Vinn som én
  • Forprosjekt
  • Definer hva applikasjonen skalvære best på i dens kategori En setning Vær konkret Virkelig differensiert
  • Velg noen scenarier somstøtter «best på»-utsagnet List opp alle scenarier Stryk de som ikke trengs
  • Eksempel: Mat Med Venner er den beste appen I dens kategoritil å hjelpe brukere og deres venner å finne en restaurant å spiseiFjerne scenariene som ikke støtter "Best på“-utsagnet kveld• Finn restauranter som vennene mine • Skriv en anmeldelse ønsker å spise på • Finn restauranter som jeg ønsker å spise på• Søk etter en restaurant• Les en anmeldelse• Få detaljer, priser, beliggenhet, kontaktinf o osv. • Bestem med venner hvilen restaurant en vil gå til• Finn restauranter som jeg ønsker å spise på • bokmerke restauranter• Vise, sende eller skrive ut retninger • Lage en app konto og profil • Angi eller endre plassering• Vis eller dele bilder av en restaurant• Se foreslåtte restauranter
  • Skissering
  • Fra skisse til prototypeskisse mockupwireframe prototype Iterativ prosess
  • Hjelpemidler Mockflow og Balsamiq har Windows 8 «templates» Windows 8 Stencil Kit: uistencils.com PowerPoint templates: windows8templates.com/
  • Windows 8 Stencil Kit: uistencils.com
  • Mockflow og Balsamiq har Windows 8 «templates»
  • Visuell design
  • Fokus på visuell design40-50% av utviklingstid brukes til design og UXViktig å bruke design prinsipperGjerne avvik fra design prinsipper, men med tydelig intensjon
  • Metro
  • Oppsummering Forprosjekt, 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
  • Gjør mer med mindreStolthet i håndverkVær rask og flytendeAutentisk digitaltVinn som én
  • Fjern distraksjoner
  • «Chrome» forstyrrer
  • Innhold
  • Navigasjonsmønster
  • Hierarkimønster
  • Hierarkimønster Passer best til store samlinger av innhold seksjoner eller kategorier
  • Hub
  • Seksjon
  • Detaljer
  • Flat
  • Flat navigationsmønster Passer best til Flere faner, dokumenter, meldinger, spill sesjoner, osv. Relativt få seksjoner
  • Navigasjonsbar
  • Navigasjonsbar
  • Label Label Label Label Label Label App bars Valg 1 Valg 2 Valg 3Label Label Label Label Label Label
  • Huskeliste for funksjoner i app bar Tenk 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
  • Oppsummering Gjø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
  • Gjør mer med mindre handverkStolthet i håndverkVær rask og flytendeAutentisk digitaltVinn som én
  • Typografi
  • Segoe UI Type ramp
  • 42pt20pt 11pt 11pt 9pt 11pt
  • 42pt 20pt11pt 9pt
  • Rutenettet
  • Størrelser og proporsjoner
  • 1 2 3
  • 1 3 2
  • Dolor Sit Amet Elit Lorem Dolor sit Mattis ipsum dolor sit amet, c adipiscing elit. A Diam dolor sit amet, mattis diam ven consectetur Consectetur ad adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Dolor sit amet Consectetur dolor sit amet, consectetur adipiscing elit. Aliquam suscipit adipiscing elit. mattis diam venenatis varius. Consectetur adipiscing elit. dolor sit amet, dolor sit amet, consectetur adipiscing elit. Aliquam suscipitLorem ipsum mattis diam venenatis varius. Consectetur adipiscing elit. dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit. consectetur adipiscing elit. Aliquam suscipit mattisDolor sit amet, consectetur adipiscing diam venenatiselit. Aliquam suscipit mattis diam varius. Consectetur
  • Hub
  • Seksjon
  • Oppsummering Stolthet 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
  • Gjør mer med mindreStolthet i håndverk handverkVær rask og flytendeAutentisk digitaltVinn som én
  • Animasjoner
  • Bibliotek for animasjoner Følgende animasjoner er allerede pre designet og lagt inn for bruk• App navigation • Show or hide supplemental UI Enter Page / Exit Page Show Edge UI / Hide Edge UI Show Panel / Hide Panel• Animate content Show Pop Up / Hide Pop Up Enter Content / Exit Content Expand / Collapse • Collections and lists Reposition Add / Delete from list Crossfade Drag and drop animations Fade In / Fade Out Peek Update Badge Reveal / Hide• Selection Pointer animations Swipe Select / Swipe Deselect Swipe Reveal
  • Vis progressFortell 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 fliserBadge varsling Levende flis Levende flis Levende flis
  • Fest til Start
  • oppdaterer brukeren MicrosoftPrimær flis «Push»-notifikasjoner Cloud ServiceStor sekundær flis rektangulærLiten sekundær flis kvadratisk Ikon/snarvei
  • «Toast» meldinger
  • «toast» meldinger «Push»-notifikasjoner Snarvei til påminnelse«Toast»-påminnelser
  • Oppsummering Væ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
  • Gjør mer med mindreStolthet i håndverk handverkVær rask og flytendeAutentisk digitaltVinn som én
  • Metaforer og «skeuomorphism»
  • iOSflere ark bla om funksjon bok format
  • Windows 8 appminimalistisk kun innhold Tilleggsfunksjoner er skjult for brukeren
  • iOS bokhylleMerkelapp på nye bøker
  • Windows 8 appvirtuelt
  • iOS markeringnål bøy bryter
  • Windows 8 app
  • Ikoner
  • Fil plukker
  • Oppsummering Authentisk 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
  • Gjør mer med mindreStolthet i håndverk handverkVær rask og flytendeAutentisk digitaltVinn som en én
  • Search ShareCharms Start Devices Settings
  • Søk
  • Del
  • Innstillinger
  • Snap
  • SnapAlle apper kan snappes (320px)Gjør snap visningen unikPreserver contekst og statusSikt på å beholde funksjonalitetLa brukeren beholde kontrollen
  • Design for alle typer PC
  • Adaptive FixedBruk adaptive kontrollere for å gjøre bruk av plass. Skalere layout til å passe alle skjermstørrelser med ViewBox kontroller. Bruk letterboxing og bilde skalering.
  • Oppsummering Vinn 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