En hyllest til den digitale blyanten

Som designer kan det vÊre vanskelig Ä skille den utforskende konseptfasen fra den pirkete detaljfasen. Og en pirkete tilnÊrming og en utforskende tilnÊrming gÄr ikke godt overens. Det kommer absolutt en tid hvor du mÄ flisespikke pÄ stÞrrelser, og sÞrge for at det er like stort mellomrom mellom overskrift og brÞdteksten pÄ ett sted, som det er pÄ andre steder. Eller at hjÞrnene er avrunda like mye for eksempel. Meeeen i blant mÄ du ogsÄ bare lage noen stygge skisser for Ä fÄ fram et poeng. Og det er der blyanten kommer inn i bildet.

Blyanten senker terskelen

NÄr sant skal sies har jeg aldri helt skjÞnt hvorfor blyanten har vÊrt inkludert i de designprogrammene jeg har brukt opp gjennom tidene. Penn og papir skjÞnner jeg godt, for da kan du rable ned noen kjappe tanker, men Ä bruke den digitale blyanten med en trackpad eller datamus har jeg ikke sett nytten for. Streken blir jo sÄ hinsides shaky, og det blir stygt som bare det. Samtidig er det nÞyaktig det som har vist seg Ä vÊre grunen til at den er sÄ bra. Den er sÄ stygg at den senker terskelen betraktelig for Ä rable ned hva enn du tenker pÄ.

Det innsÄ jeg fÞrst da jeg begynte Ä jobbe pÄ samme prosjekt som Aslak HÞberg Liaaen og Petter Mustvedt. To designere som etterlot seg et spor av shaky blyantstreker i de fleste figmafiler de jobba i.

Petter hadde ikke noe flott bilde Ä vise til, som Aslak hadde, men om jeg husker rett sÄ ser han omtrent sÄnn her ut, bare uten det hakket pÄ venstre kinn.

Hva kan den brukes til?

NÄr er det blyanten virkelig fÄr skinne, lurer du kanskje pÄ. I hvilke situasjoner er det faktisk nyttig Ä gi den et forsÞk? SÄvidt jeg kan se er det tre situasjoner hvor den er spesielt nyttig:

  1. NĂ„r du skal utforske konsepter, og ikke aner hva du skal lage
  2. NÄr du skal diskutere en idé eller et design med andre
  3. NÄr du skal jobbe videre med en tidligere idé som grunnlag

For Ä utforske de omrÄdene nÊrmere skal du fÄ hÞre fra fire andre designere som ogsÄ blir engasjert av blyantbruken, nemlig Petter og Aslak som jeg nevnte tidligere, men ogsÄ to kollegaer av meg fra Variant, Jon Hofsli og Andreas SÊtersdal Hartveit.

Skal sies at Aslak var pÄ vei fra India til Vietnam mens jeg skreiv det her, sÄ hans bidrag kommer delvis gjennom Petter.

NĂ„r du skal utforske konsepter

Jeg stilte dem alle spĂžrsmĂ„let “Hvorfor velger dere Ă„ bruke blyanten, som gjĂžr det rĂžft og upolert, framfor Ă„ bruke andre verktĂžy (annotering-plugins, eller bare rette linjer og sirkler)?”

Petter: Jeg vil si den er spesielt god nÄr man snakker om konsepter og mer abstrakte ting. Jo mer drÞmmende ideer, desto viktigere er det Ä sÞrge for at man snakker om det samme i en diskusjon. Der kommer raske tegninger, modeller, streker og piler mellom ord og kruseduller til sin rett. Raffineringen kan man ta pÄ bakrommet etterpÄ.

Som et eksempel pÄ det Petter kan nevner her kan jeg vise deg en skisse fra et internt AI-verktÞy vi jobber med i Variant nÄ.

PÄ bildet under kan du se at vi har skissa opp ulike steg, i tillegg til hva slags input du gir til systemet, og hva slags output vi Þnsker Ä fÄ tilbake.

PÄ dette stadiet gir ikke skissene mening for andre enn vi som var involvert, med mindre du fÄr mer kontekst av hva som er tenkt, sÄ la meg gi deg en kjapp innfÞring.

MÄlet med verktÞyet er at den skal hjelpe vÄrs med Ä bÄde finne riktige folk til tilbudene vi jobber med, men ogsÄ forklare hvorfor akkurat den og den personen er riktig person for jobben. Da bruker vi en sprÄkmodell for Ä spisse CV-tekstene vÄres mot de tilbudene vi jobber med. Om du har brukt ChatGPT tidligere (som ogsÄ er basert pÄ bruk av sprÄkmodeller) sÄ veit du at den kan vÊre en kjempegod sparringspartner nÄr det kommer til kommunikasjon, men den kan ogsÄ si ting som er riv ruskende gÊrnt. Samme problem fÄr vi ogsÄ i testingen av detta AI-verktÞyet vi holder pÄ med. Og sÄnn kan vi ikke ha det.

