Follow Us on Twitter

Usability en Design

April 2010 - Een interactieve, aantrekkelijke en makkelijk te gebruiken website met een dynamische inhoud. Oftewel WEB 2.0. Iedereen werkt hier naartoe of is er al. Deze ontwikkeling is al tijden aan de gang. Omdat browsers tegenwoordig zoveel meer mogelijkheden hebben dan vroeger beginnen sommige sites al meer op applicaties te lijken. Dit betekent knoppen in plaats van hyperlinks, schuifbare panelen en animaties wat tot een hele nieuwe ervaring leidt. Nou ja, zou moeten leiden.

Het grote scala aan mogelijkheden om een website of webapplicatie te maken wil er ook wel eens toe leiden dat het doel voorbij gestreefd wordt of niet eens bereikt wordt. Iedereen kent ze wel. Websites die zoveel knoppen en links hebben dat je niet weet waar je klikken moet. Websites die zoveel visuele effecten hebben dat je het idee hebt dat je naar een overgedecoreerde kerstboom zit te kijken. Het doel van dit Whitebook is dan ook om een aantal handvatten te bieden waarmee de bruikbaarheid van een website / webapplicatie bevorderd kan worden. Je wil namelijk dat een bezoeker van de website zijn weg kan vinden op de site zonder eerst een handleiding te moeten raadplegen. Om dit te realiseren zal er goed nagedacht moeten worden over aspecten als layout, kleurstellingen en effecten. Al deze punten zullen dan ook aan bod komen in dit Whitebook waarbij de nadruk zal liggen op de layout en effecten.

Alvorens in de stof te duiken nog een opmerking over de materie. Dit onderwerp is er een waar men hele boeken over kan schrijven. Zoveel best-practises en verschillende meningen zijn er over dit onderwerp. Het doel van deze Whitebook is dan ook niet om een complete handleiding te bieden. Er zullen vooral tips en trucs de revue passeren die de algemene bruikbaarheid van een website verhogen. Daarnaast zijn deze tips niet alleen van toepassing op een website. Deze gaan ook op voor veel desktop-applicaties.

Layout

We zullen meteen beginnen met het voornaamste onderwerp. Voordat je een begin hebt gemaakt met de eerste regels code van de website moet je al weten wat de algemene layout zal worden. Per type website zijn er verschillende layouts die je kunt overwegen. We beperken ons hier tot de algemene punten.

Ruimtelijk inzicht

Probeer altijd bewust te zijn van de hoeveelheid ruimte die je beschikbaar hebt op het scherm en hoe je deze het beste kunt invullen. Er zijn een aantal manieren om de layout te optimaliseren:

  • Kies een layout die het meest geschikt is voor het doel dat je probeert te bereiken, oftewel ga je componenten horizontaal of verticaal groeperen. Een combinatie van beide layouts is vaak het meest geschikt. Er kan zoveel meer dan de standaard 2- of 3-column layout.
  • Gebruik geen menu-balken over de gehele lengte van de applicatie als je maar een paar knoppen hebt. Je creërt zo een hoop loze ruimte die later lastig te gebruiken is.
  • Groepeer vergelijkbare componenten. Probeer bijvoorbeeld een lijst met een hele hoop hyperlinks te vermijden. Zie afbeelding 1 voor hoe het niet moet. In plaats hiervan zou een categorisering met iconen / knoppen gewenst zijn. Zie voorbeeld 1.

Ruimtelijk inzicht
Voorbeeld 1: links is minder duidelijk dan rechts

Neem hierbij in acht dat dit geen advies is om het hele scherm vol gooien met alle informatie die je maar kwijt kan. Het heeft meer van doen met het voorzichtig afwegen van wat je wanneer en hoe wilt weergeven. Dit is sterk afhankelijk van het type applicatie dat je maakt. Later meer hierover.

Werk altijd in de richting die de gebruiker verwacht

In de westerse wereld zijn we gewend om van links naar rechts en van boven naar onder te lezen. Hou dit in gedachten wanneer je bedenkt waar je knoppen of hele componenten plaatst.. Bijvoorbeeld een berichten-invoerveld en een "opslaan"-knop. Wanneer je genoeg ruimte hebt zet je de knop onder het invoerveld. Stel je hebt meerdere invoervelden onder elkaar staan, dan zou je de knop er achter zetten. Kijk maar eens naar het onderstaande voorbeeld. Dit lijkt een open deur maar bedenk dat dit ook geldt voor hele componenten of stukken van de site. De dingen die belangrijker zijn of waar je meer nadruk op wil leggen zet je bovenaan.


Voorbeeld 2: verschillen in positionering van een button

Plaatsen van afhankelijke componenten

