SlideShare una empresa de Scribd logo
1 de 91
Descargar para leer sin conexión
Design for fingre og små
skjermer


             Ida Aalen
             @idaAa
Mobilt nettsted?
Over 10% fra mobil og
andre små og store
skjermer
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.
    Ethan Marcotte
    Responsive Web Design, s. 6
–   [...] we’re designing for
    more devices, more input
    types, more resolutions than
    ever before.
    Ethan Marcotte
    Responsive Web Design, s. 6
• Tar som utgangspunkt at
Responsive       du tilbyr det samme
                 innholdet på alle
design           plattformer
             •   Det som tilpasses er
                 hvordan dette innholdet
                 vises frem
• Tar som utgangspunkt at
Mobile 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?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
•   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 nettstedet
tilgjengelig       ditt? Da hjelper det lite å
                   ha en app
på nett...     •   Hva med de som ikke
                   bruker Android eller
                   iPhone?
Anbefalt lesning
Mobile First             Clour Four Blog
Luke Wroblewski (2011)   http://cloudfour.com/blog/

Responsive Web           Media Queries Blog
Design                   http://mediaqueri.es/
Ethan Marcotte (2011)
Når trenger jeg en app?
...hvis den kommer
Når passer    til å brukes ofte
              ettersom den først må
det å ha en   lastes ned og installeres

app?
.. hvis den bruker
Når passer        innebygget
                  funksjonalitet
det å ha en       eksempelvis
              •   kamera
app?          •   lydopptak
              •   gyroskop
              •   adressebok
              •   sms
–   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
Hvem
Klarer du   skal bruke appen?
            Hva
svare på    skal de bruke appen til?
            Når
hva appen   skal de bruke appen?
            Hvor
din skal    skal de bruke appen?
            Hvorfor
gjøre?      skal de bruke appen?
Hvem, hva, hvor, når
og hvorfor?
Eiere av Miele-maskiner
kan styre kjøkken-
apparatene sine
når de ikke er på kjøkkenet
men likevel er hjemme
og det gidder de fordi de
har så stort hus, kanskje?
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
                                 sykkelstaiv



Foto: Aktiv i Oslo CC-BY-NC-ND
Finne
Luke Ws      jeg lurer på noe akkurat nå

fire         Leke
             jeg kjeder meg
brukstyper
             Sjekke
             jeg må være oppdatert

             Lage
             jeg må gjøre dette nå
Finne
Luke Ws      Wikipedia, Kart, 1881,
             Trafikanten, MatPrat
fire         Leke
             Angry Birds, RSS-leser,
brukstyper   Facebook, Twitter
             Sjekke
             E-post, Facebook, Yr,
             Kalender, Fotballkamp
             Lage
             Kamera, Keynote, Blogg
Mikro-jobbing
Josh Clarks   jeg vil gjøre noe nyttig

tre
              Kjedsomhet
brukstyper    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
Mikro-jobbing
Josh Clarks   E-post, Kalender,
              Wikipedia, 1881, MatPrat,
tre           Keynote, Blogg
              Kjedsomhet
brukstyper    Wikipedia, Angry Birds,
              RSS-leser, Twitter,
              Facebook, Fotballkamp
              I nærheten
              Kart, Trafikanten, Yr,
              Kamera
Anbefalt lesning
Tapworthy
Josh Clark (2010)

Slik designer du app for nettbrett på 1-2-3-4
Live Grønlien
http://bit.ly/nettbrettapp
Hva med de ulike
plattformene?
Mobil: Hva bør du tenke på?
+   =
Foto: Flickr-bruker reticulating CC-BY-NC-ND
Foto: Flickr-bruker Mike Babcock CC-BY
Mobil: Hva bør du tenke på?
http://kiddynamitesworld.com/happy-halloween-from-oscar-mr-griffey
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å?
Hvorfor ser de så ulike
ut?
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å?
Ja:
Hva kan      Konsept
             Overordnet
jeg ta med   informasjonsarkitektur

meg?         Nei:
             Detaljert
             interaksjonsdesign
             Detaljert grafisk design
Anbefalt lesning
Finn.no webstatistikk
http://labs.finn.no/tema/finn-statistikk/
Design for små skjermer
og touch
7 spørsmål
1. 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?
1. Ligger det viktigste
øverst?
Mobil: Hva bør du tenke på?
Luke Wroblewski: Mobile First
http://dcurt.is/3-point-5-inches/
• Legg derfor det du vil at
1. Ligger         folk skal se først øverst på
                  skjermen
