Interaction ‘09 Mobile UX Design Patterns
Jenifer Tidwell, som har skrevet grensesnittbibelen Designing Interfaces - Patterns for Effective Interaction Design, jobber med en ny bok proppfull av best practice for design av mobile tjenester. Hun var kommet til Interaction ‘09 for å fortelle om arbeidet sitt med den boken og presentere noen tentative patterns.
Salget av mobiler for første kvartal var 294 millioner enheter, mot 71 millioner PC’er. Flere titals millioner søk blir gjort via mobil (Tidwell jobber nå for Google), 80% av de er utenfor USA. Noen land søker mer via mobil enn fra PC.
Hva er konsensus for best practice? Det finnes noen guidelines allerede som forteller hvordan en mobil virker og hva som kreves. Hun tipser om sidene littlespringsdesign.com og Alltop.com og forteller at hun jakter etter patterns.
Hun er ingen mobilekspert, så hvor starter man? Mobil interaksjon kjennetegnes ved sterk oppgavefokus. Hun tar utgangspunkt i ‘general purpose’ og ‘always connected‘. Hun fokuserer på touchscreen telefoner som iPhone, enheter med tastatur, som Blackberry og telefoner med keypad (98% verdens mobiltelefoner), samt internet tablets. I jakten etter patterns bar hun med seg iPhone, en kindle, et kamera og en mp3-spiller hele tiden.
iPhone changed the game
Hun fulgte litt av den samme tilnærmingen som med den forrige boka:
- konsensus på best practice
- …men ikke for åpenbart
- spesifikke og utvidbare
- prøvde ikke å dekke alt
Nedenfor gjengir jeg de tentative best practice hun gikk igjennom, i den formen hun presenterte de:
One-column layout

Legg ut innholdet i en skrollende vertikal stack med de mest viktige tingene øverst. La bredden være flytende så den passer innenfor skjermen. Du vet ikkke hvor folden er på disse sidene, fordi enhetene er så forskjelige og kan holdes forskjellig.
Hvorfor
- Unngå horisontal skrolling
- Unngå zooming
- Enheter har ulik skjermbredde (og høyde), så design for fleksibilitet
- Tilpass det viktigste innholdet over folden når siden er lang
Når
- De fleste nettsider og programmer, særlig tekstbasert innhold og skjemaer
Persistent toolbar

Plasser de mest viktige verktøyene i en kort verktøylinje forankret til en av sidene på skjermen. Hun forteller at de har funnet ut at folk liker den øverst, men at de ikke kan generalisere dette.
Hvorfor
- Tykke eller sammensatte verktøylinjer tar for mye plass og brukerne protesterer mot “layer cake effect”
- Ikke tving brukeren til å skrolle siden for å komme til verktøylinjen - minimer skrollingen
Når
- Done, cancel, andre “dialog-ish” kommandoer
- Navigering: tabs, tilbake, etc
- Verktøy bør alltid være tilgjengelig
- Verktøy er små.
Jevnfør Tool overlay (neste pattern…)
Touch tools
Vis bare verktøy i respons til et tastetrykk eller trykk, i et lite, dynamisk overlegg.

Hvorfor
- Brukeren bestemmer når verktøyene er synlige
- Tillater ellers innholdet til å dominere oppmerksomheten
Når
- Verktøyene krever mye plass…
- …men trengs bare av og til
- Ofte brukt til video, bilder, spill, kart
Jevnfør med Persistent toolbar (forrige pattern)
Item markers

Bruk uthevede farger, ikoner og andre visuelle differensieringer i menyer og lister
Hvorfor
- Leseforholdene er sjeldent ideelle - bruk perseptuelle ledetråder for å hjelpe identifisere elementer
- Ingen roll-over hint!
- Ikoner kan forstørre treffområder
- Mobile skjermer er så små at du kan bruke mer intense farger enn normalt
Når
- Menyer (til programmer eller handlinger)
- Lister av objekter med vurderinger (ratings), status, lest/ulest notifikasjoner og annen metadata
Infinite list

