Grafiska element
Grafer och diagram
INCA innehåller mycket statistik i form av rapporter, grafer och diagram.
I rapporter och diagram är det viktigt att använda de färger som tagits fram och visas i avsnittet Våra färger.
Vid färgval, utgå från vår blå huvudfärg, tänk på kontraster och att ta hänsyn till färgblinda. Undvik därför att använda grön och röd färg i samma diagram.
Använd rätt färger i grafer och diagram
I avsnittet Vi ser färger olika beskrivs färgseende och färgblindhet. Nedan visas alla våra huvudfärger och komplementfärger, inklusive de färger som endast bör användas vid grafer, diagram och rapporter om det behövs. Man kan se att för prot och deut skiljer det inte mycket mellan 6, 7 och 12. Samma sak gäller mellan 2 och 8, 4 och 9, 5 och 11. Det är därför extra viktigt att tänka på färgval i grafer och diagram. Kombinationer som försvårar för en färgblind användare bör inte användas. Som regel är det bra att hålla sig till färgerna 1 - 6 eller 1 - 5 + 12 istället.
| True | Prot. | Deut. | Trit. |
|---|
Våra huvud- och komplementfärger simulerade för olika färgseenden.
Exempel på användning av en dålig färgkombination
Här ser vi exempel på färgkombinationen på 2, 5, 6, 7, 8, 11 och 12 i ett diagram. För en användare med normal färgsyn är diagrammets färger en fin och bra kombination. Men för en färgblind användare blir det väldigt svårt att särskilja de olika regionernas färger.
Exempel på användning av en bättre färgkombination
Här ser vi exempel på färgkombinationen 1 - 6 och en mörkare grå färg (#545454) i ett diagram. Den grå färgen är tillagd eftersom det inte finns mer än 6 bra kontrastfärger bland våra färger. För en användare med normalt färgseende kanske inte denna kombination är lika fin som exemplet ovan. Men här är kontrasten fortfarande bra, och vinsten ligger i att en färgblind användare lättare kan uppfatta de olika färgerna.
Knappar, ikoner, och labels
I den här delprofilen beskrivs regler för hur knappar och ikoner ska användas, placeras och färgsättas.
Utseendet på INCA:s knappar är definierade i rcc-bootstrap. Knapparna finns i olika knapptyper som vi kallar primary, success, info, warning, danger och 2 typer av default. Färgerna skiljer sig från vanliga Bootstrap då vi använder våra egna färger.
Storlek på knapparna
Använd knappstorlek "normal" för inrapporteringsformulär. På INCA-plattformen kan även i vissa fall knappstorlek "small" användas.
Användning av ikoner
Den här versionen av manualen följer fontawesome version 6.7.x. Placera alltid ikoner på
knapparna till vänster om texten samt använd fa-solid. Vid behov ange marginalen 0.3em
mellan ikon och knapptext. T.ex: <FontAwesomeIcon icon-"fa-solid fa-floppydisk"/>.
Detsamma gäller om ikoner används i menyer.
Text: #005092
Text: #3C3C3C
Olika knapptyper
INCA använder knappar för att utföra olika typer av åtgärder. Vilka knapptyper som visas beror på användarens roll och var på INCA-plattformen användaren befinner sig.
I exemplen nedan visas ikontypen ovanför respektive knapp.
Knapptyp: Primary
Knapptypen primary är den knapp som oftast väljs i ett arbetsflöde. Den används vid vanligt förekommande händelser som "Spara", "Utför" och "Logga in".
Specialfall: circle-check
Ikonen circle-check är lite speciell då denna används i knappar och labels, men det finns en liknande ikon vid namn check som är en bock utan cirkel runt. Ikonen check får inte användas i knappar eller labels, utan enbart i specifika sammanhang utanför knappar eller fält. Ett exempel är vid validering av hämtad IPÖ-data, se IntegratedManualSelect.
Exempel på knapptypen primary med ikoner på INCA
fa-floppy-disk
fa-right-to-bracket
fa-magnifying-glass
fa-circle-check
.active
.disabled
:hover och :focus
Knapptyp: Success
Knapptypen success skiljer sig från knapptypen primary genom att den används vid skapande händelser, exempelvis "Lägg till" och "Importera data".
Exempel på knapptypen success med ikoner på INCA
fa-circle-plus
fa-file-import
fa-user-plus
fa-copy
fa-link
fa-gears
.active
.disabled
:hover och :focus
Knapptyp: Info
Knapptypen info är till för att informera och upplysa användaren om något.
Exempel på knapptypen info med ikoner på INCA
fa-circle-info
fa-table-columns
.active
.disabled
:hover och :focus
Knapptyp: Warning
Knapptypen warning är till för att uppmärksamma användaren på en mer allvarlig händelse.
Exempel på knapptypen warning med ikoner på INCA
fa-floppy-disk
fa-xmark
.active
.disabled
:hover och :focus
Knapptyp: Danger
Knapptypen danger är till för att uppmärksamma användaren på en negativ och farlig händelse som "Makulera" och "Ta bort", vilket är vanligt att visualisera med en röd färg.
Nedan ser vi exempel på när knapptypen danger används, men också ett exempel på en gul knapp av typen warning med nästan samma text.
Anledningen till att "Ta bort byggd vy" är gul, är för att "Ta bort byggd vy" och en "Ta bort" knapp placeras bredvid varandra för rollen Registerkonstruktör. Den röda knappen markerar därför den farligare åtgärden.
Exempel på knapptypen danger med ikoner på INCA
fa-trash-can
fa-xmark
.active
.disabled
:hover och :focus
Knapptyp: Default typ 1
Knapptypen default typ 1 används vid stödfunktioner på INCA.
Exempel på knapptypen default typ 1 med ikoner på INCA
fa-eye
fa-eye-slash
fa-print
fa-pen-to-square
fa-chart-column
fa-magnifying-glass-minus
.active
.disabled
:hover och :focus
Knapptyp: Default typ 2
Knapptypen default typ 2 används vid inställningar och återställningar.
Det finns vissa undantag till denna regel, se avsnittet Placering av knappar i en modal nedan.
Exempel på knapptypen default typ 2 med ikoner på INCA
fa-eye
fa-gear
fa-rotate-right
.active
.disabled
:hover och :focus
Placering av knappar i en modal
Det är alltid huvudåtgärden som placeras längst till höger i en modal (se exempel 1-3 och 5-6).
Om det finns flera olika knapptyper i en modal placeras i regel knapptypen primary längst till höger i en modal (se exempel 5 och 6).
Knapptypen danger och knapparna ”Stäng” och ”Avsluta” placeras i regel alltid till vänster om en positiv knapp (primary och success). Undantaget är när det inte finns någon positiv knapp i modalen (se exempel 3 och 4).
Modalrubrik
Exempel 1
Modalrubrik
Exempel 2
Modalrubrik
Exempel 3
Modalrubrik
Exempel 4
Modalrubrik
Exempel 5
Modalrubrik
Exempel 6
Förbjudet
Det är extra viktigt att tänka på följande:
Exempel 1
Placera aldrig en knapp av typen primary till vänster om knapparna ”Avbryt”, ”Stäng” eller ”Avsluta” i en modal. Rubriken i modalen ska aldrig placeras till höger.
Modalrubrik
Exempel 2
När en modal innehåller knappen ”Ta bort” och ”Avbryt”, ska ”Ta bort” placeras till höger. Det kan finnas undantag beroende på hur frågan är formulerad i modalen. I första hand bör frågan formuleras om istället för att ändra knappordningen.
Modalrubrik
Exempel 3
När en modal innehåller en knapp av typen primary ska den alltid placeras längst till höger.
Modalrubrik
Labels och badges
Labels kan lätt blandas ihop med badges. En label har rektangulära med svagt rundade hörn, till skillnad från en badge som är tydligt avrundad på höger och vänster sida.
Labels ska användas som default, inte badges. Det finns några få undantag när badges används och det är när det finns en mindre sifferruta som på inkorg och flikar, se exempel nedan.
Kontrollera vid ramverksuppdatering att labels har korrekt form i och med att det i äldre formulär förekommer badges som tidigare var rektangulära.
Exempel på labels.
Exempel på hur badges inte ska användas.
Ny
55Strålbehandling
7Exempel på undantag där badges används.
Ikon i labels
När en ikon med bock eller kryss används i en label ska varianten av ikonen med cirkel väljas, exempelvis circle-check eller circle-xmark.
Labels med ikoner.
Inforutor och modaler
Modaler och inforutor på INCA är viktiga komponenter som informerar användaren om något som behöver uppmärksammas eller är fel. Det är därför viktigt att modaler och inforutor är konsekventa och används likadant i hela systemet.
Inforutor är vanligt förekommande i inrapporteringsformulären, där de ger information eller en varning till användaren.
Vid validering av variabler och formulär visas olika typer av valideringsmeddelanden för användaren. Vilken typ av validering som visas skiljer sig åt, och det är viktigt att använda rätt typ vid rätt tillfälle. I den här delprofilen går vi igenom regler för hur de olika valideringstyperna ska se ut, och när de ska användas.
Inforutor
Färgen i en inforuta är viktig eftersom att den ger en snabb indikation på vilken typ av meddelande det gäller redan innan användaren har läst texten. För att öka tydligheten ännu mer har vi lagt till en passande ikon till vänster om texten.
- Bakgrundsfärg: success 20%
- Borderfärg: success 60%
- Ikon: faCheckCircle med färgen #0F5B38
- Textfärg: #000000
- Bakgrundsfärg: infoblå 20%
- Borderfärg: infoblå 60%
- Ikon: faExclamationCircle med färgen #006B94
- Textfärg: #000000
- Bakgrundsfärg: warning 20%
- Borderfärg: warning 100%
- Ikon: faExclamationTriangle med färgen #996A0E
- Textfärg: #000000
- Bakgrundsfärg: danger 20%
- Borderfärg: danger 60%
- Ikon: faExclamation med färgen #6E0502
- Textfärg: #000000
Placering och bredd
Inforutor ska alltid vara hela bredden av sidan/formuläret.
Exempel på inforuta som löper korrekt längs hela formulärets bredd.
Modaler
Det finns olika typer av informationstexter, modaler och valideringar.
Nedan visas validering, hjälptext och tooltip.
Validering och hjälptext
Exempel 1 visar en röd valideringstext och en hjälptext med info som syns när användaren trycker på infoikonen.
Exempel 1: Hjälptext med info och en röd valideringstext på inputfältet.
En tooltip kan se olika ut beroende på innehåll. Exempel 2 visar en tooltip med info som syns när användaren hoovrar över labeln.
Exempel 2: Tooltip med info.
En popover kan exempelvis ha en aktivitet där användaren kan ta bort ett block* med innehåll i ett formulär, se exempel 3.
Exempel 3: Popover.
*Block benämns ibland som panel.
Confirm modal
Confirm modals kan se väldigt olika ut. Det viktiga är att tänka sig in i användarens perspektiv och att inte erbjuda för många olika alternativ. Här visas två typer från barncancerregistret.
Modalen i exempel 4 påminner om exempel 3 från tidigare avsnitt om Popovers, i och med att båda frågar användaren om att ta bort något. Skillnaden är att i exempel 3 är det ett block* i ett formulär man tar bort, medan hela formuläret tas bort i exempel 4. Det kan göra större skada att ta bort ett helt formulär än ett block i ett formulär, och därav är exempel 3 en tooltip och exempel 4 en modal.
Exempel 4.
*Block benämns ibland som panel.
Liknande exempel 4 är exempel 5 en confirm modal, men här visas modalen när användaren försöker byta flik/formulär utan att ha sparat sina ändringar. Här ligger knappen spara till höger i modalen eftersom att den har en positiv inverkan. Knappen ”Fortsätt utan att spara” är av typen danger och har en negativ inverkan eftersom användaren förlorar sina ändringar vid tryck på den.
Exempel 5.
Övriga modaler
Vi har flera andra typer av modaler. Bland annat informationsmodaler och för barncancerregistren fyller användaren i inrapporteringsformulären i en modal via startsidan. Alla modaler har en maxbredd för att inte täcka hela användarens fönster vid användning av en stor skärm. Maxbredden varierar beroende på innehåll, typ och skärmstorlek.
Infomodal från barncancerregistret.