viktig info   •   Knapper som brukes ofte
                  bør legges lengst ned på
øverst?           skjermen
              •   ...Men ikke legg menyen
                  nederst på Android-apper
2. Er det tydelig hva
man kan trykke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
• Bruksanvisninger er en
2. Er det         farlig sovepute, og overses
                  ofte av brukerne
tydelig hva   •   Sørg for at trykkbare
                  elementer skiller seg ut
man kan
trykke på?
3. Kan du bruke den
med en tommel-tott?
Mobil: Hva bør du tenke på?
• Ikke vær redd for å gjøre
3. Kan du       touch-elementer for store!
                Vanlig minimum er 7mm x
bruke den       7mm
            •   Sørg for stor nok plass
med en          mellom ulike touch-
                elementer
tommel-
tott?
4. Klarer man seg uten
gestures?
http://lukew.com/touch
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
• Sørg for at det alltid er en
4. Klarer       vei til alle handlinger uten
                å måtte bruke gestures
man seg     •   Bruk gestures som
                snarveier, ikke primær
uten            navigasjon

gestures?
5. Har du kuttet alt du
kan kutte?
Mobil: Hva bør du tenke på?
• Jo mer funksjonalitet
5. Har du        appen din har, jo
                 vanskeligere blir det å
kuttet alt       forklare hva den gjør
             •   Jo mer du putter inn på en
du kan           skjerm, jo mindre
                 oppmerksomhet får hvert
kutte?           enkelt element
             •   Hold antall instillinger til
                 et minimum, og gjør heller
                 gode valg for brukerne
6. Har du tydelige
handlings-drivere?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
• Sørg for at du vet hva du
6. Har du        vil at brukeren skal gjøre
                 på hvert skjermbilde
tydelige     •   Ha tydelige veier videre,
                 for eksempel i form av
handlings-       knapper og inputfelter

drivere?
7. Har du
vært
konsekvent?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
• Er bruken av begreper og
7. Har du       ikoner konsekvent mellom
                ditt mobile nettsted,
vært            desktopnettsted og app?
            •   Er appen eller mobilsiden
konsekvent?     konsekvent innad, i bruken
                av begreper og
                interaksjonselementer?
            •   Er appen din konsekvent
                med plattformen?
Anbefalt lesning
Tapworthy                TappGala
Josh Clark (2010)        http://tappgala.com

Mobile First             Lovely UI
Luke Wroblewski (2011)   http://lovelyui.com
Prototyping og
brukertesting
• Brukerne har hatt
Hvorfor       smarttelefoner kortere enn
              de har vært på nett
bruker-   •   Konvensjonene er mer
              utydelige på særlig iPad,
teste?        Android og mobilsider
          •   Test før du er ferdig
Anbefalt lesning
Mobile UI Patterns
http://mobile-patterns.com/

Pttrns
http://pttrns.com/
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
Mobil: Hva bør du tenke på?
• Folk kan svært få gestures
Noen 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..
• Test på samme mobil som
Når du        folk bruker til vanlig!
          •   Sørg for at utviklere,
bruker-       prosjekteiere og lignende
              er til stede så de selv kan se
tester        hvordan det er å bruke
              appen eller siden du tester
          •   Du kan ikke bare teste med
              mamman din :)
Anbefalt lesning
Invision App             Praktisk
http://invisionapp.com   Brukertesting
                         Toftøy-Andersen & Wold
Gjør det selv: 5 trinn   (2011)
til brukertest
http://bit.ly/
brukertest12345
Takk for oss!

            Ida Aalen
            ida@netliferesearch.com
            45 24 24 12
            @idaAa



Eirik Hafver Rønjum
eirik@netliferesearch.com
924 03 165
@EirikHafver

Más contenido relacionado

Similar a Mobil: Hva bør du tenke på?

Finn feilen før markedet gjør det: brukertest på mobil
Finn feilen før markedet gjør det: brukertest på mobilFinn feilen før markedet gjør det: brukertest på mobil
Finn feilen før markedet gjør det: brukertest på mobilIda Aalen
 
Dirty fingers
Dirty fingersDirty fingers
Dirty fingersJakobT
 