Hvis vi skal lage et verktÞy som er genuint nyttig mÄ vi ogsÄ vÊre trygge pÄ at informasjonen stemmer. Skissene viser én mulig mÄte vi kan lÞse det pÄ, og det tok meg 3-5 minutter Ä tegne det opp. Det er altsÄ en utrolig kjapp mÄte Ä utforske en problemstilling pÄ, og sammenhengen mellom de ulike stegene som fÞlger, men det er viktig Ä vÊre inneforstÄtt med konteksten av krusedullene.

Effektiv kommunikasjon gjennom enkle skisser

Andreas: For meg blir det stor forskjell pÄ kontekst. Om jeg skisserer vil jeg ha minst mulig mellom meg og tankene mine. Det samme gjelder nÄr jeg fasiliterer diskusjoner eller wokshops. Om jeg skal presentere innsikt for eksempel ville jeg satt opp litt finere linjer og oppsett, men det er fordi det skal kommunisere og formidle noe. I workshop-Þyeblikk Þnsker jeg at man ikke skal henge seg opp i strek eller oppsett da det handler mer om effektiv kommunikasjon.

Andreas bruker ogsÄ ipaden aktivt til Ä tegne, sÄ skissene hans er nesten litt for fine, spÞr du meg, men prinsippet er nÞyaktig det samme. Eksempelet under viser hvordan enkle streker indikerer at det er en mobilvisning, at du har en liste med kort, omtrentlig hva slags info som skal vÊre pÄ de korta, og den firkanten med kryss over symboliserer sannsynligvis at det skal vÊre et bilde.

NĂ„r du er i en tankeprosess handler det bare om Ă„ fortsette Ă„ vĂŠre i den flyten. Å spille videre pĂ„ tankene som oppstĂ„r, og ikke fokusere pĂ„ at ting skal vĂŠre perfekt. Og da er blyanten perfekt! For selv om det hĂžres litt tullete ut sĂ„ er den digitale blyanten bygd for fart. For at du skal fĂ„ fram et budskap her og nĂ„, eller fange en tanke uten Ă„ henge deg opp i det ene eller andre.

Hva detaljnivÄet pÄ skissene symboliserer til andre

For verktĂžyene vĂ„res kan faktisk bli et hinder for selve tankeprosessen. Det gĂ„r sĂ„ fort nĂ„ Ă„ lage en skisse eller prototype i figma nĂ„ at det ser “ferdig” ut med en gang. NĂ„r vi viser skissene vĂ„res til folk som ikke er designere sĂ„ gir vi ogsĂ„ feil inntrykk. Mange av vĂ„rs er nok vant med “papirprototyping” som eksempelet Andreas viste til. AltsĂ„ Ă„ tegne veldig forenklede skisser av et grensesnitt pĂ„ papir for Ă„ kjapt forstĂ„ hva som gir mening. Ved Ă„ hoppe over det steget “mister brukeren muligheten til Ă„ streke over ting, eller rive i stykker papirarkene i frustrasjon”, som Petter sa til meg. Og vi som designere gĂ„r dermed glipp av viktig lĂŠring.

Petter: Ved Ă„ introdusere noen skissete blyantskisser rett i prototypen forteller du brukeren at “dette er et tidlig utkast - ikke fokuser pĂ„ detaljer som farger og avrundede knapper”. PĂ„ denne mĂ„ten gjĂžr du prototypene dine bevisst styggere og mer tilgjengelige for viktig kritikk pÄ rett nivĂ„.

Andreas: En designer vil alltid “aligne” en ny tekstboks eller vurdere helheten om ting blir for detaljert. DetaljnivĂ„ vil ogsĂ„ pĂ„virke hvordan folk deltar eller forstĂ„r en skisse / prosesstegning / hva det skulle vĂŠre. Med en gang streken blir for rett tolkes det etter min erfaring som mer satt, og diskusjonene endrer seg. NĂ„r man har strek og penn kan “alt” skje!

NÄr du skal diskutere en idé med andre

SpĂžr du meg, sĂ„ blir de beste ideene alltid skapt sammen med andre. For Ă„ fĂ„ til det mĂ„ vi sĂžrge for Ă„ “level the playing field”, som det sies. NĂ„r vi som designere drar med vĂ„rs utviklere, prosjektledere, og all slags ulike roller inn i Figma, sĂ„ er det vi som er pĂ„ hjemmebane. Da er det en skeiv maktbalanse, hvor vi er mye mer komfortable enn alle de andre i de omstendighetene. BĂ„de med tanke pĂ„ hvordan programmet fungerer, men ogsĂ„ hvordan man tenker. Da er blyanten kjekk Ă„ ha. For som Jon sa:

Jon: Spesielt i kommunikasjon med ikke-designere tenker jeg at blyanttegning kan gjĂžre terskelen lavere for utviklerne (og andre roller) Ă„ bli med, dele tanker, og tegne selv. At du unngĂ„r Ă„ fremstille en skisse som noe polert og “skummelt”.

Siden blyantstreken blir temmelig stygg sĂ„ stiller alle mer eller mindre likt i diskusjonen. BĂ„de tegneglade designere og de folka som er mindre glade i Ă„ tegne. Du Ă„pner opp for at “det her kan hvem som helst fĂ„ til”, for det handler bare om Ă„ lage en runding rundt noe, eller en strek fra ett sted til et annet.

