Design, NVE, profil

1. nye NVE.no wireframes

4. Forside Øverst er logo, hygienemeny og toppmeny . Under dette presenteres temainngangene. Se egen slide (”temainnganger”) for de ulike måtene denne kan presenteres på. Brukeroppgaver og nyheter ligger under temainnganger Nederst på siden er 4 ulike lister Bilder generelt Alle bilder i løsningen må ha tittel og <alt> tekst. Dette gjelder temainnganger, bilder i artikler, bannere i høyresiden etc. RAMMEVERK-FORSIDE

5. Søkeresultat Det te området vil se annerledes ut avhengig av hvilket av de 5 ulike søkeresultatene brukeren velger å se Søkeresultat Øverst er logo, hygienemeny og toppmeny . Deretter vises de ulike fanene med de ulike søketreffene, som består av: 1) Globalt (alle treff) 2) Konsesjonssaker 3) Nyheter og artikler 4) Publikasjoner 5) Kontaktpersoner Nytt søk Her ligger det ulike søkekriterier. Noen er fritekstfelter, andre er forhåndsdefinerte dropdown-bokser. Det er mulig å søke på en eller alle søkekriteriene i et søk. RAMMEVERK-SØKERESULTAT Høyresiden I høyresiden ligger det filtrerings-funksjon, som gjør at man filtrerer i søkeresultatet. Det som ligger som forhåndsdefinerte søk (dropdown-bokser) i ’nytt søk’ området vil også ligge som filtrerings-funksjoner ute på høyresiden.

6. Skriv ut og tips en venn funksjonen ligger på de fleste sidetyper. Se hver enkelt wireframe. Skriv ut funksjon Når brukerne klikker på skriv ut-ikonet (som er plassert øverst i høyre hjørne av ”hovedinnhold) skrives alt tekst som er innenfor området ”hovedinnhold” ut. Tips en venn Se slide ’Tips en venn’ for beskrivelse av denne funksjonen Venstremeny Det finnes en venstremeny på alle undersider (med unntak av søketreff-sider og sitemap) Valgte punkter i menyen skal være tydelig markert. Hovedinnhold Dette er området hvor selve innholdet ligger. RAMMEVERK-UNDERSIDE

8. FORSIDEN SIDE 1 AV 2 T oppmeny (H1) Øverst finnes en hygienemeny og en mer sentral hovedmeny (se slide ’hovedmeny’ for detaljer om hovedmenyen) Hygiene menyen defineres av redaktøren Temainnganger (H2) Midt på forsiden er et område som brukes til temainnganger (se slide ’temainnganger’ for detaljering av temainngangene) . Hvilke innganger som vises settes til en hvert tid av redaktøren. Temainngang-område er låst til størrelse Hver temainngang har en tilhørende overskrift (H2) som redaktøren definerer. Denne lenken vil i de fleste tilfeller ta brukeren til en temasiden (beskrevet i slide ’temaside’) men dette blir endelig definert av redaktøren Høyresiden Søkeboksene ute til høyre er som default trukket sammen, med unntak av Konsesjonssaker. Kart-banneren tar alltid brukeren inn til NVE sin karttjeneste. NVE sørger selv for å lage et lite bibliotek med forskjellig typer kart-bannere som kan gjenbrukes på forskjellige sider.

9. FORSIDEN SIDE 2 AV 2 Bunn av siden Bunnen av siden er delt i 4. Hver av de 4 delene viser en liste med 3 innslag. Disse listene blir automatisk populert med innhold og sorteres etter publiseringsdato De 3 første listene (fra venstre) viser dato og overskrift for hvert element. Den 4. og siste listen viser dato, overskrift og geografisk plassering. Listen helt til venstre har ikke noen lenke i bunn Se grafisk design guide for korrekt ”footer” under de 4 listene ” Jeg ønsker å” (H2) ” Jeg ønsker å ” inneholder lenker til andre steder på sitden. Redaktøren bestemmer selv innholdet i denne listen og max antall begrenser seg til at listen er låst i høyden. Se grafisk design manual for eksakt høyde på denne listen. Nyheter (H2) Det vises 2 store nyheter. De 2 store nyhetene består av overskrift, dato og ingress. Flere nyheter (H2) De 4 små nyhetene består kun av dato og overskrift. Under listen med 4 små nyheter er det en lenke som tar brukere til en liste over alle nyheter Listen populeres automatisk og sorteres etter dato

