Design, blokker og funksjonalitet

Her er en oversikt over alle blokkene som finnes, og annen viktig funksjonalitet. Det en kort forklaring av hvordan man bruker blokkene, hvilken type innhold de passer til, samt forklaring til funksjonalitetene.

PowerPoint presentasjon om hvordan designe gode hjemmesider ved hjelp av blokkerLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Huskeliste for hver side

• Har vi variert uttrykket nok – ryddet innholdet for leseren?
• Har vi utnyttet bredden?
• Bør knappen Verktøy for helsepersonell brukes?
• Har vi lagt til relaterte artikler? (Velg blokken post layout og den riktige kategorien)
• Aktuelle bøker og kurs?
• Bør vi promotere nyhetsbrev?
• Bør vi promotere bibliotekssøk om temaet?
• Bør vi vise vei til aktuelle ansatte?
• Er det riktig sidetype? (Forside fagområde (nivå 1) standard (nivå 2) underside (nivå 3)
• Er siden veldig lang -> vurder å lag en egen side til de lengste temaene

---

Headlines (H1, H2, H3, H4, H5, H6)

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

---

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

---

Image

Her kan du velge størrelse ved å bruke “image size” eller “image dimensions”.

Husk å skriv alt-tekst til bildet. Det er en kort beskrivelse av motivet på et bilde, så de som bruker screen-readers (eksempelvis folk med svakt syn) kan få opplest hva bilde viser.

Studier viser at bilder som har enkle bakgrunner og tydelige objekter får mere oppmerksomhet enn rotete og støyende bilder. I tillegg skaper de mere harmoni og ro og gir en bedre brukeropplevelse.

Tekst rundt bilde

-Denne blokken kan brukes for å plassere et bilde i en tekstblokk. For å lage denne blokken, sett inn et bilde og trykk på justeringsknappen på bildeblokka og velg høyre- eller venstrejustert. Så kan du dra i kanten av bilde for å endre størrelse, og teksten vil flyte rundt bildet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

---

Bilde og tekst

---

Trekkspill

Trekkspill (accordion) er en vertikal liste med overskrifter hvor man ved klikk kan vise/skjule innholdet. Fordelene med trekkspill er at sidene ikke blir så lange, og brukeren selv kan styre hva man ønsker å lese og ikke.

Hvilken type innhold fungerer godt med trekkspill?

• Å tvinge brukeren til å klikke på en overskrift om gangen for å se alt innholdet, kan oppleves som tungvint. Så hvis brukeren må åpne de fleste overskrifter for å få svar på sitt spørsmål eller for å få den fulle oversikten, er det ikke en god idè å velge trekkspill, da vil det oppleves enklere å skulle scrolle nedover siden.
• Man skjuler noe av informasjonen og det gjør at ikke alle brukerne får det med seg. Derfor er det også viktig at overskrifter og evt inngresser beskriver godt og tydelig hva man finner ved å klikke på overskriften.

Trekkspill-liste 1

Trekkspill-liste 1 er den mest minimalistiske versjonen og kan for eksempel brukes ved lister hvor overskriftene er selvforklarende og man ikke har behov for en inngress for å forklare hva som ligger under punktet.

Trekkspill-liste 2

For å få frem denne blokka: Velg blokken trekkspill-liste, deretter trykker du på det grå feltet øverst i blokka der det står (Trekkspill-liste) og i menylinja til høyre huker du av for “Bruk alternativ visning med undertitler”.

Denne fungerer fint ved behov for en utdypende forklaring av innholdet. F.eks. VIPS praksismodell (VPM) – Verktøy for brukermedvirkning og kommunikasjonsstøtte

Notiser

Notiser er en egen post type, hvilket betyr at den ligger som en egen seksjon i menyen til venstre når du er på Dashboardet i WordPress. De skal uansett bare være synlige på noen enkelte sider som nyhetssiden og forsiden og er derfor ikke en blokk man kan legge inn.

---

Relevante nyheter/Post layout

Dette er seksjonen som vil ligge nederst på en del sider og vis de siste tre nyhetene innenfor den siden man er på. For å hente inn disse nyhetene velger man blokken post layout. Det er viktig at nyheter kategoriseres riktig når de opprettes, så eksempelvis forskningsnyheter blir vist under forskning.

---

Knapper

Denne knappen egner seg godt hvis man har en seksjon med for eksempel nyheter og skal linke til siden hvor man kan se alle nyheter. Hvis det er en lang link bør ikke denne blokken brukes, da bør man heller markere hele teksten som dette

---

Vimeo

Legg inn video gjennom en link til url. Husk å skriv en kort bildetekst som forklarer hva videoen handler om og varighet.

---

Infoboks

Infoboksene kan brukes for å fremheve noe informasjon og vise noe innhold som skiller seg fra resten innholdsmessig. Kan brukes med grå eller grønn bakgrunnsfarge, og den grønne vil få mere oppmerksomhet enn den grå.

---

Nyhetsbrev

Nyhetsbrev-blokken kan brukes i mange forskjellige størrelser og med grønn eller grå bakgrunn. Nederst på en side kan det være fint å la den fylle hele bredden og være grå, så den skiller seg fra footeren. Trykk på justeringsknappen som kommer frem når du klikker på blokka for å velge bredde.

---

Ikonmeny

Denne blokken kan brukes hvis man skal linke til noen undersider eller relevante sider. Ettersom den kun består av overskrift og ikon, er det viktig at overskriften er selvforklarende. (F.eks. Årsrapport)

---

Ikonkolonner

Denne blokken kan brukes hvis man har noe innhold som er likestilt og skal oppleves som en sammenhengende enhet. Den kan brukes på opp til fem ikoner, og med eller uten link. Det er også fint om man har en forklarende overskrift for alle ikonene og evt. en tekst.

Tekstene til hvert ikon bør helst være ca like lange.

---

Quote

Denne typen sitat egner seg godt i en artikkel eller nyhetssak.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Norman Nielsen

---

Pullquote

Denne typen sitat egner seg godt for å skape dynamikk på en side og bryte opp, og hvis det er er relativt kort sitat som skal ha mye oppmerksomhet.

Gjerne personlig og direkte tone, og tanker, følelser osv.

Først da jeg møtte andre pårørende, skjønte jeg at mange strever med det samme.

– Kvinne (24) med pappa som har demens

---

Gallery

Denne blokken kan brukes for å vise en sammenhengende bilderekke. Kan også ha en bildetekst. Fungerer fint for å bryte opp tekst, og bredden kan varieres så du kan tilpasse den de andre blokkene på siden.

• 

• 

• 

• 

• 

• 

---

Sidebar

Sidebaren fungerer godt hvis man har en relatert artikkel eller annen tilleggsinfo som skiller seg fra brødteksten men som allikevel er relevant å ha med. Sidebaren kan brukes som infoboks, ansatt (bilde av en ansatt og mulighet for å skrive en bildetekst til)

Hvordan bruke sidebaren mens hensiktsmessig?

• Det er viktig at sidebaren ikke blir brukt for mye, da vil den miste sin hensikt og oppleves som “spam”. Ettersom brukerne er vant til at det som ligger til høyre på en side er annonser og reklamer, så tenk igjennom at det som ikke ligger der er visuelt støy som gir brukeren feil inntrykk.
• Tenk på brukerens behov og oppgaver, og vis det som er relevant for brukeren. Man skal ikke linke til samme sider flere steder på en side, og heller ikke fra for mange sider. Det undergraver nytten av sidebaren og gjør at brukeren lærer seg å ignorere den.

---

Table

Her har du mulghet til å velge antall rekker og kolonner

Lorem ipsum	Lorem ipsum
Lorem ipsum dolor sit amet	Lorem ipsum dolor sit amet

---

Kolonner

Her kan man sette sammen innholdet som man ønsker ved å bestemme hvor mange kolonner man vil ha i bredden. Denne fungerer godt om man for eksempel vil legge inn tre filmer på samme rekke med en bildetekst.

---

Temabokser

Temabokser brukes primært på forsiden for å fremheve en nyhetssak eller en viktig ressurs. Den kan også brukes nederst på en side eller ressurs for å lenke til relaterte sider. Det bør helst ikke lenkes til flere enn tre, så velg ut de artiklene du mener er mest relevant for brukeren.

---

CTA-banner

Denne blokken kan brukes for å fremheve noe aktuelt (f.eks. demensdagene) eller trekke frem en viktig underside.

Spacer

Denne blokken er usynlig, da den bare gir litt mere luft mellom to blokker

---

Innholdsfortegnelsen forsvinner ved siden av brede blokker

Forklaring til bilder i mediebiblioteket

Hva som skal stå i de ulike boksene når du legger inn bilder i mediebiblioteket.

Her finner du lenke til nyhetssak og eksempelbilde med forklaringstekst til de ulike boksene

Arbeid med kladd

Hvis man jobber med en eksisterende side, og lagrer som kladd fører dette til at siden blir “avpublisert”. Brukere med admin-tilgang vil fortsatt kunne se siden, men hvis man ikke er innlogget vil ikke siden vises. Hvis man skal jobbe videre med eksisterende sider er det derfor lurt å enten gjøre seg ferdig i en økt, eller lage en kopi av siden og jobbe med kopien.