UX - Tjejer Kodar

Vad är skillnaden mellan UI och UX, egentligen?

Skrivet av Tjejer Kodar den 20 september 2024. Postad i Inspiration, UI, UX.

UI och UX. Två förkortningar som ofta kastas runt i tech-världen och som lätt kan blandas ihop – och det är inte så konstigt! Båda handlar ju om design och användarupplevelse, och det är inte helt ovanligt att folk tror att de är samma sak. Men om du gräver lite djupare, inser du snart att de handlar om olika saker, fast de hänger ihop. Så, vad är då skillnaden? Låt oss gå igenom det tillsammans! 🕵🏾

Vad är UI design?

UI, eller User Interface design, fokuserar på hur något ser ut och hur användaren interagerar med ett digitalt gränssnitt. Det handlar om färger, knappar, typografi och hur allt är placerat på en skärm. En UI-designer ser till att en app eller hemsida är estetiskt tilltalande och enkel att navigera. Tänk dig en snygg och lättanvänd knapp som verkligen får dig att vilja klicka på den – det är UI. Det visuella och interaktiva elementet spelar en nyckelroll här.

För att bli en duktig UI-designer bör du vara intresserad av färgkombinationer, former och estetik. Att ha öga för detaljer och vara noggrann är också viktigt eftersom du ofta jobbar med små, precisa förändringar som kan ha stor påverkan på användarupplevelsen. Även om det kan låta lite flummigt till en början, finns det faktiskt tydliga visuella principer och strategier som du kan lära dig för att skapa riktigt snygga och effektiva gränssnitt. Det handlar inte bara om att ha ett ”gott öga” – du kan träna upp din förmåga genom att förstå teorin bakom design.

Vad är UX design?

UX, eller User Experience design, handlar istället om upplevelsen som användaren har när hen interagerar med en produkt eller tjänst. Det är inte bara hur något ser ut, utan hur det faktiskt fungerar. En UX-designer fokuserar på att skapa en smidig och logisk resa för användaren, från start till slut. Det handlar om att förstå användarens behov och beteenden för att skapa en produkt som är både användarvänlig och tillfredsställande att använda.

För att trivas som UX-designer behöver du vara bra på problemlösning och att tänka analytiskt. Du behöver även vara nyfiken på hur människor tänker och beter sig, eftersom mycket av jobbet handlar om att förstå användarnas behov och att lösa deras problem på ett smidigt sätt.

Så, vad är skillnaden då? 👀

UI och UX är två delar av samma pussel. UI är det som användaren ser och interagerar med – knappar, ikoner, färgscheman. UX är känslan och användarens övergripande upplevelse av produkten. Med andra ord: UI handlar om utseende och detaljer, medan UX handlar om funktion och flöde. Tänk dig att du besöker en snygg restaurang (UI), men om servicen är dålig och maten inte smakar gott, kommer upplevelsen (UX) inte vara bra, oavsett hur fint det ser ut.

”Tänk dig att du besöker en snygg restaurang (UI), men om servicen är dålig och maten inte smakar gott, kommer upplevelsen (UX) inte vara bra, oavsett hur fint det ser ut.”

Vad passar dig bäst?

Om du älskar detaljer och estetik är kanske UI-design är något för dig. Du kommer att trivas med att experimentera med färger och former för att skapa vackra gränssnitt som är roliga att använda. Det finns flera strategier och visuella principer att lära sig för att få till en riktigt snygg design.

Om du däremot är mer intresserad av hur saker fungerar och brinner för att lösa problem och skapa användarvänliga lösningar, kan UX-design vara mer din grej. Du kommer få gräva djupt i användarnas behov och beteenden och hitta smarta lösningar för att skapa sömlösa upplevelser. Vi pratar undersökningar på användarna och mer analytiskt arbete.

I slutändan handlar det om vilken del av designprocessen som tilltalar dig mest, och i vissa fall kan man jobba som både UI/UX designer – en kombinerad roll som gör båda. Oavsett om du dras till UI eller UX, är båda viktiga för att skapa sjyssta digitala produkter!

