wireframes nve inkl. gule lapper fase 3

© MAKING WAVES

EST.2001 // DESIGN AND TECHNOLOGY COMPANY

OSLO // KRAKOW

© MAKING WAVES

nye NVE.no

wireframes

1

© MAKING WAVES

Innhold

Wireframe

: Oversikt over sidetyper

: Rammeverk

: Forsiden

: Temainnganger

: Avansert søk

: Hovedmenyen

: Standard sak

: Standard artikkel

: Temaside

: Søkeresultat

Wireframe

: Kokebok

: Tabell i artikkel

: Tom HTML-mal

: Liste med dokumenter

: Liste med nyheter og

artikler

: Sitemap

: Side med index (anker)

: Skjemaside

: Tips en venn

: Beredskapsside

2

Side

3

4-7

8-9

10

11

13

13-19

20

21

22-28

Side

29-30

31

32

33

34

35

36

37

38

39

© MAKING WAVES

Sidetyper

1. Forside2. Sitemap 3. Temaside4. Listeside – artikler5. Listeside - dokumenter 6. Standard – sak

: Fem forskjellige varianter7. Standard - artikkel 8. Søkeresultat

: Fem forskjellige varianter9. Kokebok10. Skjemaside 11. Tabell i artikler (eks. flomsonekart) 12. Dokument med indeks (anker) 13. Beredskap14. Tom html-side

3

© MAKING WAVES

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 genereltAlle bilder i løsningen må ha tittel og <alt> tekst. Dette gjelder temainnganger, bilder i artikler, bannere i høyresiden etc.

RAMMEVERK-FORSIDE

© MAKING WAVES

SøkeresultatDet 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) Konsesjonssaker3) Nyheter og artikler4) Publikasjoner5) Kontaktpersoner

Nytt søkHer 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.

© MAKING WAVES

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 vennSe slide ’Tips en venn’ for beskrivelse av denne funksjonen

VenstremenyDet finnes en venstremeny på alle undersider (med unntak av søketreff-sider og sitemap)

Valgte punkter i menyen skal være tydelig markert.

HovedinnholdDette er området hvor selve innholdet ligger.

RAMMEVERK-UNDERSIDE

© MAKING WAVES

WAI-KRAV

BilderAlle bilder i løsningen må ha tittel og <alt> tekst. Dette gjelder temainnganger, bilder i artikler, bannere i høyresiden etc.

HTML-rekkefølge - FORSIDE1)Logo (minus hygienemeny)2)Toppmeny 3)Temainnganger4)Nyheter5)Brukeroppgaver6)Lister i bunn7)Hygiene meny

HTML-rekkefølge - UNDERSIDE1)Logo (minus hygienemeny)2)Navigation aid – skip to content (dvs. til pkt 4 Hovedinnhold) 3)Toppmeny 4)Hovedinnhold5)Venstremeny6)Høyrekolonne7)Hygiene meny

LenkerAlle lenker i løsningen må ha tittel og <alt> tekst.

© MAKING WAVES

FORSIDENSIDE 1 AV 2

Toppmeny (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øyresidenSø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.

© MAKING WAVES

FORSIDENSIDE 2 AV 2

Bunn av sidenBunnen 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

© MAKING WAVES

TEMAINNGANGER

TemainngangerOmrådet for temainngangene på forsiden kan presenters på 4 forskjellige måter.

Alt 1Alternativ 1 er standard. Inneholder 6 like store temainnganger

Alt 2Inneholder 3 like store temainnganger

Alt 3. Inneholder 1 stor temainngang

Alt 4. Inneholder 1 stor og 2 små temainnganger

© MAKING WAVES

AVANSERT SØK

Søkeboksen til høyreSø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

© MAKING WAVES

HOVEDMENY

HovedmenyVed 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.

© MAKING WAVES

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, last 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 SAKALTERNATIV 1, SIDE 1 AV 2

Faktaboks og last ned-boksFaktaboksen 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).

BildeDet skal være mulig å legge inn bildetekst under hvert bilde. Denne teksten er ikke begrenset i antall tegn,

© MAKING WAVES


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.

