Closebuy: WCAG-kompatibla kartikoner för hyperlokal shopping

KONTEXT

Akademiskt projekt

ROLL

Ikondesign & tillgänglighet

LEVERABLER

Ikonset med WCAG 2.1 AA-efterlevnad

VERKTYG

Figma, Color Oracle, kontrastkontrollverktyg

Brief

Skapa kartpiktogram och SVG-ikoner som klarar WCAG-kontrastkontroll samt vanliga färgblindhetskontroller.

Kärnproblem

Kartikoner måste vara synliga på många olika bakgrunder, konkurrera med andra kartmarkeringar och ikoner, och samtidigt utgöra ett tillräckligt flexibelt designsystem som kan utökas med fler kategorier efter behov. Knepigt arbete och kompromisser i överflöd!

Resultat

En strömlinjeformad IxA gjorde det möjligt för mig att skära ner ikonkategorierna till sex, som jag sedan kunde lösa med hjälp av både piktogram och färger, samt tillhandahålla en styling för kartan.

Appdesign & ikonmetod

Closebuy huvudsida som visar karta med ikoner

Closebuy filtersida som visar kategoriikoner

Webbappen tillhandahåller hyperlokala secondhand-shopping, och designmålet var att skapa en intuitiv vy av saker till salu i ditt omedelbara område.

Min metod för att säkerställa WCAG-efterlevnad:

1) Håll antalet nödvändiga ikonkategorier till ett minimum.

2) Använd ett kart-API som tillåter mig att ta bort onödiga lager på kartan samt möjligheten att styla färger och linjevikter.

3) Använd standardpiktogram där det finns tillgängligt, och se till att färgerna är urskiljbara. Testa och testa igen.

Tillgänglighetsvalidering

WCAG 2.1 nivå AA-efterlevnad

Kriterium 1.4.3 (Kontrastminimum): Uppnådde 4.5:1 kontrastförhållande för alla ikoner mot kartbakgrund
Färgblindhetstestning: Validerad med Color Oracle-simulator för deuteranopi, protanopi och tritanopi
Ikonstorlek: Minimum 42×42px för att uppfylla krav på pekområden

Omfattningsbegränsning

Detta projekt fokuserade uteslutande på visuell ikondesign och färgkontrast. Skärmläsarkompatibilitet och testning av assitanshjälpmedel var utanför projektets omfattning.

Ikonerna uppfyller visuella tillgänglighetsstandarder, men en implementering skulle kräva ytterligare arbete med semantisk HTML, ARIA-etiketter och anpassning för assistiv teknologi.

Testning för synlighet. Om och om igen.

Kartvy med färgkodade ikoner som visar olika produktkategorier

Vi bestämde oss för sex shoppingkategorier och jag satte igång att titta på befintliga piktogramsystem. Jag bestämde mig för att använda Material Design-ikoner där det var möjligt.

Samtidigt provade jag olika kombinationer av ikon- och kartfärger. Detta krävde mycket fram och tillbaka eftersom det är en dynamisk relation.

Till slut hade jag skapat ett färgschema som gjorde det möjligt för mig att ha två tillstånd per knapp, med en rimlig synbarhet för de vanligaste färgsynsbristerna.