Om du är nyfiken på UI design borde du kolla in Technigos UI design course. Då får du lära dig att design professionella användargränssnitt i Figma 💪

Tillgänglighet på webben – vad är det och varför är det viktigt?

Skrivet av Julia Lundmark Weinz den 13 september 2022. Postad i tillgänglighet, Tips, UX. Skriv en kommentar, tack!

Kanske har du någon gång hört talas om ”tillgänglighet”? Ett alltmer centralt begrepp inom webbsammanhang. Men vad betyder det? Häng med så vi reder vi ut det tillsammans!

Vad är webbtillgänglighet? ‍♀️
Tillgänglighet handlar i grund och botten om att ta hänsyn till människors olika behov, så att alla kan ta sig runt i samhället oavsett någon typ av funktionsvariation. Det kan till exempel handla om att anpassa den fysiska miljön i en lokal så att dörrar kan öppnas av personer med nedsatt rörelseförmåga.

Webbtillgänglighet handlar på samma sätt om inkludering, men om digital sådan – alltså hur vi bygger webbplatser, appar och andra digitala tjänster för att så många som möjligt ska kunna förstå och interagera med dem[1].

Därför är det så viktigt❗
Som du säkert vet ger webben stora möjligheter att tillhandahålla information och tjänster. Även många myndigheter och samhällsviktiga funktioner ger idag service via digitala tjänster. För att inte lämna grupper av individer utanför, på grund av exempelvis nedsatt syn, motorik, lässvårigheter eller andra förutsättningar, behöver webbsidorna utformas på ett korrekt sätt.

Genom att väva in standarder och riktlinjer för webbtillgänglighet i utvecklingsprocessen, skapas förutsättningar för att så många som möjligt ska kunna använda tjänsterna och informationen.

Visste du att det i Sverige till och med finns lagkrav på tillgänglighetsanpassade webbplatser enligt Lagen om tillgänglighet i offentlig service (sk. DOS-lagen). [2]

Så här funkar det
Att utveckla en tillgänglig webbplats omfattar många områden och aspekter – från färgkontrast, textning, logik och navigation med mera. Den internationella standarden Web Content Accessibility Guidelines (WCAG) nivå AA delar upp webbtillgänglighet i totalt 78 kriterier för utvecklingen av en webbplats. Dessa kan i sin tur kategoriseras i fyra övergripande principer. En webbplats ska enligt WCAG vara:

1) Möjlig att uppfatta – Webbsidan ska ha tillräckliga kontraster, textade och syntolkade medier som ska kunna uppfattas av hjälpmedel.

Genom att till exempel tilldela en bild en alternativ text (alt-text) kan någon som använder hjälpmedel ta del av innehållet som de annars rent visuellt hade gått miste om. Alt-texter skrivs vanligen direkt i koden för en webbsida och syns inte av blotta ögat men hjälper personer som använder skärmläsare att förstå innehållet på en webbplats.

HTML-koden med alt text för bilden ovan skulle kunna se ut så här:

 <img src=“IMG_584792.png” alt=“Cute cat”>

2) Hanterbar – handlar om att komponenter på en webbsida måste vara navigerbara. Till exempel att webbsidan är navigerbar via tangentbord eller att det finns klickbara ytor.

3) Begriplig – betyder att informationen och designen måste vara begriplig och följa en konsekvent struktur. Det avser både den visuella designen samt att texten på webbplatsen.

4) Robust – Webben nyttjas inte bara via datorer utan även via mobiltelefoner och surfplattor. Webbplatsen måste därför vara robust för att kunna tolkas av olika användarprogram och hjälpmedel, till exempel följa olika kod-standarder. [3]

Känns det rörigt? Oroa dig inte, du som ska jobba med webb behöver självklart inte kunna alla dessa standarder och kriterier utantill. Du kommer också märka att det kan vara svårt att tillmötesgå alla enskilda behov. Även stora myndigheter kan inte alltid leva upp till alla riktlinjer. Det är bättre att vara ödmjuk och transparent. Använd istället riktlinjerna i WCAG som verktygslåda för god design. Ett tips för dig som ska arbeta med webb är även att involvera sakkunniga i utvecklingsprocessen för att öka insikter om vilka faktiska utmaningar dina användare möter

