7. forelæsning

1. 7. forelæsning Grundlæggende Webdesign – brugervenligt webdesigne Bjarne Sandstrøm IT-højskolen 10.10.2002

2. Plan for i dag • Præsentation af opgave 2 • Om usability og brugertests • Brugeraspektet ved Web-design • opbygning af form og betydning • oplevelsen som spontan reaktion • psykiske gestaltlove og farveoplevelser • oplevelsen som kulturbestemt konvention • åbenhed og struktur

3. Brugertest af websites • Specielt relevant for et pull-medie som internettet • Nettet som brugerens medie • Tim Berners-Lee, Jakob Nielsen, Rolf Molich, Lars Ballieu • Nettet som den spontane reaktions medie • Vannevar Bush, Ted Nelson m.m. • Steve Krug: Don’t make me think • Et behov ved nye medier, som tiden løber fra? • http://www.adobe.com/web/gallery/valcasey/main.html

4. Val Caseys’ synspunkt • I work into conversation that on every page, the user needs to know where they are, what they can do there, and where they can go, and I show a really wide variety of work. I teach students to provide context, rather than explicit instructions in their designs. • Current practice is overrationalized and focuses too deeply on task analysis, and not enough on empathy. I think that now, Web design has really crossed over to another point. I think that usability was a hot issue, and it's fading because people are getting used to computers. Now all of a sudden, the focus isn't "we aren't meeting our usability standards." Now it's "what kind of cool user experience can we make that has motion and user interactivity?"

5. Funktionalitet / Brugbarhed • Funktionalisme • kulminationen af den rationalistiske tradition • oplysningen • menneskets som historiens subjekt • opgøret med den historiske stil • ”Dekoration og forbrydelse” • funktionalisme og teknologi • ”Huset er en maskine til at bo i” – Le Corbusier

6. Funktionalitet / Brugbarhed • Fra funktionalisme > til brugbarhed > til brugervenlighed • traditionen fortsætter i Jakob Nielsen: • Designing Web Usability • The Practice of Simplicity

7. Brugertest Den empiriske metode

8. Rolf Molichs brugerbegreb • Brugeren er den ukendte, den uforudsigelige, den uberegnelige • Web-udvikleren er ikke selv i stand til at leve sig ind i brugerens oplevelse • Kun direkte konfrontation med brugerens oplevelse i en testsituation, formidlet gennem en specialist i brugervenlighed, kan lære web-udvikleren at skabe brugervenlig web-design • Bruger Usability-ekspert Web-udvikler

9. Hvem kan ikke fungere som bruger i en test ”Enhver edb-kyndig er inhabil, når det drejer sig om at bedømme dialogen på et websted, hvor han ikke selv tilhører målgruppen. Det gælder særlig, når det drejer sig om et web-sted, som vedkommende selv har været med til at udføre.” Rolf Molich, s. 16 Spørgsmålet er, om vi ikke alle med tiden bliver ”edb-kyndige” i en eller anden form. Et web-sted bør også bygge på medie-konventioner og brugervaner.

10. Brugertesten som et kulturmøde • ‘Polle og problemos med Mobilos’ • Den ædle vilde i 1700-tallets roman som kritiker af europæisk kultur • Molichs brev til testdeltagere [s. 129]

11. Feltet af beslutningstagere • bestyrelse • direktion • marketingfolk • reklamebureau • grafiske designere • databasefolk • konceptudviklere • usability-folk • programmører • projektledere • systemarkitekter • informationsarkitekster brugere?

12. Hvad er brugbarhed? • Nytte • i den grad opgaven fuldføres og mål nås • Effektivitet • mindst mulig anstregelse og indsats • Tilfredshed • hvor tilfredsstillende er det at bruge produktet?

13. Definition af brugervenlighed • Et brugervenligt websted er et websted, der er • let at lære • let at huske • effektivt at bruge • forståeligt • tilfredsstillende af bruge • 1-3 kan testes i tid, 4 kan teste ud fra brugerens svar, 5 udtrykker brugerens subjektive følelse, som ytres i interview eller spørgeskemaer.

14. De fem gyldne regler (1) • Kend dine brugere • Fastlæg og beskriv målgrupperne for web-stedet • Observer brugerne, mens de løser tilsvarende opgaver uden for det nye web-sted • Interview typiske brugere. Spørg om deres forudsætninger, holdninger og forventninger • Dokumenter dine resultater

15. De fem gyldne regler (2) • Inddrag dine brugere • Sørg for, at det er let for udviklere at komme i kontakt med brugere • Hold jævnlige møder med typiske brugere, hvor I diskuterer og tester prototyper

