Arkiv for april, 2009

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

onecolumn

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

persistenttoolbar

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.

touchtools

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

itemmarkers

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

infinitelist

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

matrix

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

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

allinonebutton

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

twopartbutton

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

aggressiveautoc

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

textfieldclear

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

share

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

microloading

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…