UX och UI – vad är skillnaden?
Av CodexierPublicerad 5 min läsning
Företag köper ett nytt utseende när problemet är flödet, och köper ett omgjort flöde när problemet är att ingen litar på utseendet. Båda misstagen kommer av att inte skilja UX från UI. Den här guiden förklarar vad varje disciplin levererar, var de överlappar och hur du tar reda på vilken ditt projekt faktiskt saknar, så att underlaget du skickar till en designer ber om rätt sak.
UX: struktur, flöden och research
UX-arbetet börjar innan någon skärm ritas. Det frågar vilka användarna är, vad de försöker göra och var den nuvarande produkten stoppar dem. Leveranserna är oglamorösa: intervjuanteckningar, en karta över sajten eller appen, användarflöden som visar varje steg från ingång till resultat, enkla skisser och ett test med riktiga människor. En UX-designers jobb är att få produkten att bli begriplig; om den är snygg är någon annans.
UI: visuell design och komponenter
UI-arbetet gör en fungerande struktur till något folk litar på och vill använda. Det sätter det visuella systemet: typsnitt, färg, avstånd, ikoner, knappar och formulär i alla sina tillstånd, och hur saker rör sig. Bra UI är konsekvent, så att användarna lär sig gränssnittet en gång, och tillgängligt, så att kontrast och storlekar fungerar för alla. Leveranserna är färdiga skärmar, ett komponentbibliotek och, för större produkter, ett designsystem utvecklare kan bygga från.
| Fråga | UX besvarar den | UI besvarar den |
|---|---|---|
| Vilka sidor eller skärmar finns, och varför? | Ja | Nej |
| Vad händer när användaren klickar här? | Ja | Delvis, återkopplingen |
| Ställer formuläret rätt frågor i rätt ordning? | Ja | Nej |
| Ser det ut som ett företag jag kan lita på? | Nej | Ja |
| Är knappen uppenbar och läsbar på mobil? | Delvis | Ja |
| Känns alla skärmar som en och samma produkt? | Nej | Ja |
Där de överlappar
De två disciplinerna möts i interaktionsdesignen: hur en kontroll beter sig, hur fel visas, hur produkten svarar på det användaren just gjorde. Ett formulärs fältordning är UX; etiketternas stil är UI; om felmeddelandet visas intill fältet och förklarar rättningen är båda. I små team gör en person ofta båda, och det är okej så länge arbetet sker i rätt ordning: struktur och flöde först, visuell finish ovanpå. Att putsa ett trasigt flöde är det dyra sättet att upptäcka att det är trasigt.
Vilken ditt problem behöver
Utgå från symptomen. Varje rad pekar på en disciplin, och regeln längst ner täcker fallet där svaret är båda.
| Symptom | Troligt behov |
|---|---|
| Besökare lämnar utan att kontakta; analysdata visar att de irrar mellan sidor | UX: struktur och flöden |
| Användare påbörjar formuläret eller kassan och hoppar av vid ett visst steg | UX först, sedan UI på det steget |
| Besökare säger att sajten ser gammal eller opålitlig ut; flödet i sig fungerar | UI: visuell uppfräschning |
| Varje sida ser olika ut; utvecklare uppfinner knappar på nytt | UI: komponentbibliotek eller designsystem |
| Ny funktion ingen använder, trots att den fungerar | UX: research och placering |
| Ny produkt ska lanseras; inget finns ännu | Båda, som en designsprint |
Beslutsregel: kan ni inte säga vad användarna försöker göra och var de misslyckas, köp UX först. En UX-granskning visar vilka symptom ni faktiskt har.
För en befintlig sajt är en UX-granskning det billigaste sättet att ta reda på vilken kolumn ni står i. För en ny produkt eller ett större nytt flöde täcker en designsprint research, flöden och visuell design för en avgränsad omfattning och slutar i en klickbar prototyp ni kan testa innan kod skrivs; den är prissatt som ett fast paket på prissidan.
Vad du ska be designern om
- Namnge målet och den viktiga uppgiften, inte leveransen. Säg vi behöver fler offertförfrågningar från mobilbesökare, inte vi behöver nya siddesigner.
- Fråga vilken research de gör innan de ritar, även om det bara är fem användarintervjuer och en titt på er analysdata.
- Be om flöden och skisser före färdiga skärmar, och granska dem för logik, inte utseende.
- Fråga hur designen testas, med vem och när.
- Fråga vad utvecklarna får: filer, ett komponentbibliotek, specifikationer för tillstånd och responsivt beteende.
- Fråga vem som äger filerna och designsystemet efteråt. Det ska vara ni.
När ni inte behöver någon designer alls: är sajten liten, flödet ett enda kontaktformulär och problemet trafik, löser en designer inte det. Står ni på en välbyggd mall och bara texten är svag är en skribent det bättre köpet. Och är produkten inte validerad ännu, prata med kunder innan ni designar något. Är ni osäkra på vilket av detta som gäller er räcker ett kostnadsfritt 15-minuterssamtal för att vi ska kunna säga det.
Vanliga frågor
Kan en och samma designer göra både UX och UI?
Ja, många gör det, särskilt på små studior. Det viktiga är att arbetet görs i rätt ordning och att designern kan visa research, flöden och skisser lika väl som putsade skärmar. En portfölj med bara färdiga bilder är en UI-portfölj, oavsett vad titeln säger.
Är UX eller UI viktigast för konvertering?
UX har oftast störst effekt eftersom det tar bort anledningarna till att folk misslyckas med en uppgift. UI spelar sedan roll för förtroende och tydlighet, som avgör om folk påbörjar uppgiften alls. På en sajt som ser opålitlig ut nås flödet aldrig, så det ärliga svaret är att de kommer i följd, inte i konkurrens.
Vad levererar en designsprint?
Ett definierat problem, användarflöden, en klickbar prototyp i hög kvalitet av en avgränsad kärna och resultat från test med riktiga användare, under en kort fast period. Den är rätt val när ni ska bygga något nytt och vill hitta bristerna innan kod gör dem dyra.
Osäker på om ert problem är UX eller UI?
Beskriv vad användarna försöker göra på er sajt och var ni tror att det går fel. På 15 minuter säger vi vilken disciplin ni behöver, om en granskning eller en sprint passar, och vad det skulle kosta.
Boka ett kostnadsfritt 15-minuterssamtal