Responsivt webdesign
Responsivt webdesignResponsivt webdesign
Responsivt webdesignSolv AS
 
Trygg på web tana
Trygg på web tanaTrygg på web tana
Trygg på web tanafskj
 
Trygg på web alta
Trygg på web altaTrygg på web alta
Trygg på web altafskj
 
Trygg på web trondheim
Trygg på web trondheimTrygg på web trondheim
Trygg på web trondheimfskj
 
Trygg på web hamar
Trygg på web hamarTrygg på web hamar
Trygg på web hamarfskj
 
Brukervennlig intranett confex_eivind_l
Brukervennlig intranett confex_eivind_lBrukervennlig intranett confex_eivind_l
Brukervennlig intranett confex_eivind_lEivind Lund
 
Trygg på web skien
Trygg på web skienTrygg på web skien
Trygg på web skienfskj
 
Trygg på web
Trygg på webTrygg på web
Trygg på webfskj
 
Trygg på web kristiansund
Trygg på web kristiansundTrygg på web kristiansund
Trygg på web kristiansundfskj
 
Good Bad Ugly Webdagene Jostein
Good Bad Ugly Webdagene JosteinGood Bad Ugly Webdagene Jostein
Good Bad Ugly Webdagene JosteinJostein Magnussen
 
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Veronica Heltne
 
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Yggdrasilkonferansen
 
5 smarte grep for datavisualisering
5 smarte grep for datavisualisering5 smarte grep for datavisualisering
5 smarte grep for datavisualiseringVigleik Norheim
 
Bli en brukertester: Finn feilene før kundene gjøre det
Bli en brukertester: Finn feilene før kundene gjøre detBli en brukertester: Finn feilene før kundene gjøre det
Bli en brukertester: Finn feilene før kundene gjøre detIda Aalen
 

Similar a Mobil: Hva bør du tenke på? (20)

Finn feilen før markedet gjør det: brukertest på mobil
Finn feilen før markedet gjør det: brukertest på mobilFinn feilen før markedet gjør det: brukertest på mobil
Finn feilen før markedet gjør det: brukertest på mobil
 
Dirty fingers
Dirty fingersDirty fingers
Dirty fingers
 
Hvordan lage apper
Hvordan lage apperHvordan lage apper
Hvordan lage apper
 
Apple og apps business or pleasure - 4 nov
Apple og apps   business or pleasure - 4 novApple og apps   business or pleasure - 4 nov
Apple og apps business or pleasure - 4 nov
 
Responsivt webdesign
Responsivt webdesignResponsivt webdesign
Responsivt webdesign
 
Trygg på web tana
Trygg på web tanaTrygg på web tana
Trygg på web tana
 
Trygg på web alta
Trygg på web altaTrygg på web alta
Trygg på web alta
 
Trygg på web trondheim
Trygg på web trondheimTrygg på web trondheim
Trygg på web trondheim
 
Trygg på web hamar
Trygg på web hamarTrygg på web hamar
Trygg på web hamar
 
Brukervennlig intranett confex_eivind_l
Brukervennlig intranett confex_eivind_lBrukervennlig intranett confex_eivind_l
Brukervennlig intranett confex_eivind_l
 
Trygg på web skien
Trygg på web skienTrygg på web skien
Trygg på web skien
 
Trygg på web
Trygg på webTrygg på web
Trygg på web
 
Trygg på web kristiansund
Trygg på web kristiansundTrygg på web kristiansund
Trygg på web kristiansund
 
Good Bad Ugly Webdagene Jostein
Good Bad Ugly Webdagene JosteinGood Bad Ugly Webdagene Jostein
Good Bad Ugly Webdagene Jostein
 
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
Yggdrasil 2016: 13 raske veier til bedre brukerinnsikt (workshop)
 
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
Workshop: 13 raske veier til bedre brukerinnsikt - Målfrid Jordet Ågotnes og ...
 
5 smarte grep for datavisualisering
5 smarte grep for datavisualisering5 smarte grep for datavisualisering
5 smarte grep for datavisualisering
 
App
AppApp
App
 
Tilpasning til mobil
Tilpasning til mobilTilpasning til mobil
Tilpasning til mobil
 
Bli en brukertester: Finn feilene før kundene gjøre det
Bli en brukertester: Finn feilene før kundene gjøre detBli en brukertester: Finn feilene før kundene gjøre det
Bli en brukertester: Finn feilene før kundene gjøre det
 