Nu har vi tillsammans kommit ett steg närmare i att skapa tillgängliga webbplatser! På Myndigheten för Digital förvaltning (digg.se) finns mer information om webbtillgänglighet och mer ingående information om DOS-lagen och WCAG.

Referenser

[1] https://webbriktlinjer.se/tillganglighet/terminologi/

[2] https://webbriktlinjer.se/lagkrav/webbdirektivet

[3] https://www.w3.org/Translations/WCAG20-sv/

R.I.P. Personan. Länge leve Beteendetypen!

Skrivet av Emma Waern den 11 april 2022. Postad i Inspiration, Tips, Trender, UX. Skriv en kommentar, tack!

Personor är påhittade personer som används i syfte att förstå den målgrupp som en produkt eller tjänst vänder sig till. Ett litet gäng personor kan tillsammans representera målgruppen och de ska hjälpa teamet som utvecklar produkten eller tjänsten att relatera och sätta sig in i vilka behov, beteendemönster och mål de har, som teamet vill möta.

För ett år sedan läste jag en kurs i människa- datorinteraktion och då gjorde jag ett par personor. Feedback som jag fick av en annan student löd något i stil med “Varför är personorna så negativa?”. Jag hade försökt beskriva deras begränsningar för att belysa vilka behov de hade. Men jag upplevde också ett motstånd när jag författade och namngav mina personor. Minns att jag tänkte “hur troligt är det att de personliga detaljer som framgår här ska hjälpa någon att få en bra användarupplevelse?”.

För att ta ett exempel och bjuda lite på mig själv har ni här mig som en persona:

Emma är 37 år och bor med sin man och tre barn i ett radhus i Nacka utanför Stockholm. Hon har en kandidatexamen som studie- och yrkesvägledare och pluggar heltid för att snart möta en ny karriär som UX-designer. Emma är generellt sett ganska analog i sitt beteende. Hon använder gärna papper och penna och har inga konton i sociala kanaler aktiva (utom LinkedIn, men det räknas väl inte). Hon gillar kakor och när hon inte äter dom så godkänner hon dom, alltid. Emma har absolut ingen foliehatt men hon kan sy och tycker att det är ganska roligt att skapa kläder. Hon borde verkligen yoga oftare och äta mycket mer grönsaker. Tandställningen ser hon fram emot att ta ut någon gång under sommaren 2022.

Varsågod att matcha din affärsnytta med mig.

Som du ser finns det geografiska, ekonomiska och sociala aspekter av personan som jag tänker gör hen icke representativ. Personan är ofta för platt och ibland lite för perfekt för min smak, och väcker varken nyfikenhet eller sympati. Jag har aldrig sett en persona som är långtidssjukskriven, blind, transsexuell eller har koncentrationssvårigheter. Har du? Däremot har jag sett flera i form av kvinnor mitt i karriären vars största intresse är att shoppa mode. Ointressant för sitt ändamål, men också oanvändbar om hen skulle råka ut för en olycka och dö.

Beteendetyper är det nya svarta

När jag samarbetade med en erfaren och kompetent person verksam inom Customer Experience (CX) bekräftade hen min bild av personan som gammal och trött och sa att beteendetyper (kallas även behovstyper och användartyper, det är samma sak) är på väg att ersätta henne. Sedan dess har jag jobbat med att ta fram beteendetyper, som jag tycker är mycket mer användbara än personor eftersom de enklare går att generalisera.

Beteendetyper kan baseras på:

Behov och drivkrafter (vad motiverar och engagerar typen?)
Karaktäristik (hur beter typen sig?)
Användningsmål (vad vill typen uppnå?)
Utmaningar att möta (hur kan typen tillfredsställas?)

Ett exempel på en beteendetyp

Den målinriktade är en beteendetyp som jag tog fram i samarbete med en kollega då vårt uppdrag var att hjälpa en elektronikhandel optimera sin sajt. Först intervjuade och testade vi ett scenario på tre personer. Av datan skapade vi sedan tre beteendetyper;