© MAKING WAVES

Last ned-boks 2Nederst 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


© MAKING WAVES

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 SAKALTERNATIV 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

© MAKING WAVES

Standard sak – alt 3ADette 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 SAKALTERNATIV 3 A

Høyresiden Refererer til alt.2 for beskrivelse

© MAKING WAVES

Standard sak – alt 3BDette 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 SAKALTERNATIV 3 B


© MAKING WAVES

Standard sak – alt 4Dette alternativet har verken faktaboks eller last ned-boks men benytter allikevel et lite bilde istedenfor panoramabilde


STANDARD SAKALTERNATIV 4


© MAKING WAVES

Standard artikkelI 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.


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

© MAKING WAVES

TEMASIDE

TemasideDenne 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øyresideRef. standard sak for beskrivelse av høyresiden.

TemainngangerHver 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.

© MAKING WAVES

SØKERESULTAT

Globalt søkNå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.

© MAKING WAVES

KonsesjonssakerNå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øyresidenHø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

© MAKING WAVES

KonsesjonssakerNå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

© MAKING WAVES

Nyheter og artiklerNå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

© MAKING WAVES

PublikasjonerNå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

© MAKING WAVES

PublikasjonerDenne 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

© MAKING WAVES

SØKERESULTAT

KontaktpersonerNå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”)

© MAKING WAVES

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-boksTil 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øyresidenSe neste slide for beskrivelse av høyresiden

KOKEBOK – TRINN 1

© MAKING WAVES

KokebokDenne 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øyresidenFor beskrivelse av sammentrukket søkeboks, kontaktinfo-boks og relatert informasjon se slides for Standard sak”

InnloggingNVE 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

© MAKING WAVES

Tabell i artikkelDenne 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

© MAKING WAVES

Tom HTML-malEn 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


© MAKING WAVES

DokumenterØverst er overskrift (H1)

Siden kan også inneholde brødtekst (både over og under tabellen) selv om det ikke vises i skissen. I dette eksempelet har redaktøren kun valgt å legge inn en lenke under overskriften.

Listen inneholder forskjellige typer dokumenter.

Redaktøren kan selv definere antall kolonner, men innholdet begrenser seg alltid til hva som er tilgjengelig av informasjon.

Antall treff i listen defineres av redaktøren (i skissen er det satt til 10 treff per side)

Over og under listen er det mulig å bla i treffene på to forskjellige måter: 1)Ved forrige-neste lenker som blar sekvensielt gjennom sidene. 2)Ved å klikke direkte på siden som inneholder et konkret antall treff (i skissen er det definert 10 treff per side)

LISTE - DOKUMENTER


© MAKING WAVES

Nyheter og artiklerDenne listen består av to forskjellige type visninger.

1)Hvert innslag består av bilde, overskrift, dato og ingress.

2)Hvert innslag består av dato og overskrift, presentert som en lenke.

Redaktøren kan selv definere antall nyheter som skal vises på den ene eller den andre måte. Antallet kan også settes til null

(”Siste nyheter” = H1)

LISTE – NYHETER OG ARTIKLER


© MAKING WAVES

SitemapSiden 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øyresidenHøyresiden inneholder en sammentrukket søkeboks, men ellers ingenting

© MAKING WAVES

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)


© MAKING WAVES

SkjemasideEn 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å sidenTab = 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.


© MAKING WAVES

Tips en vennTips en venn fungerer ved at en popup-boks vises. Popup-boksen skal legge seg over (bruk gjerne light-box for denne funksjonen) .

Boksen består av: 1)Din e-post (obligatorisk) 2)Mottakers e-post (obligatorisk) 3)Melding (frivillig)4)Send eller avbryt knapp

Når brukeren klikker på send skal innholdet byttes ut med en kort bekreftelsestekst som forteller at tipset er sendt.

TIPS EN VENN


© MAKING WAVES

BeredskapssideVed 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øyresidenHøyresiden påvirkes ikke av slike meldinger og er derfor identisk med høyresiden beskrevet for forsidne.

BEREDSKAPSSIDE

wireframes nve inkl. gule lapper fase 3

Design