Struktureret Web-design

1. Struktureret Web-design

2. RHS – Informationsteknologi – 2008 Hvad er web-design…? • ”…det er vel bare at lave nogle hjemmesider i FrontPage…?” • NEJ! Man bør skelne tydeligt mellem det at kunne designe f.eks et website, og at kunne implementere (kode) et website • Man behøver ikke stor teknisk viden for at kunne lave web-design • Ligesom for databaser; med et godt design, er implementation (næsten) trivielt

3. RHS – Informationsteknologi – 2008 Hvad er struktureret web-design…? • Web-design som følger en veldefineret proces • Processen tager mange elementer i betragtning, både overordnede og detaljerede: • Formål og målgruppe • Indhold, stil og temaer • Opbygning, navigation, kontrol-elementer • Detaljeret indhold, præsentations-elementer • Komposition • Farvevalg, skrifttyper, symboler, billeder • Lyd, video, animation, m.v.

4. RHS – Informationsteknologi – 2008 At tabe alt på 3 sekunder… • Vi – bruger af websites – danner os meget hurtigt et første indtryk af et website • Hvor meget er ”meget hurtigt”…? • I nogle tilfælde måske blot nogle få sekunder! • Det første indtryk af en website er ekstemt vigtigt

5. RHS – Informationsteknologi – 2008 Klassisk fejl #1 Please wait while our very fancy website loads…

6. RHS – Informationsteknologi – 2008 Opgave 1 • Lad os selv prøve at danne os et første indtryk af nogle websites: • www.rejseplanen.dk • www.selvet.dk • www.tivoli.dk • www.bedemand.dk • www.ibicph.com • Vær gerne subjektiv – men ikke forudindtaget 

7. RHS – Informationsteknologi – 2008 Formål og målgruppe • Definition af formålet kan lyde som en lille opgave…men kan have voldsomme konsekvenser • Typiske overordnede formål • Information • Præsentation • Kommunikation • Salg

8. RHS – Informationsteknologi – 2008 Formål og kompleksitet • Jo bredere formål, jo større kompleksitet • Kompleksitet = penge • Grundighed med definition af formål vil tjene sig mangefold ind på sigt Salg Kommunikation Præsentation Informa- tion

9. RHS – Informationsteknologi – 2008 Formål og mål • Formål kan være specifikke…men svære at gøre objektive og målbare: • ”Websiten skal give brugeren god information om trafiksituationen i København” • ”Vores site skal øge salget af vores produkter betydeligt” • ”Vores site skal være med til at fastholde vores målgruppe i at benytte vores produkter” • Hvordan afgør vi, om vores web-site rent faktisk opfylder sit formål?

10. RHS – Informationsteknologi – 2008 Formål og mål • Formålet bør suppleres med konkrete mål • Et mål er i denne forbindelse et mere objektivt kriterie, vi objektivt kan afgøre om er nået. • ”Mindst 5.000 unikke besøgende om ugen” • ”Forøgelse af salg på mindst 20 % i 2009” • ”Mindst 40 % af omsætning i 2009 via vores site” • ”En score på mindst 4,2 i vores undersøgelse af brugernes tilfredshed” • Ikke altid let at definere relevante mål…

11. RHS – Informationsteknologi – 2008 Målgruppe • Formål og målgruppe vil oftest gå hånd i hånd • Ideelt; alle kan lide vores website • Reelt; kun en specifik gruppe vil identificere sig med vores • Produkt • Budskab • Udtryksform • Etc

12. RHS – Informationsteknologi – 2008 Klassisk fejl #2 OMFG…It’s baaack!! Så er den her f… igen! Den toplirede Rollator XPS-1130. Check it out: > Ekstra brede dæk > Polyfonisk horn > Titanium-belagte bremser Få den før de andre homies på Hjemmet! Total nize!! That’s how we roll in 4000

13. RHS – Informationsteknologi – 2008 Målgruppe • Målgruppen vil ofte kunne udledes fra websitens formål • ”Websiten skal styrke relationen til vores eksisterende målgruppe” • ”Websiten skal være med til at introducere vores produkter til ældre borgere” • ”Vi vil gerne gøre svært tilgængelige emner mere tilgængelige for almenheden”