Den målinriktade
Den sakkunnige
Den osäkre

Vad tycker du?

Jag kan ha fel, men att utforma en persona för att anpassa användarcentrerad design efter hens behov och preferenser, känns lite… 2003? Det kanske helt enkelt är en smaksak vilka metoder som designer föredrar att använda för att visualisera och levandegöra användares mål, behov och drivkrafter. Troligtvis är en kombination av verktyg den mest gynnsamma vägen att gå. Jag vill gärna höra mer erfarna designers tankar i ämnet, så snälla skriv till hello@tjejerkodar.se eller kontakta mig på LinkedIn. Tack!

Portfoliopaniken – så blir du av med den!

Skrivet av Emma Waern den 21 mars 2022. Postad i Inspiration, Tips, UX. Skriv en kommentar, tack!

Jag går en utbildning för att byta bransch och ska börja jobba inom UX-design om drygt ett år. Innan dess ska jag landa en rolig och lärorik praktikplats – men jag har ingen portfolio… än. Jag lider litegrann av ”portfoliopanik”. Jag har börjat bygga på min portfolio både en, två och många gånger den senaste tiden. Det är svårt och det tar mycket tid! En heldags jobb med ett visst koncept förkastar jag ofta till förmån för en ny, annan idé, som säkert kommer bli mycket mycket bättre. Eller?

Konkretisera vad det är du gör

Som sagt är jag långt ifrån färdig med min portfolio. Just nu finns ett antal utkast och jag vet inte riktigt hur det ska gå att få ihop det hela… Men några saker som jag har märkt hjälper mig hålla motivationen uppe är att sätta upp mål för mig själv. En formel som jag flitigt använt mig av när jag coachat andra är SMART.

Alltså, ditt mål ska vara:

Specifikt (t.ex. lägga till projekt X i portfolion)
Mätbart (1 projekt)
Accepterat (det känns okej)
Realistiskt (rimligt och genomförbart)
Tidssatt (t.ex deadline kl 16)

Om det går att checka av parametrarna ovan ökar chanserna att du når dina mål. Små delmål är dessutom rätt sköna att bocka av, eller hur? Det är användbart på många olika områden i livet.

Var agil och se feedback som en gåva

Enligt den agila metoden är det bra att tidigt i utvecklingsfasen testa (t.ex. en prototyp) och be om feedback. Men du vill kanske inte testa om din portfolio fungerar på en arbetsgivare, för om den inte gör det så kan du ha bränt den bron, så att säga… Fråga någon du har förtroende för, som du vet vill dig väl, om hen kan ta en titt och ge sina synpunkter. Be personen att vara ärlig, och framför allt, lyssna och ta till dig av kritiken. Gå inte i försvar eller försök förklara hur du egentligen menar, då är det helt poänglöst med feedback.

Vad kommer först när du söker jobb – din portfolio eller den person som är du?

Jag har en hypotes som säger att den som tar emot en portfolio eller ett CV snabbt vill få en överblick för att kunna avgöra om personen verkar vettig. Ditt CV säger något om vem du är eftersom det talar om vad du hittills har gjort. Men det är inte ditt CV som blir erbjudet ett jobb – det är såklart du! På samma sätt kan din portfolio visa hur du jobbar som designer men vem du är måste upplevas genom att träffa dig. Om du först söker kontakt med företaget du är intresserad av och gör ett trevligt intryck så kommer de troligtvis inte avfärda dig för att din portfolio inte är helt perfekt.

Du blir aldrig färdig!

Din portfolio kommer aldrig att bli färdig utan den fortsätter att utvecklas med dig. Kanske kommer du att blicka tillbaka på gamla grejer som gjorts i början av din karriär senare och känna nostalgi, stolthet eller skam. Eller alltihop.

“Du blir aldrig färdig, och det är som det skall.”