10. TEMAINNGANGER Temainnganger Området for temainngangene på forsiden kan presenters på 4 forskjellige måter. Alt 1 Alternativ 1 er standard. Inneholder 6 like store temainnganger Alt 2 Inneholder 3 like store temainnganger Alt 3. Inneholder 1 stor temainngang Alt 4. Inneholder 1 stor og 2 små temainnganger

11. AVANSERT SØK Søkeboksen til høyre Søkeboksen til høyre ligger på alle sider (med unntak av søkeresultatsiden og sitemap-siden) Øverst ligger globalt søk som er tigjengelig hele tiden og under er 4 forskjellige avanserte søk. Ved å klikke på en av de fire seksjonene åpnes den aktuelle seksjonen og et søk kan gjøres. Når det klikkes på en seksjon vil en eventuell annen åpen seksjon lukke seg, slik at bare en seksjon er åpen om gangen. Innholdet i hvert søk er statisk og kan ikke endres av redaktøren

12. HOVEDMENY Hovedmeny Ved mouseover vises det en dropdown meny som inneholder en meny definert av NVE. Menyen skal ha en liten forsinkelse når musepekeren går over menypunktet, som gjør at mouseover-effekten ikke oppfattes som irriterende for brukeren fordi den dukker opp hver gang musepekeren går over menypunktet. Merk: Det er tilfeldig at de 4 nederste menypunktene har ikke underpunkter i dette eksempelet Merk: Menyene er ikke endelige. Dette er utgangspunktet NVE hadde laget når disse skissene ble laget.

13. Standard sak En standard sak består av en overskrift (H1) og en ingress , som plasseres øverst på siden Dette gjelder for alle de forskjellige variantene av denne sidetypen (side 16-19) Under dette kommer forskjellige kombinasjoner av elementene faktaboks , l ast ned-boks og bilde . Kombinasjoner av disse elementene vises på side 11-14. Under dette igjen kommer brødteksten i artikkelen. Merk : høyde og bredde på de 2 boksene + bilde er alltid låst. STANDARD SAK ALTERNATIV 1, SIDE 1 AV 2 Faktaboks og last ned-boks Faktaboksen består av overskrift (H2) og innhold begge deler definert av redaktøren . Last ned-boksen Last ned-boksen består av overskift (H2)og 3 innslag (redaktøren definerer dette) og 1 lenke som tar brukeren til bunn av siden hvor flere dokument finnes (se neste side). Bilde Det skal være mulig å legge inn bildetekst under hvert bilde. Denne teksten er ikke begrenset i antall tegn,

14. STANDARD SAK ALTERNATIV 1, SIDE 1 AV 2 Høyresiden Høyresiden inneholder søkeboksene som er trukket sammen. I det man klikker på ”avansert søk” (se forrige slide) kommer de 4 forskjellige søke-seksjonene frem (samme som på forsiden) men her er alle lukket som default. Under relatert innhold definerer redaktøren selv innholdet. Det er ingen begrensning på mengde innhold. Det skal være mulig å gruppere relaterte lenker og lage overskrifter for disse gruppene (se også beskrivelse av ”standard sak alternativ 2”) I dette eksempelet er det benyttet en mindre variant av kart-banneret.

15. Last ned-boks 2 Nederst på siden vises en større last ned-boks som tar hele bredden. Dette er fordi det kan være opptil 25-30 dokumenter knyttet til en sak. Klikker man på en lenke åpnes filen i et nytt vindu/fane i browseren (slik som pdf-filer åpnes på NVE sin side i dag) Under denne boksen med dokumentsamlinger er en lenke som tar brukeren tilbake til toppen av siden STANDARD SAK ALTERNATIV 1, SIDE 2 AV 2

