Gebruiksvriendelijke vormgeving

Sommige webontwerpers beschouwen Nielsen als een kwelgeest die hen verbiedt mooie sites te maken. Andere webontwerpers, zweren bij zijn teksten alsof hij een heilige is. Beide is overdreven. Nielsen is simpelweg een van de weinigen die op basis van onderzoek aanbevelingen voor Web user interfaces heeft geschreven.

Vormgeving gericht op informatie-overdracht

Inkomsten vanuit je site, krijg je enkel door bezoekers. Inkomsten van advertenties zijn afhankelijk van je bezoekersaantallen. Wanneer je produkt niet gezien wordt, verkoop je het produkt niet. Het is dus de kunst je bezoeker het zo eenvoudig mogelijk te maken, en te voorkomen dat de bezoeker de site van de concurrent in zijn bookmarks zet, en terugkeert naar de website van de concurrent, en niet naar jouw website.

Alle regels en aanbevelingen van Nielsen zijn er dus op gericht, de informatie op websites zo aan te bieden, dat de bezoeker zo tevreden mogelijk over de site kan zijn. Kortom: Gebruiksvriendelijke vormgeving. De regels van Nielsen zijn samengevat in layout- en vormgevingsaanbevelingen, downloadtijdaanbevelingen, navigatie-aanbevelingen en tekst-aanbevelingen.

Layout- en vormgevingsaanbevelingen

• Kies geloofwaardige, dat is niet-amateuristische vormgeving. Vermijd dus dingen als de 'embosste achtergrond-afbeelding' en ikonen die je van andere sites hebt gehaald, als de jarenoude 'mail-mij-vouw-envelopje-'animatie.

• Wees zelfkritisch: ga door al je design-elementen, en verwijder ze een voor een. Zolang je site prima functioneert zonder een van de elementen: laat ze weg.

• Bied op een pagina tenminste 50 - 80% informatie, en beperk de ruimte voor navigatie-elementen tot 20% van de layout van je pagina. Teveel knoppen leiden af.

• Plaats zo min mogelijk advertentie-buttons en banners op je site, en het liefst advertenties die bij het thema van je site passen. Knipperende items leiden van de informatie af.

• Ga er eenvoudigweg vanuit dat je niet op de pixel nauwkeurig kunt ontwerpen, als in traditioneel Interface Ontwerp. Slechts 55% van de bezoekers heeft een beeldschermresolutie van 800 x 600. Per platform, per browser, per monitor zal je pagina er anders uitzien, neem daar genoegen mee.

• Kies voor resolutie-onafhankelijk ontwerp, maak pagina's schaalbaar. Stel de breedte van je tabellen in met een percentage, gebruik als fontgrootte van je tekst een percentage of een 'size = +...'-waarde.

• Hoewel blauw een 'wijkende' kleur is en geen op de voorgrond tredende kleur als rood is, zijn gebruikers door de programmering van Browsers gewend aan blauw als linkkleur. Gebruik daarom nog enkele jaren liefst blauw + onderstreept als stijl voor tekstlinks; wijk je daarvan af, zorg dan voor helder onderscheid tussen links, reedsgevolgde links en leestekst.

• Gebruik CSS, Cascading Style Sheets. Met deze techniek beheer je de vormgeving van je site centraal, je hoeft slechts een bestand aan te passen om je hele site een ander uiterlijk te geven. (Opm Jolie: in het meest ideale geval, dat m.i. bijna niet bestaat.)

• Gebruik geen metaforen. Het Internet is een eigen wereld, het is niet nodig in die wereld de 'echte' wereld na te doen. Een voordeel van Internet is juist dat de bezoeker geen winkelwagentje hoeft voort te duwen, niet hoeft te zoeken in de inmens grote hal van een luchthaven. Waarom zou je die nadelen dan nabootsen. Probeer een 'eigen' vormgeving te bedenken, en gebruik metaforen alleen wanneer ze werkelijk iets verduidelijken of vergemakkelijken.

Downloadtijdaanbevelingen

• Bereken de downloadtijd van je doelgroep, en zorg dat die de 10 seconden niet overschrijdt. Populaire sites blijken die sites te zijn met een gemiddelde downloadtijd van 8 seconden. Uit onderzoek blijkt dat de gemiddelde bezoeker wegklikt als hij langer dan 10 seconden moet wachten. Bij een 28k8-modem-verbinding zou een website dan niet groter mogen zijn dan.. 34 Kilobyte. In de praktijk is het bijzonder moeilijk daar beneden te blijven.

• Zorg dat het bovenste deel van de pagina snel laadt. Zodat de bezoeker alvast een deel van de informatie in beeld heeft als hij moet wachten. Daar zijn truuks voor, we zullen deze behandelen.