Más de Ida Aalen

Forelesning i sosiale medier ELE3707
Forelesning i sosiale medier ELE3707Forelesning i sosiale medier ELE3707
Forelesning i sosiale medier ELE3707Ida Aalen
 
Sosiale medier - Forelesning ved ELE3707 BI Nydalen høsten 2015
Sosiale medier - Forelesning ved ELE3707 BI Nydalen høsten 2015Sosiale medier - Forelesning ved ELE3707 BI Nydalen høsten 2015
Sosiale medier - Forelesning ved ELE3707 BI Nydalen høsten 2015Ida Aalen
 
Core model workshop at Confab Intensive 2015
Core model workshop at Confab Intensive 2015Core model workshop at Confab Intensive 2015
Core model workshop at Confab Intensive 2015Ida Aalen
 
The Core Model at UX Camp CPH 2014
The Core Model at UX Camp CPH 2014The Core Model at UX Camp CPH 2014
The Core Model at UX Camp CPH 2014Ida Aalen
 
Sosiale medier ELE3707 våren 2015
Sosiale medier ELE3707 våren 2015Sosiale medier ELE3707 våren 2015
Sosiale medier ELE3707 våren 2015Ida Aalen
 
Swedish Content Day: Content Against Cancer
Swedish Content Day: Content Against CancerSwedish Content Day: Content Against Cancer
Swedish Content Day: Content Against CancerIda Aalen
 
Content against cancer and the core model at EuroIA2014 in Brussels
Content against cancer and the core model at EuroIA2014 in BrusselsContent against cancer and the core model at EuroIA2014 in Brussels
Content against cancer and the core model at EuroIA2014 in BrusselsIda Aalen
 
Core model thinking at the Norwegian Cancer Society - Responsive Day Out Brig...
Core model thinking at the Norwegian Cancer Society - Responsive Day Out Brig...Core model thinking at the Norwegian Cancer Society - Responsive Day Out Brig...
Core model thinking at the Norwegian Cancer Society - Responsive Day Out Brig...Ida Aalen
 
Hvordan et lite budsjett, frie tøyler og veldig kort tid ga et (ganske) unive...
Hvordan et lite budsjett, frie tøyler og veldig kort tid ga et (ganske) unive...Hvordan et lite budsjett, frie tøyler og veldig kort tid ga et (ganske) unive...
Hvordan et lite budsjett, frie tøyler og veldig kort tid ga et (ganske) unive...Ida Aalen
 
Universell utforming. Frokostseminar 27. mai på Månefisken i regi av Netlife ...
Universell utforming. Frokostseminar 27. mai på Månefisken i regi av Netlife ...Universell utforming. Frokostseminar 27. mai på Månefisken i regi av Netlife ...
Universell utforming. Frokostseminar 27. mai på Månefisken i regi av Netlife ...Ida Aalen
 
Using the core model to reach your objectives - Confab Central 2014
Using the core model to reach your objectives - Confab Central 2014Using the core model to reach your objectives - Confab Central 2014
Using the core model to reach your objectives - Confab Central 2014Ida Aalen
 
Få nettstedet du fortjener!
Få nettstedet du fortjener! Få nettstedet du fortjener!
Få nettstedet du fortjener! Ida Aalen
 
Sosiale medier - forelesninger våren 2014
Sosiale medier - forelesninger våren 2014Sosiale medier - forelesninger våren 2014
Sosiale medier - forelesninger våren 2014Ida Aalen
 
7 digitale nyttårsforsetter for 2014. Medietrender 2014
7 digitale nyttårsforsetter for 2014. Medietrender 20147 digitale nyttårsforsetter for 2014. Medietrender 2014
7 digitale nyttårsforsetter for 2014. Medietrender 2014Ida Aalen
 
Webinar: Content against cancer
Webinar: Content against cancerWebinar: Content against cancer
Webinar: Content against cancerIda Aalen
 
ELE3707 Hva sier forskning om sosiale medier? BI høsten 2013
ELE3707 Hva sier forskning om sosiale medier? BI høsten 2013ELE3707 Hva sier forskning om sosiale medier? BI høsten 2013
ELE3707 Hva sier forskning om sosiale medier? BI høsten 2013Ida Aalen
 
