Setter du spiker i nåleputa?

Det er mye å huske på når man skriver for web. Jeg har samlet en bunke nyttige tips for de som vil bli flinkere til å lage websider som er tilgjengelige for flere.

La publiseringsløsningen sørge for dekoreringen

Tegning av spiker i nålepute
En manuell, fancy innledning passer like godt inn som en spiker i en nålepute.

Artiklene er finest når oppsettet er likt

La innledninger stå uten formatering. Like innledninger i alle artikler gir et helhetlig og ryddig inntrykk av et nettsted. Hvis du er misfornøyd med utseendet til innledningen, er det bedre å endre alle med css enn å endre på en så den blir ulik de andre. Snakk med nettredaktøren din om mulighetene for endringer.

Bare lenker skal ha lenkefarge og understreking

Vi har blitt vant til at understreket blå eller tilsvarende markert tekst er lenker. Tekst som er farget som lenke eller understrekede ord er lurelenker som denne og denne. Irriterende?

 

Titler er for folk. Fil- og mappenavn er for maskiner

Eksempel på url med og uten mellomrom
Hvis det ikke er så mange rare tegn i urlen, er det lettere å se at man har havnet riktig.

Fil- og mappenavn bør være leselige i nettadressen og skal helst bare bestå av tegn fra

a til z, 0 til 9 og bindestrek.

I titlene kan du skrive mer fritt.

Mellomrom blir gjort om til %20 som gjør urlen lang og uleselig hvis det er mange av dem.

Det er flere tegn som kodes om på denne måten, så det er best å holde seg til trygge tegn.

Punktum skal helst bare brukes for å skille filnavnet fra filtypen, eks: bilde.jpg, index.html. 

Menyene er basert på mappetitlene

Har du trøbbel med menyer som ser stygge ut, endre mappetitlene. La mappenavnene være. Du kan endre mappetittelen i redigerings-arkfanen.

Eksempel på endring av titler for penere menyer
Endre titlene for leselige menyer
Innskriving av tittel på dokumenter i Vortex
Tittelen på et menypunkt, dvs. en mappe, endres under redigeringsarkfanen til mappen. (Den kan også endres under om.)
Forvirret bruker foran dataskjerm med her-lenker
Mia leter etter studieinformasjon. Hun er definitivt ikke interessert i her.

 

Skriv beskrivende lenker og overskrifter

Folk som bruker nettet aktivt har det ofte travelt og er for det meste "letelesere". De leser sjelden teksten på en nettside fra topp til bunn, men leter etter informasjon ved å skumlese overskrifter, lenker og uthevet tekst. Derfor er det viktig at overskriftene henger sammen med tekstene, og at lenkene beskriver godt hvor du kommer når du trykker på dem. På den måten finner leteleserne fortere informasjonen de er ute etter.

 

Bruk overskrifter og utheving riktig

Seierspall uten 2. plass
Hvorfor fikk jeg ikke 2.plass?

Hvis det fantes universitetskurs i skriving for web, burde dette være pensum i WEB001.

Bruk riktig struktur. Ikke hopp direkte fra h1 til h3. Det skaper trøbbel for folk med skjermopplesere og er dessuten uryddig og uprofesjonelt.

Italic og bold skal ikke brukes til overskrifter men til utheving av tekst. Italic egner seg dårlig på digitale flater ettersom den er litt utydelig, men bold skaper kontrast i teksten slik at den blir enklere å lese.

På samme måte kan du for eksempel ikke bruke h4 til å utheve tekst. H4 er en overskrift som bare kan brukes som underoverskrift etter h3 som bare kan brukes etter h2 som bare kan brukes etter h1.

Riktig struktur på en side er som følger:

 

Hovedoverskrift: <H1>

Dette er tittelen på siden i Vortex. Du trenger derfor aldri å sette denne selv.

Nivå 2 overskrift: <H2>

Dette er den første overskriften du skal sette selv på en side.

Nivå 3 overskrift: <H3>

Når du skal skrive om temaer som trenger en overskrift, men som hører inn under en tidligere overskrift, skal du bruke h3.

Nivå 4 overskrift: <H4>

Tilsvarende som med h3, skal denne overskriften brukes der du trenger en overskrift til et undertema.

Nivå 5 overskrift: <H5>

H4 er en ganske lite brukt overskrift, og h5 er enda sjeldnere i bruk. Regelen om struktur er fortsatt klar: Du skal ikke kaste inn en h5 rett under h2 bare fordi du liker størrelsen.

Nivå 6 overskrift: <H6>

Når du trenger h6 som overskrift, har du en ganske avansert struktur på dokumentet ditt. Vi har ikke støtte for flere nivåer enn 6, men det er allerede ganske vanskelig å skille dem fra hverandre, så hvis du trenger flere, er det kanskje på tide å forenkle dokumentet?

Alt-tekster

Gi brukeren et alternativ når innholdet presenteres som bilde, video eller lyd. Les om difi's krav om tilgjengelighet.

Legg merke til at jeg i bildeteksten under har skrevet noe man ikke nødvendigvis kan lese ut av bildet, mens alt-teksten forteller bare hva man kan se. I tillegg til å være nyttige for skjermopplesere, kan alt-tekster være nyttige for folk som bruker søkemotorer til å lete etter bilder med spesielt innhold. Søker du etter "svart katt", burde i teorien dette bildet dukke opp i resultatene.

Svart katt som hviler på dørstokken
Denne katten møtte jeg i en småby nord i Italia.
<img src="bilder/cat.jpg" alt="Svart katt som hviler på dørstokken">

Bruk tabeller bare til ordnede data

Riktig bruk av tabell
Smak Mengde Bestilt
"Sjokolade" 100 150
"Mint sjokolade" 60 100
"Pistasj" 200 10
"Jordbær" 300 0
"Vanilje" 200 20

Husk tabellheadinger og titler slik at oppleserverktøy kan gi lytteren beskjed om hva som er hva.

Du trenger ikke sette alle tabelloverskriftene i bold, for tabeller har en egen rad og/eller kolonne for tabelloverskrifter.

Ved å gå inn i innstillingene til tabellen, kan du sette headinger riktig og samtidig spare tid. 

Du finner Egenskaper for tabell ved å høyreklikke på tabellen i redigering.

Hvordan strukturere annet innhold?

Misforstått tabell

På 90-tallet var det mange utviklere som syns tabellen var fin til å strukturere innhold, men denne metoden gjorde sidene tunge å laste, vanskelige å endre og umulige å lese på mobil og nettbrett.

For strukturering av innhold kan du bruke div-er, faktabokser eller forsidebokser der det er hensiktsmessig. Be nettredaktøren om råd der du er i tvil. Jeg syns ofte det kan være vrient å få tekst og bilder til å oppføre seg som jeg vil i et dokument, så jeg skjønner at det kan være fristende å ty til en tabell for å få ting til å oppføre seg. Flytt i stedet litt på bildene, juster bildestørrelsen, legg til en faktaboks. Av og til kan det løse mye å legge til eller trekke fra en setning, men det er ikke alltid så lett.

For videre lesning kan jeg anbefale nettredaktørens sjekkliste: Hvordan skrive for nett


Skriv ut din egen uu-poster (pdf)

pdf-poster

Av Lise Hamre
Publisert 2. sep. 2019 15:11 - Sist endret 5. sep. 2019 12:00
Tegneblokk med håndtegning av et brukergrensesnitt

UX-bloggen

En blogg for deg som er interessert i gode brukeropplevelser, tips og triks, nyttige UX-verktøy og erfaringer fra prosjekter vi i Gruppe for Brukeropplevelse arbeider med.