Grafiska riktlinjer för digitala tjänster

Våra grafiska riktlinjer för digitala tjänster syftar till att göra alla våra tjänster enkla att använda och leverera den nytta som den syftar till för användaren. Det handlar även om att säkra att tjänsten fungerar för alla och förmedlar en trygg känsla genom dess enkelhet, tydlighet och igenkänning. Med tydliga riktlinjer för hur gränssnitt ska se ut och fungera blir det även mer kostnadseffektivt att både kravställa, utveckla och förvalta digitala tjänster. Riktlinjerna består av flera delar och utökas löpande om behov finnes, riktlinjerna ska täcka de områden där utveckling sker löpande.

Följande delar behandlas idag inom de grafiska riktlinjerna:

  • Grafiskt ramverk för digitala tjänster
    Samtliga digitala tjänster består av ett grafiskt gränssnitt, det är även i utvecklingen av dessa gränssnitt som mycket tid går åt i utvecklingsprojekt. Med ett standardiserat grafiskt ramverk uppnår vi både kostnadseffektiv utveckling genom standardiserad användning och återanvändning men även enhetliga gränssnitt för våra besökare.
  • Ikoner
    Enhetlig användning av ikoner i samtliga digitala tjänster.
  • Typsnitt
    Enhetlig användning av typsnitt i samtliga digitala tjänster.
  • Färg och logotyp
    Det finns en grafisk manual i Sundsvalls kommun, denna ska följas rörande användning av färg och logotyp i våra digitala tjänster. Den grafiska manualen täcker dock inte idag digitala tjänster till fullo. Detta kommer att förbättras löpande över tid.
  • Visualisering av data
    Det blir allt mer vanligt att visualisera olika informationsmängder i våra digitala tjänster, dessa riktlinjer syftar till att skapa en enhetlig visualisering i alla digitala tjänster.
För kravställare: Referera till denna sida för att säkerställa användarvänlighet. Involvera gärna Sundsvalls kommuns förvaltare av UX i kravställningen för stöd.

Grafiskt ramverk för digitala tjänster

Ramverket Bootstrap skall användas som grafiskt ramverk i våra digitala tjänster. Bootstrap styr gränssnitten i våra digitala tjänster och innefattar HTML-struktur, CSS och Javascript för de grafiska gränssnitten.

Följande gäller vid användning av Bootstrap:

  • Den HTML-struktur som finns framtagen ska användas – HTML-strukturen är ännu inte framtagen, tas fram under Sundsvall.se-projektet
  • Alla tillägg till Bootstrap ska ske via komponenter
  • Använd grid XYZ – Mått för standard-grid är ännu inte beslutat, tas fram under Sundsvall.se-projektet
  • Sundsvalls kommuns Bootstrap-dokumentation ska följas vid all utveckling – Dokumentationen är ännu inte framtagen, tas fram under Sundsvall.se-projektet

För att förenkla användning av Bootstrap kommer vi ta fram en dokumentation för utvecklare som beskriver mer i detalj hur Bootstrap ska användas vid utveckling av digitala tjänster. Riktlinjerna uppdateras så snart denna dokumentation börjar finnas på plats.

Ikoner

Ett val av ikonbibliotek är ännu inte gjort, riktlinjerna uppdateras när detta är gjort.

Typsnitt

Ett val av typsnitt är ännu inte gjort, riktlinjerna uppdateras när detta är gjort.

Färg och logotyp

Se den grafiska manualen på sundsvall.se för information om färger som ingår i vår grafiska profil och för regler rörande logotyp. Under de grafiska manualerna kan du även ladda hem logotyperna i olika format.

Visualisering av data

För all visualisering av data via grafer ska kommunen utgå från det SVG-baserade ramverket C3.js. C3.js bygger på ramverket D3.js, ett av världens idag mest använda ramverk för att visualisera data som utvecklats delvis via Stanford Universitets ”Stanford Visualization Group”.

D3.js är ett mycket stort och robust ramverk som kan användas för en stor mängd typer av visualiseringar, men det är även ett relativt komplext ramverk att jobba med. C3.js förenklar D3.js genom att tillhandahålla ett antal standardiserade visualiseringar i form av grafer som är vanliga för att presentera statistik, i syfte att minimera utveckling.

Att använda C3.js/SVG för visualiseringar ger kommunen mervärden såsom:

  • Fungerar på alla typer av enheter
    Visualiseringarna anpassar sig automatiskt efter skärmstorlek, så att samma visualisering fungerar lika bra på en dator som på en smartphone.
  • Interaktivitet
    Visualiseringarna går att göra interaktiva, så att användaren kan få information direkt från visualiseringen genom att interagera med den.
  • Återanvändbar kod
    Ramverket C3.js tillhandahåller standardfunktionalitet för visualiseringar vilket gör att implementationer kan återanvända detta och minimera utveckling.
  • Tillgänglighet
    SVG är ett tillgängligt format där WAI tagit fram tillgänglighetsriktlinjer.
  • Lämpar sig väl för integration med OpenHierarchy
    OpenHierarchy använder sig av XML i all generering av presentation och då även C3.js (SVG) är XML-baserat lämpar sig dessa ramverk väl att integrera mellan.

Versionshantering av ”Grafiska riktlinjer för digitala tjänster”

Version Datum Ändrad av Ändring
0.1 2015-10-25 Jari Koponen Första version av riktlinjerna upplagda inför vidare bearbetning.
0.2 2015-11-17 Per Lundin Lagt till versionshantering. Lagt till hjälprutor för kravställare.