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…

Datatåke

Sitter med analysen til masteroppgaven min og føler en blanding av dyp innsikt og mangel på oversikt på samme tid, jeg veksler mellom panikk-angst for å ikke rekke over det hele til en følelse av å ville drive med forskning resten av livet.

13 iphonebrukere er dybdeintervjuet, halvparten har møtt hverandre i fokusgruppe, resten har reflektert i dagbøker og tatt bilder av hverdagen sin med iphone. Nesten 150 000 ord og 34 bilder med rådata. Ville delt mer av arbeidet her på bloggen, men jeg prøver å nøste tråder og det tar tid.

Jeg beundrer Agnete og Hege som gjør blogg til prosess og prosess til blogg, følg det spennende diplomarbeidet deres på ready, set, go back.

Ideelle ben

Theo Jansen vil skape liv og vil gjøre det fra scratch. Trondheim Matchmaking hadde invitert ham til Trondheim høsten 2007 hvor han fortalte om arbeidet sitt med å skape liv på strendene i Nederland ved hjelp av plastikkrør og vannflasker.

På Kreator 09 møtte jeg på en variant av skapningene hans i form av en Legorobot. Roboten hadde fått ben designet etter den ideelle formelen til Jansen. Den beveger seg stabilt og raskt, akkurat som de store plastbeistene på strendene i Nederland.

Hver del av hvert ben er nøye beregnet til å gi den beste bevegelsen ut i fra energioverføringen. Jansen kaller bestanddelene av plastdyrene sine for gener, og hevder at om han lever i 15 år til vil han få de til å reprodusere seg.

Se presentasjonen hans på TED talks for å oppleve mer av hva denne fascinerende mannen har viet de siste 20 årene av livet sitt til.

Hver URL er et potensielt nettsamfunn

Jeg har brukt flickr en stund og blir fortsatt fascinert over engasjement et enkelt bilde kan skape. Det er en inntagende møteplass, både personlig og offentlig på en gang. Jeg deler det jeg er opptatt av og de som deler interessen for det samme kan delta i samtalen med meg og andre.

For å gi noen eksempler på hva jeg mener, vil jeg vise et gammelt bilde og et fra i vinter, og gi et tips til NRK.

For snart tre år siden mistet Agnete powerbooken sin fra surfebenken og ned i gulvet. Skjermen knuste og det ble en dyr reparasjon.

Don't drop your powerbook

Bildet fikk fort kommentarer fra venner, med både spørsmål og sympatierklæringer.

Kommentarer på bilde av powerbook med knust skjerm

Ikke bare kan venner dele denne smertefulle opplevelsen (ja, noen av oss får et veldig nært forhold til verktøyene våre) gjennom bildet, andre med tilsvarende opplevelser kan også fortelle sin erfaring. Vi møtes rundt bildet med en opplevelse vi kan dele. En flickr-bruker jeg ikke kjente fra før deltar med lenke til en bloggpost hvor han beskriver samme problem og hvordan han fikset det.

Kommentar om hvordan skjermen kan repareres

Jeg vet ikke motivasjonen hans for å delta med tips og hjelp, men tror det har med samme mellommenneskelighet man finner hos for eksempel en turist som får tips fra en tilfeldig lokal om en attraksjon som er verdt å se.

På flickr virker det helt tilfeldig hva som fanger brukernes interesse. Jeg ville ikke forventet at et bilde av en hæl med gnagesår ble en tråd med tips om hvordan man kan unngå det, men jeg er veldig glad for det skjedde.

Bilde av gnagesår starter tipsdiskusjon

Både den ødelagte laptopen og hælen med gnagesår er ting jeg kan snakke med venner og familie om, men her blir det hendelser og situasjoner som jeg deler helt uventet med nye og andre bekjente. Noen ganger ville jeg kanskje aldri delt det med noen i det hele tatt, fordi det i noen situasjoner kan oppleves for dagligdags eller uinteressant.

Gather, share vs. share, gather

Clay Shirky, som har skrevet boka Here comes everybody, snakker om hvordan vår tids nye teknologier uvikler seg og får oss til å utfolde oss i nye grupper som gjør nye ting på nye måter. Tidligere måtte vi samles for å dele. Uansett hvilke interesser det gjaldt, måtte en møteplass fasiliteres, som ofte også satte tid og sted som premisser. Internett og sosiale nettjenester fasiliterer og tilrettelegger for det motsatte: vi kan dele og så møtes.

