introductie gebruiksgericht ontwerpen

Presentatie over: "introductie gebruiksgericht ontwerpen"— Transcript van de presentatie:

1 introductie gebruiksgericht ontwerpen
Web design - introductie gebruiksgericht ontwerpen nadruk op vormgeving Gerrit C. van der Veer September 2004

2 Ontwerpen van websites
Ontwerpen komt voor bouwen Een website is een gebruikersinterface Ontwerpbeslissingen: structuur van de inhoud navigatie vorm / uiterlijk

3 Ontwerpen voor een opdrachtgever
De opdrachtgever begint met: een situatie / cultuur waarin de site moet passen een doel voor site wensen / eisen betreffende de inhoud een (of meer) doelgroep(en) van bezoekers De ontwerper begint met: taakanalyse - structuur - dialoog & navigatie - vormgeving (zie “Taakanalyse & Webdesign”)

4 Vormgeving Het presenteren van de informatie in een vorm die deze informatie correct en effectief weergeeft, gegeven de: doelstellingen van de site, en cultuur van het gebruik, achtergrond van de gebruikers technische randvoorwaarden multimodaal, maar met name grafisch

5 Correct: staat er wat er moet staan?
In de eerste plaats kwestie van inhoud, maar vorm kan meer suggereren ... Perceptuele mechanismen: mensen vermoeden verbanden als dingen bij elkaar staan, dezelfde kleur hebben, gelijk bewegen Conventies: onderstreept is link, blauw is link etc. Probleem: vormgeving van kopjes (gif) knoppen

6 Correct, maar effectief?
Keuze van representatie heeft grote implicaties: bijv. de Challenger ramp – gebruikte representatie van data betr. problemen met de (fatale) O-ring: Correct, maar effectief?

7 Effectief Dezelfde mechanismen, plus andere, gebruiken om de interpretatie zo eenvoudig mogelijk te maken. Criteria: consistent goed leesbaar efficiënt, zuinig (geen irrelevante afleiders) logisch: vorm die inhoud weerspiegelt productief: vorm die patronen laat zien

8 Alternatieve representatie van bekende O-ring problemen - zou bij de Challenger hebben geleid tot betere besluitvorming!

9 Additionele doelstellingen
aantrekken plezieren (“blijf kijken / kom terug”) schokken / engageren (Amnesty International, SIRE) opwinden (“verleiden tot actie / aankoop”) onderscheiden, opvallen identiteit (merknaam) scheppen (“branding”) en/of handhaven

10 Vormgeving ruimte (lay-out) perceptuele variabelen:
kleur, vorm, grootte, oriëntatie, beweging Web design = vormgeving tekstpagina’s pagina opmaak typografie illustraties

11 Schilderen met letters
een pagina kan volledig ingedeeld en gestructureerd worden zonder gebruik te maken van lijnen, blokken etc. positie, kleur, grootte, regellengte, afstanden tussen letters denk in termen van vlakken (blokken) opgebouwd uit letters

12

13 lay-out van pagina de eerste 10 cm moet voldoende zijn om te weten waar het over gaat en om door te kunnen springen bovenaan: titel en navigatiebalk - herkenbaarheid onderaan: navigatie, auteur, datum e.d.

14 Pagina opmaak: ondersteuning voor scannen en voor lezen

15

16

17 Layout we lezen (in het westen) van links naar rechts en van boven naar beneden:

18

19

20

21 Layout van tekst we lezen (in het westen) van links naar rechts en van boven naar beneden: belangrijke zaken (= wat lezer het eerst moet opvallen) dus (links) boven lezen: max char. per regel denk aan krantenkolommen (8 cm) bij meer moet lezer hoofd gaan bewegen

22

23 Layout Welke minimale afmeting kun je wel verwachten? Niet iedereen heeft het nieuwste scherm en de nieuwste browser Niet iedereen zal het gehele scherm voor de web browser gebruiken Opties: Cascading Style Sheets plaatjes van tekst maken (image maps) gebruik vaste frames tables

24 Cascading Style Sheets
poging inhoud en vorm netter te scheiden: eigen vorm voor bestaande tags nieuwe classes toevoegen in combinatie met XML veel meer controle handig voor onderhoud

25 Alles in image volledige controle voor ontwerper, zowel over positie als over fonts etc. nadelen: langere download toegankelijkheid (mensen die geen plaatjes willen/kunnen) bekijken onderhoud is veel lastiger (gewone teksteditor is nutteloos)

26 Imagemaps: controle over fonts en layout; meerdere links

27 Hoe vol mag het scherm? designers houden van “white space”, denk aan de inrichting van musea ruimte is echter duur en beperkt, dus meestal toch alles vol (denk aan krant, Las Vegas, sites als Yahoo) typografische vuistregel: 70% van pagina vullen, rest “wit” Psychologische vuistregen (Fitts’ Law): gebruik een simpel “grid”

28

29

30 Consistentie Belangrijkste eis aan opmaak Bevordert: Herkenbaarheid
Gemak Suggereert zorgvuldigheid

31 Typografie gaat over contrast tussen achtergrond en de letter zelf
doel is woorden / teksten zo leesbaar mogelijk te maken

32 Lezen is het herkennen van woordbeelden:
Alleen hoofdletters verarmt het signaal: Hoofdletter alleen bij begin van zin of naam:

33 Fonts fonts zijn zelf belangrijke grafische elementen, in de eerste plaats in dienst van de betekenis, maar met een eigen effect op de stijl die de site uitstraalt afweging tussen resolutie, ruimte, behoefte tot onderscheiden, traditie

34

