Mobil: Hva bør du tenke på?

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. 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 atResponsive du tilbyr det samme innholdet på alledesign plattformer • Det som tilpasses er hvordan dette innholdet vises frem

• 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?

• 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?

Anbefalt lesningMobile First Clour Four BlogLuke Wroblewski (2011) http://cloudfour.com/blog/Responsive Web Media Queries BlogDesign http://mediaqueri.es/Ethan Marcotte (2011)

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 installeresapp?

.. hvis den brukerNår passer innebygget funksjonalitetdet å ha en eksempelvis • kameraapp? • 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

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?

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?

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

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å

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

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

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

Anbefalt lesningTapworthyJosh Clark (2010)Slik designer du app for nettbrett på 1-2-3-4Live Grønlienhttp://bit.ly/nettbrettapp

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 interaksjonsdesign Detaljert grafisk design

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 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?

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 • Knapper som brukes ofte bør legges lengst ned påøverst? skjermen • ...Men ikke legg menyen nederst på Android-apper

2. Er det tydelig hvaman kan trykke på?

• Bruksanvisninger er en2. Er det farlig sovepute, og overses ofte av brukernetydelig hva • Sørg for at trykkbare elementer skiller seg utman kantrykke på?

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 7mm • Sørg for stor nok plassmed en mellom ulike touch- elementertommel-tott?

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 • Bruk gestures som snarveier, ikke primæruten navigasjongestures?

5. Har du kuttet alt dukan kutte?

• 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

6. Har du tydeligehandlings-drivere?

• 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?

7. Har duværtkonsekvent?

• 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?

Anbefalt lesningTapworthy TappGalaJosh Clark (2010) http://tappgala.comMobile First Lovely UILuke Wroblewski (2011) http://lovelyui.com

Prototyping ogbrukertesting

• 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

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 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 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 :)

Anbefalt lesningInvision App Praktiskhttp://invisionapp.com Brukertesting Toftøy-Andersen & WoldGjør det selv: 5 trinn (2011)til brukertesthttp://bit.ly/brukertest12345

Takk for oss! Ida Aalen ida@netliferesearch.com 45 24 24 12 @idaAaEirik Hafver Rønjumeirik@netliferesearch.com924 03 165@EirikHafver

http://bengler.origo.no	197
http://bengler.origo.no.origo2.o5.no	2
http://a0.twimg.com	1
http://origo.no.origo2.o5.no	1

Mobil: Hva bør du tenke på?

by Ida Aalen

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 201

Statistics

Mobil: Hva bør du tenke på? Presentation Transcript