05 mei2006

De 10 zonden van webdesign usability

  • reageren (13)
  • bookmark
  • e-mail
  • afdrukken
X
X
  • Plaatsen/stemmen op NUjij
  • Geef kudos

10 Webdesign usability zondenVandaag gaf ik weer eens een erg leuke workshop usability (al zeg ik het zelf ;)). Daarin probeer ik in drie uur een overview te geven van usability en accessibility, met een sterke practische focus op onder andere webdesign. De mensen die daarop af komen zijn vooral (online) marketeers en webmasters. Het opleidingslokaal zat met 18 man en vrouw goed vol, maar er was genoeg ruimte voor feedback en wat discussie.

Nu lees ik net bij 456 Berea Street een lijstje met 10 dodelijke zonden van webdesign. En tot mijn genoegen heb vandaag ik elk punt bijna letterlijk aangehaald en van voorbeelden voorzien. Aan het eind van de workshop bekijk ik samen met de deelnemers altijd een aantal van hun websites en behandelen we specifieke vragen. Daar zijn deze 10 punten ook altijd de belangrijkste speedpunten.
Dus de deelnemers van vandaag zullen dan ook zeker knikken en flashbacks krijgen bij deze top 10:

  1. Niet volgen van basisregels van typografie

    Webdesign usability zonden: typografieOp internet is je huisstijl soms een last i.p.v. een houvast. Letttertypen die in print goed werken, zijn voor beeldschermen vaak gewoon niet geschikt. Het gebruiken van plaatjes om koppen toch in het oh zo mooie huisstijl lettertype weer te geven zorgt weer voor een slechte accessibility van je website. Denk ook aan interpunctie, alinea lengte en regelafstand om leesbaarheid te verbeteren.

  2. Wees lekker creatief met je navigatie

    Ik vergelijk websites soms met boeken, just to make a point… Die hebben ook altijd een kaft, een rug met titel en auteur, een inhoudsopgave, vaak een index, bladzijde nummers, en je leest ze van links naar rechts en van voor naar achter. Het heeft geen zin om daar verandering in aan te brengen, dat maakt de lees-ervaring slechter. Hou je in je webdesign dan ook gewoon aan conventies. Een tip die ik altijd geef is; kijk naar je concurrenten die het goed doen. Dan heb je meestal een goed beginpunt en een aardige standaard te pakken.

  3. Creëer een volgepropt navigatie systeem

    Webdesign usability: navigatie menuProbeer nu eens niet je complete organisatie, of je complete website, in één allesomvattende navigatie te vatten. Dat lukt meestal niet, en zorgt ervoor dat de basis waar je website op drijft niet meer te vinden is. Hou het zo simpel mogelijk, en bied diepere navigatie opties aan waar ze relevant zijn.

  4. Maak speciale technologie noodzakelijk voor gebruik van je website

    Zorg dus dat je website niet volledig in Flash opgebouwd is. Of dat de navigatie alleen met javascript werkt. Om maar te zwijgen van het gebruik van video zonder tekstueel alternatief, of traag ladende java applicaties. Het is prima om speciale functies met speciale daarvoor bedoelde middelen te maken, maar maak je website er niet van afhankelijk. Zo houd je alles toegankelijk voor gebruikers, en zoekmachines.

  5. Denk dat accessibility alleen maar over blinden gaat

    webdesign usability zonden brailleDat is altijd een uitdaging; mensen overtuigen van het belang van accessibility. Ik gooi het altijd op een mix van bereik vergroten (niemand uitsluiten), ontwikkel en ondehoudskosten drukken, klaar zijn voor de toekomst, en zoekmachine vriendelijkheid. Dat werkt over het algemeen goed. Al is het eigenlijke toegankelijk webdesign vaak nog wat ingewikkeld voor een korte workshop.
    Zie ook Hoe verkoop je toegankelijkheid? en De klant van de webbouwer geeft niet om toegankelijkheid

  6. Negeer webstandaarden

    Webdesign usability webstandaarden: W3C standaardenEen praktijk waar de overgrote meerderheid van webbouwers en webdesigners zich aan bezondigt. Doordat iedereen zo aan Internet Explorer gewend is geraakt, is het belang van webstandaarden ondergesneeuwd. Met de stormachtige opkomst van Firefox verandert dit gelukkig steeds meer. Hier gelden uiteraard dezelfde argumenten als hierboven.

  7. Negeer zoekmachines bij de bouw van de site

    Webdesign usability zonden: zoekmachinesDe workshops zoekmachine marketing zijn nog steeds populairder dan die over usability en accessibility. Dus misschien komt het nog goed met dit punt… Nog te vaak wordt zoekmachine optimalisatie beschouwd als een marketing truc die je kunt doen wanneer het je uitkomt. Dat kan op zich ook wel, maar de kosten zijn veel lager als je er bij de bouw van je site rekening mee houdt. En de resultaten ook beter overigens.
    Hierover zijn boeken volgeschreven, maar hou in gedachten dat je bij de bouw van een website altijd even een zoekmachine expert aan zijn of haar (maar meestal toch “zijn”) mouw trekt. Dan voorkom je dat je een flater begaat zoals de Rabobank dat deed.

  8. Baseer de structuur van je website op je organisatie

    Ook altijd heel moeilijk, laat die interne organisatie los! Je website kan niet ingericht worden volgens de business units, en de homepage is niet de plek om alle interne organisaties op de gebruiker los te laten. Bepaal welke acties/ scenario’s door gebruikers doorlopen moeten worden, en maak je website daar perfect voor. Dan komt het met de vindbaarheid van de onderdelen van de organisatie ook wel goed.

    Wat altijd naar boven komt in de workshops is het zogenaamde homepage conflict. Elk onderdeel van de organisatie vindt dat het recht heeft op een stukje van de homepage. En dat stukje moet eigenlijk net zo groot zijn als het aandeel in de omzet. Weersta dat, baseer het homepage design op de meest voorkomende taken. Biedt ingangen naar de belangrijkste sub-websites, probeer niet direct de bezoeker op de homepage iets te verkopen (tenzij je een e-commerce site hebt). Dat komt later wel, als die bezoeker de ingang heeft gevonden naar het voor haar relevante.

  9. Gebruik grijze tekst op grijze achtergrond

    Ook altijd goed voor enige hilariteit. Er zitten altijd een paar websites bij die zijn gemaakt door enthousiaste vormgevers die de brochures proberen na te maken voor internet. Het ziet er vaak op het oog wel aardig uit, tot je de tekst probeert te lezen. Hou tekst (dus ook navigatie) gewoon groot en contrastrijk, dat werkt online het beste. Kleurstellingen die op papier werken, zijn online vaak te subtiel.

  10. Laat die haalbaarheidsstudie maar zitten

    …in de praktijk leren hoe ze met internet om moeten gaan. Dan kan de website evolueren, in plaats van ontploffen.Een haalbaarheidsstudie klinkt wat overdreven. Maar een van de belangrijkste aspecten van usability in webdesign is hoe een project wordt opgezet. Te vaak neemt het reclamebureau de leiding, en wordt de webbouwer pas betrokken op het moment dat de website bijna live moet. Die webbouwer, en dan met name de ervaren webdesigner, interaction designer, programmeur, etc., kunnen goed aangeven hoe ingewikkeld het is om iets te realiseren. En wat de complicaties zijn voor dingen als beheersbaarheid, usability, accessibility.
    Dicht hierbij ligt ook het probleem dat veel organisaties hebben die ontevreden zijn over hun website. Op een gegeven moment slaat er iemand met zijn vuist op tafel, dan moet de website opeens in no-time helemaal anders en deze keer graag perfect. Al het mogelijke wordt ingebeeld, maar meestal is de organisatie de beperkende factor. De mensen die de website van inhoud moeten voorzien, moeten nog aangenomen worden. Marketing managers moeten de website als project on-the-side erbij doen. Of hoger management beeld zich in dat ze in enkele dagen feedback kunnen leveren op webdesign beslissingen. Terwijl dat vaak grote vertragende factoren zijn.
    Mijn tip: begin met een site die goed opgezet wordt, maar prop hem niet vol met toeters en bellen. Laat de organisatie wennen aan het feit dat er een website komt die wel de moeite waard wordt. En laat ze vervolgens in de praktijk leren hoe ze met internet om moeten gaan. Dan kan de website evolueren, in plaats van ontploffen. En voor budgetknijpende managers, vergeet niet: het kan goedkoop, snel, of goed.

