Design for fingre og småskjermer             Ida Aalen             @idaAa
Mobilt nettsted?
Over 10% fra mobil ogandre små og storeskjermer
Foto: Flickr-bruker kightp CC-BY-NC-ND
Foto: Flickr-bruker SliceOfChic CC-BY-NC-ND
Foto: Flickr-bruker bkajino CC-BY-NC-ND
Foto: Flickr-bruker catharticflux CC-BY-NC-ND
–   We’re now faced with a    browser landscape [...] with    devices becoming smaller    and larger simultaneously.    Et...
–   [...] we’re designing for    more devices, more input    types, more resolutions than    ever before.    Ethan Marcott...
• Tar som utgangspunkt atResponsive       du tilbyr det samme                 innholdet på alledesign           plattforme...
• Tar som utgangspunkt atMobile first       man får en bedre løsning                   om man begynner med å              ...
•   Folk bruker mobilen til åDu bør         -   google,               -   lese e-post,uansett        -   sjekke Facebook o...
Anbefalt lesningMobile First             Clour Four BlogLuke Wroblewski (2011)   http://cloudfour.com/blog/Responsive Web ...
Når trenger jeg en app?
...hvis den kommerNår passer    til å brukes ofte              ettersom den først mådet å ha en   lastes ned og installere...
.. hvis den brukerNår passer        innebygget                  funksjonalitetdet å ha en       eksempelvis              •...
–   Too often, people start from    the other end of the stick,    effectively asking, “What    does this app do for me, t...
HvemKlarer du   skal bruke appen?            Hvasvare på    skal de bruke appen til?            Nårhva appen   skal de bru...
Hvem, hva, hvor, nårog hvorfor?Eiere av Miele-maskinerkan styre kjøkken-apparatene sinenår de ikke er på kjøkkenetmen like...
Hvem, hva, hvor, når                                 og hvorfor?                                 Bysykkel-medlemmer       ...
FinneLuke Ws      jeg lurer på noe akkurat nåfire         Leke             jeg kjeder megbrukstyper             Sjekke    ...
FinneLuke Ws      Wikipedia, Kart, 1881,             Trafikanten, MatPratfire         Leke             Angry Birds, RSS-le...
Mikro-jobbingJosh Clarks   jeg vil gjøre noe nyttigtre              Kjedsomhetbrukstyper    jeg vil gjøre noe for å få    ...
Mikro-jobbingJosh Clarks   E-post, Kalender,              Wikipedia, 1881, MatPrat,tre           Keynote, Blogg           ...
Anbefalt lesningTapworthyJosh Clark (2010)Slik designer du app for nettbrett på 1-2-3-4Live Grønlienhttp://bit.ly/nettbret...
Hva med de ulikeplattformene?
+   =
Foto: Flickr-bruker reticulating CC-BY-NC-ND
Foto: Flickr-bruker Mike Babcock CC-BY
http://kiddynamitesworld.com/happy-halloween-from-oscar-mr-griffey
Hvorfor ser de så ulikeut?
Ja:Hva kan      Konsept             Overordnetjeg ta med   informasjonsarkitekturmeg?         Nei:             Detaljert  ...
Anbefalt lesningFinn.no webstatistikkhttp://labs.finn.no/tema/finn-statistikk/
Design for små skjermerog touch
7 spørsmål1. Ligger den viktigste         4. Kan man bruke appen uten   informasjonen øverst?           gestures?2. Er det...
1. Ligger det viktigsteøverst?
Luke Wroblewski: Mobile First
http://dcurt.is/3-point-5-inches/
• Legg derfor det du vil at1. Ligger         folk skal se først øverst på                  skjermenviktig info   •   Knapp...
2. Er det tydelig hvaman kan trykke på?
• Bruksanvisninger er en2. Er det         farlig sovepute, og overses                  ofte av brukernetydelig hva   •   S...
3. Kan du bruke denmed en tommel-tott?
• Ikke vær redd for å gjøre3. Kan du       touch-elementer for store!                Vanlig minimum er 7mm xbruke den     ...
4. Klarer man seg utengestures?
http://lukew.com/touch
• Sørg for at det alltid er en4. Klarer       vei til alle handlinger uten                å måtte bruke gesturesman seg   ...
5. Har du kuttet alt dukan kutte?
• Jo mer funksjonalitet5. Har du        appen din har, jo                 vanskeligere blir det åkuttet alt       forklare...
6. Har du tydeligehandlings-drivere?
• Sørg for at du vet hva du6. Har du        vil at brukeren skal gjøre                 på hvert skjermbildetydelige     • ...
7. Har duværtkonsekvent?
• Er bruken av begreper og7. Har du       ikoner konsekvent mellom                ditt mobile nettsted,vært            des...
Anbefalt lesningTapworthy                TappGalaJosh Clark (2010)        http://tappgala.comMobile First             Love...
Prototyping ogbrukertesting
• Brukerne har hattHvorfor       smarttelefoner kortere enn              de har vært på nettbruker-   •   Konvensjonene er...
Anbefalt lesningMobile UI Patternshttp://mobile-patterns.com/Pttrnshttp://pttrns.com/
• Folk kan svært få gesturesNoen ting     • Ikke legg menylinjen                  nederst på skjermen påvi har lært       ...
• Test på samme mobil somNår du        folk bruker til vanlig!          •   Sørg for at utviklere,bruker-       prosjektei...
Anbefalt lesningInvision App             Praktiskhttp://invisionapp.com   Brukertesting                         Toftøy-And...
Takk for oss!            Ida Aalen            ida@netliferesearch.com            45 24 24 12            @idaAaEirik Hafver...
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Upcoming SlideShare
Loading in...5
×

