Best practices

BEST PRACTICE PÅ WEB

På denne side har vi samlet en række gode og knap så gode eksempler fra AUs sider. Ud fra disse har vi opstillet nogle retningslinjer ift. hensigtsmæssig brug af skabeloner og hvilken type tekst, der egner sig bedst til web.

GOD WEBTEKST

Net-læsere scanner teksten og læser i F-form => vi bør begrænse mængden af fokusfelter og billeder i F-området
Brugeren scanner efter nøgleord - fremhæv nøgleord

Sådan skriver du en god webtekst

Skriv en god indledning
Fat dig i korthed
Bryd teksten op – lav korte, informationsbærende afsnit med sigende overskrifter og brug punktopstilling (max 5 punkter)
Læsevenligt
Direkte, personligt og levende – skriv ”du”, ”dig”, ”din”
Tag brugeren i hånden

Kend din målgruppe

Hvad ved modtageren om emnet?
Hvad vil modtageren gerne have at vide om emnet?
Hvilken sproglig stil passer til modtageren?

Brugerne vil have information

Der hjælper dem videre med en opgave
Der gør dem bedre til deres studie
Der giver dem noget personligt

Om sproget

Gør sproget aktivt, fjern –ing og –else (ændre i stedet for ændring, henvende i stedet for henvendelse)
Undgå passiver og ”man”
Opløs sammensatte ord (dispensationsmulighed -> mulighed for dispensation)
Brug stærke og klare bydeformer: ”Download skema til xxx” i stedet for ”Hvis du ønsker at søge om xxx, kan du downloade skemaet ved at klikke her”
Krav ned ad abstraktionsstigen (Offentlig transportmiddel – Bus – Bybussen – 19’eren til Mårslet)
Undgå papirord:
- Dersom, såfremt, i tilfælde af -> hvis
- Angående, vedrørende - > om
- Yderligere -> flere
- Anmode om -> bede om
- Anvende -> bruge
- Hvilket -> som
- Hidtil -> indtil nu
- Imidlertid -> men
- Ligeledes -> også
- Forefindes -> er
Beregn LIX – dette tager vi når vi kommer sådan rigtigt i gang med SiteImprove.

Links

Undgå links som ”læse mere” og ”klik her” – beskriv i stedet linket og marker det hele
Skal være klare og beskrivende
Skal være lette at skimme
Fremhæv vigtige links fx i link-bokse

BRUG AF TYPO3-ELEMENTER

Anbefalinger fra typo3-vejledninger:

Knapper

Det er bedst at holde udtrykket på en knap meget simpelt, så den ikke blot forvirrer brugeren. Det skal være kort, præcist og tydeligt, hvad knappen fører til. Er det ikke muligt, skal du bruge andre virkemidler som fx et bannerelement.

Banner-elementer fungerer bedst:

Som henvisning til andet indhold, som for brugeren kunne være relevant at se efter den aktuelle side. Fx placeret i højrekolonnen eller i en række nederst på siden. Eksempel: http://bss.au.dk/forskning/
På såkaldte fordelingssider, hvor det primære formål er at lede brugeren ned på undersider. Se et eksempel her: http://www.au.dk/evu/generel-information/
For meget tekst ift. billedstørrelse giver dårlige mobil-visninger
Uden bullets
På mobil, når der bruges banner II, da tekst og pic skalerer uafhængigt af hinanden. Tjek derfor altid på mobilen om visningen er god nok, især ved brug af banner I.

Fold-ud-elementer fungerer bedst:

I forholdsvis smalle spalter (maksimalt halv sidebredde inkl. venstremenuen). Hvis de bliver for bredde bliver der visuelt for langt fra boksens overskrift til plus’et i højre side. Dermed nedsættes brugervenligheden.
I enkeltkolonner. Brugen af bjælker i flere kolonner ved siden af hinanden kommer let til at se rodet ud.
Til større tekstmængder, hvor brugeren ikke forventes at skulle læse hele sidens indhold.

Vigtigt om containere:

Brug neutral container som designelement frem for en collapsible, hvis der ikke er grund til at kunne folde ind og ud.

Kolonneopdelere

AU IT anbefaler at bruge 2- eller 4-opdelt i stedet for 3-kolonneopdeler, 1:2, 2:1 eller 1:2:1 - især til fordelingssider hvor man bruger bannerelementer. 2 og 4 fungerer langt bedre på især tablet. Ved førnævnte typer bliver mindst 1 af kolonnerne meget bedere på tablet end på fx desktop, hvilket gør bannerelementer kæmpestore.

EKSEMPLER PÅ GODE AU-WEBSIDER

Da der ikke findes én fælles Best Practice på AU, samler vi her en mængde af gode eksempler i stedet. Tilføj eksempler på hver type af webside og kommenter gerne på indhold/opbygning. Links bør ryge ud, hvis de ikke vedligeholdes eller af anden grund mister værdi.

Studieportalforside

http://studerende.au.dk/studier/fagportaler/psykologi/ - alle studieportaler på BSS følger denne skabelon. Den er lavet efter Top-task fra GA

Medarbejderportalforside

http://cs.staff.au.dk/ - tager udgangspunkt i brugerne og er gennemtestet
http://scitech.medarbejdere.au.dk/ - baseret på top tasks fra GA

Institutforside

http://cs.au.dk/ - tager udgangspunkt i brugerne og er gennemtestet

Fakultetsforside

http://scitech.au.dk/ - tilrettet ST’s målgrupper / top tasks fra GA

Fordelingsside

http://www.au.dk/om/stillinger/ - flere forskellige typer af bannerelementer
http://www.au.dk/evu/ - flere forskellige typer af bannerelementer
http://www.au.dk/evu/uddannelsestyper/ - mange lige store bannerelement 1
http://www.au.dk/forskning/forskningscentre/

Tekstside med god afsnitsopdeling

Landingsside

Her er link til en af Maries skitser og ideen om at inddele siden i “øer af relateret indhold” for at hjælpe brugerne.

EKSEMPLER TIL FORBEDRING OG LØSNINGER

Til venstre ses to eksempler på uhensigtsmæssig brug af folde-ud-bjælker. I dette tilfælde er der ingen god grund til at den pågældende tekst skal placeres i et folde-element. Til højre ses en bedre anvendelse, hvor det generelle indhold nu står i et almindeligt tekstfelt og indholdet fra undersiderne er flyttet over i folde-bjælker eller knapper i højrekolonnen.

Nedenfor til venstre ses eksempler på sider med uoverskueligt indhold, der med fordel kunne have været organiseret anderledes, f.eks. med folde-ud-bjælker eller banner-elementer, knapper o.lign. Til højre ses et forsøg på en omlægning af indholdet i det første eksempel vha. disse element-typer.

Billedet til venstre er et eksempel på, hvordan tekst og billede afbryder uafhængigt af hinanden ved brug af banner II og den deraf følgende ikke optimale tabletvisning. Til højre ses en alternativ brug af bannere (banner I) og en mindre tekststørrelse og generel minimering af tekstmængden.