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:

1. 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.
2. 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.
3. 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.
4. Knappar. For å få desse til å stå litt ut kan du putt ein liten klump med tack-it/blue-tec under.
5. 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.
   
6. 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?)
7. 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?

Eksempel på bruk av lightbox ved registrering på netvibes.com

Teknikken ble først introdusert som en måte å vise bilder på, men finnes nå i flere varianter som gir muligheter for animasjoner og posisjonering. Den kjennetegnes også ved at den er lett å implimentere, det finnes flere gratis biblioteker (lightbox, thickbox, facebox).

Vi har også funnet et triks for å simulere lightbox når man papirprototyper. Ved å legge matpapir over prototypen dimmer man enkelt ned området rundt for eksempel en dialogboks, og kan lettere spille ut interaksjonen og få tilbakemelding der hvor lightbox er et viktig interaksjonselement.

Lightbox kan enkelt simuleres ved hjelp av matpapir i en papirprototype

Nielsen trekker frem hovedfordelen ved lightbox: Den er umulig å ikke bli lagt merke til av brukeren.

Han lister også opp noen ulemper som vi har lyst til å gjengi her, fritt oversatt:

• En lightbox stanser brukeren fullstendig i sitt arbeid. Ikke bruk det til lavprioritetselementer eller bakgrunnsinformasjon.
• Dette er modale dialogbokser til det ekstreme. Det er teoretisk mulig å støtte interaksjon i det dimmede området, men noe som er dimmet bør være inaktivt.
• Brukere må ofte referere til informasjon i bakgrunnen for å kunne avgjøre det som kommer frem av dialogboksen. Hvis bakgrunnen er dimmet for mye, kan den informasjonen være vanskelig å lese.

Vår erfaring tilsier at bruken av lightbox også må støtte tilbakeknappen i nettleseren. Mange brukere klikker på tilbakeknappen når de føler at de ikke kommer nærmere målet sitt. Da er det viktig at brukeren kommer tilbake der den var før lightboxen tok kontrollen.

Vi er også litt usikre på om lightbox ikke egner seg for bakgrunnsinformasjon, slik Nielsen hevder. Teknikken ble introdusert som en måte å vise bilder på, uten å ta brukeren ut av kontekst. På samme måte kan den fungere fint å vise utdrag av tekst eller viktig informasjon, der hvor denne informasjon trenger å være i fokus – uten å ta brukeren ut av kontekst.

Har du eksempler eller opplevelser på god eller dårlig bruk av lightbox, kommentér eller lenk gjerne til det her.