Ben je momenteel bezig met het ontwikkelen van een nieuwe website? Goed. Dan heb je vast heel wat voorbeelden van concurrenten, templates en thema’s zien passeren. En waarschijnlijk kreeg je ook de indruk dat die heel sterk op elkaar lijken.

Is de trend je visueel niet meteen opgevallen, dan heb je de kenmerken misschien al gespot in de vaste bijdrage ‘webdesign trends’ op designerblogs.

Kenmerken

We schetsen even wat we bedoelen:

  • het logo linksboven in de navigatie
  • een full-width hoofdafbeelding op de homepage
  • een koptekst links uitgelijnd of gecentreerd overheen die afbeelding
  • met een dwingende klikknop er net onder geplakt.

Als gemiddelde consument van websites vind je dit patroon waarschijnlijk herkenbaar.

web-design-bootstrap Bron: https://adventurega.me/bootstrap/

Veel websites lijken inderdaad een stramien te volgen. Het voorbeeld hierboven maakt er een karikatuur van, maar de gemeenschappelijke stijl is onmiskenbaar. De online eenheidsworst lijkt stilaan een feit.

Hoe is het zo ver kunnen komen?

Er is niet één duidelijk aanwijsbare reden waarom de stijlen van websites zo sterk op elkaar lijken, maar er zijn er verschillende. De ongeschreven regels van het web deinen steeds verder uit. De druk om dezelfde stijl te hanteren, komt daarbij uit verschillende hoeken:

1.      Dezelfde tools

Webdesigners en UX-specialisten maken ten eerste gebruik van dezelfde tools voor projectresearch: Dribble voor interacties, Behance voor portfolio’s, Creative Market of Themeforest voor website-templates,… Sommige website builders bieden zelfs kant-en-klare oplossingen. Die onderdompeling in populaire designtrends en thema’s laat zijn sporen na in het collectieve designgeheugen. En dat vertaalt zich in generische oplossingen, zeker bij strakke deadlines.

2.      UX-richtlijnen

Ook het onderzoek en het voortschrijdend inzicht op het vlak van web usability en UX hebben geleid tot bijbels vol richtlijnen die naadloos worden opgevolgd. Een dergelijke UX-aanpak – vaak in de marge van webdesign en -ontwikkeling – verliest uiteraard een stuk aan maatwerk en persoonlijkheid. Best practices die gelden voor het hele web gaan soms zelfs een eigen leven leiden, zonder oog voor de onderliggende principes.

Persistente UX-mythes zijn bijvoorbeeld dat de navigatie strikt beperkt moet zijn tot zeven elementen (‘magic number seven’) en dat elke pagina in drie klikken te bereiken moet zijn.

3.      Webtechnologie

Tot slot is webtechnologie een dominante factor. Om het ontwerp en de ontwikkeling van websites te vereenvoudigen, hebben een aantal front-end CSS frameworks als Bootstrap en Foundation de laatste jaren bijzondere sprongen voorwaarts gemaakt. Ze zijn voorzien van vooraf gedefinieerde lay-outs en stijlen voor grids, tekst, knoppen, media queries en andere stijlelementen. Daardoor wordt het mogelijk om snel responsieve websites op te bouwen.

Keep it (c)lean

De onderliggende toon is duidelijk simpliciteit. Niet alleen in het ontwerp, maar vooral in de uitvoering. Onder toenemende druk van professionalisme wordt het webdesignproces best zo lean mogelijk gehouden.

Die snelheid en efficiënte is in een business-context het best te verkopen bij alle betrokken partijen. De gekende formules lijken dan het meest zinvol en stoten ook bij klanten op de minste weerstand. Klanten vragen vaak zelf om een populair webontwerp om snelheid te kunnen maken.

Lean UX: design met ‘bouwblokken’

Relatieve nieuwkomers in het snel testen van ideeën en vlotte ontwikkeling zijn zogenaamde UI-kits of UI-frameworks, waarbij eerst de bouwblokken van een design worden opgetekend. Steeds meer lean UX bedrijven, maar ook overheden introduceren zo hun eigen ontwerprichtlijnen om de communicatie tussen designers en developers te optimaliseren en te stroomlijnen.

Kerncomponenten van zo’n ontwerptaal omvatten allerlei fonts, buttons, design-grids, lay-outs, formulieren en vaak ook interacties. Alles wat er gebeurt binnen een digitale interface kan terugvallen op deze ontwerpconcepten, zodat design en ontwikkeling vlotter verlopen.

us-ui-standards-components Ook de Amerikaanse overheid beschikt intussen over haar eigen UI-standaarden Bron: https://standards.usa.gov/

