Fra idé til designskisse – 3 steg for å komme igang

Under dag 1 av årets UX week holdt Rachel Glaves fra Adaptive Path en workshop med tittelen “Good Design Faster, Part 1: Sketching for UX Design”. Hensikten var å vise hvordan man ved enkle grep (og uten spesielle tegneferdigheter) kan skape en felles forstålse for design ved å lage enkle skisser på papir. Følgende er en kort oppsummering av hvordan du kommer igang.

Steg 1: Hva trenger jeg?
Først og fremst papir og et par tusjer. Størrelsen på papiret spiller mindre rolle – bruk det du føler deg komfortabel med, og som gir nok spillerom i forhold til hvor detaljert du ønsker at skissen skal være. Når det gjelder tusjer bør du gå til innkjøp av følgende:

Med 5 ulike skisse-tusjer kommer du langt!

• 1 “ultra fine” (tynnere enn medium) sort tusj
• 1 medium sort tusj
• 1 “fine point” (tykkere enn medium) sort tusj
• 1 tykk, lys grå tusj
• 1 “fine point” gul tusj

For beskrivelse av hvilke farger og tusjer du skal bruke til hva, se punktet “Farger og skyggelegging” under Steg 3.

Steg 2: Hvordan være kreativ og skape idéer ved hjelp av penn og papir?
For å være kreativ er det viktig å la tankene løpe og eksplorere flere idéer. Den beste måten å gjøre dette på er å benytte en “6-up template”. Denne lager du selv ved å tegne opp to rader med tre like rektangler per rad, totalt seks rektangler. For hvert rektangel skisserer du opp én unik idé for hvordan en spesifikk oppgave kan løses (eks: ulike måter å utføre et søk på). På denne måten skaper du flere idéer fremfor å låse deg til én unik løsning.

Eksempeler på "6-up template" og "1-up template".

Skissene du lager ved hjelp av en “6-up template” er kun grove skisser, og skal ikke inneholde detaljerte beskrivelser (dette begrenser seg selv med tanke på plassen du har til rådighet per rektangel). For hver skisse lager du en tittel (med minst ett verb) som beskriver hva en person skal gjøre på siden. På denne måten sikrer du at hver skisse dekker et konkret brukerbehov.

Når du har fyllt ut alle rektanglene med ulike idéer, velger du ut én av disse som du tegner opp på et nytt hvitt ark (“1-up template”). Nå som du har mer plass på siden kan du rafinnere skissen og gjøre den mer detaljrik. Husk imidlertid på at skissen skal fokusere på et konkret brukerbehov; detaljene i skissen skal vise hva en person kan gjøre på siden. Øvrige side-elementer  som topp- og bunn-navigasjon kan gjerne være med (i form av enkle elementer), men skal ikke vise detaljert innhold.

Steg 3: Hvilke teknikker kan jeg bruke for å få folk til å forstå?
Følgende råd og tips er med på å gjøre din skisse forståelig:

1) Titler og overskrifter

Eksempel på bruk av tittel, overskrifter, tekst og beskrivelser.

Hver skisse skal ha en beskrivende tittel. De ulike elementene på siden navngis ved hjelp av overskrifter. Skille mellom ulike nivåer av overskrifter (h1, h2, h3…) gjøres ved bruk av over- og understreking, versaler eller fet skrift (tykkere tusj).

2) Beskrivelser og tekst

Bruk snakkebobler eller bokser for å beskrive elementer i skissen. Beskrivelsene skal være utdypende nok til at utenforstående kan forstå skissen uten videre forklaringer. NB! Hvis du inkluderer tekst i skissen, er det viktig at denne er lesbar!

3) Farger og skyggelegging

Størrelsen og fargene på tusjene spiller en viktig rolle. Gult brukes for å fremheve interaksjon eller innhold som er viktig. Lys grå brukes for innhold som ikke er viktig, eller for å skape en bakgrunns- eller skyggeeffekt. Medium sort tusj brukes for å tegne skissens rammeverk og elementer på siden. “Ultra fine” tusj brukes for å tegne mindre viktige elementer på siden, mens “fine point” gir et element eller heading større kontrast/viktighet.

4) Mennesker, snakkebobler og uttrykk

Eksempel på hvordan mennesker og snakkebobler kan integreres i skissen.

Ved å tegne mennesker (i kontekst av bruksoppgaven som skal løses) gir du skissen verdifull tilleggsinformasjon i form tanker og/eller følelser. På denne måten blir det enklere å sette seg inn i hvordan en person ville tenkt/handlet under interaksjon med skjermbildet (eller delen av det) som du skisserer. For å uttrykke følelser kan du la menneskene “prate” i form av snakkebobler. Du kan også visualisere emosjoner i form av smilefjes (blid, sur og så videre), eller ved å visualisere håndbevegelser som tommel opp (positivt) eller tommel ned (negativt).

5) Bevegelse og dybde

Tegne-teknikker for bevegelse.

Tegne-teknikker for bevegelse og dybde gir en ekstra dimensjon til skissen. For bevegelse kan du benytte ulike typer piler (rette, kurvede, stiplede, hele), skyggekopier eller kurvede linjer. For å få frem dypbde kan du benytte effekter som skygge, refleksjon, relative størrelser eller perspektiv.

Sett igang
Kort oppsummert er designskisser en enkel, men effektiv måte å skape en felles forstålse for design. Ved hjelp av tusj og papir har du et billig og enkelt verktøy som kommuniserer design på en måte som alle kan forstå. Og det beste av alt: ALLE (enten de tror det eller ei) kan tegne, så det er bare  å sette igang!