• Maak gebruik van het ALT-attribuut van de IMG-tag. Deze zorgt bij het ophalen van een afbeelding, dat de bezoeker alvast kan lezen wat de afbeelding biedt.

• Maak gebruik van het TITLE-attribuut van de A HREF-tag. Deze biedt gebruikers van IE4.0 en hoger (meer dan 50% van de bezoekers) informatie over de inhoud van de achterliggende webpagina.

Navigatie-aanbevelingen

• Bied de bezoeker op elke pagina een link naar je hoofdpagina. Veel bezoekers komen je site binnen via een searchengine. En komen daardoor een een subpagina terecht.

• Vermijd ten allen tijde scripts die de bezoeker direct naar de hoofdpagina doorsturen wanneer ze op een subpagina binnenkomen. Je kunt de bezoeker flink ergeren wanneer een searchenige verwijst naar een van je subpagina's maar je script die verwijzing niet toestaat.

• Gebruik de zogenaamde META-tags in je pagina, zodat je website goed vindbaar is voor Searchengines.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="description" CONTENT="Plaats hier je beschrijving en maak hem behoorlijk lang: 200 karacters, is ong. 25 woorden"> <META NAME="keywords" CONTENT="plaats hier je keywords, maximaal 1000 karacters, is ong. 150 woorden"> <META NAME="author" CONTENT="plaats hier je naam en evt e-mailadres"> <META NAME="publisher" CONTENT="plaats hier je naam en evt e-mailadres"> <META NAME="language" CONTENT="NL"> <META NAME="robots" CONTENT="ALL"> <META HTTP-EQUIV="reply-to" CONTENT="je_adres@provider.nl">

• Bied de bezoeker kans zijn eigen weg te zoeken door je site, maak er geen lineaire tunnel van. Kort samengevat: bied op elke pagina meer dan 1 link.

• Gebruik de no-frames-tag correct. Bied daarin altijd een navigatie-mogelijkheid, en géén "download hier de nieuwe versie van netscape"-link. Een bezoeker die na 5 jaar geen Frames-compatibele Browser heeft, heeft daar een sterke reden voor. Het is bijvoorbeeld de brailleregel van een blinde.

  <HTML> <HEAD> <TITLE>XS4ALL bestaat 5 jaar</TITLE> <META name="description" content="XS4ALL, the first public internet provider in the Netherlands celebrates its fifth birthday, anniversary, 5 years, jubileum, 5 jarig bestaan"> <META name="keywords" content="anniversary, 5 years, jubileum, 5 jarig bestaan, internet access, hacktic, Nederland, The Netherlands"> <META name="author" content="Xs4all Internet B.V. 1998"> </HEAD> <FRAMESET ROWS="50,*" FRAMEBORDER="NO" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0> <FRAME NAME="chapeaux" SRC="chapeaux.html" SCROLLING="NO" MARGINHEIGHT=0 MARGINWIDTH=0> <frameset cols="150,*" BORDER=0 FRAMEBORDER="NO" FRAMEBORDER=0 FRAMESPACING=0 MARGINWIDTH=0> <frame name="balk" src="sbar.html" MARGINHEIGHT=0 MARGINWIDTH=0> <frame name="content" src="voorpag.html" MARGINHEIGHT=5 MARGINWIDTH=5> </frameset> </FRAMESET> <noframes> <!-- hier een niet-frame versie --> Er is veel gebeurd in 5 jaar. Er zijn bijvoorbeeld <A HREF="http://www.netscape.com/">Webbrowsers</A> ontwikkeld. <P> Maar ook nostalgisch ;) zonder frames zijn de XS4ALL-5jaar-pagina's te bekijken: <P> <A HREF="oprichting/index.html">Oprichting</A><BR> <A HREF="1mei93/index.html">1mei 1993</A><BR> <A HREF="hacktic/index.html">Hackermanagers?</A><BR> <A HREF="feest/index.html">Feest</A><BR> <A HREF="wwwhistory/index.html">WWW-history</A><BR> <A HREF="anecdotes/index.html">Anecdotes</A><BR> <A HREF="http://www.xs4all.nl/index.html">Naar de XS4ALL-pages</A><BR> </BODY> </HTML>

• Probeer het gebruik van frames zoveel mogelijk te voorkomen. Frames zijn niet meer nodig om te laten zien hoe 'cool' je bent. Frames doorbreken de eenheid in je pagina, bieden bookmarkproblemen, printbroblemen, searchengineproblemen en veel HTML-editors bieden slechts buggy FrameHTML-code.

• Open geen nieuwe windows. Nielsen: 'Een nieuw window openen is net zoiets als de asbak leeggooien op het tapijt van je gastheer.' Bij Windowsgebruikers (90% van je bezoekers) bedekt het nieuwe window meteen het hele beeldscherm, mogelijk anders dan de bezoeker wenste. Een aantal functies als de back-button of backtoetsenbordcombinatie werkt niet meer in een nieuw window, je brengt de bezoeker op zijn minst enkele seconden in verwarring.