Al met al toch weer een hoop tips in een klein lijstje. Ik ben benieuwd welke potentiële top 10 webdesign usability zonden we nog missen. Misschien hebben de workshop deelnemers nog wat suggesties? ;)

Popularity: 9% [?]

Reacties (13)

Reageren
  • Dit is een leuk artikel waar ik op usabilityweb ook al aandacht aan heb besteed. Goede voorbeelden.

  • Ah indeed, thanks voor de tip Erwin. Loop weer achter met mn rss feeds (hier het artikel van usabilitweb)

  • Zit jij in mijn hoofd ofzo? Ben het er helemaal mee eens!

  • Haha Tinus, usability is meestal weinig anders dan common sense. Misschien hebben we daar allebei evenveel van ;)
    Hoewel er best nog wel wat meer mooie zonden op te snorren moeten zijn, zou van jou toch wel wat aanvullingen verwachten… ;)

  • Uhmm.. Heb er nog wel een paar ja..

    – Controleer nooit of je website dode links bevat
    – Test je website alleen als je klachten krijgt
    – Laat bezoekers inloggen om iets in een winkelwagen te zetten
    – Zet de “vorige” knop buitenspel
    – Verwijs bezoekers die via zoekmachines komen automatisch door naar een andere pagina
    – Plaats een pagina met belangrijke informatie in een (vaak geblokkeerde) popup, zonder alternatief
    – Maak je tekst extra lang om een pagina te vullen
    – Ga er van uit dat je bezoekers je altijd meteen begrijpen

  • – Richt teksten op zoekmachines in plaats van op de bezoekers
    – Laat bezoekers via betaalde advertenties op je homepage binnenkomen
    – Plaats meer dan 3 externe javascripts in je pagina

    En nu weer aan het werk..

  • @Tinus:
    Wat is precies het probleem van meer dan 3 externe JavaScripts (los van ‘foute’ JS-toepassingen in het algemeen)?

  • Ga maar eens naar digg.com en kijk tijdens het laden eens naar de statusbalk. Kijk daarna eens naar de broncode. De pagina’s kunnen veel sneller laden als ze iets minder requests naar de server sturen. Nou is 3 natuurlijk geen zaligmakend getal en het hangt ook af van de grootte van de bestanden, maar vanuit mijn ervaringen probeer ik het niet meer te laten worden dan dat.

  • Hoe minder externe bestanden je in je site gebruikt, hoe minder specifieke (en dus feitelijk meer overbodige) code je waarschijnlijk per pagina aanroept. Nu worden dergelijke bestanden bij de meeste bezoekers gelukkig gecached waardoor ze slechts eenmalig opgehaald hoeven te worden.
    Bij het gebruik van meerdere, specifiekere bestanden wordt de extra laadtijd over meer pagina’s uitgesmeerd, terwijl bij het gebruik van slechts 1 extern bestand deze extra laadtijd geheel op rekening van de eerst geopende pagina komt.

    Bij digg.com zijn inderdaad behoorlijk wat externe bestanden gelinkt en de statusbalk gaat flink te keer voor alles binnen is. Ik heb de scriptjes niet bekeken, maar ik kan me wel voorstellen dat het in totaal ook om nogal wat code gaat. Als dat zo is kun je je afvragen of het het aantal bestanden is of de totale hoeveelheid code die de laadtijd het meest oprekt.

  • Nog een toevoeging:
    – Verstuur informatie nog een keer wanneer de bezoeker een pagina terug gaat of opnieuw laadt.
    – Gebruik mooie lange flashintro’s, de bezoeker wil voordat de inhoud komt even uitrusten en genieten van de mooie animaties :P
    – Ga er vanuit dat de bezoeker weet waar hij op de site zit

    Het voorbeeld wat je noemt van het boek gebruik ik ook wanneer mensen/klanten wat vragen over zoekmachine optimalisatie. Vaak snappen ze niet waarom optimalisatie goed is, omdat ze het niet altijd direct zien.

    Wanneer je in een boek op zoek bent naar een bepaalde passage hecht je aan bepaalde elementen meer waarde dan aan anderen… Bijvoorbeeld hoofdstukken, duidelijke inhoudsopgave (navigatie) wat dikker gedrukte tekst, onbewust ga je elementen zwaarder laten wegen. Zie een woordenlijst achterin het boek als een sitemap die ook extra kan bijdragen om je boek als geheel goed te doorzoeken. (sitemap)

    Is een site slecht opgebouwd, brakke code ed. zie het dan als een boek waarvan alle pagina’s los liggen en door elkaar heen. Het is dan voor de zoekmachines lastig om alles goed op te nemen, hij kan het spoor bijster raken.

    Het boek (site) moet goed in elkaar zitten (W3C), goede inhoudsopgave (navigatie), duidelijke titels (h1, h2 ed.) en goede teksten. Op deze manier is het voor een leek vaak een stuk duidelijker en begrijpt hij waarom optimalisatie nuttig kan zijn.

  • […] Klik hier voor het overzicht […]

  • […] 10 zonden van webdesign usability van Ruben Timmerman […]

  • […] 10 zonden van webdesign usability van Ruben Timmerman […]

Reageer

(zal niet zichtbaar zijn)