Hvordan tenke UX for Windows Store Apps   Felipe                                          Longé
Felipe Longé         @felonge                                @peanuts_as             Senior konsulentJobber i           me...
Agenda                                                                                  Felipe                            ...
Forprosjekt
Definer hva applikasjonen skalvære best på i dens kategori             En setning             Vær konkret             Virk...
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 å sp...
Skissering
Fra skisse til prototypeskisse      mockupwireframe   prototype                        Iterativ prosess
Hjelpemidler   Mockflow og Balsamiq har Windows 8 «templates»   Windows 8 Stencil Kit: uistencils.com   PowerPoint templat...
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 des...
Metro
Oppsummering Forprosjekt, skissering og visuell design    Definer hva applikasjonen skal være «best på» i dens kategori   ...
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, o...
Navigasjonsbar
Navigasjonsbar
Label   Label   Label              Label   Label   Label        App bars                          Valg 1                  ...
Huskeliste for funksjoner i app bar Tenk på context Vær konsistent med posisjonering Skille mellom funksjonalitet med sepe...
Konvensjoner for funksjoner i app bar «New/Add/Start/Create/Compose» bruker       ikon og plasseres nede til høyre Kommand...
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 gjenkjenne...
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                            ...
Hub
Seksjon
Oppsummering Stolthet i håndverk    Segoe UI brukes til UI elementer    Cambria brukes til lesing av lengre tekster    Føl...
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             ...
Vis progressFortell brukeren at applikasjonen jobberDeterminate bar                  Indeterminate bar                    ...
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                  ...
«Toast» meldinger
«toast» meldinger                        «Push»-notifikasjoner                             Snarvei til påminnelse«Toast»-p...
Oppsummering Vær rask og flytende    En får mange pre designet animasjoner som er klar for bruk    Vis progress med determ...
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       ...
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     Virkelighe...
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 b...
Design for alle typer PC
Adaptive                                               FixedBruk adaptive kontrollere for å gjøre bruk av plass.   Skalere...
Oppsummering Vinn som en    Ta gjerne imot datapakker for deling men også handter deling    Gjør appen din søkbar – bruker...
windowsuserexperiencetraining.com
Hvordan tenke UX for Windows Store Apps
Takk
Spørsmål?
@felonge@peanuts_as
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Hvordan tenke ux for windows store apps
Upcoming SlideShare
Loading in …5
×

Hvordan tenke ux for windows store apps