(Ur Tomas Tranströmers dikt Romerska Bågar: https://www.lyrikline.org/en/poems/romanska-bagar-7605)

Tack, Tomas, för de underbart trösterika orden! Jag blir aldrig färdig med min portfolio, och det är helt i sin ordning.

Min portfolios omslag med ett foto av mig och en pratbubbla. — Förstasidan av min portfolio som den ser ut idag. Hur den ser ut imorgon vet ingen.

Mallar – Här finns ett bra verktyg med mallar för portfolio för UX:are.
Tutorial i Figma med Unn Swanström – Din portfolio kan vara en prototyp som du bygger i t.ex. Figma.
Designkritik–Mer om feedback och specifikt designkritik enligt Antrop (tjänstedesign- och UX-byrå).

Har du en portfolio? Hur var det att bygga den? Skriv till oss på hello@tjejerkodar.se och berätta!

Intervju med UX-designern Jennifer från ESSIQ ✨

Skrivet av tjejerkodar den 30 november 2021. Postad i Inspiration, Intervju, UX. Skriv en kommentar, tack!

⚡️ Hallå Jennifer! Du jobbar på ESSIQ – berätta, vad gör ni?
ESSIQ är ett teknikkonsultföretag med slogan: ”Här kommer kunderna i andra hand” – man menar på att man jobbar som bäst när man som medarbetare mår som bäst!

ESSIQ har många pågående projekt just nu. I projektet som jag jobbar i, får jag designa gränssnittet för en app och hemsida som ska användas av hissreparatörer när de installerar, besiktar, eller felsöker hissar.

⚡️ Du är UX-designer på ESSIQ med bakgrund som programmerare – hur kom det sig att du hamnade på den banan?
Som nog många andra så har min väg inte vart helt rak. Jag började läsa datateknik på Chalmers men nära examen så blev jag tveksam om jag verkligen valde rätt. Så jag hoppade av och läste historia i ett år, samtidigt som jag läste lite andra strökurser vid sidan av.

En av strökurserna var human-interaction design där jag fick en ny kärlek för datateknik och speciellt för UX! Efter detta så återupptog jag mina studier på Chalmers och sedan fortsatte jag med mastern: interaction design and technologies för att fokusera på UX.

⚡️ Hur är din programmeringsbakgrund värdefull för dig idag i ditt yrke?
Ett projekt består av många människor med olika kompetenser. Det är därför bra att ha kunskap utanför sitt ansvarsområde för att kunna förmedla idéer och förstå andras resonemang när man diskuterar olika designlösningar.

Som UX-designer med programmeringsbakgrund så kan jag även vid designstadiet veta vad som är möjligt eller enklast att implementera. Jag kan också hoppa in och hjälpa till vid behov om det behövs i projekten.

⚡️ Vad är det som är så spännande med att jobba som konsult?
Som nyexaminerad så är det så svårt att veta exakt vad man vill göra. Att jobba som konsult så är det möjligt att testa på olika projekt och få kundkontakt med företag från olika industrier. Det är bra att få testa på olika projekt innan man vet vad man vill fokusera på!

⚡️ Hur kan en dag se ut för dig?
Dagen börjar ofta med en trevlig podd i öronen samtidigt som jag kollar mail och kalendern. Sen så sätter jag mig framför datorn och börjar designa. Varje dag så har vi en ”stand up” – ett möte där varje medarbetare i projektet får chans att berätta vad de har gjort och vilka utmaningar de står inför. Utöver ”stand up” så blir det en del möten där man får diskuterar designen inom teamet eller med kunden.

⚡️ Du har kodat ihop kodutmaningen Skapa en hero image, vad är så speciellt med en hero image?
Hero image är det första användaren ser på hemsidan. Det är därför viktigt att den visar en överblick av hemsidans innehåll samtidigt som den ska vara snygg och inkapsla den känslan som man vill att besökaren ska få.

Man kan verkligen vara kreativ med hero imagen, och det ska bli kul att få se alla era från kodutmaningen☺️ .

Jennifer kommer att köra en code along i December 2021 på hur hon skapar en hero image, och särskilt från hennes perspektiv som UX-designer. Kika in utmaningen här och delta du också!