Designmanual for nmbu.no

Overordnet er designet utformet for å nå en ungdommelig målgruppe. Med abstrakte motiver viser vi at vi ikke ønsker å knytte oss for mye til et fagfelt, men de visuelle elementene skal hinte mot biologiske prosesser / vann / vind / vekst. Designet skal treffe på alle krav innen universell utforming (UU):

● Alltid godt innafor på kontrast.
● Store fonter.
● Lett å navigere og å finne inngangene.
● Så rent som mulig for å lette kognitiv load
● Fjerne alt brukerne ikke trenger å forholde seg til.

Vi har hele veien jobbet etter disse målene og retningen:

● Et nettsted som gjør NMBU mer attraktivt for studenter og samarbeidspartnere
● Gode og brukerorienterte kjernesider på studier og forskning, med relatert innhold.
● Et miljøvennlig nettsted.
● God struktur av innholdet.
● Alt innhold tilgjengelig for alle (universelt utformet) og i henhold til alle regler (ivaretakelse av personvern).
● Et visuelt uttrykk som understreker NMBUs særpreg som studiested uten at vi kobler oss for tett til et enkelt fagfelt.

Innholdet på nettsiden er spisset mot de viktigste målgruppene vi ønsker å nå.

Vi har kartlagt de viktigste toppoppgavene for målgruppene på kjernesidene forside, studier, forskning, innovasjon og etter- og videreutdanning. Slik fant vi ut hva vi ville fokusere på, hvilket innhold vi burde prioritere og hvilket innhold som støtter opp om merkevaren for å oppnå målene våre.

Vi må klare å spisse innholdet og tilpasse tonen til de viktigste målgruppene vi snakker til.

Viktigste målgruppe (primærmålgruppe) for nettsiden er: Potensielle nye studenter.
Dette er studiesøkende og andre som påvirker deres studievalg. De søker informasjon om blant annet studietilbud, sosialt miljø, fritidstilbud, hybel, jobbmuligheter og utenlandsopphold.

For forskningsinnholdet vårt er målgruppen:
Forskningsmiljøer, presse/media, næringsliv, myndigheter og potensielle ansatte.

Det betyr ikke at nettsidene ikke kan brukes av andre målgrupper. Men innholdet skrives og vinkles mot primærmålgruppene våre. Da husker vi at de ikke har samme bakgrunnsinformasjon om NMBU fra før som for eksempel ansatte og at de er på leting etter informasjon for å ta et valg om f. eks å begynne å studere her eller ikke.

Det digitale har et stort fysisk fotavtrykk. Dette fotavtrykket kan minskes ved å ta noen grep. NMBUs nettsider er laget (og bør forvaltes) etter noen prinsipper som gjør nettsiden bedre for kloden og klima.

● Nyttig: Nettsiden er prioritert på bakgrunn av faktiske behov brukerne har. Den er skalérbar og vokser og minker i takt med brukerbehovene. Klarer vi å tenke på hva som er nyttig for brukerne, så kan vi si at nettsiden har livets rett. Vi sletter unna utdatert, irrelevant og gammel informasjon fra siden, slik at vi ikke bare fyller på med nytt innhold hele tiden, men røkter og forvalter dagens innhold på en god måte.
● Sparsom: Nettsiden skal spare brukerne for tid. Jo raskere brukerne får løst oppgavene sine, jo bedre. Dette sparer igjen karbonutslipp.
● Varig. Nettsiden er laget for å vare, bygges videre på og forvaltes i mange år. Den er pålitelig og trygg, og brukerne kan stole på at den fungerer.
● Gjenbrukbar: Vi gjenbruker alle moduler og maler som kan gjenbrukes, eventuelt videreutvikles, og henter relevant innhold der vi kan.

Grep vi har tatt og tar fremover for å sørge for at nettsiden ikke blir for tung:

● Vi fjerner alt innhold som ikke er en del av brukerreisen og oppgaveløsingen til brukeren.
● Vi forsterker det som gjør det enklere for brukeren å finne frem. Tjenesten må være effektiv og spare tid for både brukerne og NMBU.
● Nettsiden er godt prioritert, fokusert og målrettet. Bort med interne kommunikasjonsbehov tuftet på synsing og inn med innhold utformet på bakgrunn av reell brukerinnsikt.
● Rent teknisk er løsningen og arkitekturen så minimalistisk og optimalisert som mulig.
● Vi har valgt en grønn hosting-leverandør som bruker fornybar energi i sine datasentre.
● Design og grafikk er optimalisert for den flaten de skal vises i.
● Vi bruker ikke bilder og video for å pynte, men for å understøtte teksten og tilføre verdi, og vi bruker bilder og filer som er tilpasset web.