14. RHS – Informationsteknologi – 2008 Målgruppe – detaljer og konsekvenser • Når målgruppen er fastlagt, vil det have konsekvenser for mange design-elementer, måske også nogle man ikke lige overvejer… • ”Børn 6-10 år”: Visuelt, lyd, bruges uden at kunne læse, forældrevejledning • ”Ældre 60+”: Afdæmpet design, stor skrift, sikkerhed, stor vægt på hjælpefunktioner • ”Voksne med lavt uddannelsesniveau”: Lavt LIX-tal, grafik, lave krav til hardware/forbindelse

15. RHS – Informationsteknologi – 2008 Opgave 2 • Se på disse websites: • www.borsen.dk • www.dr.dk/oline • www.sand.dk • www.noanoa.dk • www.nielsgamborg.dk • Overvej hvem målgruppen er, og hvor klart det fremgår af websiten • Bemærk: Husk lyd, og tillad pop-ups.

16. RHS – Informationsteknologi – 2008 Elementer i Web-design • Når vi har styr på formål, målgruppe med videre, kan vi gå mere i detaljer med design • Overordnede ”temaer” i design er oftest tæt forbundet med formål og målgruppen • Seriøst, informativt, cool, legende, ungdommeligt, festligt, pålideligt.... • Hvordan kobles sådanne temaer sammen med konkrete design-elementer...?

17. RHS – Informationsteknologi – 2008 Konkrete design-elementer • I det konkrete design indgår elementer som • Farvevalg • Skrift (typografi) • Ordvalg • Billeder • Lyd • Navigation (struktur og kontrol-elementer)‏ • Komposition

18. RHS – Informationsteknologi – 2008 Farvevalg • Synssansen er vores ”kraftigste” sans, derfor er farvevalg et meget vigtig element i design • Ikke alene valg af enkelte farver, men også kontraster mellem farver • Lav kontrast kan nemt gøre det svært at skelne tekst m.v. på en website.

19. RHS – Informationsteknologi – 2008 Dette er nemt at læse Dette er svært at læse

20. RHS – Informationsteknologi – 2008 Opfattelse af farver • Alle har vel forskellige opfattelser af farver, men der er generelle trends: Fare Stands Pas På Temperament Forsigtig Varsom Mulig fare Rolig Tryg Natur Alt i orden Dyster Cool Maskulin Ren Uskyldig Feminin Neutral Kølig Himmel og Hav

21. RHS – Informationsteknologi – 2008 Opfattelse af farver • ...men farveopfattelse er også kulturelt betinget Kina: Glæde Kina: Maskulin Kina: Venlig Kina: Feminin Kina: Elegance Indien: Sorg Kina: Feminin

22. RHS – Informationsteknologi – 2008 Opfattelse af farver • Vi kan let forvirre en bruger ved at anvende ”forkerte” farver • ADVARSEL: vil du virkelig slette din harddisk? NEJ JA

23. RHS – Informationsteknologi – 2008 Opfattelse af farver • Farver spiller en betydelig rolle i vores opfattelse af en website • Vælg farver med omhu – både de enkelte farver, samt samspillet mellem dem (kontrast)‏ • Vær opmærksom på forskelle i farve-opfattelse mellem f.eks kulturer • Brug farver konsistent! • Vil altid være subjektivt i nogen grad – men brugeren har altid ret :-)‏

24. RHS – Informationsteknologi – 2008 Opgave 3 • Se på disse websites: • www.flugger.dk • www.dad.dk • www.gucci.com • www.auri.dk • www.bonbonland.dk • Overvej, hvem målgruppen er, og bedøm hvor godt dette understreges af farvevalg på sitet

25. RHS – Informationsteknologi – 2008 Skrift (typografi)‏ • Det var meget nemmere i gamle dage...

26. RHS – Informationsteknologi – 2008 Skrift (typografi)‏ • I dag kan vi vise stort set hvilken som helst skrifttype på hvilken som helst skærm • To hovedgrupper af skrifttyper: • Antikva: Skrifttyper med ”fødder” (seriffer)‏ • Grotesk: Skrifttyper uden ”fødder” (seriffer)‏ • Times Roman er en Antikva skrifttype • Arial er en Grotesk skrifttype

27. RHS – Informationsteknologi – 2008 Skrift (typografi)‏ • De kloge siger... • ”Antikva (med fødder) er godt på papir, ikke så godt på skærmen...” • ”Grotesk (uden fødder) er godt på skærmen, ikke så godt på papir...” • Muligvis ikke så vigtigt længere, med nutidens kvalitet af skærme • Begræns brugen af forskellige fonte