• Voorkom JavaScripten die de navigatie-functies van de browser uitschakelen. De bezoeker kan razendsnel met zijn eigen browser overweg, sneller dan uitvinden waar de navigatiefuncties als 'back', in de webpagina staan. Àls ze er staan.

• Test JavaScripts in zoveel mogelijk browsers. Zeker in Netscape 4 en Internet Explorer 4 en 5, omdat 55 - 90% van de bezoekers (afhankelijk van je doelgroep) die één van die Browsers heeft. Zo is http://www.hp.nl/products/ niet meer aanklikbaar in IE 5.0. Met dergelijke scripts valt de navigatie weg.

Tekst-aanbevelingen

• Gebruik geen link-tekst als 'klik hier voor meer informatie over de openingstijden van onze helpdesk.' Gebruikers lezen 'scannend' van link naar link. Kies daarom: 'Meer informatie over de openingstijden van onze helpdesk.'

• Gebruik informatieve link- en buttonteksten, het liefst met een kleine en eerlijke uitleg wat er zich achter de link zal bevinden. Stuur de bezoeker direct door naar de juiste plaats. Concreet getest: Gebruikers voelen zich bekocht als ze bijv. op zoek naar 'mobiele telefoon privee,' ze na 9 sublinks op kpn.com en 4 minuten wachten(!) bij een snelle kabelverbinding, achter de link 'Alles wat u nodig heeft om mobiel bellen nog makkelijker te maken.' niet meer aantreffen dan: 'Funny tas. Een mobiele telefoon in een knuffelbeest.' Eerlijke link-uitleg was geweest: 'Een accessoire voor jeugdige mobiele bellers.' Helemaal correct was een productoverzicht van mobiele telefoons geweest op het tweede niveau.

• Jaag de bezoekers niet weg met formulieren die vragen zich eerst te registreren voor ze informatie kunnen lezen. Al helemaal niet, wanneer het informatie is die puur commercieel is, zoals de online-brochure van een bekend merk printers ooit onbereikbaar was zonder je huisadres en beroep in te vullen.

• Wanneer je een pagina verwijdert, plaats dan op die URL een link naar de nieuwe pagina, of plaats de nieuwe pagina op de oude URL. Uit testen blijkt dat bezoekers vaak jarenlang dezelfde bookmarks bewaren en gebruiken. Wees blij met bookmarks.. :-)!

• Vertel gebruikers wat je doet met ingevulde gegevens. Wanneer je een formulier in je Site plaatst, bijvoorbeeld om de bezoeker in staat te stellen een demo van een produkt te downloaden, en zelf overzicht te behouden 'wat voor mensen' interesse tonen in je produkt, vertel die bezoekers dan wat je met hun gegevens doet. Bijvoorbeeld: 'we zullen uw e-mail-adres niet gebruiken om u ongevraagd informatie over updates van ons produkt te sturen. Wenst u informatie, kruist u dan het vakje 'stuur mij informatie' aan.'

• Bied belangrijke informatie niet alleen in .PDF-formaat aan, maar ook als HTML of .TXT-bestand. Niet iedereen heeft een PDF-lezer, bovendien is .PDF ontwikkeld om documenten te printen, en is de beeldschermleesbaarheid niet zo goed als .HTML en .TXT.

• Webcontent moet aldus Nielsen, ongeveer 50% zijn van de gedrukte versie van je content. Beeldschermen bieden, hoe hoog de resolutie ook, een minder rustig beeld aan het oog dan drukwerk, en lezen volgens Nielsen 25% trager dan papier. Bezoekers lezen mede daarom 'scannend.' Houd je tekst daarom zo kort mogelijk.

• Bezoekers hebben een hekel aan scrollen. Houd je tekst daarom zo kort mogelijk en het liefst binnen het beeldscherm passend. Nielsen doet dat zelf ook op http://www.useit.com/ ;-) Ahum.

• Voorkom spelfouten, die staan onbedachtzaam en onprofessioneel. Laat teksten door anderen lezen, zeker wanneer je niet in je moedertaal schrijft.

• Gebruik neutrale tekst, elke bezoeker, zelfs binnen één land, heeft zijn eigen gebruiken, en kan daardoor de toon van je website misbegrijpen. Ook kan het de scannende lezer ontgaan dat je een grapje maakte.

• Voorkom 'Happy en Useless' [citaat Nielsen] teksten als 'Welcome!'

Kwelgeest of Heilige? Volgens mij geen van beide. De tekst van Nielsen is een eye-opener, niet meer of minder dan dat. Aanbevelingen, geen stricte regels.