Icons
Ikoner är visuella, grafiska symboler som används för att för att enskilt eller tillsammans med text förmedla ett budskap.
Innehållsförteckning
Komponentkällor
1177
Inera
Designspecifikation
Ikonbiblioteket är framtaget för att tillhandahålla tydliga ikoner som kännetecknar Ineras och 1177:s varumärkesprofiler. Tjänster under Ineras och 1177:s varumärken använder primärt dessa varumärkesspecifika och egenritade ikoner. Ikonbiblioteken för varumärkena Inera och 1177 innehåller samma grundikoner, men med respektive profilfärger.
Ikonernas olika färger kan väljas i högermenyn i Figma.
Använd ikoner som ett grafiskt komplement till text och undvik att låta ikonen vara det enda informationsbärande elementet.
Storlekar
Våra ikoner i Figma finns i storlekarna 40x40px samt 20x20 px. Vill man använda andra storlekar är det fritt fram att sätta en egen storlek.
Ikonerna i IDS är i svg-format och kan sättas i den storlek man behöver.
Ikoner används sällan fristående som knappar, men skulle så vara fallet får man se till att klickytan är minst 24x24 px.
Friyta
Vi har i UX-ramverket tagit bort friyta/padding runt ikonerna. Arbetsytan som ikonerna ligger i är dock alltid konstant även om ikonen inte fyller ut bredden eller höjden.
Att vi valt att ta bort friytan/padding beror på att våra utvecklare vill arbeta med ikonerna utan friyta samt att det är lättare att placera och linjera ikoner med andra element.
Grid och design
40 x 40 px eller 20 x 20 px arbetsyta
Linjetjocklek:
40x40: 2px
20x20: 1px
2 px hörnradie
Linjens ändar ska vara rundade
Avskurna linjer behöver inte ha rundat avslut
Färger enligt varumärke, enda ikon som har fast färg är “shield locked filled” som är röd.
Historik
I UX-ramverkets begynnelse hade våra ikoner friyta/padding, total storlek 44x44 px och arbetsytan (live area) var 40x40 px. Då vi tog beslutet att ta bort friytan valde vi att behålla ikonerna i deras aktuella storlek 40x40 px - enklaste lösningen vilket gav samma utseende som tidigare.
Specifikt för 1177
Använd två nyanser av samma färg på ikonen (bas och mörk)
Detaljer inne ikonen har den ljusare nyansen
Röd: Används främst för navigationselement i ramverket, dvs i sajthuvud (navigation) eller i sajtfoten (stödlänkar).
Blå: Används för ikoner vid länkar eller till funktioner med call to action som knappar etc.
Grå: Används till ikoner som är informativa och inte har någon call to action. Dvs. som inte tillhör navigationselement, är länkade eller knutna till en funktion. (Undantag: förstoringsikon på bilder)
Exempel:
Ikonen användare finns här i röd, blå och grå variant. Röd används för inloggningsfunktion som är placerad i ramverket/sidhuvud. Blå används om exempelvis en knapp för inlogging är placerad på sidan i innehållet. Grå används t.ex om inloggningsfunktionen är disablad eller om det handlar om information om inloggning och inte är klickbart.
Se även Varumärkesmanualen för 1177 - grafiska element.
Specifikt för Inera
Använd samma färg på hela ikonen.
Ikoner är primärt gröna (Accent 40).
Icon Font
Vissa ikoner finns som ikonfont och kan användas i text. För att använda ikonfonten skriver du in namnet på ikonen och ändrar fonten till “inera-icons”. Dessa ikoner kan endast ha en färg och inte två.
Användningsområde för dessa ikoner kan exempelvis vara när en extern länk-ikon ska presenteras i löptext tillsammans med en länk.
Ikoner som finns som ikonfont är copy, copy-link och external-link.
Undantag - övriga ikoner
Varumärkesspecifika ikoner ska alltid användas i första hand, men i vissa specifika fall kan ikoner från Googles Material Design användas. Det gäller exempelvis om ett större antal ikoner snabbt behöver tas fram och det inte finns möjlighet eller budget för att ta fram nya varumärkesspecifika ikoner. I dessa fall hänvisar vi till Google Material Designs ikonbibliotek. Använd ikoner med ramlinje (ej fyllda).
Google Material Design - ikonbibliotek
Om ni saknar ikoner och behöver få hjälp att ta fram varumärkesspecifika sådana är det enklaste sättet att höra av er till UX-ramverket med ert önskemål.
Utgå från nedan färger om ni använder ikoner från Material Design:
Varumärke | Färg |
|---|---|
1177 |
|
Inera |
|
Tillgänglighet
Om en ikon/grafiskt element används i samband med en länk:
För att öka klickbara ytan så kan man även göra en enda länk av ikon och texten i en sammansatt länk. Gör ikoner som är en del av navigeringen klickbara. När du kombinerar text och bildelement i till exempel menyalternativ bör både texten och bilden vara klickbar.
För mer information läs: Gör länkar, klickbara ytor och menyer användbara för alla - Vägledning för webbutveckling
Allt innehåll som inte är text, som presenteras för användaren ska ha ett textalternativ (alt=”ett textalternativ”) som förklarar det grafiska objektet. Är det enbart en dekorativbild som inte ger någon form av information så kan en tom alt-text sättas istället. Skulle det finnas en text intill en ikon som redan förklarar ikonen så kan även denna få en tom alt-text då det kan upplevas upprepande för användare med skärmläsare.
Komponenter som har samma funktionalitet inom en uppsättning av webbsidor identifieras konsekvent. (Nivå AA) Konsekvent benämning av saker på hela webbplatsen underlättar för alla användare att känna igen sig och minskar onödig kognitiv belastning. Var konsekvent när du beskriver och namnger samma funktionalitet på olika sidor och skärmar. Det innebär till exempel att rubriker, etiketter, ikoner och alternativtexter som ska beskriva en skicka-knapp ska heta samma sak på hela webbplatsen. Inte Skicka på en sida och Sänd på en annan sida. Eller att en spara-ikon ska se likadan ut på hela webbplatsen.
Använd tillräckliga kontraster i komponenter och grafiska element: Minst 3.0 i kontrastvärde.
Använd tillräcklig kontrast mellan text och bakgrund: Minst 4.5 i kontrast för liten text (inklusive länk-texter) och 3.0 för stor text (exempelvis rubriker).
Tangentbord: All funktionalitet är hanterbar via ett gränssnitt för tangentbord utan att det krävs särskild timing för varje enskild tangenttryckning. Om det är ett interaktivt element så ska användare med tangentbord kunna nå den. (Nivå A)
Markera tydligt vilket fält eller element som är i fokus: Obs! Detta är ifall ikonen är interaktiv. Den som navigerar med t.ex. tab-tangenten behöver få veta var fokus ligger. Standardmarkeringen är ofta en tunn linje som är svår att se.Gör markeringen tydlig med tillräckligt hög kontrast 3.0:1. (Nivå AA)
Ikoner i SVG
Här finns ikonerna för respektive bibliotek att ladda ner i SVG.
1177
Inera
Feedback
Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad | Jan 18, 2020 |
Senast uppdaterad | Apr 15, 2024 |