Content Against Cancer - CSForum13 Helsinki
Content Against Cancer - CSForum13 HelsinkiContent Against Cancer - CSForum13 Helsinki
Content Against Cancer - CSForum13 HelsinkiIda Aalen
 
Fra gode intensjoner til store donasjoner. Fundraising på kreftforeningen.no
Fra gode intensjoner til store donasjoner. Fundraising på kreftforeningen.noFra gode intensjoner til store donasjoner. Fundraising på kreftforeningen.no
Fra gode intensjoner til store donasjoner. Fundraising på kreftforeningen.noIda Aalen
 
Social Media / University of Oslo's summer school
Social Media / University of Oslo's summer schoolSocial Media / University of Oslo's summer school
Social Media / University of Oslo's summer schoolIda Aalen
 
Slik skriver du e-post som ikke kaster bort din og andres tid
Slik skriver du e-post som ikke kaster bort din og andres tidSlik skriver du e-post som ikke kaster bort din og andres tid
Slik skriver du e-post som ikke kaster bort din og andres tidIda Aalen
 

Más de Ida Aalen (20)

Forelesning i sosiale medier ELE3707
Forelesning i sosiale medier ELE3707Forelesning i sosiale medier ELE3707
Forelesning i sosiale medier ELE3707
 
Sosiale medier - Forelesning ved ELE3707 BI Nydalen høsten 2015
Sosiale medier - Forelesning ved ELE3707 BI Nydalen høsten 2015Sosiale medier - Forelesning ved ELE3707 BI Nydalen høsten 2015
Sosiale medier - Forelesning ved ELE3707 BI Nydalen høsten 2015
 
Core model workshop at Confab Intensive 2015
Core model workshop at Confab Intensive 2015Core model workshop at Confab Intensive 2015
Core model workshop at Confab Intensive 2015
 
The Core Model at UX Camp CPH 2014
The Core Model at UX Camp CPH 2014The Core Model at UX Camp CPH 2014
The Core Model at UX Camp CPH 2014
 
Sosiale medier ELE3707 våren 2015
Sosiale medier ELE3707 våren 2015Sosiale medier ELE3707 våren 2015
Sosiale medier ELE3707 våren 2015
 
Swedish Content Day: Content Against Cancer
Swedish Content Day: Content Against CancerSwedish Content Day: Content Against Cancer
Swedish Content Day: Content Against Cancer
 
Content against cancer and the core model at EuroIA2014 in Brussels
Content against cancer and the core model at EuroIA2014 in BrusselsContent against cancer and the core model at EuroIA2014 in Brussels
Content against cancer and the core model at EuroIA2014 in Brussels
 
Core model thinking at the Norwegian Cancer Society - Responsive Day Out Brig...
Core model thinking at the Norwegian Cancer Society - Responsive Day Out Brig...Core model thinking at the Norwegian Cancer Society - Responsive Day Out Brig...
Core model thinking at the Norwegian Cancer Society - Responsive Day Out Brig...
 
Hvordan et lite budsjett, frie tøyler og veldig kort tid ga et (ganske) unive...
Hvordan et lite budsjett, frie tøyler og veldig kort tid ga et (ganske) unive...Hvordan et lite budsjett, frie tøyler og veldig kort tid ga et (ganske) unive...
Hvordan et lite budsjett, frie tøyler og veldig kort tid ga et (ganske) unive...
 
Universell utforming. Frokostseminar 27. mai på Månefisken i regi av Netlife ...
Universell utforming. Frokostseminar 27. mai på Månefisken i regi av Netlife ...Universell utforming. Frokostseminar 27. mai på Månefisken i regi av Netlife ...
Universell utforming. Frokostseminar 27. mai på Månefisken i regi av Netlife ...
 
Using the core model to reach your objectives - Confab Central 2014
Using the core model to reach your objectives - Confab Central 2014Using the core model to reach your objectives - Confab Central 2014
Using the core model to reach your objectives - Confab Central 2014
 
Få nettstedet du fortjener!
Få nettstedet du fortjener! Få nettstedet du fortjener!
Få nettstedet du fortjener!
 
Sosiale medier - forelesninger våren 2014
Sosiale medier - forelesninger våren 2014Sosiale medier - forelesninger våren 2014
Sosiale medier - forelesninger våren 2014
 
7 digitale nyttårsforsetter for 2014. Medietrender 2014
7 digitale nyttårsforsetter for 2014. Medietrender 20147 digitale nyttårsforsetter for 2014. Medietrender 2014
7 digitale nyttårsforsetter for 2014. Medietrender 2014
 
