Vad är UX & UI?

ux ui wireframe

Innehållsförteckning

UX & UI är två uttryck som flitigt används inom webbdesign. Båda är kopplade till hur användaren interagerar med hemsidan, men på olika sätt.

Jämfört med mycket annat inom design är UX och UI två relativt nya begrepp. Ibland används dessa begrepp om vartannat, men även om de är besläktade så beskriver de olika saker.

UX och UI representerar två centrala roller för att en hemsid

Vad är UX?

UX står för User Experience och betyder användarupplevelse.

UX design är ett sätt att designa med människan i centrum, till exempel när du bygger en hemsida.

Don Norman (Nielsen Norman Group Design Consultancy) sa redan på 90-talet att:
“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

Användarupplevelsen handlar alltså om hur användaren upplever en digital produkt, såsom din hemsida. Det handlar inte nödvändigtvis om hur produkten ser ut och fungerar, utan hur användaren känner när de använder produkten.

En bra UX ska skapa en positiv upplevelse för användaren.

Den viktigaste utgångspunkten inom UX är användarnas behov. Vad förväntar sig användaren av hemsidan?  Vad behöver de för att kunna använda hemsidan som det är tänkt?

Det är också viktigt att ta hänsyn till användarnas kontext, dvs. i vilken situation användaren använder hemsidan och vilka begränsningar det kan innebära. Är dina användare ofta på resande fot? Är de stressade? Uttråkade?

7 faktorer bakom en bra användarupplevelse

ux honeycomb ui

Peter Morville, som är en informationsarkitekt, är känd för att ha identifierat 7 faktorer som påverkar användarupplevelsen. Dessa 7 faktorer representeras som en ”honeycomb” och utgör grunden för att skapa en bra användarupplevelse.

Här är en summering av de 7 faktorerna enligt Morville:

Useful (användbart): En produkt eller tjänst måste vara användbar för att den ska vara meningsfull för användarna.

Usable (användarvänlig): En produkt eller tjänst måste vara lätt att använda för att användarna ska kunna dra nytta av dess funktioner.

Desirable (attraktiv): En produkt eller tjänst bör vara attraktiv och tilltalande för användarna för att skapa en positiv känsla.

Valuable (värdefull): En produkt eller tjänst måste erbjuda ett mervärde för användarna, som kan vara i form av tidsbesparingar, kostnadsbesparingar eller andra fördelar.

Findable (hittbar): En produkt eller tjänst bör vara lätt att hitta och nå för användarna, oavsett var de befinner sig.

Accessible (tillgänglig): En produkt eller tjänst bör vara tillgänglig för alla, oavsett funktionshinder eller andra begränsningar.

Credible (trodde): En produkt eller tjänst bör framstå som trovärdig och pålitlig för att skapa förtroende och tillit hos användarna.

Morvilles UX honeycomb representerar de olika faktorerna i en användares upplevelse av en produkt eller tjänst och är ett användbart verktyg för att skapa en positiv användarupplevelse.

Vad är UI?

UI står för User Interface och betyder användargränssnitt.

UI är interaktionen mellan användaren och din hemsida och handlar om hur hemsidan ser ut, känns och fungerar. Ingen press, men tänk att din hemsidas alla funktioner, innehåll och layout ska presenteras som en attraktiv, vägledande och smidig upplevelse för användarna.

Ett bra UI ska vara intuitiv, enkel att använda och estetiskt tilltalande.

En grund inom UI är användbarhet. Det handlar om hur lätt det är för användaren att utföra det den vill på hemsidan.

Om en besökare kommer till din hemsida och inte omedelbart förstår vad ni sysslar med eller var de kan navigera vidare på sidan är användbarheten inte tillräckligt bra.

För att uppnå användbarhet och samtidigt estetik kommer en UI-designer att  tänka på ikoner, knappar, typografi, färgscheman, avstånd, bilder och responsiv design.

ux ui users ui,ux

Vad är skillnaden mellan UX och UI?

Vi förklarar skillnaden med en liknelse! Föreställ dig en bil  🏎

UX handlar om hur bekväm och enkel bilen är att köra. Att bilen svänger dit du förväntar dig och att första steget på vindrutetorkarna är den långsammaste, för att sen öka stegvis. Känns ju självklart!

UI handlar om hur instrumentpanelen, ratt och andra kontroller ser ut och är placerade för att göra det enkelt att köra bilen. Att du kan hitta spakarna utan att titta och att knappen för varningsblinkers är röd.

Så, UX handlar om känslan av att köra bilen medan UI handlar om utseendet och layouten av bilens kontroller.

En annan liknelse är: UI är sadeln, stigbyglarna och tyglarna. UX är känslan du får av att du faktiskt kan rida hästen. För mig som aldrig suttit på en häst hade nog den känslan tyvärr uteblivit 🤷‍♂️

När du planerar din hemsida försöker du visualisera dig användaren och dess intentioner. Var vill användaren hamna och vilken väg kommer den att ta dit?