28. RHS – Informationsteknologi – 2008 Skrift (typografi)‏ • Vi kan også fremhæve skrift på flere forskellige måder: • Fed skrift (godt til overskrifter, eller til at fremhæve noget vigtigt)‏ • Kursiv (kan være svært at læse)‏ • Understregning (bør undgås, er standard for at fremhæve et link)‏ • Ændre størrelse eller font (yrkkk!)‏ • Igen er konsistent – og moderat – brug vigtigt!

29. RHS – Informationsteknologi – 2008 Ordvalg • Emnet for websiten vil – selvfølgelig – præge ordvalget, men vi bør have formål og målgruppen i tankerne • Er websiten • Introducerende eller indforstået • Rettet mod ”specielle” grupper (børn, ældre, lavt uddannede, etniske grupper, osv)‏ • I berøring med følsomme emner Uhhh...What?

30. RHS – Informationsteknologi – 2008 Ordvalg • Men almindelig ”god skik og brug” gælder jo også på websites... • Undgå indviklede sætninger • Undgå overdreven indforståethed • Undgå tvetydighed • Giv brugeren mulighed for at få hjælp Er du sikker på, at du vil fortryde ikke at slette din harddisk? Fortryd Fortsæt

31. RHS – Informationsteknologi – 2008 Opgave 4 • Se på disse websites: • www.udeoghjemme.dk • www.tweak.dk • www.um.dk • www.dr.dk/boogie • www.borger.dk • Overvej, hvem målgruppen er, og bedøm hvor godt dette understreges af ordvalg og typografi på sitet

32. RHS – Informationsteknologi – 2008 Opbygning og navigation • Langt de fleste websites består af mange sider • Hvordan kommer vi rundt mellem siderne? • Grundlæggende typer af opbygning: • Lineær • Hierarkisk (flad) • Hierarkisk (dyb)

33. RHS – Informationsteknologi – 2008 Lineær navigation • Brugeren ”tvinges” til at følge én bestemt vej gennem siderne på web-sitet Side 1 Side 2 Side 3 Side 4 • Velegnet til • Brugsanvisninger og instruktioner (uddannelse) • Undersøgelser (spørgeskemaer…) • Betaling/tilmelding

34. RHS – Informationsteknologi – 2008 Min lille hjemmeside Om mig Min familie Min hund CV Hierarkisk navigation (flad) • Mere fri struktur, men kort afstand til ”bunden” af websiten (sider hvorfra man ikke kan komme til nye sider) Side 2.1 Side 2.2 Side 1 Side 2.3 Side 2.4

35. RHS – Informationsteknologi – 2008 Hierarkisk navigation (dyb) • Fri struktur, men lang afstand til ”bunden” af websiten (træ-struktur) Og så videre… Side 3.1 Side 4.1 Side 2.1 Side 3.2 Side 4.2 Side 2.2 Side 4.3 Side 1 Side 2.3 Side 3.3 Side 2.4 Side 3.4

36. RHS – Informationsteknologi – 2008 …og kombinationer • Man kan selvfølgelig sagtens kombinere disse grundformer på samme web-site • Web-site med salg: Præsen-tation typisk hierarkisk, salgsforløb typisk lineært • Cykliske strukturer: navigation ”baglæns” i strukturen, f.eks tilbage til forsiden • Søgning!

37. Hvad er så bedst…? • Afhænger meget af typen af website • MEN – generelt godt hvis sitens vigtigste information kan findes med få klik • Hvad er ”få”…? Maksimalt 3… • Valg vil altid være et kompromis RHS – Informationsteknologi – 2008

38. RHS – Informationsteknologi – 2008 Indgang til web-siten • Vi kan ikke forvente, at en bruger altid kommer frem til web-siten via forsiden • Brugeren kan måske komme til siten via en søgning (Google), og lande på en underside • Brugeren har måske bookmarket en underside • Altid en god ide, hvis man nemt kan navigere tilbage til forsiden, fra alle undersider • Typisk link til forside: Logo, som også er et link

39. RHS – Informationsteknologi – 2008 Design af navigation • Al navigation på web-sites er via links • Logisk set er et link altid ”bare” en reference til en anden side • Et link kan præsenteres på mange måder • Klassisk, eksplicit link (f.eks: gå til www.dr.dk) • Link som tekst (f.eks: gå til mere information) • Link som element i menu • Link som grafik • Sidste er eksempel på brug af metaforer i navigation mellem sider