Het concept is om flexibele principes neer te poten waarmee designers en ontwikkelaars een responsieve interface kunnen maken zonder elkaar te verwarren. Een goede uitvoering is gestoeld op samenwerking. Het werk komt dan niet van een designer die binnen zijn eigen cocon werkt.

Door een akkoord te sluiten over de basisspelregels, wordt de consistentie in gebruik en uitvoering bewaard. In essentie gaat het daarbij vaak om een adoptie van bestaande CSS frameworks, maar soms gaat het ook om volledig opgemaakte gebruikspatronen. Hierdoor geeft een UI-framework vaak de indruk van een minimalistische stijlgids.

uk-service-start-page Elke start van een UK-overheidsdienst ziet er zo uit Bron: https://standards.usa.gov/

Content-first-strategie

Het grote voordeel van een UI-framework ligt in de mogelijkheid om een content-first-strategie te volgen. De bouwblokken worden dan gebruikt in functie van de toe te voegen secties, web- of landingspagina’s.

Een mooi voorbeeld is de stijlgids van Lonely Planet. Die wordt ingezet in functie van de online reisinformatie, die de website steeds verder doet groeien. Dit werkt uiteraard veel beter dan het halsstarrig proberen passen van content binnen een vooraf gedefinieerd ontwerp.

Richtlijnen rond toegankelijkheid

UI-frameworks zijn niet enkel nuttig als visuele vocabulaire tussen designers en developers. Ze zorgen ook voor consistentie en toegankelijkheid out-of-the-box. Ze creëren een goede gebruikerservaring voor iedereen die met de websites van grote organisaties, zoals overheden, werkt.

Bij overheden speelt het toenemend belang van regelgeving rond webtoegankelijkheid een sterke rol. Recent nog werd door de Europese Commissie een voorstel tot richtlijn uitgevaardigd om deze regels te harmoniseren en dus verplicht te maken voor alle overheden in de EU. In tegenstelling tot wat je misschien zou denken, is de EU daar geen koploper in, maar volgt de Unie eerder de trend in de lidstaten op (spoiler: België staat achter). Bedrijven – zoals Unilever – spelen al handig op in deze nieuwe standaarden.

Duidelijkheid voor gebruikers

Het doel van deze richtlijnen is om duidelijkheid te scheppen voor alle mogelijke gebruikers. Dat webpagina’s en websites zo op elkaar lijken – als het kleinste gemeen veelvoud -, is daarom vanuit het perspectief van de gebruiker best ok. Gebruikers zijn die standaardtypes, componenten en lay-outs inmiddels gewoon.

 “Take advantage of conventions”
– Steve Krug

Door de herkenbaarheid voelen deze interfaces intuïtief en natuurlijk aan in gebruik. Ze zorgen voor een gevoel van controle, met minder kans op doodlopende paden. Steve Krug poneerde in zijn standaardwerk ‘Don’t make me think’ al de stelling om munt te slaan uit webconventies. Typische designs voor typische websites – communicatiebureau, start-up, e-commerce en nog zoveel meer -, zorgen immers voor minder belasting van het geheugen.

Doordat veel interfaces op elkaar lijken, geven ze zelf vorm aan verwachtingen bij de gebruiker. De gehanteerde patronen zijn nu eenmaal bewezen in hun functionaliteit, leveren goede resultaten in user testing en worden daarom keer op keer aanbevolen. Dat maakt het moeilijker om van de vaste patronen af te wijken.

Slim omspringen met conventies leidt in elk geval tot effectievere websites. Een standaard navigatie, scrollen en duidelijke klikpunten maken je interface doel- en conversiegericht. Het is een veilige route die je gebruikers appreciëren en tot minder frustratie zal leiden.

Conclusie

Het web heeft een zekere maturiteit bereikt. Websites gelden intussen bijna als publieke infrastructuur, en daar lijken ze momenteel ook op. Voor gebruikers van die infrastructuur is dat geen erg. Zij appreciëren de vertrouwdheid en het intuïtieve gebruik.

Anno 2016 bestaat er in elk geval een bottom line in usability: gebruikers moeten weten hoe ze vlot kunnen interageren met je website. Ze hoeven niet iedere website of applicatie te kennen om dezelfde, eenvoudig te leren ervaring, te hebben.

Lees volgende week het vervolg op deze blog, waarin we uitleggen hoe het gebruik van webconventies je merk ook kan schaden. Of waarom het vermijden van frustratie niet alles is…

David Dockx
Bericht van

David Dockx

UX Designer

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *