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

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

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?

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?"

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

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

Brugertest Den empiriske metode

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

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.

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]

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

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?

Definition af brugervenlighed Et brugervenligt websted er et websted, der er 1let at lære 2let at huske 3effektivt at bruge 4forståeligt 5tilfredsstillende 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.

De fem gyldne regler (1) 1Kend 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

De fem gyldne regler (2) 2Inddrag 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

De fem gyldne regler (3) 3Test 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

De fem gyldne regler (4) 4Læ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

De fem gyldne regler (5) 5Koordiné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.

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

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

Et eksempel på redesign

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

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

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

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)

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

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

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

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

Naturfarver komplementærfarver mellem farve

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

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

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

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

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

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