Design- og interaksjonsmønstre

Design- og Interaksjonsmønstre beskriver hvordan brukeren best kan gjennomføre forskjellige handlinger på Helsenorge. Bruk disse mønstrene om du skal tegne opp nytt grensesnitt for Helsenorge, eller om du trenger å vite hva som er korrekt mønster og korrekt bruk på Helsenorge.

Design- og interaksjonsmønstre beskriver hvordan brukeren best kan gjennomføre forskjellige handlinger på Helsenorge, som f.eks. å filtrere en liste, gi tilbakemeldinger på en side, laste opp et vedlegg eller lignende. Hver av disse handlingene kan gjennomføres på forskjellige måter, men det er ønskelig at vi bruker de samme mønstrene for de samme handlingene i så stor grad som mulig. Dette er for at brukeropplevelsen skal bli konsistent på tvers av helsenorge og slik at innbygger ikke må lære seg flere måter å utføre samme handling.

Interaksjonsmønstre består av en eller flere komponenter, tekst og funksjonalitet satt sammen på en forhåndsdefinert måte. Noen mønstre er svært enkle, f.eks. Avatar, mens andre er svært komplekse, som f.eks. Filter. Noen mønstre er veldig spesifikke i sin utforming, andre er mer variable og har enten flere konfigurasjonsalternativer, eller består egentlig av eksempler på hvordan mønsteret oppfylles ihht god praksis på Helsenorge.

Bruk av mønster

De fleste mønster har en representasjon i HNDS-Sketch-biblioteket slik at du kan hente inn elementer som tilsvarer mønsteret til skissebruk. En del mønstere finnes også som kodekomponent som er tilgjengelig for utviklere - disse finnes i seksjonen "Library". Det er angitt for hvert mønster hvilke ressurser som finnes for det.

Mønstrene i HNDS og kodebiblioteket skal samsvare i utseende og oppførsel (states). Unngå derfor å gjøre lokale endringer på symbolene fra HNDS i Sketch - da mister utviklerne gevinsten av at elementet allerede er ferdig utviklet til bruk. Benytt heller angitte muligheter for overrides - f.eks. bytte ikon eller velge en annen variant av symbolet der du trenger dette.

Mønsterkategorier

For å lette å finne korrekt mønster er mønstrene delt opp i kategorier etter deres hovedformål. Noen mønstre er vanskelige å plassere entydig i den ene eller andre kategorien - disse kan være angitt i flere kategorier.

  • Avgrense/forenkle - Disse mønstrene brukes når du ønsker å dele opp eller begrense mengden informasjon en innbygger må forholde seg til, skjule detaljer som ikke alltid er nødvendige, eller la innbygger selv avgrense det hen ser.
  • Brukerinput - Alle former for innhenting av data fra innbygger, alt fra et enkelt klikk på en knapp til innfyling av skjema og innhenting av tilbakemeldinger og bekreftelser fra innbygger.
  • Datapresentasjon - Mønstere som tilrettelegger for visning av innhold og data for innbygger.
  • Estetisk - Elementer og prinsipper som underbygger Helsenorges visuelle identitet, men som ikke i seg selv har en eksplisitt funksjon
  • Navigasjon - Disse mønstrene lar innbygger forflytte seg mellom innholdsområder og tjenester på og evt. utenfor Helsenorge
  • Orientering - Skilting, landemerker og informasjon om gir kontekst og en forståelse av hvor man befinner seg.
  • Tilstander - Mønster som gjør innbygger oppmerksom på tilstander som ikke er permanente, som f.eks. varsler, loadere, ny-status, utkast, osv.
Hva gjør jeg om jeg ikke finner mønsteret jeg trenger?

Lag ditt eget oppsett som løser problemet for konteksten du jobber med, og benytt gjerne de mindre mønstrene som byggeklosser (knapper, inputfelter, etiketter, osv.) Presenter løsningen for de andre i designteamet når du har anledning (HN-designmøtet). Dersom mønsteret du har beskrevet kan ha nytteverdi for flere områder på Helsenorge vil designsystemteamet vurdere om det skal innlemmes i designsystemet.