Det er viktig at et nettsted som nmbu.no har et gjennomgående helhetlig uttrykk med en sterk og tydelig avsender.

Dette øker nettsidens troverdighet i en tid hvor det blir stadig enklere å lage falskt innhold for internett og mer eller mindre seriøse utdanningstilbud popper opp, og sikrer at brukeren føler seg trygg og hele tiden vet hvor hen er.

Store skifter i for eksempel visuelt uttrykk mellom ulike seksjoner gir brudd i flyten som oppfattes som negativt og skaper usikkerhet hos brukeren.

For å gjøre den kognitive belastningen på brukeren så liten som mulig er det også viktig at vi følger de samme interaksjonsmønstrene gjennom hele nettsiden. Slik slipper brukeren å lære seg nye måter å interagere med siden på.

Nettsiden er designet for mobil først. Den er også responsiv og utfallende. Det betyr at den kan skalere ut fra skjermstørrelsen til brukeren. Sitter du med en veldig stor skjerm kan du oppleve at det er mye luft på sidene. Men bruker du en mindre skjerm er innholdet kant i kant.

Farger
Fargene på nettsiden følger paletten i NMBUs merkevarehåndbok. Vi holder oss generelt på de lyseste og mørkeste nyansene, for å være sikre på at sidene fyller lovpålagte krav om tilgjengelighet i forhold til kontrast. De lyseste nyansene brukes til bakgrunn, mens de mørkeste brukes på interaksjonselementer og tekst.

Fontvalg
På nettsiden bruker vi både Circular og Lyon. Som hovedregel brukes Lyon til overskrifter på kort, tema-innganger og lenkelister. På det meste annet brukes Circular.

Fleksibiliteten vi får ved å bruke de to fontene sammen, gir oss mulighet til å skape en rikere og varmere layout uten at det blir for rotete.

Vi har generelt valgt fontstørrelser som svarer godt på lovpålagte krav til tilgjengelighet, og som fungerer på ulike skjermstørrelser og i ulike bruksscenarier.

Lenker i tekst
Lenker har underline og endrer farge til grønn når musepekeren tas over. Dette er for å vise på flere ulike måter at teksten kan interageres med. Understrekingen er UX-konvensjon for lenke, og godt kjent blant brukerne.

Grafiske elementer

Bølgeformer og graderinger
På nettsiden bruker vi også et bølgemønster basert på graderingene. Vi har valgt et abstrakt formspråk på de visuelle identitetsbærende elementene på nmbu.no.

Tanken bak er at vi ønsker å kommunisere NMBUs store variasjon innen fagområder og kompetanse, uten å knytte oss for tett opp til enkelte motiver. Bølgeformene gir assosiasjoner til vann, luft, landskap, flyt og strømninger og gir nmbu.no et formspråk som skiller seg tydelig fra de andre utdanningsinstitusjonene.

Fotostil

Bildebruk stikkord:
● Naturlige bilder som understreker NMBUs naturlige fortrinn: Området, dyr, fasiliteter.
● Bilder av folk i aktivitet.
● Bilder som understreker at dette er et lite, men hyggelig universitet. Skille det fra universiteter i byen f.eks.

Bilder skal alltid tilføre verdi til teksten. Vi skal ikke pynte sidene med illustrasjonsbilder / stockphotos som både tar oppmerksomheten fra det som formidles på siden, og gjør siden tyngre og dermed mindre klimavennlig. Designet har derfor ikke lagt opp til for mye «tvang» for å putte inn et bilde for å kunne publisere. De fleste moduler og maler skal fungere med kun skrift.

Alle bilder skal ha en alternativ tekst (alt text) knyttet til seg. Slik sikrer vi at også brukere som benytter hjelpemidler for å bruke nettsiden får med seg hva bildene viser.

Av praktiske og tilgjengelighetsmessige hensyn bruker vi ikke tekst direkte på bilde. Tekst lagt rett over bilde vil ikke ha nok kontrast i mange tilfeller, og vil gjøre valg av bilde mer komplisert. Tekst direkte på bilde fungerer heller ikke optimalt på responsive nettsider.