I enden av en liste, plasser en knapp som laster inn eller føyer til flere oppføringer til listen
Hvorfor
- Den initielle innlastingen av M oppføringer er rask
- Påfølgende innlasting av N oppføringer, i biter, er også rask (og under brukerens kontroll)
- Brukeren trenger aldri å skifte kontekst ved å gå til en ny side
Når
- Beskjeder, artikler, søkeresultater, hva som helst som er “bunnløst”.
- Brukerne finner mest sannsynlig ønskede oppføringer øverst, men kan trenge å søke videre.
Thumbnail grid

Bruk et lite, mangfoldig rutenett av thumbnailbilder til å representere oppføringer.
Hvorfor
- Kompakt, attraktiv presentasjon av mengder med oppføringer (16+ på større skjermer)
- Firkantede thumbnails gjør de enkelt å treffe for fingre eller styli.
Når
- Objekter er for det meste uniforme i størrelse og type, etc.
- Lite metadata trengs å vises
Carousel

Vis større thumbnails i en linje eller sirkelbue, med den midtre i fokus. Brukeren beveger linjen til venstre eller høyre. Nyttig å se flere ting om gangen. Veldig bra å bruke på touchskjermer.
Hvorfor
- Fokus + innhold = lett identifisering
- Fungerer fint på scroll-and-select hardware
Når
- Metadata bør vises ved hvert element
- Elementene er forskjellige i form, størrelse eller type, men har en åpenbar visuell gjengivelse
Jevnfør en ordinær tekstliste eller med Thumbnail grid.
All-in-one button

Et enkelt treffpunkt i et skjema kan vise en merkelapp, en verdi eller en “rediger” indikator. Android gjør ikke dette, det er veldig synd, fordi de forteller ingen state. Er jeg tilkoblet wifi nå?
Hvorfor
- Store treffpunkter er bedre enn små
- Plasseffektivt og lett-å-bruke erstatninger for rullgardinlister, radioknapper, etc
Når
- Et skjemaelement spør brukeren om å velge fra en liste eller sett med verdier
- Et nytt skjermbilde eller overlegg trengs for å redigere verdien
Two-part button

En enkel knapp eller listeoppføring inneholder et større og et mindre treffpunkt, hver med forskjellig handling.
Hvorfor
- Samlokaliserer relevante handlinger med det aktuelle elementet
- Fjerner behovet for tilleggsbevegelser (for eksempel Androids ‘long click’)
Når
- Et element har en åpenbar primærfunksjon, men også en “rediger” eller “mer informasjon” funksjon
- Brukeren trenger å kjenne til begge
Aggressive autocompletion

Bruk autofullfør hver gang brukeren skriver tekst som i nærheten av forutsigbar. Typing sucks. Autocompletions på fritekst kan være irriterende.
Hvorfor
- Tekstoppføringer går sakte og er utsatt for feil
- Små tastaturer; suboptimalt fysisk miljø som bevegelse, varmt/kaldt, dårlig lys; delt oppmerksomhet; ofte ingen klipp/kopier/lim inn
Når
- Navn, epostadresser, URL’er, søkebegreper, datoer, etc
- Ordinær fritekst etter brukerens skjønn
Textfield clear button

Slett et tekstfelt med ett trykk.
Hvorfor
- Å slette lange strenger med tekst bokstav-for-bokstav er tregt og gir ofte feil
- Noen plattformer har ingen kopier/klipp/lim inn
- Brukerne forventer dette
Når
- Etthvert tekstfelt hvor to millimenter-bredder kan brukes
Share button

Når en bruker finner interessant innhold, la de enkelt sende det til venner via en “share” knapp. Mobil er sosialt. Det sosiale aspektet er viktig, folk vil kommunisere. Google har funnet at folk ikke vil kringaste sin posisjon. La de velge hvem de vil kringkaste til, sine venner og kontaktlister. Offentlig deling eller kringkasting er ofte ikke velkomment i en mobil kontekst.
Hvorfor
- Deling støtter nære sosiale bånd, som er høyt verdsatt blant brukere
- Direktelenker til e-post, meldinger eller sosiale nettverk gjør sidene veldig enkle å dele
Når
- URL’er, medieinnhold, kartlokasjoner, søkeresultater - bruk fantasien!
Micro loading indicators