829 views
766 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
829
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Snapped hub
  • DetailsDynamisk knapp ut fra status
  • Snapped detaljevisning
  • Landscape leser
  • Portrett leser
  • Hvordan tenke ux for windows store apps

    1. 1. Hvordan tenke UX for Windows Store Apps Felipe Longé
    2. 2. Felipe Longé @felonge @peanuts_as Senior konsulentJobber i med å utvikle programvare og brukeropplevelser
    3. 3. 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
    4. 4. Forprosjekt
    5. 5. Definer hva applikasjonen skalvære best på i dens kategori En setning Vær konkret Virkelig differensiert
    6. 6. Velg noen scenarier somstøtter «best på»-utsagnet List opp alle scenarier Stryk de som ikke trengs
    7. 7. 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
    8. 8. Skissering
    9. 9. Fra skisse til prototypeskisse mockupwireframe prototype Iterativ prosess
    10. 10. Hjelpemidler Mockflow og Balsamiq har Windows 8 «templates» Windows 8 Stencil Kit: uistencils.com PowerPoint templates: windows8templates.com/
    11. 11. Windows 8 Stencil Kit: uistencils.com
    12. 12. Mockflow og Balsamiq har Windows 8 «templates»
    13. 13. Visuell design
    14. 14. Fokus på visuell design40-50% av utviklingstid brukes til design og UXViktig å bruke design prinsipperGjerne avvik fra design prinsipper, men med tydelig intensjon
    15. 15. Metro
    16. 16. 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
    17. 17. Gjør mer med mindreStolthet i håndverkVær rask og flytendeAutentisk digitaltVinn som én
    18. 18. Fjern distraksjoner
    19. 19. «Chrome» forstyrrer
    20. 20. Innhold
    21. 21. Navigasjonsmønster
    22. 22. Hierarkimønster
    23. 23. Hierarkimønster Passer best til store samlinger av innhold seksjoner eller kategorier
    24. 24. Hub
    25. 25. Seksjon
    26. 26. Detaljer
    27. 27. Flat
    28. 28. Flat navigationsmønster Passer best til Flere faner, dokumenter, meldinger, spill sesjoner, osv. Relativt få seksjoner
    29. 29. Navigasjonsbar
    30. 30. Navigasjonsbar
    31. 31. Label Label Label Label Label Label App bars Valg 1 Valg 2 Valg 3Label Label Label Label Label Label
    32. 32. 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
    33. 33. 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
    34. 34. Semantic Zoom
    35. 35. Zoomet in
    36. 36. Zoomet ut
    37. 37. Zoomet in
    38. 38. Zoomet ut
    39. 39. 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
    40. 40. Gjør mer med mindre handverkStolthet i håndverkVær rask og flytendeAutentisk digitaltVinn som én
    41. 41. Typografi
    42. 42. Segoe UI Type ramp
    43. 43. 42pt20pt 11pt 11pt 9pt 11pt
    44. 44. 42pt 20pt11pt 9pt
    45. 45. Rutenettet
    46. 46. Størrelser og proporsjoner
    47. 47. 1 2 3
    48. 48. 1 3 2
    49. 49. 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
    50. 50. Hub
    51. 51. Seksjon
    52. 52. 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
    53. 53. Gjør mer med mindreStolthet i håndverk handverkVær rask og flytendeAutentisk digitaltVinn som én
    54. 54. Animasjoner
    55. 55. 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
    56. 56. Vis progressFortell brukeren at applikasjonen jobberDeterminate bar Indeterminate bar Indeterminate Ring         
    57. 57. Ikke determinert innlasting
    58. 58. Gradvis innlasting
    59. 59. Gradvis innlasting
    60. 60. Gradvis innlasting
    61. 61. Logger på i bakgrunnen
    62. 62. Kobler til i bakgrunnen
    63. 63. Levende fliser
    64. 64. Levende fliserBadge varsling Levende flis Levende flis Levende flis
    65. 65. Fest til Start
    66. 66. oppdaterer brukeren MicrosoftPrimær flis «Push»-notifikasjoner Cloud ServiceStor sekundær flis rektangulærLiten sekundær flis kvadratisk Ikon/snarvei
    67. 67. «Toast» meldinger
    68. 68. «toast» meldinger «Push»-notifikasjoner Snarvei til påminnelse«Toast»-påminnelser
    69. 69. 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
    70. 70. Gjør mer med mindreStolthet i håndverk handverkVær rask og flytendeAutentisk digitaltVinn som én
    71. 71. Metaforer og «skeuomorphism»
    72. 72. iOSflere ark bla om funksjon bok format
    73. 73. Windows 8 appminimalistisk kun innhold Tilleggsfunksjoner er skjult for brukeren
    74. 74. iOS bokhylleMerkelapp på nye bøker
    75. 75. Windows 8 appvirtuelt
    76. 76. iOS markeringnål bøy bryter
    77. 77. Windows 8 app
    78. 78. Ikoner
    79. 79. Fil plukker
    80. 80. 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
    81. 81. Gjør mer med mindreStolthet i håndverk handverkVær rask og flytendeAutentisk digitaltVinn som en én
    82. 82. Search ShareCharms Start Devices Settings
    83. 83. Søk
    84. 84. Del
    85. 85. Innstillinger
    86. 86. Snap
    87. 87. SnapAlle apper kan snappes (320px)Gjør snap visningen unikPreserver contekst og statusSikt på å beholde funksjonalitetLa brukeren beholde kontrollen
    88. 88. Design for alle typer PC
    89. 89. 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.
    90. 90. 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
    91. 91. windowsuserexperiencetraining.com
    92. 92. Hvordan tenke UX for Windows Store Apps
    93. 93. Takk
    94. 94. Spørsmål?
    95. 95. @felonge@peanuts_as

    ×