In de eerste plaats zijn websites gebouwd voor mensen. Duh? Toch blijken nog lang niet alle webontwikkelaars dat te beseffen. De mens is een eigenaardig wezen en jammer genoeg voor webdesigners, hanteren mensen het fast-food-principe “get in, get out & get on with your life” wanneer ze een website bezoeken.

Mensen hebben geen zin om lang te moeten zoeken naar informatie of om uit te zoeken hoe je ingenieus en experimenteel navigatiesysteem werkt, en gelijk hebben ze. Willen ze tijd verliezen, dan zullen ze heus wel voor TV gaan liggen in plaats van jouw website te ontcijferen.
In een vorige post hadden we het reeds over manieren om ervoor te zorgen dat een website voldoet aan de vooropgestelde eisen van een klant of eindgebruiker. Hieronder geven we nu enkele algemene tips die de usability van uw website of applicatie kunnen verbeteren indien ze goed worden toegepast.

1. “Talk Business”

“Zoek niet verder! Wij zijn de beste én de goedkoopste!”. Wie gelooft zulke praatjes als men ze tegenkomt op een website? Wij in ieder geval niet. Als we op een website komen willen we graag in een oogopslag zien waarover de website gaat en waar we verder naartoe kunnen voor meer informatie, zonder schreeuwerige verkooppraatjes te moeten trotseren. Deze tip heeft misschien niet onmiddellijk met usability te maken, maar er wordt zodanig vaak tegen gezondigd dat we deze niet konden achterhouden.

Wil je bezoekers overtuigen om lid te worden van je website of om een account te openen op je applicatie, wees dan duidelijk en direct in je communicatie. De uitdrukking “Talk Business” omschrijft prima wat we bedoelen. Op onderstaande schermafdruk wordt duidelijk gecommuniceerd zonder opschepperig te worden of zonder zinnen als “wij zijn de beste” te gebruiken. Er wordt wel eerlijke en duidelijke informatie gecommuniceerd naar de bezoeker toe.

2. Keep It Simple Stupid!

Een belangrijk aspect van usability is het wegnemen van vraagtekens voor een gebruiker. Dat wil zeggen dat elke pagina en elk scherm van uw site of applicatie vanzelfsprekend en zichzelf verduidelijkend moet zijn. 
Niet alle informatie hoort bijgevolg thuis op de homepagina. Het kan best zijn dat iemand in die éne specifieke dienst of dat éne product geïnteresseerd is, terwijl anderen daar absoluut geen boodschap aan hebben.

Heb je bijvoorbeeld 30 verschillende subpagina’s in je website, tracht dan niet alles op de hoofdpagina te proppen, maar zorg voor een duidelijke navigatie die ervoor zorgt dat gebruikers hun weg vinden naar dieper gelegen pagina’s indien ze dit wensen.

In bijgevoegde schermafdruk zie je hoe wij ons voorstellen op onze hoofdpagina. Gebruikers zullen de pagina hoofdzakelijk en initieel scannen in een F-vorm, waarbij ze in de linkerbovenhoek van het scherm cruciale informatie wensen te vinden.

Wij stellen ons duidelijk voor op een goed zichtbare plek van het scherm en zorgen ervoor dat onze navigatie duidelijk terug te vinden is voor mensen die verder willen surfen, zonder daardoor alle informatie op de hoofdpagina te willen pushen.

Als je twijfelt of bepaalde informatie al dan niet op je hoofdpagina thuishoort, dan is de kans groot dat je die informatie in zijn geheel kan weglaten. De hoofdpagina - en dit geldt eveneens voor andere pagina’s - dient enkel noodzakelijke informatie te bevatten, de rest staat in de weg van je gebruiker.

3. Progressive enhancement en unobtrusive coding

Heb je je applicatie opgewaardeerd met fancy AJAX? Super, maar hopelijk hou je er rekening mee dat niet iedereen javascript ondersteunt. De beste manier om je applicatie te bouwen is dan ook om laag per laag te gaan werken. Begin steeds met je basisstructuur in xHTML en maak deze op in een externe stylesheet. Schrijf eventueel je serverside code zoals PHP als die er is en zorg dat je applicatie op die manier perfect werkt. Op dat moment heb je een goede basis met hopelijk goede formuliercontroles waar een gebruikers niets meer in kan mis doen.