40. RHS – Informationsteknologi – 2008 Navigation via metaforer • Hvad er en metafor…? Metafor (af græsk: metafora, meta = hen til, phorein = at bevæge) er et sprogligt billede, hvor karakteristika ved et objekt overføres på et andet objekt, der som oftest er urelateret. Typisk bliver et objekt beskrevet som lig med et andet objekt • I denne sammenhæng; en ”indpakning” af et link i grafik eller lignende • Skulle gerne gøre navigationen på sitet mere intuitiv for brugeren

41. RHS – Informationsteknologi – 2008 Navigation via metaforer • Simpel metafor på et lineært site: • Vi bruger metaforen, fordi vi forventer brugeren kender tilsvarende symboler fra en anden sammenhæng (f.eks en CD-afspiller) • Vi skal være opmærksomme på, om metaforen giver mening for en bruger i målgruppen

42. RHS – Informationsteknologi – 2008 Navigation via metaforer • Fordele ved metaforer: • Gør (forhåbentlig) navigation mere intuitiv • Kan gøre design mere konsistent • Kan udvide målgruppen, f.eks brugere som ikke kan/vil læse • Ulemper ved metaforer • Vi gør antagelser om, hvordan brugeren foretager associationer • Kan gøre det sværere at finde ud af, hvordan man navigerer

43. RHS – Informationsteknologi – 2008 Navigation via metaforer • Hvis vi benytter metaforer, bør vi hjælpe brugeren på vej • Konsistent stil i brug af metaforer • Grafisk indikation af link (skift af muse-cursor, lyd, grafisk reaktion) • Hjælpetekst i tooltip • …og naturligvis bør vi teste vores web-site, ved at lade brugere i målgruppen prøve den!

44. RHS – Informationsteknologi – 2008 Navigation via menuer • Ofte vil det være mere naturligt at benytte en ”gammeldags” menu til navigation • Metaforer er ikke automatisk bedre end menuer til navigation • Mange er vant til at bruge menuer fra andre programmer • Menuer er ret eksplicitte – svære at misforstå

45. RHS – Informationsteknologi – 2008 Navigation via menuer • Hvor skal menuen være…? Naturligt for læseretning Bruges i programmer ?

46. RHS – Informationsteknologi – 2008 Navigation via menuer • Vi kan også kombinere elementer fra metaforer med menuer (grafisk indikation m.v) • Kan bruge menuer til overordnet navigation, kombineret med metaforer for detaljeret navigation • For eksempel en web-site med produkt-præsentation og salg • Overordnet navigation via menuer • Detaljer om produkter; klik på billede af produkt

47. RHS – Informationsteknologi – 2008 Opgave 5 • Se på disse websites: • www.dsb.dk (find køreplan for H-linie fra Frederikssund) • www.dmi.dk (find den lokale vejrudsigt for Roskilde) • www.rhs.dk (hvornår havde 3.hh sidste skoledag i 2008?) • www.borger.dk (hvad kan jeg få i SU?) • www.krak.dk (beregn korteste rute fra dit hjem til RHS) • Er de opbygget hensigtsmæsigt, i forhold til at finde den information, der er angivet som eksempel? • Hvordan navigerer man på disse web-sites, og er navigationen effektiv?

48. RHS – Informationsteknologi – 2008 Komposition • Vi skulle nu have rimeligt styr på, hvilke elemen-ter vi medtager på siderne på vores web-site • Hvordan sættes det hele sammen…? • Komposition omhandler, hvordan elementerne placeres og sammensættes på en side. • Hvad vil vi opnå? • Brugervenlighed • Ensartethed, konsistens, genkendelighed • Positiv helhedsoplevelse

49. RHS – Informationsteknologi – 2008 Gestaltlove • Hvad betyder ”gestalt”? • Ikke noget godt dansk ord… noget a la ”Hvad vi oplever som helhed, ud fra et antal enkeltdele” • I denne sammenhæng; hvordan enkeltdele bør organiseres, for at give den rette helhedsoplevelse

50. RHS – Informationsteknologi – 2008 Gestaltlove • Loven om Figur og Baggrund • Loven om Nærhed • Loven om Lighed • Loven om Lukkethed • Loven om Forbundethed