language arrow_drop_down
DK NO EN
Blogg: 2020-02-25

Prototyping i Figma

Jag tycker kravhantering är svårt och försöker alltid hitta bättre sätt att hantera krav på när en lösning ska byggas. I mina senaste projekt har jag börjat använda mig av ett verktyg som heter Figma och tekniker kring prototyping för att tillsammans med verksamheten ta fram kraven. Tekniken gör att det går att bygga bättre system till en lägre kostnad, tack vare att verksamheten snabbare kan lämna feedback på prototypen. 

Prototyping i Figma

Prototyping
Prototyping är en teknik inom UX där man skapar någonting visuellt som en tilltänkt användare kan ge feedback på. Det kan vara något så enkelt som en ritad skiss på ett papper, men i alla fall något där användaren får en uppfattning om hur gränssnittet kommer se ut och hur de interagerar med gränssnittet.

Att från början inkludera slutanvändaren och få feedback både på utseende men framförallt på interaktion tror jag kan vara en av de bästa aktiviteterna man kan ägna sig åt för att driva ett lyckat IT-projekt.

För att få med sig slutanvändaren krävs dock en stor portion empati. Personen som ska ge feedback har antagligen långt ifrån lika mycket datorvana som du och vill antagligen inte känna sig som en idiot om du berättar att någonting självklart måste fungera si eller så och att användaren i fråga såklart borde förstå det.

Målet med övningen tillsammans med användaren bör vara insamling av kunskap. Du som tar fram prototypen ska vilja lära dig och förstå verksamheten och användarens problem, modellera detta i en prototyp för att sedan få feedback på hur du uppfattade problemet.

Figma
Ett verktyg som passar bra till att ta fram prototyper och som jag börjat arbeta med på senare tid är Figma. Figma är ett verktyg för att snabbt skapa interaktiva prototyper. Det är webbaserat och löjligt enkelt att komma igång med.

Prototyping i Figma-2

Bild från Figma med några få komponenter.

Figma innehåller massvis med färdiga komponentbibliotek som enkelt kan importeras och användas i din egen lösning. Biblioteken som finns är ofta baserad på existerande designsystem för front-end ramverk (Materialize-CSS, Material-UI för React, Bootstrap ect).

Prototyping i Figma-3

Dessutom finns det grymma funktioner för att visa på interaktivitet mellan bilder i Figma. Med enkelt drag-and-drop pekas interaktionen ut mellan olika fönster och när prototypen sedan körs upplevs det som väldigt nära en verklig applikation.

Prototyping i Figma-4

Figma är ett kollaborativt verktyg och det är väldigt enkelt att dela med sig av sina prototyper. En enkel knapptryckning så skickar man iväg en länk till en körbar prototyp.

Prototyping i Figma-5

Målbild
För mig som Lead kommer en annan grym fördel med att jobba med prototyping och ett verktyg som Figma, jag får nämligen ett fantastiskt bra underlag som jag kan lämna över till en utvecklare för implementation. Dessutom kan jag med hjälp av prototypen troligtvis formulera en hel del Use-Cases som tillsammans med prototypen kan ligga som grund för specifikationen för en stor del av lösningen.

Jag har en målbild om att enbart kunna arbeta med Figma och någon form av backlogg verktyg (Azure DevOps för tillfället) där prototypen hjälper mig att ta fram användarfall som fyller backloggen. För varje användarfall anger man då acceptanskriterier tillsammans med beställaren/slutanvändaren/.

//Pontus Ljungdahl, Specialist Industrial Digitalization, Prevas AB

Kommentarer

    Du måste vara inloggad för att få kommentera

    Stängd för fler kommentarer

    Vänligen verifiera att du inte är en robot

    300

    Relaterade artiklar

    pageRefs: [Digitalisering, Experiments and experience]