16. De fem gyldne regler (3) • Test og ret designet • Lav prototyper, eventuelt på papir • Test prototyperne ved at bede typiske brugere løse opgaver med dem • Brug erfaringerne fra testen til at forbedre designet • Hvis resultaterne er gode, så implementér prototypen • Vær forberedt på, at 2-5 gennemløb af denne test-ret cyklus normalt er nødvendigt

17. De fem gyldne regler (4) • Lær af andre • Se på forbilledlige web-steder • Udfør sammenlignende test af brugervenlighed af konkurrenternes web-steder • Lær af både det gode og det dårlige

18. De fem gyldne regler (5) • Koordinér hele brugergrænsefladen • Udarbejd en dialogstandard (for sideopbygning, knapstørrelse, brug af farver og udformning af meddelelser m.m.) • Udpeg en koordinator • Aftal faste procedurer for opfølgning på standarden • Aftal faste procedurer for ændring af standarden.

19. Metode ved brugertest • Brugeren som objekt • genstand for iagttagelse • evt. videooptagelse • Brugeren som subjekt • tænke højt-testen • brugeren bliver derved ‘gennemsigtig’ • processen ‘rationaliserer’ brugeren

20. Design • Struktur og æstetik • Organisering af et stofs elementer efter en overordnet plan • Planen skal afspejle stoffets struktur • Tildele elementerne betydning • Metoden skal være konsistent, så den i sig selv udtrykker en stil

21. Et eksempel på redesign

22. Nogle principper • Nærhed og distance • Hvad der hænger sammen, skal står sammen • Lighed og forskel • Sammenhæng skabes med lighed, hierarkiske niveauer udtrykkes ved brud • Fokusering • Skab betydningsbærende kontraster

23. Form og betydning • Betydning knyttet til form • som spontan, naturlig reaktion • gestaltlovene • farveoplevelse • som kulturelt opbygget konvention • historiske stilarter • mode

24. Et eksempel De geometriske grundformer Platons metafysiske tolkning af geometrien Vitruvius’ arkitektoniske tolkning af sammenhængen mellem templet og den menneskelige krop Leonardo da Vincis tegning

25. Gestaltpsykologien • Gestalt-lovene karakteriserer de grundlæggende mønstre eller lovmæssigheder, som styrer vores visuelle perception af dele og helheder Loven om figur-grund (5)

26. Gestaltlovene (1): Nærhed • Loven om nærhed • Tætstående elementer opfattes som et hele

27. Gestaltlovene (2): Lighed • Loven om lighed • Elementer, der ligner hinanden, opfattes som et hele

28. Andre gestaltlove • Loven om kontinuitet (3) • Præference for kontinuerte, ubrudte omrids med den simpleste struktur • Loven om lukkethed (4) • Præference for komplette, lukkede figurer • Loven om figur-grund (5) • Den mindste af to overlappende figurer opfattes som figuren, mens den største opfattes som baggrund • Loven om symmetri (6) • Den samlede gestalt sejrer over enkeltdelene

29. Farveoplevelse • Fysiologisk farveoplevelse • Psykologisk farveoplevelse • varme og kolde farver • synæstesi • farve og lyd • Konventionel farvesymbolik • Modefarver

30. Naturfarver mellem farve komplementærfarver

31. Strukturel betydningstilskrivning rød = blod = fare Farvekontrast = forskellige tilstande mellem farve grøn = kontrast = ingen fare lys farve = forandring mørke farver = ingen forandring Lyskontrast = forandring

32. Brug af grid • Grid’et som den overordnede ’rytme’ for sidens layout • Indtegn under planlægningen flugtende linjer, så elementerne sammen både danner underordnede enheder og en struktureret helhed • Arbejd bevidst med tekstens justering som venstre-, højrestillet og centreret • Det er lige så vigtigt at dimensionere de tomme felter (’white space’) mellem elementerne, som elementerne selv

33. RENAISSANCE Lineær, tingenes grænse betones Flade Lukkede former Mangfoldighed Absolut klarhed BAROK Malerisk, tilsyneladende uendelighed Dybde Åbne former Enhed Relativ klarhed Designprincipper Heinrich Wölfflins karakteristik af forskellen mellem renaissancens og barokken kunst: • – fra formbeskrivelse til livstydning

34. enhed balance symmetri regularitet minimalisme diskretion forudsigelighed statik neutralitet fragmentering ustabilitet asymmetri irregularitet overflod overdrivelse spontaneitet dynamik accentuering En forskel, der gør en forskel Valerie Casey’s dikotomier

35. Den horisontale og den vertikale side • Vi ser på to eksempler • besøger webstedet www.afsnitp.dk og kigger på dets brug af • åbenhed og struktur • variation og konsistens • vertikale og meget dybe sider • brug af nye vinduer

36. Næste gang • Udviklingen af et webprojekt • Gæsteforelæser: Hanne Terkelsen • Vi ser på resultaterne af første opgave