Dit is een doordenkertje. Wanneer je componenten op een scherm plaatst is het erg belangrijk om na te denken over de afhankelijkheden tussen deze componenten. Bijvoorbeeld een detailweergave van een bepaalde rij in een tabel. Die wil je vlak bij de tabel plaatsen. Een "wijzigen" en "verwijderen" knop wil men bij elkaar plaatsen omdat ze vaak betrekking hebben op hetzelfde item. De "nieuw" knop daarentegen kan men ergens anders plaatsen omdat deze geen betrekking heeft op een bestaand item.

De vraag of je afhankelijke componenten dicht bij elkaar moet zetten of juist uit elkaar is vooral afhankelijk van hoe je ze gebruikt. Een voorbeeld:

Je hebt een aantal pagina's en je wil kunnen navigeren naar de vorige en volgende pagina door middel van 2 knoppen in de vorm van een pijl. Zet je deze pijlen onder de pagina bij elkaar of links en rechts van de pagina. Het is namelijk duidelijker voor de gebruiker om links en rechts van de pagina een pijl te plaatsen omdat deze meteen door zal hebben waarvoor de pijlen zijn. Maar als je heel vaak moet switchen tussen pagina dan zou je de keuze kunnen maken om de pijlen dicht bij elkaar te zetten zodat de gebruiker niet elke keer van links naar rechts over hun 30" inch scherm heen hoeft te vliegen met de muis. Dit soort kleine details kunnen voor een gebruiker een groot verschil maken met betrekking tot bruikbaarheid en effectiviteit.


Voorbeeld 3: positionering en gebruik

Wees consistent

Een bezoeker van een website zal wanneer men deze voor het eerst ziet onbewust de layout van de website opslaan en onthouden waar bepaalde knoppen staan. Als hij dan op een andere pagina komt zal de gebruiker dezelfde layout verwachten. Dit punt valt dus in de categorie "verwachtingsmanagement". Probeer zoveel mogelijk onderdelen zoals plaatjes, knoppen e.d. op dezelfde locaties te plaatsen. Mocht je toch overgaan naar een andere plaatsing van componenten dan zou je gebruik kunnen maken van effecten om aan te geven waar een component heen gegaan is. Dit kun je zien in het eerste voorbeeld.

Gebruik plaatjes / iconen

Een goed icoon zegt veel meer dan woorden en heeft daar vaak ook minder ruimte voor nodig. Een enkele blik op de icoon zou meteen moeten zeggen wat ermee bedoeld wordt. Maak je maar niet druk over het maken van iconen. Er zijn genoeg gratis of commerciële icoon-pakketten beschikbaar op het internet. Laat je niet te snel verleiden om grote en gedetailleerde iconen te gebruiken. Vaak zullen ze het doel "veel zeggen en weinig ruimte innemen" voorbijschieten.

Leg nadruk op componenten die belangrijker zijn

In dit geval zegt een plaatje meer dan genoeg. Zie het onderstaande voorbeeld waarin we dit demonstreren door middel van twee knoppen.

Waarop leg je de nadruk
Voorbeeld 4
: waarop leg je de nadruk?

Geef componenten een gepaste grootte

Hoe vaak kun je niet ergens een opmerking bij geven van bijvoorbeeld 1000 tekens in een tekstveld waar ongeveer 20 tekens in passen terwijl er ook ruimte is om deze tekstvakken groot te maken.


Voorbeeld 5: gebruik de ruimte die je hebt

Effecten

Met de opkomst van nieuwe programmeertalen en frameworks is het steeds makkelijker om leuke effecten en overgangen in je site te verwerken. Uitschuivende panelen, overgangen van kleuren en verspringende knoppen behoren allemaal tot de mogelijkheden. Het is belangrijk om een goede afweging te maken over welke effecten je wanneer wilt gebruiken. Hierbij is het goed om in je achterhoofd te houden dat het vooral een toevoeging van het gebruikersgemak en effectiviteit moet zijn. Wanneer je bijvoorbeeld een verandering van de layout doorvoert kun je een transitie effect gebruiken om aan te geven waar bijvoorbeeld een paneel of knop heen gaat. Of een component laten opgloeien om aan te geven dat je er interactie mee kan hebben. De effecten moeten het vooral niet te druk maken in het beeld. Daarnaast is het belangrijk om in gedachte te houden welk doelpubliek je met je website hebt. Als je een website met een administratieve insteek hebt dan zul je veel effecten en transities kunnen afschrijven omdat effecten de werkefficientie niet altijd ten goede komen en eerder tot frustratie bij de gebruikers zullen leiden. Voor andere doeleinden kunnen effecten en animaties juist wel voor een prettiger gebruik leiden. Probeer animaties en transities vooral niet te lang laten duren. Een halve seconde is vaak al meer dan genoeg. Voor “Data-entry” applicaties is een halve seconde zelfs al veel te lang. Hier zou ik geen animaties gebruiken.