Op dat moment, en niét eerder, ben je klaar om AJAX-ondersteuning te gaan toevoegen voor gebruikers die javascript ondersteunen. Je gaat met andere woorden een leukere, aantrekkelijkere applicatie aanbieden met eventueel leuke effecten, áls men javascript ondersteunt. Ondersteunen uw gebruikers geen javascript, dan dient de applicatie toch netjes te blijven werken, zij het dan zonder mooie effecten of zonder AJAX.

In onderstaande schermafdruk staat dezelfde pagina twee keer naast mekaar, een keer mét javascript ingeschakeld in de browser en een keer zonder. Wanneer javascript ondersteund wordt zorgen we ervoor dat een gebruiker kan klikken op één van de titeltjes om dan via een SlideUp-effect in jQuery de nodige informatie te tonen. Zoals je ziet krijgen gebruikers die niét over javascriptondersteuning beschikken toch de volledige pagina te zien. Ook Google, die niet met javascript omgaat, zal perfect de pagina kunnen indexeren in haar zoekresultaten.

Lees meer over progressive enhancement en unobtrusive coding AListApart.com.

4. Usability testing

Het ontwerp van een goede website of applicatie begint met een goede mockup. Is de applicatie uiteindelijk uitgebouwd, dan is het tijd om ze te laten testen door je gebruikers. De selectie van je testpersonen zou zodanig moeten gebeuren dat ze een realistische populatie vormen die representatief is voor de echte eindgebruikers van de website of applicatie. Het zou namelijk erg dom zijn je applicatie enkel te laten testen door highly skilled informatici, tenzij ze natuurlijk je uiteindelijke ideale eindgebruiker vormen.

Maar hoe test je nu of je applicatie wel goed en duidelijk en dus usable is opgebouwd. Sinds kort gebruiken we voor deze procedure het geniale Silverback van de firma Clearleft. Silverback is een Mac-applicatie die gebruik maakt van de ingebouwde webcam in bijvoorbeelde onze MacBook Pro.

Stel dat we voor onze nieuwe dienst SolidShops.com willen testen hoe goed onze signup pagina is opgebouwd. Hiervoor laten we een nietsvermoedende gebruiker plaats nemen achter onze laptop, zonder dat hij of zij weet dat de Silverback applicatie alle acties en muiskliks op de achtergrond opneemt. Zo kunnen we doodeenvoudig achteraf hérbekijken hoe een gebruiker de weg vindt door onze applicatie. Zijn er bepaalde zaken op de pagina in kwestie onduidelijk, dan kan je vragen om hier meer uitleg bij te geven om achteraf je applicatie zo goed mogelijk bij te sturen naar een volgende, meer bruikbare versie.

5. Accessibility en webstandaarden

Tenzij je voor Microsoft werkt weet je hopelijk dat er meer en betere browsers bestaan dan Internet Explorer. Zorg ervoor dat je applicatie of website consistent werkt op eender welke browser, of het nu Internet Explorer 7 op PC is of Safari op MacOSX. Je wil geen klanten mislopen omdat je o-zo-mooie website enkel werkt in de laatste versie van Firefox. Een eerste stap is om ervoor te zorgen dat je altijd, maar dan ook altijd je pagina’s uitwerkt volgens een geldig Doctype, en bij voorkeur dan nog xHTML 1.0 Strict.

Het gebruik van een doctype in je webpagina’s zorgt er namelijk voor dat browsers weten wat ze kunnen verwachten wanneer we onze pagina’s erin opladen. Hierdoor wordt het risico op verschillen tussen browsers tot een minimum herleid. Combineer dit met een CSS-reset en je webpagina kan niet (eenvoudig) meer stuk. Vergeet natuurlijk niet om je pagina’s tegen het gebruikte doctype te valideren.

Hoe zit dat nu praktisch?

Bovenstaande concepten geven gevorderde webontwikkelaars enkele goede richtlijnen mee over hoe ze hun applicatie een stuk meer bruikbaar kunnen maken voor de eindgebruikers. Progressive enhancement en unobtrusive coding hebben we bijvoorbeeld in theorie besproken, maar daar kunnen wel eens praktische vragen bij opduiken. Is het gewenst dat we dit concept in een volgende post in meer detail bekijken, laat het ons dan hieronder zeker weten.