Vad är skillnaden mellan en UX-designer, en UI-designer och en front-end-utvecklare?

Varje komplett designteam inkluderar en UX-designer, en UI-designer och en front-end-utvecklare. Fastän dessa roller i viss mån har liknande kompetenser och ansvarsområden har de ändå varsin distinkt expertis. För att få ditt team att prestera så bra som möjligt måste du hitta ett sätt för dessa roller att kommunicera och skapa en kultur där det existerar en ömsesidig förståelse för vad varje person bidrar med.

I detta blogginlägg studerar vi rubriksfrågan närmare och försöker identifiera de viktigaste skillnaderna mellan dessa roller. Observera att det här är en förenklad analys som inte beaktar att en person kan ta på sig rollen som både UX-designer och UI-designer i en organisation.

Så arbetar en UX-designer

Syfte: Ansvarar för användarresan och teamets designprocess

Kompetenser: En blandning av beteendeanalys, marknadsföring, kommunikation och teknisk expertis

En UX-designer ansvarar för att samla in information om och analysera hur en användare beter sig. Samt vad den har för behov, samt för att förstå verksamhetens krav och tekniska begränsningar. De ser till att användarresan bjuder på en bra upplevelse för samtliga användartyper och att den uppfyller alla krav en användare kan ha. För att möjliggöra detta måste de ofta samarbeta med ett marknadsföringsteam på olika kampanjer för att förstå typen av innehåll och till vilken tjänst eller produkt företaget vill driva trafik.  Resan från kampanjen eller annonsen avsedd att driva trafik till tjänsten i sig ska bjuda på en enhetlig användarupplevelse utan störningar.

Typiska arbetsuppgifter inkluderar att utföra användaranalyser, samla in feedback och samarbeta med kunder och slutanvändare. Detta kan åstadkommas med hjälp av kvantitativa verktyg. Bäst använder du dessa i kombination med seminarier och intervjuer som ställer riktade frågor i syfte att förstå användarens behov bättre.

UX-designern är närvarande under hela utvecklingscykeln och kan jobba själv eller ingå i ett agilt team som jobbar i sprintar. Rollen kräver att du kan kommunicera och upprätthålla en konversation mellan produktägaren och kunden för att förstå företagets behov, kommunicera designkoncept och erhålla kundens godkännande. När detta är gjort lämnas arbetet över till UI-designern och front-end-utvecklaren med hjälp av low-fi-prototyper eller trådblock vars fokus är på att säkerställa att alla korrekta interaktioner finns med och att alla verksamhetskrav har uppfyllts.

Detta gör en UI-designer

Syfte: Skapar det visuella användargränssnittet och designens grafiska layout

Kompetenser: Utvecklingskunskaper som säkerställer att designen går att implementera

UI-designern översätter listan med krav från UX-designern till en snygg produkt baserad på företagets visuella profil. Den här rollen kan ibland innehas av samma person som har UX-designrollen, men kan även vara fristående. Om det är samma person eller inte har dock ingen effekt på själva designprocessen. Arbetet inkluderar att ta fram en layout och arbeta med färger, visuell hierarki, typografi, animationer och interaktiva element som t.ex. knappar och listor.

När det visuella användargränssnittet och den grafiska layouten är färdig är det dags för UI-designern att ta fram en hi-fi-prototyp i till exempel Figma eller Adobe XD. Prototypen kan vid behov vara interaktiv för att demonstrera hur vissa interaktioner fungerar. UI-designern baserar ofta sina designer på specifika scenarion som UX-designern har tagit fram, olika plattformar – som dator, mobil eller surfplatta – samt olika skärmstorlekar på de plattformarna.

När designen är färdig och har godkänts av produktägaren och/eller UX-designern lämnas hi-fi-designen över till front-end-utvecklaren i samband med en grundlig genomgång av de komplexa interaktionerna vars syfte är att säkerställa att implementeringen går så smidigt som möjligt. 

Arbetet som Front-end-utvecklare 

Syfte: Implementerar och kodar de visuella delarna av en plattform eller webbsida

Kompetenser: Förmågan att bygga lyhörda webbsidor som respekterar designen, oavsett plattform eller skärmstorlek

Front-end-utvecklaren börjar koda så snart de har en användarresa och en färdig design för varje vy. Innan kodarbetet påbörjas bör hen även ha tillgång till information om gällande krav och affärslogik. Front-end-utvecklare arbetar ofta i agila team som jobbar i sprintar tillsammans med produktägare och andra utvecklare som till exempel back-end-utvecklare.

Front-end-utvecklaren måste se till att logiken bakom back-end-arbetet fungerar i kombination med UX- och UI-designerns visuella design, layouter och användarresa. De måste även beakta alla möjliga inmatningar och variationer som kan implementeras på en sida för att säkerställa att den ser ut som förväntat, även i de fall det skulle dyka upp scenarion som designteamet kanske inte har räknat med.

Språköversättningar och långa inmatningar kan skada webbplatsens användbarhet om en knapp eller liknande tar för stor plats. Om man missar att åtgärda ett designproblem kan det uppstå en dominoeffekt som förändrar hela layouten.