16. Standard sak – alt 2 Dette alternativet viser hvordan bilde legger seg opp ved siden av faktaboks en eller last ned boksen når ikke begge boksene skal være med på siden. Det er redaktøren bestemmer om fakta-boks og last ned-boks skal være med eller ikke Overskrifter lengre ned på siden (eks. ”Søk om støtte til å gjennomføre flomsikring”) er H2. STANDARD SAK ALTERNATIV 2 Høyresiden Høyresiden inneholder en sammentrukket søkeboks,. Under dette kan redaktøren velge å legge inn en kontakinfo-boks som inneholder lenker til kontaktinfo sider relevant for det siden handler om. Overskriften (H2) i denne boksen er låst, men lenketeksten kan redaktøren definere. Under ’relatert informasjon’ boksen legger redaktøren fritt inn lenker. Disse kan listes direkte eller samles i grupper og gis en overskrift (H2) som for eks. ”veiledninger” og ”lover og regler” er på denne siden. Denne overskriften har ingen begrensning i antall tegn

17. Standard sak – alt 3A Dette alternativet har hverken faktaboks eller last ned-boks. Istedenfor brukes et parnorama-bilde hvor høyresiden benyttes til beskrivende bildetekst. De små pilene nede i hvert hjørne av bilde kan brukes til å bla mellom flere bilder. Bildeteksten tilhører det enkelte bilde og endrer seg etter hvert som man blar i bildene STANDARD SAK ALTERNATIV 3 A Høyresiden Refererer til alt.2 for beskrivelse

18. Standard sak – alt 3B Dette alternativet er identisk med forrige side men bruker et panorama-bilde over hele bredden. Under bilde skal det være mulig å legge inn en bildetekst. Denne er ikke begrenset i antall tegn STANDARD SAK ALTERNATIV 3 B Høyresiden Refererer til alt.2 for beskrivelse

19. Standard sak – alt 4 Dette alternativet har verken faktaboks eller last ned-boks men benytter allikevel et lite bilde istedenfor panoramabilde Under bilde skal det være mulig å legge inn en bildetekst. Denne er ikke begrenset i antall tegn STANDARD SAK ALTERNATIV 4 Høyresiden Refererer til alt.2 for beskrivelse

20. Standard artikkel I motsetning til standard sak kan ikke denne siden inneholde faktaboks eller last ned boks. Hvis det skal være med et bilde plasseres det ute til høyre under ingressen. Brødteksten legger seg rundt bilde. Hvis siden ikke inneholder en informasjons-boks (eks. ”NVE sin historie”) bruker brødteksten hele bredden. Under bilde skal det være mulig å legge inn en bildetekst. Denne er ikke begrenset i antall tegn STANDARD ARTIKKEL Høyresiden Refererer til standard sak alt.2 for beskrivelse ” NVE sin historie” (H2) Dette er en slags faktaboks som redaktøren kan ta med hvis ønskelig. Denne boksen kun låst i bredden og ikke i høyden. Overskriften defineres av redaktøren. Selve innholdet kan bestå av lenker eller brødtekst. Rekkefølgen bestemmes av redaktøren. I tillegg har redaktøren større frihet til å bestemme utseende på innholdet iht. overskrift, farget tekst, lenker etc. Denne boksen legger seg under bilde og brødteksten går langs venstresiden

21. TEMASIDE Temaside Denne siden fungerer som en temaside om et bestemt tema (for eks, vassdrags- og grunnvasskonsesjonar) Her kan det ligge fra 1-6 temainnganger og hver enkelt temainngang er identiske med temainngangene presentert på forsiden. Overskrift (H1) og ingress ligger over disse temainngangene og brødtekst kommer under Høyreside Ref. standard sak for beskrivelse av høyresiden. Temainnganger Hver temainngang har en tilhørende overskrift (H2) som redaktøren definerer. Når brukeren klikke på en temainngang kommer de til en redaksjonell side. Redaktøren definerer selv hvor temainngangen lenker til.

22. SØKERESULTAT Globalt søk Når brukeren gjør et globalt søk i søkeboksen som ligger i høyre kolonne på alle sider vises søkeresultatet på denne siden. Øverst på siden finnes 5 faner, en for hvert type søk. Globalt søk (søk i alt) ligger helt til venstre og det er den brukeren kommer inn på når de gjør et globalt søk Søkeboksen ligger over treffene og søkeordet blir stående i søkefeltet når man har gjort et søk. Antall treff for hvert type søk vises i parentesen. Globalt søk vil da vises totalt antall treff. Venstre kolonne i søketreffet viser typen treff og det te vil alltid være en av de andre fire fanene. . Høyre kolonne viser resultatet. Se hvert enkelt fane for detaljering om hvordan ulike typer treff vises. Det er mulig å sorterer søkeresultatet på de ulike fanene. Dette gjelder alle typer søkeresultat Hver side viser 10 treff. Det er mulig å bla seg 10 og 10 treff fremover både ved å klikke direkte på et intervall, eller ved å bruke ”neste” og ”forrige” lenker.