35 Tips regelafstand niet te klein (> fontgrootte)
beperk verschillen in fontgrootte (10-14) gebruik hooguit twee fonts houdt rekening met beperkte resolutie en matrix opbouw scherm (bij keuze font) gebruik font variabelen (kleur) vooral om verschil in belang tussen headers te verduidelijken, niet binnen tekst zelf

36

37

38 6 jaar later .... useit.com: Jakob Nielsen's Website
useit.com: usable information technology useit.com: Jakob Nielsen's Website Permanent Content Alertbox Jakob's column on Web usability Informational Articles Must Ask For the Order (Aug. 23) Unless you have explicit links to product pages from article content, users who visit articles directly from search engines might never realize that you sell related products. Search Engine Behavior (Aug. 16) Information Scent (Aug. 2) Card Sorting (July 19) All Alertbox columns from 1995 to 2004

39 Achtergronden voorzichtig, gaat snel fout
contrast cruciaal, dus achtergrond licht en alle tekst donker of evt. andersom geen contrast binnen achtergrond zelf

40

41

42 Plaatjes Zijn ze relevant? Beperk kleurengebruik
Toets andere kleurinstellingen Zorg voor heldere omschrijving als “plaatjes uit” Leg afmetingen vast Lees plaatjes vooraf in

43 Bitmaps of vector graphics
bitmaps (raster graphics) gif, jpeg geschikt voor foto’s en andere plaatjes waarin de kleur continu varieert vergen meer geheugen vector graphics Postscript, Flash, VML (vector mark-up language) lijntekeningen, cartoons, fonts onafhankelijk van resolutie

44 Compressie kleinere files = sneller laden
twee types: lossy of lossless lossless: GIF lossy: JPEG

45 GIF: Graphic Interchange Format
bitmap gecomprimeerd (zoekt reeksen die zich horizontaal herhalen), zonder verlies mogelijkheden als transparency, animation

46

47 JPEG - Joint Photographic Experts Group
mate van compressie instelbaar duurt langer om te decompressen kleuren zijn niet browser-safe Nieuwer: Portable Network Graphics geen verlies, zowel 8, 24 als 32 bits

48 Kleur hulpmiddel bij het organiseren van de verschillende onderdelen
middel om samenhang en harmonie te scheppen maar ook lastig: kunst is van te voren een samenhangend schema te kiezen

49

50 Toegankelijkheid mensen met slechte ogen, kleurenblinden taal
mensen met trage connecties en andere technische beperkingen

51 Culturele toegankelijkheid
Culturele dimensies (Geert Hofstede): Ned. Jap. power distance l h individualism / collectivism i c masculinity / femininity f m uncertainty avoidance l h long-term / short-term time orientation s l Cultureel typerende websites, zie A. Marcus, Interactions VII, 4, july 2000, en zoek op het web

52 Technische randvoorwaarden:
browsers verschillen in implementatie van de standaards standaards zelf verschillen HTML, Javascript, …. kleuren (helderheid) en fonts verschillen per platform (Mac, PC, Unix) monitor grootte, resolutie, aantal kleuren

53 beoordelen van bruikbaarheid (1) (n. a. v
beoordelen van bruikbaarheid (1) (n.a.v. een scenario met bezoekerssoort en een gekozen doel) Globaal: Jakob Nielsen’s heuristische checklijsten (een aangepast voorbeeld) Simpele en natuurlijke dialoog Taal van de bezoeker Minimaliseer geheugen belasting Consistent Feedback Vermijdt “fouten” van bezoekers Hulp faciliteiten Esthetiek en minimalistisch design

54 useit.com: Jakob Nielsen's Website
useit.com: usable information technology useit.com: Jakob Nielsen's Website Permanent Content Alertbox Jakob's column on Web usability Informational Articles Must Ask For the Order (Aug. 23) Unless you have explicit links to product pages from article content, users who visit articles directly from search engines might never realize that you sell related products. Search Engine Behavior (Aug. 16) Information Scent (Aug. 2) Card Sorting (July 19) All Alertbox columns from 1995 to 2004

55 beoordelen van bruikbaarheid (2) (n. a. v
beoordelen van bruikbaarheid (2) (n.a.v. een scenario met bezoekerssoort en een gekozen doel) 2. Detail: voor plaatsen in een site die problematisch lijken – “cognitieve walkthrough” Beschrijf bezoeker, doel, uitgangssituatie Per dialoog stap: Wat verwacht je dat bezoeker zal doen? Op grond van welke “zichtbare” informatie? Wat zal bezoeker verwachten dat het systeem doet?

56 beoordelen van bruikbaarheid (3) (n. a. v
beoordelen van bruikbaarheid (3) (n.a.v. een scenario met bezoekerssoort en een gekozen doel) Web design patterns – bewezen oplossingen voor bekende behoeften van bezoekers Site types User experience Navigation Searching Page elements etc.

57 · News box · Home · Language
Web Design patterns Site Types · My Site · Portal · Commerce Site · Community Site · Branded Promo Site · Corporate Site · News Site · Museum Site · Automotive Site · Web-based Application · Travel/booking Site · Multinational Site · Artist Site User Experiences · Shopping · Community · Learning Navigation · Main Navigation · Bread crumbs · Double tab · Meta Navigation · Split Navigation · Repeated Menu · Faceted Navigation · Teaser Menu · Header-less Menu · Fly-out Menu · Directory · Trail Menu · Scrolling Menu · Shortcut Box · Image Menu · Guided Tour Searching · Simple Search · Advanced Search · Search Results · Search Area · Sitemap · Topic Pages · Search Tips · Site Index · Help Wizard · FAQ Page Elements · News box · Home · Language

58 Hoofdregel: hou het simpel
wees zuinig met pixels (= verhouding data:inkt) hou het snel (laden, zoeken, onderhoud …) inhoud staat voorop