Vad är skillnaden mellan UX och UI?

2021-11-17

Webbdesign: Vad är skillnaden mellan UX och UI?

Har du någon gång hamnat på en riktigt snygg hemsida som känns ologisk, rörig eller till och med underarbetad? Då kan det vara så att det handlar om att balansen och arbetet med webbdesignen har brustit – balansgången mellan UX och UI. Vi börjar med att reda ut begreppen.

Vad är UX?

UX står för User Experience och handlar om att skapa en så tydlig och fin användarupplevelse skapas för besökaren som möjligt. Att hemsidans funktioner och hur man hittar rätt blir självklara för besökaren.

UX kan handla om att förenkla eller bara vägleda – allt beroende på syfte och ändamål. I centrum står användarens upplevelse av hens interaktion med en webbsida, en app, ett test på nätet eller någon form av digital produkt. Det är viktigt att skapa lösningen eller produkten utifrån användares behov så att man uppfyller dem. Syftet är att interaktionen mellan användare och produkt/system/webbsida ska vara så enkel, effektiv och relevant som möjligt. Som var knappar är placerade, vart eller navigationsmenyn är placerad och vad som står i felmeddelanden om något inte fungerar (UX-copy) – that's all UX!

Exempel på en trygg UX-design:

Om du svarar på en enkät på nätet och du svarar fel på en fråga, vad vill du göra då? Du vill kunna gå tillbaka, avbryta eller på något sätt korrigera det fel som gjorts – en nödutgång. En bra UX-design, flöde, bör i dessa fall ha en tydlig funktion som tar användaren tillbaka eller som avbryter. När det finns en sådan knapp tydligt utmärkt, på ett bra placerat ställe, gör att användaren känner sig trygg och ett självförtroende – där den personen känner att den har kontroll över situationen.

Vad är UI?

UI står för User Interface och handlar om att arbeta med användargränssnittet i hemsidan – själva utseendet och de element som syns, såsom exempelvis knappar och ikoner.

När du som användare besöker en webbplats kommer det säkert att finnas en hel drös med element som du ser på din skärm. Allt det som syns på skärmen är en del av UI-design och UI och dess visuella element kan vara allt från en knapp, en skärm, ett ljud eller en sida. Allt som gör att användaren kan få ett informationsutbyte med en digital produkt eller system. Det handlar främst om att du som användare ska få en viss känsla av användandet – genom visuell vägledning. Hur sökfält är utformade, vilken färg knapparna har och hur stor navigationsmenyns rubrikstorlek ingår i UI.

Exempel på tydlig UI-design:

Om du är inne på en webbplats, eller vi säger samma enkät som i exemplet på bra UX-design. I slutet av enkäten finns det en "Avbryt"-knapp och en "Skicka svar"-knapp. Den ena är röd och den ena är grön – vilken färg passar bäst på vilken knapp? Röd knapp = "Avbryt" och Grön knapp = "Skicka svar" känns självklart för de flesta, därför är det också ett tecken på bra UI-design. Det ska vara självklart – en känsla av trygghet, där färger tydliggör och förenklar användandet av enkäten.

What separates design from art is that design is meant to be... functional.

– Cameron Moll

Bra webbdesign handlar om balans

Precis som nämnts tidigare i det här inlägget kan en webbsida ha snygg design men ett rörigt flöde och en navigation som är svår att förstå eller ens utföra. På samma vis kan en webbsida vara fantastiskt tydlig i hur användaren ska navigera sig till ett visst ändamål, men helt sakna känsla för kontrast och tydlighet i färgsättning och formgivning av knappar och andra element. Idag kan vi som användare inte acceptera webbplatser som har den här typen av brister. Vi tröttnar för vi vill ha det tydligt, sömlöst, enkelt och snyggt. Balansgången i arbetsprocessen mellan UX och UI kan vara precis lika hårfin som att en webbdesign antingen blir bra eller dålig.

Bra funktionell UX-design förtjänar bra UI-design helt enkelt. För vad tjänar egentligen strategiskt placerade knappar, ikoner och bra copy till om inte användaren kan se vart den ska trycka eller läsa fula, förvrängda typsnitt?

Webbdesign är inte lätt!

Har du tankar eller synpunkter på vad som är bra webbdesign? Ring mig gärna eller connecta på LinkedIn!

Kontakta oss

Nyfiken på mer kunskap?

En guide om hur du gör din webb affärsdrivande.
Guider & lathundar

Trevliga och lättöverskådliga guider för effektiv och riktigt vass kommunikation.

Kolla in guider
Kommunikationsbloggen

Stor kunskapsbank med smarta tips, inspiration och aktuella djupdykningar inom kommunikation.

Gå till bloggen
Korta videor med tips

Minut-korta videor med tips om allt från PowerPoint till copywriting och design. Vi kallar dem Tips från Triben.

Se korta videor

Undrar du över något?

Genom att boka en gratis konsultation, utan några som helst bindningar, får du ärlig och rak rådgivning.

Ta nästa steg i ditt bolag genom kommunikation!

Fyll i formuläret eller kontakta oss på:
hello@tribelounge.se

Skicka en förfrågan

Vad vill du ha hjälp med?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.