Every URL is a potential community

På mp3-spilleren min har jeg to favorittpodkaster: NRK P2s Verdt å vite og BBC’s Digital Planet. Supre programmer som tar opp aktualiteter innen teknologi og vitenskap. Jeg kan høre om spennende tema som jeg vil lese mer om, eller jeg kommer på noe jeg hørte på en podkast fra i høst, men jeg klarer ikke finne igjen programmet eller detaljene i det som ble fortalt uten å måtte høre igjennom alle de siste podkastene på ny. Programoversikten til Verdt å vite ser slik ut:

Programsiden til Verdt å vite på nrk.no

Jeg kan verken lete opp eller lenke til det programmene tar opp. Hva om hvert program av P2s Verdt å vite hadde vært en møteplass hvor emnene kunne samles, lenkes til og diskuteres?

Ryktene sier at Digital Planet vil lage et tekstarkiv med innhold på programepisodene for framtiden, men jeg klarer ikke finne annet enn informasjon om siste episode. Og jeg kan ikke lenke til den eller delta i noen samtale der.

Bildene på flickr er et nettsamfunn, likeså bloggpostene med kommentarer her i bloggen. Artikler i nettavisene prøver å bli det og radioprogrammene til NRK og BBC burde være det.

Om du ikke har hørt det Clay Shirky snakker om tidligere, anbefaler jeg disse to presentasjonene. De er både en vekker og en god a-ha opplevelse:

Hva er informasjon?

Selv om de fleste av oss tror vi vet hva vi mener når vi sier “informasjon”, hevder denne videoen at vi av og til forveksler mediumet med beskjeden (via Arne Krokan og information aestetichs)

Utdrag fra kommentarene til bloggposten:

What happens to learning that has no identifiable immediate objective? Or getting something from information that is completely different from what the author intended? Or absorbing information that has no other purpose than the joy of finding out something new? [...] Information is anything that communicates facts to increase understanding of the world. Methods of doing this might be more or less appropriate for a given objective or audience [...]

Information is anything that diminishes uncertainty

[...] information is a temporary result of a relational process. It’s actually the work to give a form. To put In a Form. And this form has to be recognized. It’s only when I’m satisfied with one of your answers, and when you’ve checked someway that I’m not missing something that information exist. In a way the problem is not What is information?, but When is information?

Information is news of difference. When it’s a difference that makes a difference it has meaning.

The point that is being made here is related to the definition of information [...] The distinction between information, data, and knowledge. The cups, an orange, a green and a red cup… are all data until they are given context and made relevant in the way that the film is talking about. It’s at that point the orange cup becomes “information”.

Se også

Interaction ‘09 Designing Natural Interfaces

Nathan Moody fra stimulant.io forteller om sitt arbeid med å designe for naturlige grensesnitt og multitouch, som i all hovedsak dreier seg om å lage interface til datamaskiner som ikke ser ut som datamaskiner. Det handler om direktemanipulering av objekter og innhold, grensesnittet må være lett å forstå og forutsigbart.

Innholdet er grensesnittet.

Alle som jobber med GUI har kunnskapen til å jobbe med NUI. Men for å gjøre en god jobb må du ‘undo’ en del kunnskap om hvordan brukeren skal manipulere data.

Hvordan jobber de?

Prosess: Konseptuell design; Iterasjon på papir, storytelling boards.

Resultater: Interaksjonsdesign; De lager et visuelt språk for å illustrere, hvordan dobbelklikker du, hvordan slette et objekt, osv. Dette lager de også wireframes på.

Resultater: Previz; previsualiseringer som viser hvordan ting skal fungere gjennom eksempler. Designere og utviklere referere bare til “the movie” hvis det er diskusjon om hvordan en interaksjon skal være.

Prototyping: Work at scale! Dette er kritisk, du må få en følelse av hvordan designet henger sammen. De monterer spesialtilpassede test-oppsett for å teste, samtidig som de tester når designet i riktig miljø.

Han viser flere produkter de har gjort, det meste bakprojektert multitouch.

Utfordringer:

  • Håndtere brukerforventninger
  • Fasilitere natural and gestural input
  • Designe storformat interaksjoner
  • Designe for 360 interaksjoner

