introductie gebruiksgericht ontwerpen Web design - introductie gebruiksgericht ontwerpen nadruk op vormgeving Gerrit C. van der Veer gerrit@cs.vu.nl September 2004

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

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”)

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

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

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?

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

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

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

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

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

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.

Pagina opmaak: ondersteuning voor scannen en voor lezen

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

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. 40-60 char. per regel denk aan krantenkolommen (8 cm) bij meer moet lezer hoofd gaan bewegen

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

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

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)

Imagemaps: controle over fonts en layout; meerdere links

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”

Consistentie Belangrijkste eis aan opmaak Bevordert: Herkenbaarheid Gemak Suggereert zorgvuldigheid

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

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.

· 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

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