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

Responsive design

• Tar som utgangspunkt at du tilbyr det samme innholdet på alle plattformer

• Det som tilpasses er hvordan dette innholdet vises frem

Mobile first • Tar som utgangspunkt at 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?

Du bør uansett være tilgjengelig på nett...

• Folk bruker mobilen til å - google,- lese e-post,- sjekke Facebook og

Twitter. • Hva møter dem når de

åpner en link til nettstedet ditt? Da hjelper det lite å ha en app

• Hva med de som ikke bruker Android eller iPhone?

Anbefalt lesning

Mobile FirstLuke Wroblewski (2011)

Responsive Web DesignEthan Marcotte (2011)

Clour Four Bloghttp://cloudfour.com/blog/

Media Queries Bloghttp://mediaqueri.es/

Når trenger jeg en app?

...hvis den kommer til å brukes ofteettersom den først må lastes ned og installeres

Når passer det å ha en app?

Når passer det å ha en app?

.. hvis den bruker innebygget funksjonaliteteksempelvis

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

Hvemskal bruke appen?Hvaskal de bruke appen til?Nårskal de bruke appen?Hvorskal de bruke appen?Hvorforskal de bruke appen?

Klarer du svare på hva appen din skal gjøre?

Hvem, hva, hvor, når og hvorfor?Eiere av Miele-maskinerkan styre kjøkken-apparatene sinenår de ikke er på kjøkkenetmen likevel er hjemmeog det gidder de fordi de har så stort hus, kanskje?

Hvem, hva, hvor, når og hvorfor?Bysykkel-medlemmerkan finne sykkelstativ på kartet og hvor nærmeste ledige sykkel ernår de er ute og sykler i Osloså slipper de å lete eller komme frem til et fullt sykkelstaiv

Foto: Aktiv i Oslo CC-BY-NC-ND

Luke Wsfire brukstyper

Finnejeg lurer på noe akkurat nå

Lekejeg kjeder meg

Sjekkejeg må være oppdatert

Lagejeg må gjøre dette nå

Luke Wsfire brukstyper

FinneWikipedia, Kart, 1881, Trafikanten, MatPratLekeAngry Birds, RSS-leser, Facebook, TwitterSjekkeE-post, Facebook, Yr, Kalender, Fotballkamp LageKamera, Keynote, Blogg

Josh Clarks tre brukstyper

Mikro-jobbingjeg vil gjøre noe nyttig

Kjedsomhetjeg vil gjøre noe for å få tida til å gå

I nærhetenjeg vil gjøre noe som har med hvor jeg er å gjøre

Josh Clarks tre brukstyper

Mikro-jobbingE-post, Kalender, Wikipedia, 1881, MatPrat, Keynote, BloggKjedsomhetWikipedia, Angry Birds, RSS-leser, Twitter, Facebook, FotballkampI nærhetenKart, Trafikanten, Yr, Kamera

Anbefalt lesning

TapworthyJosh Clark (2010)

Slik designer du app for nettbrett på 1-2-3-4Live Grønlienhttp://bit.ly/nettbrettapp

Hva med de ulike plattformene?

+ =

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å ulike ut?

Hva kan jeg ta med meg?

Ja:KonseptOverordnet informasjonsarkitektur

Nei:Detaljert interaksjonsdesignDetaljert grafisk design

Anbefalt lesning

Finn.no webstatistikkhttp://labs.finn.no/tema/finn-statistikk/

Design for små skjermer og touch

7 spørsmål

1. Ligger den viktigste informasjonen øverst?

2. Er det tydelig hva man kan trykke på?

3. Kan man bruke appen kun med en tommeltott?

4. Kan man bruke appen uten gestures?

5. Har du tatt bort alt du kan ta bort?

6. Har du tydelige handlingsdrivere?

7. Har du vært konsekvent?

1. Ligger det viktigste øverst?

Luke Wroblewski: Mobile First

http://dcurt.is/3-point-5-inches/

1. Ligger viktig info øverst?

• Legg derfor det du vil at folk skal se først øverst på skjermen

• Knapper som brukes ofte bør legges lengst ned på skjermen

• ...Men ikke legg menyen nederst på Android-apper

2. Er det tydelig hva man kan trykke på?

2. Er det tydelig hva man kan trykke på?

• Bruksanvisninger er en farlig sovepute, og overses ofte av brukerne

• Sørg for at trykkbare elementer skiller seg ut

3. Kan du bruke den med en tommel-tott?

3. Kan du bruke den med en tommel-tott?

• Ikke vær redd for å gjøre touch-elementer for store! Vanlig minimum er 7mm x 7mm

• Sørg for stor nok plass mellom ulike touch-elementer

4. Klarer man seg uten gestures?

http://lukew.com/touch

4. Klarer man seg uten gestures?

• Sørg for at det alltid er en vei til alle handlinger uten å måtte bruke gestures

• Bruk gestures som snarveier, ikke primær navigasjon

5. Har du kuttet alt du kan kutte?

5. Har du kuttet alt du kan kutte?

• Jo mer funksjonalitet appen din har, jo vanskeligere blir det å forklare hva den gjør

• Jo mer du putter inn på en skjerm, jo mindre oppmerksomhet får hvert enkelt element

• Hold antall instillinger til et minimum, og gjør heller gode valg for brukerne

6. Har du tydelige handlings-drivere?

6. Har du tydelige handlings-drivere?

• Sørg for at du vet hva du vil at brukeren skal gjøre på hvert skjermbilde

• Ha tydelige veier videre, for eksempel i form av knapper og inputfelter

7. Har du vært konsekvent?

7. Har du vært konsekvent?

• Er bruken av begreper og ikoner konsekvent mellom ditt mobile nettsted, desktopnettsted og app?

• Er appen eller mobilsiden konsekvent innad, i bruken av begreper og interaksjonselementer?

• Er appen din konsekvent med plattformen?

Anbefalt lesning

TapworthyJosh Clark (2010)

Mobile FirstLuke Wroblewski (2011)

TappGalahttp://tappgala.com

Lovely UIhttp://lovelyui.com

Prototyping og brukertesting

Hvorfor bruker-teste?

• Brukerne har hatt smarttelefoner kortere enn de har vært på nett

• Konvensjonene er mer utydelige på særlig iPad, Android og mobilsider

• Test før du er ferdig

Anbefalt lesning

Mobile UI Patternshttp://mobile-patterns.com/

Pttrnshttp://pttrns.com/

Noen ting vi har lært av bruker-tester...

• Folk kan svært få gestures• Ikke legg menylinjen

nederst på skjermen på Android

• Bruk lokasjon som hjelp, ikke som tvangstrøye

• Menyknappen lite brukt på Android

• Augmented Reality er ikke alltid like nyttig..

Når du bruker-tester

• Test på samme mobil som folk bruker til vanlig!

• Sørg for at utviklere, prosjekteiere og lignende er til stede så de selv kan se hvordan det er å bruke appen eller siden du tester

• Du kan ikke bare teste med mamman din :)

Anbefalt lesning

Invision Apphttp://invisionapp.com

Gjør det selv: 5 trinn til brukertest http://bit.ly/brukertest12345

Praktisk BrukertestingToftøy-Andersen & Wold (2011)

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

Ida Aalenida@netliferesearch.com45 24 24 12@idaAa

Takk for oss!