När du designar din UX kartlägger du själva resan, medan med UI så tänker du på alla detaljer som gör denna resa möjlig. Med detta sagt handlar inte UI enbart om utseende användargränssnittet har en enorm inverkan på om en hemsidan kan anses tillgänglig eller inte.

toggle track rätt färg till hemsidan

Hur samverkar UX och UI?

Vi har nu tittat på skillnaderna mellan UX och UI, men det är viktigt att påpeka att de båda är avgörande för en framgångsrik hemsida!

Helga Moreno, som är expert på design, skriver:

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While something very usable that looks terrible is exemplary of great UX and poor UI.” (The Gap Between UX And UI Design)

Alltså: något som ser bra ut men är svårt att använda ett exempel på bra UI och dålig UX, medan något som är mycket användbart men ser hemskt ut är ett exempel på bra UX och dåligt UI.

Du kanske någon gång knappat på en mikrovågsugn med ett helt digitalt gränssnitt och blivit tokig när du inte förstår hur du ändrar effekten.

Samtidigt kanske vreden på din ugn inte ser så imponerande ut men de gör precis vad du förväntar dig.

Jag skulle vilja hävda att UX är snäppet viktigare än UI. En snygg men icke funktionell hemsida kommer folk att överge, men en när en oattraktiv hemsida är funktionell kan folk se mellan fingrarna.

Självklart är en kombination av bra UX och UI det bästa av båda världar, och idag medger inte marknaden att du slarvar på den punkten. Konkurrensen är så pass hård att din hemsida måste behärska båda delarna.

ux ui twitter

UX- och UI-utbildning

Det går att utbilda sig inom UX och UI på flera högskolor i Sverige.

Du kan söka efter utbildningar på Studera, Studentum och Antagning.

Samtidigt finns det väldigt mycket (väldigt väldigt mycket) kunskap och information tillgängligt online. Både information som är gratis och som du måste betala för.

Både Flux Academy, Design Course och Shift Nudge är sidor som erbjuder betalda kurser inom webbdesign.

På vår egna sida Grundläggande Webbdesign hittar du också bra information och fler länkar.

Bra YouTube-kanaler som lägger upp värdefull information är bland annat:

Slutsats

I huvudsak gäller UX för allt som kan upplevas – vare sig det är en webbplats, en kaffemaskin eller ett besök i snabbköpet. Delen ”användarupplevelse” hänvisar till interaktionen mellan användaren och en produkt eller tjänst.

UX design tar alltså hänsyn till alla de olika element som formar denna upplevelse.

UI å andra sidan är helt och hållet en designterm. Ett användargränssnitt är interaktionen mellan användaren och en digital enhet eller produkt – som pekskärmen på din smartphone eller pekplattan du använder för att välja vilken typ av kaffe du vill ha från kaffemaskinen.

Vanliga frågor

UI står för användargränssnitt, som är det visuella gränssnittet mellan en användare och en digital produkt eller tjänst. Det inkluderar allt från färger och typsnitt till layout och navigering.

UI för en hemsida är det visuella gränssnittet som används för att navigera på webbplatsen och interagera med dess funktioner. Det inkluderar layout, färger, typsnitt, bilder, ikoner, knappar, och mer.

UX står för användarupplevelse, som inkluderar alla aspekter av en användares interaktion med en produkt eller tjänst. Det inkluderar användbarhet, tillgänglighet, tillfredsställelse, och mer.

För att bli en UI-designer krävs vanligtvis en examen inom grafisk design, visuell kommunikation, användarupplevelse eller en relaterad disciplin. Det kan också vara användbart att ha en portfölj med arbetsprov och erfarenhet av designverktyg som Sketch eller Figma.

UI (User Interface) är den visuella designen och layouten av en produkt, medan UX (User Experience) är användarupplevelsen av hur produkten fungerar och känns att använda. UI handlar om att skapa en estetiskt tilltalande och funktionell design, medan UX handlar om att skapa en användarupplevelse som är användarvänlig och intuitiv.

För att skapa en effektiv produkt måste man kombinera både UI och UX-design. En produkt med en bra UX men dålig UI kommer inte att vara användbar, och tvärtom. Båda aspekterna måste arbeta tillsammans för att skapa en användarvänlig och visuellt tilltalande produkt. Detta kan uppnås genom att involvera både UI- och UX-designers i produktutvecklingsprocessen och genom att samarbeta för att säkerställa att både design och användbarhet tas i beaktning.

webbdesign 404
En effektiv 404-sida är avgörande för att behålla besökare på din webbplats när de råkar hamna fel.
Woocommerce Swish
Förenkla betalprocessen i din WooCommerce-butik genom att integrera Swish. Följ vår steg-för-steg-guide för en smidig och säker betalupplevelse.
färg röd
Färgen röd: passion, energi, kärlek. Utforska denna primärfärgs betydelse, symbolik och användning i design och konst för en kraftfull atmosfär.
Rulla till toppen
Vi använder kakor för att göra din upplevelse bättre.