Skifte beite? Gresset er grønnere hos oss
Sammen sprenger vi grenser for hva web kan være. Vi ser spesielt etter: Tekstforfattere, prosjektledere, designere og interaksjonsdesignere.
Papp-prototyping – slik gjer du det 9
I tråd med Lars sin bloggpost Lightbox: Årets interaksjonsdesignteknikk? om bruk av bakepapir for prototyping kjem her ei oppfølgjing med ei oppskrift i sju trinn for vellukka papp-prototyping.
For å sikra eit godt resultat bør du som forarbeid alltid setja deg inn i kva strategien og måla med nettstaden er, kven det er som skal bruka nettstaden, kva dei skal gjera der, samt sjå på kva innhald som må inn for å støtta desse oppgåvene. Så er du klar til å setja igang.
Til prototypinga treng du:
- 1 A3 ark
- Papp i ulike fargar
- Saks
- Teip
- Tac-it/blue-tec
- Kamera
- Pennar
Slik gjer du det:
- Bakgrunn. Bruk et liggande A3-ark som bakgrunn og legg den på eit bord. Det passar sånn omlag med eit skjermutsnitt. Her kan du teikna opp faste element som logo, søkefelt og anna som skal gå igjen på alle sidene.
- Menyelement, vindauge og lenker. Klypp ut papp-bitar i ulike fargar. Forsøk å la like element ha lik farge. T.d at alle menyelementa er gule, lenker er blå osv.
- Tekst. Skriv på for hand og bruk ein tydeleg penn slik at det vert lett å sjå teksten sjølv etter at det er fotografert og digitalisert.
- Knappar. For å få desse til å stå litt ut kan du putt ein liten klump med tack-it/blue-tec under.
- Skrollbar. Fiffig detalj å laga denne slik at du kan visa ulike skjermutsnitt frå ei lang side. Klipp ut ei lang remse som du så teipar fast ein ny papp-bit på. Denne kan du så flytta opp og ned etter kva del av sida du viser.
- Lightbox. Putt eit bakepapir over skjermbiletet og legg ein boks med det innhaldet du vil ha oppå den (eksempel finn du i bloggposten Lightbox: Årets interaksjonsdesignteknikk?)
- Fotografering. Ta bilete av sida rett ovanfrå. Dersom du treng å forklara meir kan du lima ho inn i eit passande program og skriva punktvise forklaringar til skjermutsnittet.
Fordelen er at dersom du ikkje vert fornøgd kan du bare plukka av det du ikkje likar og leggja på nye element. For å laga ei ny side kostar du av alt og startar frå byrjinga igjen. Bruk gjerne element fleire gonger eller modifiser dei slik at dei passar. På denne måten køyrde me 3 iterasjonar av konseptprototypinga i forrige prosjekt der me brukte denne teknikken.
Kva synst me om teknikken?
- I tidleg konseptuvikling klarar ein betre å halda fokus på det konseptuelle i staden for på detaljane (pixelfiksing og anna). Dette gjeld både i prosjektgruppa og i kommunikasjon med kunden.
- Ein vert meir villig til å føreta endringar og laga fleire versjonar. Det er enkelt å flytta rundt på ting og å klyppa ut nye element.
- Unngår at kunden heng seg opp i utsjånaden til prototypen, noko som uansett ikkje er klart så tidleg i utviklinga.
- Det er relativt enkelt å laga ein klikkbar prototype ved å ta bilete av sidene og lenka dei saman ved hjelp av image-maps og litt html-triksing.
- I brukartestar skjønar testpersonen at dette er ikkje ei ferdig nettside, og terskelen for å koma med kommentarar og innspel kan verta lågare.
Men det er ikkje alltid at det vil fungera
- Dersom ein kjem inn seinare i eit prosjekt, der t.d grafisk profil er gitt, kan det fungera betre å halda seg til denne i prosjektet.
- Er det viktig for kunden at prototypen er tett opp til målbiletet i prosjektet er ikkje papp og papir tingen.
- På ein nettstad med mykje animasjon og ajax kan papp-prototyping bli ganske tungvindt.
Kva trur de? Er dette ein teknikk de kjem til å prøva?
Jon Gunnar Wold, 25.08.2008 08:50
Jeg er stor tilhenger av papirprototyping og har brukt det i mange sammenhenger. En favoritt er å lage en mal i photoshop med det aktuelle rammeverket ferdig tegnet, dvs bakgrunn, meny, logo osv. Veldig ofte er det begrensede deler av siden som skal endres. Det gjør også to ulike papirversjoner av samme problemstilling sammenlignbare.
Jeg er uenig i at Ajax gjør det vanskeligere. Tvert i mot synes jeg papir egner seg bedre enn photoshop, ppt, osv. som mockup for avansert interaksjon. Med papirlapper, tape, flapper og litt bretting (vi snakker ikke origami-nivå her) så kan mye demonstreres med litt innlevelse og kreativitet. Selv avanserte fade-out effekter kan lett illustreres: F.eks: Brukeren peker på linken, så blåser du bort lappen fra skissen… :-)
Elf, 25.08.2008 09:48
Jeg bruker ofte prototyping på papir når jeg utvikler nye løsninger i Lotus Notes, eller når jeg skal endre GUI på en eksisterende løsning. Min opplevelse er at det å komme til et møte med brukere av systemet hvor de selv kan få være med å tegne, klippe og lime sammen et GUI, under veiledning av meg som vet hva som vil fungere og ikke, gjør at brukerne er langt mer involverte enn de ellers ville vært. De er også langt mer positive til å bruke systemet etterpå.
Det å komme med ferdigtegnede forslag i Photoshop eller andre grafiske verktøy gjør at folk er langt mindre villige til å komme med ideer og forslag. De tenker gjerne “oj, dette har han virkelig jobbet med” og derfor er de mindre villige til å komme med innspill.
Jon Olav, 25.08.2008 14:59
“På ein nettstad med mykje animasjon og ajax kan papp-prototyping bli ganske tungvindt.”
Har de erfaringar eller tips for enkel prototyping av animasjon som del av GUI? Kanskje storyboard og Flash kan vere nyttig?
Sjå for øvrig tilsvarande debatt på Origo.
Anders Hofseth, 25.08.2008 15:15
Jeg elsker dette, men har du ikke rett og slett funnet opp flanellografen på nytt? ;)
Kari Hamnes, 27.08.2008 08:17
Ad. animasjon som del av GUI, i papp-prototypingssammenheng (Jon Olav):
Som Martha nevner i innlegget, så har vi laga klikkbare prototyper av papp-prototyper ved å bruke imagemapping. For at elementene (særlig input-felter) skal invitere mer til interaksjon kan man legge FORM-elementer på toppen.
Ad. animasjon så skulle vi i et tilfelle simulere en prosess med flere statusmeldinger underveis, og brukte da rett og slett flere sider og en REFRESH i HEAD-elementet i HTML-filen med url til neste fil i sekvensen. Ren tegnefilm, altså. Denne varianten laster hele siden, men man kunne også brukt animert GIF.
Vi har ikke brukt disse papp-prototypene direkte i brukertesting, og jeg har ikke personlig noen erfaring med “in test”-animasjon for papp-prototyping (jfr. “blåse bort lappen”). Tror fort vekk det ville blitt et noe rekonfiguerert grensesnitt etter blåsingen, siden alle elementene ligger løst :-)
Man trenger ikke kjempedyre verktøy for å prøve ut animasjon med papp-prototyping fordi det ikke krever nøyaktig finish. Selv ultrakjipe webcams kommer ofte med stop-motion animation software som man kan bruke for raskt å teste en bestemt animasjon uten å programmere.
Når det gjelder animasjon som del av GUI mer generelt finnes det jo mange verktøy for dette. Det er det sikkert andre som kan si mer om enn meg :-)
Nettleif, 27.08.2008 19:32
Hei, og takk for en fin artikkel.
Den siste tida har jeg eksperimentert litt med prototyping selv. Papir fungerer kanskje for noen, men jeg har et bedre alternativ:
I Word kan dere lage tabeller. I tabellene kan dere slå sammen celler både på langs og tvers, og deretter fylle cellene med grafiske elementer eller tekst.
Når dere er ferdige, kan dere lagre dokumentet som en webside. Ja, det er faktisk mulig i Word.
Fremgangsmåten har to fordeler:
1) Dokumentet blir en webside som egner seg godt å presentere.
2) Andre kan jobbe videre med kildedokumentet (Word-fila) til de er fornøyd med resultatet.
Lykke til!
Sigrun, 28.08.2008 12:41
Jeg er enig i at å lage papirprototyper som man tar bilder av er en fin metode for konseptutvikling. Jeg lurte på om dere også gjennomfører brukertester med papirprototypene? Ref. Carolyn Snyders definisjon av papirprototyping (som nok kan sies å være litt vel snever):
“Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.”
Kari Hamnes, 02.09.2008 15:41
Ad. brukertesting med papp-prototyper:
Ja, vi har brukertesta papp-prototyper, men ikke helt som Snyder definerer det. Vi har gjort de digitale bildene av papp-prototypen klikkbare ved hjelp av imagemaps for lenker og FORM-elementer på inputfelter og knapper. Da kan vi brukerteste på vanlig vis i labben, og gjøre både skjermopptak og evt. kjøre eye-tracking.
Hvis man kjører brukertest på selve papp-prototypen (slik Snyder skriver), så blir det tungvint på flere vis:
prototypen er sårbar for nys og sukk fra brukerne (papp-bitene blåser utover)
man får ikke observert hva brukeren gjør uten å henge over testpersonen (eller ha et kamera hengende)
det tar mer tid og krever mye av moderator (må “huske” prototypen og interaksjonen og legge opp riktige papp-biter etter hva brukeren gjør)
En digital og interaktiv variant av papp-prototypen gjør brukertestingen både enklere og mer realistisk, samtidig som den har den ønskede effekt at både bruker og kunde ser prototypen som “a work in progress” og kan kommentere på det.
Det som vi også har planer om å gjøre er å bruke papp-prototyping for brukerinvolvering i behovsfasen. Brukerne kan selv klippe ut og legge på de typer innhold og funksjoner som de ønsker seg, evt. kan man starte med et utkast som de kan endre på. Papp-prototyping i denne sammenhengen kan sees som dybdeintervju med “rekvisitter” :-)
Ole Andreas Alsos, 24.11.2008 08:52
Et av problemene med papirprototyper er at scrolling er vanskelig å få til. Her er en løsning på det problemet.