Webinar: Content against cancer
Webinar: Content against cancerWebinar: Content against cancer
Webinar: Content against cancer
 
ELE3707 Hva sier forskning om sosiale medier? BI høsten 2013
ELE3707 Hva sier forskning om sosiale medier? BI høsten 2013ELE3707 Hva sier forskning om sosiale medier? BI høsten 2013
ELE3707 Hva sier forskning om sosiale medier? BI høsten 2013
 
Content Against Cancer - CSForum13 Helsinki
Content Against Cancer - CSForum13 HelsinkiContent Against Cancer - CSForum13 Helsinki
Content Against Cancer - CSForum13 Helsinki
 
Fra gode intensjoner til store donasjoner. Fundraising på kreftforeningen.no
Fra gode intensjoner til store donasjoner. Fundraising på kreftforeningen.noFra gode intensjoner til store donasjoner. Fundraising på kreftforeningen.no
Fra gode intensjoner til store donasjoner. Fundraising på kreftforeningen.no
 
Social Media / University of Oslo's summer school
Social Media / University of Oslo's summer schoolSocial Media / University of Oslo's summer school
Social Media / University of Oslo's summer school
 
Slik skriver du e-post som ikke kaster bort din og andres tid
Slik skriver du e-post som ikke kaster bort din og andres tidSlik skriver du e-post som ikke kaster bort din og andres tid
Slik skriver du e-post som ikke kaster bort din og andres tid
 