Han skryter av vanntingen til Microsoft Surface som er utrolig appelerende på folk, de vil prøve den og leke med den.

De har gjort ting som ikke funker hvor stakeholderne har vært negative til det “lekne” og vil heller ha cheezy reklamespots. De arbeider mye med å endre mind set, særlig på klientene.

Virtuelle keyboards er forferdelige, høy error-rate. Prøv å unngå det.

Hvordan endre GUI-vanene?

Du må balansere forventninger fra brukerene. Hvordan lærer du bort at du ikke har en scrollbar på iPhone?

Never control by proxy when you can control directly

Andre forventninger bør du innfri, som for eksempel å beholde lukk-knappen oppe til høyre. Brukerne er vant med det og slike funksjoner er vanskelig å designe annerledes.

Bruk metaforer. Med multitouch går man fra metaforisk til virtuell fremstilling av virkeligheten. Der tradisjonelle datamaskiner er bundet til metaforer kan man med multitouch gjøre den virkelige verden virtuell.

Design for forgivness. Pass på at brukerne ikke føler at de feiler når de utforsker interaksjonsmulighetene. Hver input må høres eller bli gjenkjent, og denne fremmede enheten må gi en slags tilbakemelding slik at brukerne forstår at den er interaktiv.

Ufordringer med input
Det kan være vanskelig å bestemme hvilken finger som tar på skjermen. Surface har fancy matte som regner ut vinkel på skyggen til fingrene. Viktig å huske at dette ikke er to mus som er plugget i maskinen. Sesjonshåndtering og sporing av bruk er viktig. Han kaller tilgjengelighets-aspekter for en akilleshæl ved denne interaksjonsmåten. Og “virtual keyboards suck.”

Mange av løsningene bakgrunnsbelyst. Det gjør at ting ikke ser så skarpt ut når du står nærme. Tenk på menneskets synsevne: Mennesket har ca 220 px i sitt synsfelt, viktig å huske på at brukerne står nærme skjermen og at tekst og grafikk må tilpasses.

Utfordringer ved flerbrukere
Kontekst og egnethet; når gir dette mening? Moody hevdet NUI ikke nødvendigvis egner seg i samarbeidende miljøer, men kan være en bra ting i kompetitive. Gir det noen fordeler?

Hvem har kontrol? Og over hva? Lokal vs global kontroll er viktig på systemnivå, men også for brukerne. En person må kunne gjøre noe uten å stenge for andre brukeres kontroll.

Typiske utfordringer ved table computing er orienteringen, hvilken vei skal grensesnittet vende seg. Disse systemene er ofte mer komfortable å bruke enn vertikale systemer.

Forskjellen mellom hjemmelagde multitouchsystemer og Surface:

  • Optisk visuelt system, du kan orientere ting etter skyggen på dette
  • Objektgjenkjenning
  • Robust SDK - det betyr utrolig mye når det gjelder skalering
  • Det har en god stivhet
  • Det er produktifisert og godt produsert

Noen tanker til slutt

Be natural. Bruk metaforer og getstures som er naturlige.
Be social. Design for interaksjone ovenfor eller utenfor bordet
Be aware. Være imidiate og tilgi uventet input

Idag er ikke ‘natural’ = ‘kjent’. Det må være forutsigbart og mulig å lære uten instruksjoner. Årsak og virkning av en bruker kan bli observert av en annen bruker. Stol på nysgjerrighet. Know your hardware.

Virkelig mimikk har betydning, bruk tid på å forske på hva folk gjør for å lære om dette. Se hvordan folk snakker med hverandre, får råd, hvordan de sykler og utfører aktiviteter.

Lær av andre industrier: spilldesign, industridesign, spesialeffekter, og lignende.

Test som en besatt feiging. Test tidlig og ofte - og på riktig hardware.

Og ja: de får mange henvendelser fra klienter som ønsker å bestille “sånn som Tom Cruise har i Minority Report”. Jeg likte foredraget spesielt godt fordi det ga mange a-ha opplevelser, særlig fokuset på content = interface og viktigheten av å teste i riktig skala og oppsett.

