Design vs Usability

zondag 01 februari 2009

Design en usability hebben over het algemeen een haat liefde verhouding. Wat mooi is is niet gebruiksvriendelijk en vice versa. Usability is de laatste jaren een ware hype geworden en als je 'Don't make me think' van Steve Krug niet gelezen hebt doe je als webdesigner niet serieus meer mee.

Tikje overdreven natuurlijk maar er zit een kern van waarheid in. Bij de ontwikkeling van een succesvolle website gaan design en usability hand in hand en zorgen samen voor een gedegen UI.

design user interface usability

Zoals uit bovenstaande afbeelding blijkt vormen design en usability samen de user interface. Ligt de focus teveel op design dan zal de website waarschijnlijk ongebruiksvriendlijk en ontoegankelijk zijn. In het andere geval waarbij de nadruk teveel op usability wordt gelegd (of simpelweg niet of te weinig op design) zal de bezoeker misschien ook afdruipen.

In theorie is dit allemaal duidelijk maar in de praktijk is het vaak een kwestie van afwegen. Een voorbeeld:

Usability vs design in de praktijk

Onlangs hebben wij een website ontwikkeld met vaste afmetingen en daarbinnen een contentveld met een scrollbar. Hetzelfde principe als onze eigen site. Omdat de standaard scrollbar niet bijzonder aantrekkelijk is, en alleen binnen internet explorer dmv CSS anders vormgegeven kan worden, besloten we dmv van javascript de scrollbar volledig te vervangen door een simpele verticale lijn.

scrollbarIn de afbeelding hiernaast is te zien hoe we het uiterlijk van de scrollbar hebben aangepast. Qua design sloot dit, ten opzicht van de standaard scrollbar,  stukken beter aan bij de lay-out van de website.

Toen de website een aantal weken online stond kwam een medewerker van de telefonische helpdesk, die regelmatig met klanten meekeek op de website, met de opmerking dat veel klanten de verticale balk niet herkenden als zijnde een scrollbar.

In eerste instantie kon ik me dat bijna niet voorstellen. Maar ik breng behoorlijk veel uren door op internet en ben natuurlijk meer gefocussed op dit soort dingen dan de gemiddelde internet gebruiker.

Uiteindelijk is de scrollbar weer vervangen door de standaard scrollbar en hebben we hier een mooi voorbeeld waarin usability wordt verkozen boven design.

 

 

Kleurgebruik en contrast

Een ontwerp kan nog zo mooi zijn, als een bezoeker moeite heeft met het lezen van tekst of niet te lang naar keiharde kleuren wil kijken houdt je ontwerp geen stand. Onderstaande afbeelding maakt een hoop duidelijk.

good contrast bad contrast

Ajax

Een poosje geleden was ik wat aan het rondneuzen op een webshop. Duidelijke vormgeving, pagina's laadden snel, goed gebruik van tabbladen, etc... Totdat ik op een gegeven moment dacht 'even terug' en op de back button van mijn browser klikte. Prompt was ik weer op de website die ik daarvoor had bezocht. Uit frustratie besloot ik de webshop niet opnieuw te bezoeken.

Ajax is (kan) fantastisch (zijn). In combinatie met bijvoorbeeld jQuery kan het bezoeken van een website een waar genot worden. Maar ook een ramp. Dat een pagina niet gerefreshed hoeft te worden kan absoluut van toegevoegde waarde zijn. Maar als dit betekent dat de back button van de browser niet meer werkt zou ik deze oplossing ten zeerste afraden.

Bij Hotmail hebben ze het inmiddels aangepast maar ik stond op het punt om ze vaarwel te zeggen. Want als ik vanuit Postvak In een mail aanklik en vervolgens op de back button klik verwacht ik dat ik weer in Postvak In terecht kom.

Browsers

Als je veel met het ontwikkelen van websites bezig bent dan weet je dat Internet Explorer 6 af en toe een ramp is. Heb je net iets moois gemaakt met transparante png's, werkt het weer niet in Internet Explorer 6. Zolang een website dan in IE6 nog wel goed werkt en geen cruciale functionaliteiten mist is dit opzich geen probleem. Uiteindelijk worden we wel een keer van Internet Explorer 6 verlost. Maar het moet natuurlijk geen ergernis gaan opwekken.

Vandaag nog kwam ik terecht op de website www.designbyfire.com. Op deze website is gebruik gemaakt van een half transparant gedeelte in de footer. Dit levert bij het scrollen door de site een erg mooi effect op. Nieuwsgierig als ik was heb ik de site ook in IE6 bekeken. En ja, in theorie werkte het maar vraag niet hoe. In dit soort gevallen vind ik dat je toch serieus moet overwegen of het nou echt de moeite waard is...

Evenwicht

Je kunt er niet onderuit. Soms gaat usability voor, en ten koste van je design. Maar uiteindelijk wil je de bezoeker een zo goed mogelijke gebruikerservaring bieden. Zoek daarom naar het juiste evenwicht tussen usability en design. En wil je als webdesigner toch serieus meedoen? Overweeg dan toch eens 'Don't make me think' van Steve Krug. Leest lekker weg en op het gebied van usability een echte eye-opener.

Tot slot nog twee uitersten op gebied van usability en design:

http://www.useit.com - Thuishaven van Jakob Nielsen, de ware usability goeroe. Zoals je ziet is hij wel extreem gericht op usability en hecht weinig waarde aan een modern design.

http://www.2advanced.com - Designstudio uit Amerika. De site ziet er fantastisch uit en gaat al lang mee als het neusje van de zalm op het gebied van Flash. En dat is dan ook het enige dat je is bijgebleven als je een paar minuten op deze site hebt rondgekeken.

Over de auteur
Thomas Eilander (1980) is vanaf de opkomst van internet actief op het gebied van website ontwikkeling en heeft zich in de loop der jaren verder gespecialiseerd in usability en zoekmachine optimalisatie. Sinds 2005 is hij eigenaar van Santhos Webdesign. Santhos is een internetbureau dat zich specialiseert in het ontwerpen en ontwikkelen van gebruiksvriendelijke websites.

Wilt u reageren op dit artikel dan kunt u contact opnemen via thomas@santhos.nl

Contact


Santhos
Industrieweg 5
7944 HT Meppel
Drenthe

+31(0)522 47 57 32
info@santhos.nl »