Mobil: Hva bør du tenke på?

  • 1. Design for fingre og små skjermer Ida Aalen @idaAa
  • 3. Over 10% fra mobil og andre små og store skjermer
  • 8. We’re now faced with a browser landscape [...] with devices becoming smaller and larger simultaneously. Ethan Marcotte Responsive Web Design, s. 6
  • 9. [...] we’re designing for more devices, more input types, more resolutions than ever before. Ethan Marcotte Responsive Web Design, s. 6
  • 10. • Tar som utgangspunkt at Responsive du tilbyr det samme innholdet på alle design plattformer • Det som tilpasses er hvordan dette innholdet vises frem
  • 11. • Tar som utgangspunkt at Mobile 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?
  • 15. 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 nettstedet tilgjengelig ditt? Da hjelper det lite å ha en app på nett... • Hva med de som ikke bruker Android eller iPhone?
  • 16. Anbefalt lesning Mobile First Clour Four Blog Luke Wroblewski (2011) http://cloudfour.com/blog/ Responsive Web Media Queries Blog Design http://mediaqueri.es/ Ethan Marcotte (2011)
  • 17. Når trenger jeg en app?
  • 18. ...hvis den kommer Når passer til å brukes ofte ettersom den først må det å ha en lastes ned og installeres app?
  • 19. .. hvis den bruker Når passer innebygget funksjonalitet det å ha en eksempelvis • kamera app? • lydopptak • gyroskop • adressebok • sms
  • 20. 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
  • 21. Hvem Klarer du skal bruke appen? Hva svare på skal de bruke appen til? Når hva appen skal de bruke appen? Hvor din skal skal de bruke appen? Hvorfor gjøre? skal de bruke appen?
  • 22. Hvem, hva, hvor, når og hvorfor? Eiere av Miele-maskiner kan styre kjøkken- apparatene sine når de ikke er på kjøkkenet men likevel er hjemme og det gidder de fordi de har så stort hus, kanskje?
  • 23. 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 sykkelstaiv Foto: Aktiv i Oslo CC-BY-NC-ND
  • 24. Finne Luke Ws jeg lurer på noe akkurat nå fire Leke jeg kjeder meg brukstyper Sjekke jeg må være oppdatert Lage jeg må gjøre dette nå
  • 25. Finne Luke Ws Wikipedia, Kart, 1881, Trafikanten, MatPrat fire Leke Angry Birds, RSS-leser, brukstyper Facebook, Twitter Sjekke E-post, Facebook, Yr, Kalender, Fotballkamp Lage Kamera, Keynote, Blogg
  • 26. Mikro-jobbing Josh Clarks jeg vil gjøre noe nyttig tre Kjedsomhet brukstyper 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
  • 27. Mikro-jobbing Josh Clarks E-post, Kalender, Wikipedia, 1881, MatPrat, tre Keynote, Blogg Kjedsomhet brukstyper Wikipedia, Angry Birds, RSS-leser, Twitter, Facebook, Fotballkamp I nærheten Kart, Trafikanten, Yr, Kamera
  • 28. Anbefalt lesning Tapworthy Josh Clark (2010) Slik designer du app for nettbrett på 1-2-3-4 Live Grønlien http://bit.ly/nettbrettapp
  • 29. Hva med de ulike plattformene?
  • 31. + =
  • 33. Foto: Flickr-bruker Mike Babcock CC-BY
  • 40. Hvorfor ser de så ulike ut?
  • 47. Ja: Hva kan Konsept Overordnet jeg ta med informasjonsarkitektur meg? Nei: Detaljert interaksjonsdesign Detaljert grafisk design
  • 49. Design for små skjermer og touch
  • 50. 7 spørsmål 1. 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?
  • 51. 1. Ligger det viktigste øverst?
  • 55. • Legg derfor det du vil at 1. Ligger folk skal se først øverst på skjermen viktig info • Knapper som brukes ofte bør legges lengst ned på øverst? skjermen • ...Men ikke legg menyen nederst på Android-apper
  • 56. 2. Er det tydelig hva man kan trykke på?
  • 60. • Bruksanvisninger er en 2. Er det farlig sovepute, og overses ofte av brukerne tydelig hva • Sørg for at trykkbare elementer skiller seg ut man kan trykke på?
  • 61. 3. Kan du bruke den med en tommel-tott?
  • 63. • Ikke vær redd for å gjøre 3. Kan du touch-elementer for store! Vanlig minimum er 7mm x bruke den 7mm • Sørg for stor nok plass med en mellom ulike touch- elementer tommel- tott?
  • 64. 4. Klarer man seg uten gestures?
  • 69. • Sørg for at det alltid er en 4. Klarer vei til alle handlinger uten å måtte bruke gestures man seg • Bruk gestures som snarveier, ikke primær uten navigasjon gestures?
  • 70. 5. Har du kuttet alt du kan kutte?
  • 72. • Jo mer funksjonalitet 5. Har du appen din har, jo vanskeligere blir det å kuttet alt forklare hva den gjør • Jo mer du putter inn på en du kan skjerm, jo mindre oppmerksomhet får hvert kutte? enkelt element • Hold antall instillinger til et minimum, og gjør heller gode valg for brukerne
  • 73. 6. Har du tydelige handlings-drivere?
  • 76. • Sørg for at du vet hva du 6. Har du vil at brukeren skal gjøre på hvert skjermbilde tydelige • Ha tydelige veier videre, for eksempel i form av handlings- knapper og inputfelter drivere?
  • 80. • Er bruken av begreper og 7. Har du ikoner konsekvent mellom ditt mobile nettsted, vært desktopnettsted og app? • Er appen eller mobilsiden konsekvent? konsekvent innad, i bruken av begreper og interaksjonselementer? • Er appen din konsekvent med plattformen?
  • 81. Anbefalt lesning Tapworthy TappGala Josh Clark (2010) http://tappgala.com Mobile First Lovely UI Luke Wroblewski (2011) http://lovelyui.com
  • 83. • Brukerne har hatt Hvorfor smarttelefoner kortere enn de har vært på nett bruker- • Konvensjonene er mer utydelige på særlig iPad, teste? Android og mobilsider • Test før du er ferdig
  • 84. Anbefalt lesning Mobile UI Patterns http://mobile-patterns.com/ Pttrns http://pttrns.com/
  • 88. • Folk kan svært få gestures Noen 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..
  • 89. • Test på samme mobil som Når du folk bruker til vanlig! • Sørg for at utviklere, bruker- prosjekteiere og lignende er til stede så de selv kan se tester hvordan det er å bruke appen eller siden du tester • Du kan ikke bare teste med mamman din :)
  • 90. Anbefalt lesning Invision App Praktisk http://invisionapp.com Brukertesting Toftøy-Andersen & Wold Gjør det selv: 5 trinn (2011) til brukertest http://bit.ly/ brukertest12345
  • 91. Takk for oss! Ida Aalen ida@netliferesearch.com 45 24 24 12 @idaAa Eirik Hafver Rønjum eirik@netliferesearch.com 924 03 165 @EirikHafver