Mobil: Hva bør du tenke på?

2,869

Published on

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,869
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobil: Hva bør du tenke på?

  1. 1. Design for fingre og småskjermer Ida Aalen @idaAa
  2. 2. Mobilt nettsted?
  3. 3. Over 10% fra mobil ogandre små og storeskjermer
  4. 4. Foto: Flickr-bruker kightp CC-BY-NC-ND
  5. 5. Foto: Flickr-bruker SliceOfChic CC-BY-NC-ND
  6. 6. Foto: Flickr-bruker bkajino CC-BY-NC-ND
  7. 7. Foto: Flickr-bruker catharticflux CC-BY-NC-ND
  8. 8. – We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte Responsive Web Design, s. 6
  9. 9. – [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte Responsive Web Design, s. 6
  10. 10. • Tar som utgangspunkt atResponsive du tilbyr det samme innholdet på alledesign plattformer • Det som tilpasses er hvordan dette innholdet vises frem
  11. 11. • Tar som utgangspunkt atMobile first man får en bedre løsning om man begynner med å designe for små skjermer først • Tanken er at dette får oss til å fokusere og prioritere bedre • Hvis det ikke er viktig nok til å ha på mobil, er det egentlig viktig nok for desktop?
  12. 12. • Folk bruker mobilen til åDu bør - google, - lese e-post,uansett - sjekke Facebook og Twitter.være • Hva møter dem når de åpner en link til nettstedettilgjengelig ditt? Da hjelper det lite å ha en apppå nett... • Hva med de som ikke bruker Android eller iPhone?
  13. 13. Anbefalt lesningMobile First Clour Four BlogLuke Wroblewski (2011) http://cloudfour.com/blog/Responsive Web Media Queries BlogDesign http://mediaqueri.es/Ethan Marcotte (2011)
  14. 14. Når trenger jeg en app?
  15. 15. ...hvis den kommerNår passer til å brukes ofte ettersom den først mådet å ha en lastes ned og installeresapp?
  16. 16. .. hvis den brukerNår passer innebygget funksjonalitetdet å ha en eksempelvis • kameraapp? • lydopptak • gyroskop • adressebok • sms
  17. 17. – Too often, people start from the other end of the stick, effectively asking, “What does this app do for me, the app creator?” Josh Clark i Tapworthy
  18. 18. HvemKlarer du skal bruke appen? Hvasvare på skal de bruke appen til? Nårhva appen skal de bruke appen? Hvordin skal skal de bruke appen? Hvorforgjøre? skal de bruke appen?
  19. 19. Hvem, hva, hvor, nårog hvorfor?Eiere av Miele-maskinerkan styre kjøkken-apparatene sinenår de ikke er på kjøkkenetmen likevel er hjemmeog det gidder de fordi dehar så stort hus, kanskje?
  20. 20. Hvem, hva, hvor, når og hvorfor? Bysykkel-medlemmer kan finne sykkelstativ på kartet og hvor nærmeste ledige sykkel er når de er ute og sykler i Oslo så slipper de å lete eller komme frem til et fullt sykkelstaivFoto: Aktiv i Oslo CC-BY-NC-ND
  21. 21. FinneLuke Ws jeg lurer på noe akkurat nåfire Leke jeg kjeder megbrukstyper Sjekke jeg må være oppdatert Lage jeg må gjøre dette nå
  22. 22. FinneLuke Ws Wikipedia, Kart, 1881, Trafikanten, MatPratfire Leke Angry Birds, RSS-leser,brukstyper Facebook, Twitter Sjekke E-post, Facebook, Yr, Kalender, Fotballkamp Lage Kamera, Keynote, Blogg
  23. 23. Mikro-jobbingJosh Clarks jeg vil gjøre noe nyttigtre Kjedsomhetbrukstyper jeg vil gjøre noe for å få tida til å gå I nærheten jeg vil gjøre noe som har med hvor jeg er å gjøre
  24. 24. Mikro-jobbingJosh Clarks E-post, Kalender, Wikipedia, 1881, MatPrat,tre Keynote, Blogg Kjedsomhetbrukstyper Wikipedia, Angry Birds, RSS-leser, Twitter, Facebook, Fotballkamp I nærheten Kart, Trafikanten, Yr, Kamera
  25. 25. Anbefalt lesningTapworthyJosh Clark (2010)Slik designer du app for nettbrett på 1-2-3-4Live Grønlienhttp://bit.ly/nettbrettapp
  26. 26. Hva med de ulikeplattformene?
  27. 27. + =
  28. 28. Foto: Flickr-bruker reticulating CC-BY-NC-ND
  29. 29. Foto: Flickr-bruker Mike Babcock CC-BY
  30. 30. http://kiddynamitesworld.com/happy-halloween-from-oscar-mr-griffey
  31. 31. Hvorfor ser de så ulikeut?
  32. 32. Ja:Hva kan Konsept Overordnetjeg ta med informasjonsarkitekturmeg? Nei: Detaljert interaksjonsdesign Detaljert grafisk design
  33. 33. Anbefalt lesningFinn.no webstatistikkhttp://labs.finn.no/tema/finn-statistikk/
  34. 34. Design for små skjermerog touch
  35. 35. 7 spørsmål1. Ligger den viktigste 4. Kan man bruke appen uten informasjonen øverst? gestures?2. Er det tydelig hva man kan 5. Har du tatt bort alt du kan trykke på? ta bort?3. Kan man bruke appen kun 6. Har du tydelige med en tommeltott? handlingsdrivere? 7. Har du vært konsekvent?
  36. 36. 1. Ligger det viktigsteøverst?
  37. 37. Luke Wroblewski: Mobile First
  38. 38. http://dcurt.is/3-point-5-inches/
  39. 39. • Legg derfor det du vil at1. Ligger folk skal se først øverst på skjermenviktig info • Knapper som brukes ofte bør legges lengst ned påøverst? skjermen • ...Men ikke legg menyen nederst på Android-apper
  40. 40. 2. Er det tydelig hvaman kan trykke på?
  41. 41. • Bruksanvisninger er en2. Er det farlig sovepute, og overses ofte av brukernetydelig hva • Sørg for at trykkbare elementer skiller seg utman kantrykke på?
  42. 42. 3. Kan du bruke denmed en tommel-tott?
  43. 43. • Ikke vær redd for å gjøre3. Kan du touch-elementer for store! Vanlig minimum er 7mm xbruke den 7mm • Sørg for stor nok plassmed en mellom ulike touch- elementertommel-tott?
  44. 44. 4. Klarer man seg utengestures?
  45. 45. http://lukew.com/touch
  46. 46. • Sørg for at det alltid er en4. Klarer vei til alle handlinger uten å måtte bruke gesturesman seg • Bruk gestures som snarveier, ikke primæruten navigasjongestures?
  47. 47. 5. Har du kuttet alt dukan kutte?
  48. 48. • Jo mer funksjonalitet5. Har du appen din har, jo vanskeligere blir det åkuttet alt forklare hva den gjør • Jo mer du putter inn på endu kan skjerm, jo mindre oppmerksomhet får hvertkutte? enkelt element • Hold antall instillinger til et minimum, og gjør heller gode valg for brukerne
  49. 49. 6. Har du tydeligehandlings-drivere?
  50. 50. • Sørg for at du vet hva du6. Har du vil at brukeren skal gjøre på hvert skjermbildetydelige • Ha tydelige veier videre, for eksempel i form avhandlings- knapper og inputfelterdrivere?
  51. 51. 7. Har duværtkonsekvent?
  52. 52. • Er bruken av begreper og7. Har du ikoner konsekvent mellom ditt mobile nettsted,vært desktopnettsted og app? • Er appen eller mobilsidenkonsekvent? konsekvent innad, i bruken av begreper og interaksjonselementer? • Er appen din konsekvent med plattformen?
  53. 53. Anbefalt lesningTapworthy TappGalaJosh Clark (2010) http://tappgala.comMobile First Lovely UILuke Wroblewski (2011) http://lovelyui.com
  54. 54. Prototyping ogbrukertesting
  55. 55. • Brukerne har hattHvorfor smarttelefoner kortere enn de har vært på nettbruker- • Konvensjonene er mer utydelige på særlig iPad,teste? Android og mobilsider • Test før du er ferdig
  56. 56. Anbefalt lesningMobile UI Patternshttp://mobile-patterns.com/Pttrnshttp://pttrns.com/
  57. 57. • Folk kan svært få gesturesNoen ting • Ikke legg menylinjen nederst på skjermen påvi har lært Android • Bruk lokasjon som hjelp,av bruker- ikke som tvangstrøye • Menyknappen lite brukt påtester... Android • Augmented Reality er ikke alltid like nyttig..
  58. 58. • Test på samme mobil somNår du folk bruker til vanlig! • Sørg for at utviklere,bruker- prosjekteiere og lignende er til stede så de selv kan setester hvordan det er å bruke appen eller siden du tester • Du kan ikke bare teste med mamman din :)
  59. 59. Anbefalt lesningInvision App Praktiskhttp://invisionapp.com Brukertesting Toftøy-Andersen & WoldGjør det selv: 5 trinn (2011)til brukertesthttp://bit.ly/brukertest12345
  60. 60. Takk for oss! Ida Aalen ida@netliferesearch.com 45 24 24 12 @idaAaEirik Hafver Rønjumeirik@netliferesearch.com924 03 165@EirikHafver
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×