Forsiden

Vi ønsker å legge vekt på NMBU som et sterkt fagmiljø både for studier og forskning. Derfor er forsiden delt mellom en inngang til studier og en til forskning.

Dette er toppoppgavene til brukerne og siden er prioritert slik at en stor del av de som besøker nettsiden skal få gjort det de kom for raskt.

Rundt 20% av engasjerte besøkende på nmbu.no begynner sitt besøk på forsiden. 80% kommer rett inn på en av undersidene fra søk, fordi de har fulgt en lenke eller fra en annen kanal. Navigasjonen skal derfor sørge for å ivareta at alle lett finner det de leter etter og får gjort det de kom til nettsiden for å gjøre.

Forsiden skal være dynamisk gjennom året, og endres rundt perioder for søk og opptak av nye studenter.

Vi åpner med en blokk som har et forholdsvis stort bilde som viser fram NMBU. Størrelsen gir en visuelt appellerende inngang til siden, men er ikke større enn at leseren ser at siden fortsetter under bildet.

Søk

Søkefeltet ligger lett tilgjengelig i menyen. Brukertester viser at mange foretrekker å bruke søkefeltet for å navigere seg rundt på sidene, og et godt internsøk er viktig for denne gruppa. Søkeresultatene kan filtreres for å kutte ned på antall svar.

Studieoversikten

Studieoversikten viser studiene sortert under hovedtemaer og de aktuelle studiene klikkes frem med en expand/collapse-modul. Dette gir et ryddig førsteinntrykk og en god oversikt over hvilke hovedretninger som finnes på NMBU, før brukeren kan klikke frem alle studiene under en kategori.

Denne studieutlistingen ble brukertestet med potensielle studenter. De fleste ville brukt søkefeltet om de visste hvilket studie de så etter. Vi testet den beste utlistingen av alle studier og det er dagens løsning som fungerte best hos målgruppen potensielle studenter.

Malsider studieprogram

De viktigste opplysningene slik som søknadsfrist og studiestart og opptakskrav er løftet fram og ligger i toppen. Innsikt fra intervjuer med potensielle studenter viser at dette er viktig for brukerne våre, og de ønsker å finne dem så raskt som mulig.

Vi har også lagt en tydelig call-to-action (søk her-knappen) i toppen. Detaljer som går mer i dybden ligger i accordion på bunnen av siden

Som avslutning på siden gir vi potensielle studenter en vei videre for å utforske de praktiske delene av studielivet.

Ansattsider

Vi har plassert foto i sirkelformede bokser for å skape et mer enhetlig uttrykk på siden. Sirkelformene binder det visuelle designet sammen til tross for mange ulike foto- og stil-uttrykk.

Moduler / blokker

Nettsidene er bygget opp av blokker. Rekkefølgen kan endres etter behov og moduler kan fjernes om de ikke er aktuelle. For eksempel kan kunngjøringsmodulen kun vises når det er noen aktuelle kunngjøringer og gjemmes når det ikke er aktuelt.

Innholdskort med artikler

Disse kortene er tilgjengelige ved sideveis scroll, og brukes til nyheter og historier som er strategisk interessante for NMBU, men ikke krever rask finnbarhet eller er blant brukernes toppoppgaver. På desktop responderer kortene på musepekeren slik at det er tydelig at det er mulig å interagere med dem.

Store kunngjøringer

Vi har mulighet til å bruke en blokk som «Media og tekst» til viktige innganger eller kunngjøringer ved behov. Her kan vi legge ut tidsbestemte meldinger som det er viktig at mange får med seg, og fjerne blokka når det ikke er behov for den lenger.

Arrangementskalender

Kalenderen er en egen modul, som kan plasseres på ulike temasider. Vi har lagt vekt på å gi denne en egenart som gjør den gjenkjennelig på tvers. Denne har fått en annen farge for å skille den fra de andre blokkene, gjøre den gjenkjennelig og gi liv og flyt til siden.

Lenkelister

Disse er designet for å være så enkle og effektive i bruk som mulig. Brukeren skal raskt finne sin inngang og navigere seg videre. Ikoner følger generelle konvensjoner for internett.

Trekkspill (accordions) med pluss / minus

