Aptic
UX-utvärdering · Tillgänglighet · Webbdesign
Från UX-utvärdering till förbättringar i praktiken
Hur kan en komplex webbplats bli tydligare, mer lättnavigerad och tillgänglig för fler?
I ett grupparbete från utbildningen till UX designer vid Högskolan i Skövde utvärderade vi Aptics svenska startsida med fokus på användbarhet och tillgänglighet. Genom olika utvärderingsmetoder identifierade vi problem och tog fram förbättringsförslag i en prototyp.
Efter projektet fick jag möjlighet att fortsätta arbetet under ett sommarjobb hos Aptic, där jag använde insikterna från utvärderingen för att förbättra texter, struktur och typografi på stora delar av den svenska webbplatsen i WordPress.
Projekt: UX-utvärdering och efterföljande sommarjobb
Team: Tre UX-studenter under utvärderingen
Min roll: UX-utvärdering, prototyparbete och webbplatsförbättringar
Metoder: Heuristisk utvärdering, perspektivbaserad inspektion, intervjuer och kontrastanalys
Utvärdering och research
För att identifiera användbarhetsproblem på Aptics svenska startsida kombinerade vi flera utvärderingsmetoder.
Vi började med en heuristisk utvärdering utifrån Nielsens tio användbarhetsprinciper. Därefter genomförde vi perspektivbaserade inspektioner med fokus på ADHD och synnedsättning, samt två intervjuer med personer med ekonomibakgrund.
Vi undersökte även färgkontraster och simulerade färgblindhet för att upptäcka eventuella tillgänglighetsproblem.
Genom att jämföra resultaten från de olika metoderna kunde vi identifiera återkommande problem, bedöma deras allvarlighetsgrad och prioritera vilka förbättringar vi skulle arbeta vidare med.
Heuristisk utvärdering
Vi utvärderade Aptics webbplats utifrån Nielsens tio användbarhetsprinciper för att identifiera problem med bland annat navigation, konsekvens och tydlighet.
Genom att granska webbplatsen systematiskt kunde vi upptäcka flera förbättringsområden, exempelvis otydliga benämningar, inkonsekvent innehåll och bristande kontroll över rörliga element.
Problemen dokumenterades och bedömdes utifrån allvarlighetsgrad för att hjälpa oss prioritera det fortsatta arbetet.
Perspektivbaserad inspektion
Vi granskade webbplatsen utifrån två olika perspektiv: personer med ADHD och personer med synnedsättning. Syftet var att identifiera hinder som kan påverka användbarheten och tillgängligheten.
Inspektionen uppmärksammade bland annat stora textmängder, otydlig informationsstruktur, bristande kontraster och rörliga element som kunde göra det svårt att fokusera eller ta till sig innehållet.
Resultatet gav oss en bättre förståelse för hur olika behov kan påverka upplevelsen av en webbplats och vilka förbättringar som borde prioriteras.
Intervjuer
Vi intervjuade två personer med erfarenhet från finansbranschen för att få en bättre förståelse för hur målgruppen uppfattade Aptics webbplats.
Intervjuerna visade bland annat ett behov av tydligare information om företaget och dess erbjudanden. Deltagarna efterfrågade också en bättre överblick över innehållet och en tydligare struktur.
Insikterna kompletterade våra övriga utvärderingar och låg till grund för flera av förbättringsförslagen i prototypen.
”Jag ska inte behöva ha glasögon när jag sitter vid skärm, men får nog ta på dem ser jag”
Färg- och kontrastmätning
Vi undersökte webbplatsens färger och kontraster utifrån WCAG:s riktlinjer för tillgänglighet. Vi simulerade även olika typer av färgblindhet för att se hur färgvalen kunde påverka användbarheten.
Analysen visade brister i kontrasten mellan text och bakgrund, vilket kunde göra informationen svårare att läsa för personer med nedsatt syn.
Resultaten gav oss underlag för att föreslå förbättringar som skulle göra innehållet tydligare och mer tillgängligt.
Mätningen visar ett exempel på grön text på lila bakgrund som återfinns på webbplatsen.
Våra viktigaste insikter
Genom att sammanställa resultaten från våra olika utvärderingsmetoder kunde vi identifiera och prioritera tre övergripande förbättringsområden.
Informationsmängd och överblick
Stora textmängder och en otydlig informationshierarki gjorde det svårt att snabbt hitta relevant innehåll och riskerade att öka den kognitiva belastningen.
Struktur och konsekvens
Kopplingen mellan Aptics lösningar och branscher behövde förtydligas. Inkonsekventa benämningar och en blandning av svenska och engelska försvårade förståelsen.
Tillgänglighet och användarkontroll
Bristande kontraster, otydlig typografi och rörligt innehåll utan pausfunktion skapade hinder för användare med olika behov.
Dessa insikter låg till grund för de mål, krav och designförslag vi arbetade vidare med i prototypen.
Från insikter till lösningar
Med utgångspunkt i de identifierade problemen formulerade vi mål och krav för en tydligare och mer användarvänlig startsida.
Vi fokuserade på att förenkla innehållet, förbättra navigationen och skapa en tydligare koppling mellan Aptics lösningar och de branscher företaget riktar sig till. Tillgänglighet var också en viktig del, med förslag på bättre kontraster, tydligare typografi och möjlighet att pausa rörligt innehåll.
Efter skisser och iterationer tog vi fram en mid-fi-prototyp i Figma, baserad på våra prioriterade problem och mål. Vi valde att arbeta i gråskala för att hålla fokus på struktur, funktion och utformning av olika element, utan att färgval skulle ta uppmärksamheten från designlösningarna.
En pausknapp ger besökaren kontroll över videon i sidhuvudet. Språkvalet har flyttats till huvudmenyn och en navigationsindikator visar var på sidan besökaren befinner sig. En pil längst ner visar att det finns mer innehåll och gör det enkelt att gå vidare till nästa sektion.
I den andra sektionen presenteras Aptics lösningar med mindre text och en tydligare informationshierarki som gör innehållet lättare att överblicka.
Den tredje sektionen ger en tydligare överblick över vilka branscher Aptic riktar sig till, med ett mer koncentrerat innehåll och fokus på det viktigaste.
I den fjärde sektionen har vi lagt till två delar som förtydligar Aptics erbjudande och presenterar företaget närmare, utifrån önskemål som framkom under intervjuerna.
I den sista sektionen har bakgrundsbilden placerats till vänster, inom ramen för det diskreta sicksackmönster som återkommer genom hela prototypen.
Genom att separera bild och text, istället för att placera text ovanpå en heltäckande bakgrundsbild, skapas en tydligare visuell struktur. Det minskar den kognitiva belastningen och gör budskapet lättare att uppfatta.
Från UX-insikter till förbättringar i WordPress
Efter utbildningsprojektet fick jag möjlighet att fortsätta arbetet med Aptics webbplats under ett sommarjobb.
Med utgångspunkt i insikterna från vår UX-utvärdering arbetade jag vidare med stora delar av den svenska webbplatsen. I WordPress såg jag över och uppdaterade texter, innehållsstruktur och typografi för att skapa en tydligare och mer konsekvent användarupplevelse.
Arbetet gav mig möjlighet att omsätta våra tidigare analyser och förbättringsförslag i praktiken, även på sidor som inte ingick i den ursprungliga utvärderingen.
Reflektioner och lärdomar
Projektet gav mig värdefull erfarenhet av att kombinera olika utvärderingsmetoder för att identifiera och prioritera användbarhetsproblem. Jag fick också en större förståelse för hur innehåll, struktur och tillgänglighet samverkar för att skapa en bättre användarupplevelse.
Att senare få arbeta vidare med webbplatsen i WordPress var särskilt lärorikt. Det gav mig möjlighet att ta med mig insikterna från UX-arbetet och använda dem i praktiken, på en större del av webbplatsen än vi ursprungligen hade utvärderat.