Kleurgebruik

Op dit moment hebben we het nog niet gehad over kleurgebruik. In dit Whitebook bekijken we alleen kleur met betrekking tot het versterken van de gebruikerservaring. Het eerste punt dat ik wil maken is dat het altijd wijs is om een (web)designer te consulteren als het om kleurkeuzes, achtergronden en logo's gaat. Deze onderdelen moeten elkaar aanvullen.

Onafhankelijk hiervan kun je zelf altijd een goed begin maken door 2 of 3 basis kleuren te kiezen om te gebruiken in de website. Het is wijs om er voor te zorgen dat je deze kleuren door elkaar kunt gebruiken zonder dat je scherm barst. Oftewel zorg dat ze niet vloeken.

Deze basiskleuren kun je dan goed gebruiken om feedback te geven aan een gebruiker. Zoals bijvoorbeeld wanneer men de muis over een knop heen beweegt. Afhankelijk van de sfeer van de site kun je ervoor kiezen om een andere basiskleur aan de knop te geven wanneer de muis over de knop hangt. Of wanneer je voor een subtieler effect wilt gaan, dan kun je een iets andere tint van een basiskleur gebruiken of de knop iets donkerder maken.

Probeer daarnaast de verschillende basiskleuren te mengen in de stijlen die je voor de componenten op de website maakt. Probeer dan vooral combinaties te maken van 2 of 3 kleuren. Je kunt dit door middel van een "gradient" of een lijnpatroon combineren. Laten we een knop als voorbeeld nemen.


Voorbeeld 6: verantwoord kleurgebruik

"The big blend"

Misschien heb je al gedacht tijdens het lezen van deze Whitebook: "Maar als ik deze tip volg, dan kan ik de volgende tip niet volgen omdat ze elkaar in de weg zitten..."

De daadwerkelijke truc hier is natuurlijk om de juiste mix tussen de bovenstaande tips te vinden. De vraag moet altijd zijn: "Wat is duidelijker voor de gebruiker?" Op basis van deze vraag kun de meeste afwegingen correct maken. Houd er altijd rekening mee dat je alle componenten ed. netjes uitlijnt en onder elkaar plaatst zodat de site niet chaotisch lijkt. Om erachter te komen of je uiteindelijk een duidelijke site heb gemaakt kun je een aantal dingen doen:

Een makkelijke en snelle manier om te kijken of een bepaalde pagina overzichtelijk is, is door je ogen een beetje toe te knijpen waardoor je nog maar net de pagina duidelijk kunt zien. Nu zouden de belangrijke knoppen en componenten zoals de menuknoppen en basislayout nog duidelijk herkenbaar moeten zijn. De inhoud en teksten zullen onleesbaar moeten zijn. Koppen springen eruit. Is dit niet het geval dan moet je nog wat extra sleutelen.

Een manier om te testen of je invoervelden en componenten netjes uitgelijnd zijn is door pagina uit te printen en aan het begin en het einde van een invoerveld of component een verticale lijn te tekenen van boven naar beneden. Des te minder verticale lijnen, des te rustiger (en beter uitgelijnd) is je pagina.

De beste manier om je site of applicatie te testen is om simpelweg een ander achter de PC te zetten. Dus laat je vrouw of man, kind, oma en vrienden de site testen door hen een aantal opdrachten te geven. Bijvoorbeeld: "Zoek product x" of "Vind de contactgegevens van deze site". Door te kijken hoe gemakkelijk en snel ze deze opdrachten vervullen kun je uitvinden hoe goed je site in elkaar zit.

Conclusie

Bij een website met een goed (visueel) concept en juiste informatie zullen mensen terug blijven komen. Dat is waar het uiteindelijk om draait, terugkerende bezoekers. Een vriendelijke en makkelijke gebruikersinterface zal hierbij een hulpmiddel zijn. Er zijn ongelooflijk veel manieren om dit te bereiken. Een aantal van deze manieren zijn in dit Whitebook aan bod gekomen. Alleen al door deze tips toe te passen op je website of applicatie verhoog je de bruikbaarheid aanzienlijk en zullen de bezoekersaantallen alleen maar stijgen.

Waardering:
 
Tags:

Reacties

Nieuwe reactie inzenden

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Meer informatie over formaatmogelijkheden

CAPTCHA
Deze vraag is om te testen of u een persoon bent en om spam te voorkomen
Image CAPTCHA
Enter the characters shown in the image.