Petter: Siden det ser uferdig ut sĂ„ skjĂžnner alle at tankene man illustrerer er “halvtygde” - dermed Ă„pner man opp for innspill og diskusjon. SĂ„ lenge det er mulig Ă„ skjĂžnne hva som tegnes, og dermed mulig Ă„ kritisere og vĂŠre enig eller uenig (uenig er best, da fĂ„r man luket ut misforstĂ„elser i samtalen) i poenger/ideer, fungerer blyantstrekene!

Skap en felles forstÄelse

Det vi vil oppnĂ„ her er jo Ă„ komme fram til et bra konsept, og da er vi avhengige av Ă„ fĂ„ innspill fra andre. For vi designere kan jo overhodet ikke alt. Vi er helt avhengige av Ă„ forstĂ„ andre fagomrĂ„der for Ă„ lage gode lĂžsninger. For Ă„ bygge opp den forstĂ„elsen kan det vĂŠre nyttig Ă„ starte med en sĂ„kalt “Minimum Critiquable prototype”, som Petter og Aslak kaller det.

Petter: “Prototype” er kanskje feil her - men poenget er at som designer og fasilitator er ofte poenget med Ă„ lage noe eller tegne noe Ă„ fĂ„ tilbakemelding fra andre aktĂžrer. Da er det viktigste at man kommuniserer godt nok til at det er mulig for andre Ă„ kritisere. SĂ„ hvis en stygg blyanttegning er veien til konstruktiv kritikk, er det bare Ă„ stille seg “lagelig til for hogg”.

NÄr du skal jobbe videre med en tidligere idé som grunnlag

Den siste situasjonen jeg vil utdype er det her med Ä jobbe videre med en idé. Og en ting som slo meg da, etter Ä ha sett noen bilder som Andreas sendte meg, var at han jobba lagvis. At han kommenterte sitt eget arbeid. Tidligere har jeg utforska tanken om at det Ä skrive er som Ä ha en samtale med seg selv, og det er i grunn mye overlapp der. For nÄr du skriver ned tankene dine gir du deg selv ogsÄ mulighetene til Ä gÄ fra det, og plukke opp nÞyaktig der du slutta sist.

I Andreas sitt tilfelle gjÞr han det samme med notater som er gjort i en workshop-situasjon f. eks, hvor flere folk har tegna pÄ en fysisk tavle, sÄ tar han et bilde av det, legger det inn i Miro, og fortsetter Ä tegne oppÄ de tankene derfra. Og dermed jobber lag for lag. Eller som med eksempelet under hvor han har samla innsikt fra ulike intervjuer, og tegner oppÄ det igjen i diskusjon med andre.

Bonustips

Skisse-plugin til figma

Jon nevnte ogsĂ„ at det blir litt annerledes dersom det er snakk om en handover – som er en slags bruksanvisning for hvordan designet skal tolkes, som deles med utvikleren som skal implementere det. I en handover-situasjon ville han heller brukt en plugin til Figma som heter Autoflow. Autoflow lar deg trekke streker mellom ting, eller lage enkle former som du kan legge tekst pĂ„, men som har den hĂ„ndtegna streken pĂ„ alt. Den koster riktignok 300 kr etter du har brukt den en liten stund (engangsbetaling), men du kan teste den gratis i en periode for Ă„ se om det er noe du liker.

TK-trikset

Et skrivetips jeg snubla over for flere Är siden - tk-trikset, kommer fra en journalist som heter Anders Hofseth. Han nevnte at han unngÄr Ä distrahere seg selv med research ved Ä skrive TK midt i en setning:

Hver gang du kommer til noe som mÄ researches, faktasjekkes etc, ikke stopp. Bare skriv TK (som er en sjelden bokstavkombinasjon, ihvertfall i engelsk), deretter kan man, nÄr man er i mÄl med hovedteksten sÞke gjennom dokumentet etter TK og ferdigstille detaljene.

Jeg leste det fĂžrst pĂ„ bloggen til NRKbeta, men ser nĂ„ at Anders Hofseth, som skreiv artikkelen, henta det fra Cory Doctorow. Cory skriver ogsĂ„ at “Researching isn’t writing and vice-versa”. Den innstillinga gjelder ogsĂ„ i designverden.

For om du lager en “Min profil”-side sĂ„ trenger du kanskje et ikon for Ă„ indikere bruker-perspektivet. I stedet for Ă„ bruke tid pĂ„ Ă„ leite etter det kan det vĂŠre like greit Ă„ tegne det med blyanten, ogsĂ„ gĂ„ videre med Ă„ tegne opp resten av grensesnittet, som du egentlig hadde tenkt til. I stedet for Ă„ bytte kontekst og researche ikoner som kan passe. For da kan du fort vekk henge deg opp i tykkelsen av strekene, om det kun skal vĂŠre omrisset av ikonet eller om det skal vĂŠre heldekkende bakgrunn osv. Det er en slippery slope, men derfor er blyanten god Ă„ ha.