Hopp direkte til innhold

Hopp direkte til Søk

Vi jobber med å flytte innhold fra denne websiden til Ruters nye merkevareportal brand.ruter.no.
For spørsmål, ta kontakt på .

Generelt om nettsidene

Våre kunder interagerer stadig oftere med oss gjennom digitale flater. Om de gjør reisesøk, kjøper, henter eller aktiverer billetter, sjekker når bussen går eller gir oss tilbakemeldinger, så skjer det via et grafisk grensesnitt på en datamaskin, en mobiltelefon eller en automat. Dette forplikter oss til å gi våre kunder en konsistent og strømlinjeformet opplevelse av Ruter og våre tjenester på tvers av alle digitale flater. En rivende teknologisk utvikling gjør oss i stand til å stadig utvikle nye og effektive tjenester som kommer våre kunder til gode. For å kvalitetssikre dette har vi utviklet et sett med overordnede kjøreregler for Ruters digitale tilstedeværelse.

Om retningslinjene

I digitale kontaktflater mangler vi i stor grad konteksten som et fysisk miljø skaper. I et gatemiljø har vi visuelle markører tilpasset hvor man befinner seg. For å gjøre det klart hvor et stoppested er benytter vi oss av et høyreist skilt, mens vi for å kommunisere rutetabellen presenterer en tabell i et monter inne i leskuret. I digitale flater presenterer vi informasjon uten hjelp fra den fysiske konteksten, så vi må bruke andre konsekvente hjelpemidler for å rettlede og hjelpe kundene våre.

Disse retningslinjene er prinsipper som må tilpasses ulike situasjoner og bruksområder.

Universell utforming

Ruter følger prinsippene for universell utforming. Alle våre kunder skal ha de samme mulighetene for å få informasjon og gjennomføre en reise med oss. I arbeidet med Ruters grafiske brukergrensesnitt er det derfor viktig å tenke funksjon foran form, uten at det ene skal utelukke det andre. Vi skal fremstå som attraktive både gjennom form og funksjon.

For nettsider og nettbaserte tjenester gjelder følgende for markup/kode:

  • Bilder skal ha alternativ tekst.
  • Input-elementer må ha semantiske labels - altså, en label som er linket opp mot input feltet sitt.
  • Best practice er å ha et skjult element som linker til de forskjellige hovedseksjonene på siden som første element. Dette må da ikke skjules for skjermlesere.
  • Focus, Active og Hover states må tydeligjøres.
  • Linker som kun inneholder ikoner/grafikk må også inkludere en skjult tekst som skjermlesere kan se, som beskriver funksjonen til knappen.
  • Tab-rekkefølge må være logisk slik at skjermlesere enkelt kan hoppe fra element til element i rett rekkefølge.

For design gjelder følgende:

  • Benytt tilstrekkelig kontrast mellom bakgrunn og tekst til å tilfredsstille WCAG 2.0 AA standard
  • Bruk tekst i stedet for grafikk. Dersom tekst gjengis som grafikk må grafikkelementet ha alternativ tekst.
  • Unngå bruk av lyd (lydeffekt/stemme/musikk) som alene skal rettlede brukeren. Der lyd brukes skal man også kunne få samme informasjon tekstlig.
  • Ved bruk av video/animasjon skal man også kunne få samme informasjon tekstlig.

Tilpasningsdyktig design (Responsive Web Design)

All informasjon på ruter.no skal være enkelt tilgjengelig på alle enheter. Derfor tilpasser Ruters nettsider seg ulike skjermstørrelser. Dette oppnås gjennom media queries og  tilpassede stilark for ulike skjermstørrelser. Det får konsekvenser for grafiske elementer, piktogrammer og layout som du kan lese mer om under disse avsnittene.

Mer om Responsive Web Design finner du f.eks. på http://en.wikipedia.org/wiki/Responsive_web_design