De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

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

Verwante presentaties


Presentatie over: "Web design - introductie gebruiksgericht ontwerpen nadruk op vormgeving Gerrit C. van der Veer September 2004."— Transcript van de presentatie:

1 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 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 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 OrderInformational 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 BehaviorSearch Engine Behavior (Aug. 16) Information Scent (Aug. 2) Card Sorting (July 19) Information Scent Card Sorting All Alertbox columnsAll Alertbox columns from 1995 to jaar later....

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. een scenario met bezoekerssoort en een gekozen doel) 1. 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: usable information technology useit.com: Jakob Nielsen's Website Permanent Content Alertbox Jakob's column on Web usability Informational Articles Must Ask For the OrderInformational 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 BehaviorSearch Engine Behavior (Aug. 16) Information Scent (Aug. 2) Card Sorting (July 19) Information Scent Card Sorting All Alertbox columnsAll Alertbox columns from 1995 to 2004

55 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. een scenario met bezoekerssoort en een gekozen doel) 3. Web design patterns – bewezen oplossingen voor bekende behoeften van bezoekers – Site types – User experience – Navigation – Searching – Page elements – etc.

57 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 SiteMy SitePortalCommerce SiteCommunity SiteBranded Promo SiteCorporate SiteNews SiteMuseum SiteAutomotive SiteWeb-based ApplicationTravel/booking SiteMultinational SiteArtist Site User Experiences · Shopping · Community · LearningShoppingCommunityLearning 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 TourMain NavigationBread crumbsDouble tabMeta NavigationSplit NavigationRepeated MenuFaceted NavigationTeaser MenuHeader-less MenuFly-out MenuDirectoryTrail MenuScrolling MenuShortcut BoxImage MenuGuided Tour Searching · Simple Search · Advanced Search · Search Results · Search Area · Sitemap · Topic Pages · Search Tips · Site Index · Help Wizard · FAQSimple SearchAdvanced SearchSearch ResultsSearch AreaSitemapTopic PagesSearch TipsSite IndexHelp WizardFAQ Page Elements · News box · Home · LanguageNews boxHomeLanguage

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


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

Verwante presentaties


Ads door Google