Når en side eller blokk laster inn, vis en liten progresjonsindikator på stedet hvor brukeren trykket.
Hvorfor
- Tilkoblinger kan være trege eller uregelmessige
- Progresjonsindikatorer fremskynder den tilsynelatende lastetiden
- Forsikrer brukeren om at noe skjer som respons til en handling
Når
- Hver gang brukeren må vente for at noe må laste inn
Rich interconnections
Plassér direktelinker til andre programmer i ditt program eller nettside, og forhåndsutfyll dem med data fra brukerens kontekst. Hun forteller om google maps og hvordan du kan gå fra et sted til directions eller en website eller til en epost eller ta en telefon direkte fra det. Det er vanskelig å skifte mellom apps på en mobil, derfor er dette viktig.
Hvorfor
- En bruker ser bare ett program om gangen og det er en plage å bytte mellom dem
- Mobile enheter har ofte nok kontekst til å tilby intelligente stier mellom applikasjoner
- Du har ingen filsystemer eller utklippstavler (den vanlige måten å flytte rundt på data)
Når
- Telefonnummer i hvilken som helst applikasjon -> Oppringing
- Bilder i kameraet -> last opp eller send som e-post
- Etc.
…og til slutt:
Data in the cloud
Trekk brukerdata som e-post og kontakter fra gjemmesteder i nettverket, og også deres favoritter, historie, profiler og individuelle tilpasninger. Synkroniser automatisk. Veldig uferdig pattern. Folk vil ha dette på mobilen også.
Hvorfor
- Data i skyen er mer tilgjengelig enn personlige datamaskiner
- Gi brukerne det samme arbeidsmiljøet de har på en desktop klient, bare det eksakte brukergrensesnittet er annerledes
Når
- Når som helst?
Dette er tentative patterns
Hvor mye bevis er nødvendig for å si at en pattern er god? Tidwell tror at dette etterhvert kommer til å slutte å være en spesiell kategori innen design, vi kommer alle til å designe for mobil en dag. Hun er redd for at dette skulle forbli segregert fra alt annet. Hun kommenterer også til et spørsmål fra salen at patterns endrer seg over tid i takt med utviklingen, mange dør ut og er ikke relevante lenger heller. De er levende dokumenter. Hun kommer nok til å pensjonere noen patterns i neste versjon av sin bok. Eksemplene vil endre seg, fordi mange er utdatert. Hun understreker at dette er tentative patterns.
Ett annet spørsmål går på hvordan brukeren opplever en totalt annerledes versjon av samme tjeneste. Hvor ‘disruptive’ er det for brukeren? Som forskjellen mellom vanlig facebook og den mobile versjonen? En kommentar til det er hold grensesnittet til systemet ikke til enheten. Hold det til plattformen ikke til ‘desktopen’. Det har også mye med branding å gjøre, at brukeren kjenner seg igjen med grafisk design som er gjenkjennelig. Get the details right and make it look like yours.
Personlig er jeg spent på å se hva boken hennes gir av tillegg til det Apple allerede har nedtegnet i sine guidelines for utvikling av applikasjoner og nettsider til iPhone. Jeg forstod det var en del forventninger til denne presentasjonen på konferansen, men inntrykket mitt er at mange nyvinninger i design av mobil UX allerede er gjort av iPhone. Denne boken kan fort bli et oppslagsverk som i stor grad baserer seg på iPhone sine guidelines, men med et mål om være en mer generell guide til design av grensesnitt for mobile enheter. Hun påpekte underveis i presentasjonen at grunnen til hun brukte så mange skjermklipp fra iPhone var at det var så lett å ta skjermdumper på den…
1 kommentar











RSS til alle artiklene
Følg Lars K på Twitter