23. Konsesjonssaker Når fanen konsesjonssaker er aktiv vises søkemulighetene for konsesjonssaker. Det er mulig å søke på en eller alle søkekriteriene. Kommunevalg er ikke mulig før fylke er valgt. Dette er for å begrense innholdet dropdown-boksen for kommuner. Resultatet er delt opp i sak, navn på søker, kommune(r) (som blir berørt) og type konsesjon. Det er mulig å sortere innholdet etter hver kolonne. Resultatet er som default alltid sortert etter kolonnen helt til venstre. Dette gjelder alle typer søkeresultat SØKERESULTAT Høyresiden Høyresiden inneholder funksjon for å filtrere innhold i søkeresultatet. Denne funksjonen til svarer også dropdown-boksene i selve søkefeltet. Her vises de ulike valgmulighetene for hvert søke kriterium og antall treff i parentes. Merk at det ikke skal vises typer, søkere eller fylker med null treff Kommuner vises ikke før fylke er valgt

24. Konsesjonssaker Når et fylke er valgt (enten i dropdown-menyen i toppen eller ved å klikke på fylke i høyresiden) vises kommuner. I høyresiden vises bare valgt fylke i ’fylke-boksen’ og under vises en lenke som heter ”se alle fylker”. Å klikke på denne er det samme som å velge ”se alle” i dropdown-menyen i toppen. ’ Se alle’ funksjonaliteten gjelder for alle typer filtrering og ikke kun fylker (som eksempelet viser) SØKERESULTAT

25. Nyheter og artikler Når fanen ”Søk nyheter og artikler” er aktiv vises søkemulighetene for nyheter og artikler. Det er mulig å søke på en eller alle søkekriteriene. SØKERESULTAT

26. Publikasjoner Når fanen ”Søk publikasjoner” er aktiv vises søkemulighetene for publikasjoner. Det er mulig å søke på en eller alle søkekriteriene. SØKERESULTAT

27. Publikasjoner Denne siden viser et eksempel på en drop-down meny som er inneholder 1. og 2. nivås punkter. Velger man et 1.nivå punkt (eks. Hydrologi) vises alt innhold under dette punktet. Denne type funksjonalitet gjelder for alle de ulike søkene SØKERESULTAT

28. SØKERESULTAT Kontaktpersoner Når fanen ”Søk kontaktperson” er aktiv vises søkemulighetene for kontaktpersoner. Det er mulig å søke på en eller alle søkekriteriene. Seksjon er ikke aktiv før avdeling er valgt. (fungerer på samme måte som beskrevet under ”søk konsesjonssaker”)