Disse bruker vi for å gi leseren et raskt overblikk over hvilke opplysninger som er på siden, og mulighet til å fordype seg i teksten.

Knapper, Call-to-action (CTA)

Som nevnt under "Malsider Studieprogram" har vi mulighet til å legge inn en tydelig Call-to-action (CTA) i form av knapper som "Søk her". Disse knappene skal ikke brukes som meny / menypunkt eller veier videre da de ikke er designet eller optimalisert for det.

Herobanner

Brukes kun i tilfeller hvor siden skal inspirere, motivere og selge - og aldri til dynamisk innhold, som arrangementer. Gode nettsider kommer raskt til innholdet og svarer raskt på hva brukeren trenger, bruk derfor Hero-banner med forsiktighet da innholdet skyves lenger ned. Bruk av herobanner stiller også ekstra krav til gode og motiverte bildevalg som underbygger sidens budskap. 

Kjernesider

Alt innhold er jobbet frem for å svare ut de viktigste oppgavene og spørsmålene folk har på nettsiden vår. Vi har kartlagt hva brukere lurer på og søker svar på når de besøker sidene, og svarer ut disse spørsmålene og oppgavene med godt innhold.

Vi sørger også for at NMBU oppnår sine mål med nettsidene, og det er i denne overlappen av det aller viktigste sidene på nettstedet vårt er.

Fra disse sidene sørger vi for gode veier videre til relevant innhold på andre sider på nmbu.no slik at vi ikke «slipper» brukeren på sidene våre, men viser vei videre til annet, relevant innhold.

En brukeroppgave er den oppgaven eller det problemet en bruker kommer til et nettsted for å gjøre eller løse.

● Jeg vil søke et studium på NMBU.
● Jeg vil finne ut av søknadsprosessen og frister.
● Jeg vil melde meg på et kurs eller arrangement.
● Jeg vil kontakte en ansatt eller en avdeling ved NMBU.
● ++

Informasjonsarkitektur (IA)

Vi bør unngå å bygge ut innholdsstrukturen vår på for mange nivåer. Alt innhold som er på nivå 4 eller mer i strukturen, har vi sagt til søkemotorer at ikke er viktig.

En for dyp struktur gjør at færre kommer til å finne innholdet i søk, og det gir mange klikk for å navigere seg til for brukerne.

Strukturen av innholdet på nmbu.no er satt opp sånn at den ikke blir for bred eller for dyp. Den skal gi mening for brukerne å finne relevant innhold som henger sammen og det skal være lett å navigere rundt til innholdet.

Alle statiske sider på nettstedet bruker malen «side». Vi bruker artikkelmal for alle nyhetssaker og aktuelle saker som er skrevet med dato og som forsvinner når aktualiteten synker.

Men alle statiske sider skal oppdateres og forvaltes videre og blir derfor ikke utdatert. Ved å oppdatere og forvalte de statiske sidene våre unngår vi samtidig at vi produserer flere og flere sider, og at nettstedet vokser ut av kontroll.

Det har flere fordeler:

Det er lettere å navigere på et nettsted som har færre sider enn flere.

Det er lettere å få relevante resultater i vår interne søkemotor når vi ikke har mange sider som omhandler nesten det samme temaet.

Vi sørger for et mindre karbonavtrykk.

Navigasjon og meny

Innganger til studier og forskning er fremhevet i toppen, nettopp fordi det er toppoppgaver for brukerne våre. Vi viser tydelig at denne nettsiden er prioritert etter de aller viktigste oppgavene ved å ha så tydelige innganger til innholdet.

I tillegg har vi enkel tilgang til innovasjon, om NMBU og søk i menyen vår. Dette er innhold vi vet etterspørres og som det bør være lett å finne frem til. I toppmenyen kan brukerne endre språk mellom norsk og engelsk, i tillegg til at viktig studentinformasjon er samlet. Det er også en rask inngang til biblioteket.

Brukerne kan også navigere ved å bruke brødsmulesti. Dette er en vanlig navigasjonsform på nettsteder som viser hvor siden du er inne på ligger i strukturen, og gjør det enkelt å gå til nivået over siden.

Footeren gir brukeren enkel tilgang til kontaktinformasjon i tillegg til lovpålagt informasjon om personvern, tilgjengelighetserklæring og cookies. Footeren lister også opp viktige undersider som ligger under de store hovedsidene på nettstedet.