Varför Wire­frames?

2022-01-28 - Kristoffer Fredriksson

I början av ett projekt är möjligheterna obegränsade, det kan bli precis vad som helst. Men målet är ju att lansera något väldigt specifikt, en färdig produkt, funktion, eller tjänst. Vad göra? För att gå från start, hela vägen till mål, med så lite bekymmer som möjligt används en rad olika verktyg och metoder. En av dem är wireframes.

Kortversionen: Wireframes är en kombination av skisser och grafiska innehållsförteckningar.

Den längre versionen: Hela poängen är att visualisera hur en del av ett projekt skall fungera. Det kan vara allt från hur en meny fungerar, till ett flöde med flera sidor, vyer, menyer, inputfält med mera. Men det skall vara lite rufft, och gärna fult. Det är viktigt att ingen blir för “kär” i wireframen, den är till för att stökas om. Delar skall kunna försvinna eller läggas till utan att någon blir ledsen för den sakens skull, och (kanske framför allt) utan att en massa utvecklingstid går till spillo.

En wireframe är inte heller ett designförslag, den kan visa var saker skall ligga, om de skall listas en efter en, eller visas i ett rutnät, och lite annat sånt. Men det är alltid den grafiske designern som har sista ordet när väl wireframen går vidare till produktion.

Det som händer när man har ett möte kring en wireframe (oftast en serie wireframes som visar ett flöde) är att folk får nya insikter, funktioner som behöver läggas till eller tas bort, nya sektioner på en vy, eller kanske ett helt nytt steg i en process. Det blir mycket enklare att gå vidare när det finns något visuellt att förhålla sig till.

Men, det finns ingen wireframe i världen som kan lösa det absolut viktigaste med en on-linelösning, att en sida laddar snabbt och verkligen gör det den utger sig för att göra. Bara för att det står “Send to all my followers” på en “knapp” i en wireframe betyder inte det att den funktionen existerar och fungerar. Det kan låta uppenbart, att inget finns förrän det är lanserat, men en del fastnar i specifikations-, och prototypfasen alldeles för länge.

Det har till och med hänt att det kommit folk till oss med fantastiska prototyper, och en uttömd budget. Allt gick åt till ett designdokument. “Kan ni bygga detta för en rulle tejp, och några gem vi hittade på kontoret?” (Nej.)

Se på de två versionerna av en Kontaktsida här intill. Är det en poäng med att ha med kontaktalternativ som inte fungerar så som i den ena versionen, vad händer om det tillkommer ett tredje kontaktalternativ i den andra versionen? Visst är det enklare att prata om sånt, och mer, när det finns något att se på?

Wireframen härintill är gjord i Figma, vilket bland annat innebär att vem som helst kan ta en närmare titt på den.

Sammanfattningsvis: wireframes är väldigt viktiga. Det gör att alla i projektet kan få en gemensam vision av slutmålet, på ett snabbt och kostnadseffektivt sätt. Men konsten är att gå bara precis så långt som det behövs, och inte längre, innan de går vidare till utvecklingsteamet.

Därför gör folk wireframes.

Vad är ett API?
BLOGG
Vad är ett API?
Förklarat på ett sätt så att alla förstår.
Agilt arbetssätt
BLOGG
Agilt arbetssätt
Vad är SEO och varför behöver du det?
BLOGG
Vad är SEO och varför behöver du det?