29. Kokebok Øverst kommer en overskrift (H1) og deretter tydelige søke-trinn øverst på siden. Disse kan bruker benytte til å navigere mellom trinnene (og har mouseover effekt) Redaktøren bestemmer antall trinn men det kan være maks 6 trinn. Under disse knappene, til venstre, står brødteksten (”Trinn 1 Før du søker ”= H2) I bunn av brødteksten står en ”neste trinn” lenke som tar brukeren til neste trinn (altså samme funksjonalitet som å klikke på ’trinn 2’-knappen øverst på siden. Last ned-boks Til høyre er det en last ned-boks. Overskriften ”Last ned” (H3) er låst. Boksen kan inneholde mange lenker og har ingen begrensning i høyden. For hver innslag i listen kan redaktøren legge inn en kort tekst (eks. ”mal til søknad”) + 1 eller 2 lenker. Ingen av de tre element nevnt nå, må være med. Hvis redaktøren velger å ikke benytte seg av en last-ned boks vil brødteksten legger seg over hele bredden. Høyresiden Se neste slide for beskrivelse av høyresiden KOKEBOK – TRINN 1

30. Kokebok Denne siden viser bare at brukeren er inne på trinn 2 i prosessen. Brødtekst og last ned-lenker er nå relatert til trinn 2. Etter brødteksten er det lagt to lenker (”forrige trinn” og ”neste trinn”) som kan brukes for å navigere mellom de forskjellige trinn (dette er i tillegg til at trinn-knappene i toppen kan brukes som navigasjon) Høyresiden For beskrivelse av sammentrukket søkeboks, kontaktinfo-boks og relatert informasjon se slides for Standard sak” Innlogging NVE har en egen portal for søkere av konsesjoner. Det er et selvstendig system som ikke er del av denne leveransen, men det skal være mulig å logge inn på denne protalen via login-boksen i høyre siden. Her vises også en kart-banner nederst på høyresiden som tar brukeren til NVE sin karttjeneste. KOKEBOK-TRINN 2

31. Tabell i artikkel Denne sidetypen består av en overskrift (H1) og ingress . Siden kan også inneholde brødtekst (både over og under tabellen) selv om det ikke vises i skissen. Selve innholdet i tabellen (antall rekker og kolonner) blir definert av redaktøren selv. Tabellen kan inneholde lenker. Tabellen sorteres etter kolonnen helt til venstre. Dvs. hvis kolonnen innholder tekst sorteres det alfabetisk, inneholder den tall sorteres den etter tallverdier TABELL I ARTIKKEL Høyresiden Refererer til ”standard sak” for beskrivelse av høyrekolonnen

32. Tom HTML-mal En sidetype skal bare være en tomt html-felt. Her kan redaktøren legge inn hva de vil men det krever kompetanse hos redaktøren for at dette skal fungere bra. TOM HTML-MAL Høyresiden Refererer til ”standard sak” for beskrivelse av høyrekolonnen

35. Sitemap Siden består av et klikkbart sitemap (lenken tar brukeren til den respektive siden) Innholdet er kun ment som eksempel. Den endelige innholdsdetaljering blir først klar når innhold er ferdig produsert. 1.Nivå = H1 ( eks. ”vann og vassdrag”) 2.Nivå = H2 ( eks. ”create ”) 3.Nivå = H3 ( eks. ”Developing ”) SITEMAP Høyresiden Høyresiden inneholder en sammentrukket søkeboks, men ellers ingenting

36. Index (anker) Øverst på siden listes det opp en innholdsfortegnelse ( i dette eks. er det spørsmål) og disse kan grupperes under forskjellige overskrifter (eks. Om konsesjonssøknad) . For hvert innslag (her spørsmål) ligger det en tilhørende tekst lengre ned på siden og ved å klikke på en lenke i innholdsfortegnelse hopper siden ned til tilhørende tekst. For hvert tekst lengre ned på siden er det også en ”tilbake til toppen” lenke som tar brukeren tilbake til innholdsfortegnelse. SIDE MED INDEX (ANKER) Høyresiden Refererer til ”standard sak” for beskrivelse av høyrekolonnen

37. Skjemaside En skjemaside er sidetypen hvor redaktøren kan opprette et skjema som brukerne fyller ut (her skjema for å abonnere på nyheter fra NVE) Siden kan bestå av input-bokser (i flere størrelser), radiobuttons, checkbokser, og dropdownmenyer. Redaktøren definerer selv innholdet og rekkefølgen av dette. Det skal være mulig å legge inn overskrifter (for eks. ”Navn” og ”Etternavn”) og forklarende tekst (for eks. ”velg kategori du ønsker…..”) på siden SKJEMASIDE Navigasjon på siden Tab = flytter markøren til neste inputfelt, i logisk rekkefølge. Enter = bekreft/lagre (her kalt send) knappen under skjemaet. Unntak er hvis markøren befinner seg i et større tekstfelt (eks. Melding på siden ’tips en venn’ ) da er enter = linjeskift. Høyresiden Refererer til ”standard sak” for beskrivelse av høyrekolonnen

39. Beredskapsside Ved større flom eller krise-situasjoner skal redaktøren ha mulighet for å legge inn meldinger som prioriteres fremfor alt annet innhold på forsiden. Når en slik melding legges inn på forsiden skal den plassers seg under toppmenyen og dytte alt annet innhold nedover (dvs. temainnganger osv.) Meldingen får en rød ramme rundt, et varsels-ikon og relativt stor skrift. Høyresiden Høyresiden påvirkes ikke av slike meldinger og er derfor identisk med høyresiden beskrevet for forsidne. BEREDSKAPSSIDE