På konferansen fikk jeg teste Surface, det er virkelig et kraftig og sosialt system. Har testet et hjemmelaget multitouch-oppsett tidligere, men det er en helt annen opplevelse å manipulere dataen direkte. NUI is the new loud. Det føles veldig riktig å “ta på data.”

Hva tror du om NUI? Har du spørsmål eller kommentarer, bruk kommentarfeltet…

Interaction ‘09 Parti & The Design Sandwich

Luke Wroblewski tar utgangspunkt i “the mother of all homepage redesigns” når han snakker om holistiske designløsninger: redesign av Yahoo.com, den mest besøkte nettsiden i USA.

Motivasjonen for å finne et rammeverk til holistiske designløsninger har vært et ønske om å minimere subjektive meninger i designarbeidet. Skulle de tatt hensyn til subjektive meninger i arbeidet med yahoo.com ville de fort kommet opp i 10 000+ interessenter.

Både arkitekter og IxD-folk begynner designarbeid med skissing, han trekker flere sammenlikninger mellom de to yrkene. Boken “101 things I learned in architecture shool” beskriver sentrale idéer bak arkitekters arbeid. I boken fant han flere teorier som ha gjenkjente fra sitt eget designarbeid.

En parti er en sentral idé eller konsept bak et bygg. Parti er en designprosess som hever seg over arkitekturen. Du må ha en forståelse av mer enn arkitektur og kontekst. Parti oppstår av de teknologiske mulighetene, markedsfaktorer, innsikt i kunder, gruppering av ressurser, bedriftsstrategi og lignende.

Bruk parti som en veiviser i design av de mange aspektene ved en bygning.

Hvordan brukte Yahoo disse tankene?

De kom opp med idéen om at Yahoo skulle være “the dashboard for what you love on the web”. Luke demonstrerer hvordan de har designet en meny-skuff på venstre side av nettsiden, som kan tilpasses av brukerne. Som en startmeny for web?

Yahoo dashboard

Men det trengs mer enn parti for å designe et nettsted. Luke er glad i design principles, han kaller det “key characterstics to evaluate descisions”. Designprinsipper og parti utgjør tilsammen det han kaller en Design Sandwich.

Hvordan setter de sandwichen ut i praksis?

  • De vurderer alle relevante faktorer; teknologi, kontekst, publikum, etc.
  • Bruker patterns, best practices og testing til å hjelpe arbeidet mot en løsning.
  • Evaluerer løsning ved å sende de gjennom et filter av designprinsipper.

Diagrammet av sandwichen (over) er i skisseform med hensikt: den vil endre seg. Etterhvert som designprosessen går fremover, oppstår det uungåelige komplikasjoner. Krav fra klienter endrer seg, man får ny forståelse av gammel informasjon, testing gir ny informasjon, og så videre.

Det er imidlertid viktig å ikke skrinlegge idéen om parti når ting endrer seg, men bare en dårlig designer vil forsøke å holde på en mislykket parti

Luke hadde spennende poenger i sine referanser til arkitektur, jeg rakk ikke notere alle. Men når han forsøker å gjøre et rammeverk ut av dette, sitter jeg heller igjen med en følelse av at de har erfart hvordan de har arbeidet i ettertid og funnet en modell som beskriver det, heller enn at han tilfører noe nytt med en sandwich-modell som andre kan gjøre samme tilnærming med.

Idéen bak parti kan like gjerne kalles arbeid med konseptuelle modeller. Det er helt grunnleggende i både interaksjonsdesign, det interessante er at Luke finner parareller til andre praktikere og at vi kan lære av hverandre.

Redesign av Yahoo er et enormt arbeid, med mange designere og interessenter som ønsker å være synlig med sitt arbeid. Da er det ryddig for alle å ha definerte patterns og best practice å forholde seg til. Jeg sitter igjen med en følelse av at i den grad sandwich-modellen har verdi for andre er det for prosjekter som har stort omfang og mange deltakere.

Apropos Yahoo og pageviews: Å være den mest besøkte nettsiden er ikke nødvendigvis positivt, denne illustrasjonen viser forsiden til Yahoo og Google fra 1996 til 2005. Google og Yahoo har to vidt forskjellige designstrategier: Google sender deg videre, Yahoo vil holde deg innenfor en portal. Clicks vs pageviews.

Har du kommentarer eller spørsmål til oppsummeringen, bruk kommentarfeltet :-)

Neste side »