Fundamentale principper for brugervenlige web-sites WEB 1 IT-C 24. Feb. 2000.

Præsentationer af emnet: "Fundamentale principper for brugervenlige web-sites WEB 1 IT-C 24. Feb. 2000."— Præsentationens transcript:

1 Fundamentale principper for brugervenlige web-sites WEB 1 IT-C 24. Feb. 2000

2 Grundlæggende regel nr. 1 Kend din bruger –Web-surfere –Nybegyndere og lejlighedsvise besøgende –Eksperter og regelmæssige brugere –Internationale brugere

3 Grundlæggende regel nr. 2 - 4 Fastlæg web-sitets formål fra starten Lav en skitse over dens struktur (site map) Lav en liste over sitets indhold: –Hvad findes allerede og hvad skal skaffes?

4 Interface design Bogens interface blev udviklet fra Gutensberg’s bibel i år 1456 og ca.. 100 år frem. Grafiske computer interface er ca. 15 år gamle. Web interfaces er ca. 4 år og stadig i voldsom udvikling.

5 Hver eneste side skal have: En meningsfuld titel (og URL) - titlen bliver til bogmærkets tekst En tydelig afsender En dato for oprettelse/seneste revision Mindst et link til en lokal hjemmeside Et trykt URL på centrale hjemmesider (hvis dokumentet printes ud)

6 Basale WEB-design regler (1): Klare navigationsredskaber (max. 20 % af pladsen) Ingen døde ender Direkte adgang (5 valg/side = 125 elementer efter 3 sider, 7 valg er 343 elementer) Load tid max. 10 s. på målgruppens forbindelse Enkelt og konsistent design Stabilitet Feedback og dialog

7 Basale WEB-design regler (2): IT for alle… også handicappede –Undgå forklaringer baseret på billeder –Giv forklaringer til alle billeder –Brug tekster på links, som giver mening udenfor sammenhængen - undgå ”Klik her” Yndefuld degradering Forskellen mellem ”tilbage” og ”forrige side” #

8 Site design: Del indholdet op i logiske enheder Skab et hierarki efter vigtighed af enhederne Brug hierarkiet til at strukturere relationerne Byg et site der nøje matcher denne struktur Test funktionalitet og grafisk design af sitet på målgruppen

9 Meningsfulde enheder Informations-chunks –Svært at læse lange dokumenter på skærm -printes ud –En god indgang for et link –Giver designmæssig organisation –Kan tilpasses et skærmbillede

10 Hierarki efter vigtighed Fra hjemmesiden til delmenuer til indholdssiderne Tydelige, logiske og forudsigelige relationer Funktionel struktur der afbalancerer menuer og indhold #

11 Site struktur Sekvenser Grids Hierarkier Net #

12 Anvendelse Kompleks, længerevarende Kontakttid Form HyperlinkedLineær Koncis, korterevarende Browse Undervisning Træning Opslag Selvstudier (efter Lynch & Horton, 1999)

13 Opgaven til 6/3 Opdel teksten I meningsfulde enheder Lav en struktur der passer til sitets formål Lav en navigationsbar Lav interne (og måske eksterne) links Lav en site-map (oversigtstabel) Læg hhh-data og kontakt på hver side Vis hvordan (dele af) sitet ser ud på print

14 Hvad der ikke skal laves: Billeder Grafik - bortset fra navigationsbar (og husk tekst-version i alle tilfælde) Design af sider -bortset fra den typografiske opsætning

15 Hvad der bør undgås (1): Tekst i spalter eller tabeller (medmindre der også laves en ren tekstversion) Lange sider Vandrette rullepaneler Mange forskellige skrifttyper Kursiv og fed/halvfed skrift Tekst på højkant

16 Hvad der bør undgås (2): Blinkende ord og rullende tekst Skriftstørrelser mindre end 10 punkt Dominerende baggrunde For mange forvirrende farver For tætpakkede sider uden luft mellem enhederne For mange links på samme side

17 Tips Skriv dine designprincipper ned Lav et grid der passer til alle siderne (måske med undtagelse af forsiden) Placer menubar i toppen Placer hhh-data i bunden Lav en site oversigt som en tekstbaseret indholdsfortegnelse Skriv kort, smid væk og skær ned