Onlangs las ik een artikel over enkele designpatronen die tijdsloos zouden zijn. Alhoewel ik betwijfel dat een designpatroon tijdsloos kan zijn in deze digitale wereld waar innovatie de sleutel tot succes is, vond ik het artikel wel zeer interessant en wil ik enkele interessante punten delen.

Het artikel is geschreven door Jerry Cao, een UX content strategist voor UXPin. In het artikel spreekt Jerry Cao over 12 UI-patronen voor de layouts van websites. Ik ga enkel de punten bespreken die ik het meest interessant vind en ikzelf het meeste mee in contact kom.

1. Grid (rooster)

De grid kom je voor op zeer veel websites. Websites die veel content tegelijkertijd en op een gelijke manier (zonder hiërarchie) wilt tonen, maken gebruik van een grid. Een grid maakt het gemakkelijk om door alle inhoud te gaan. Grids kunnen verschillen in groottes, spatiëring, aantal, inhoud, …

Enkele voorbeelden

Enkele tips bij het gebruiken van een grid:

  • De witruimte tussen de verschillende items is zeer belangrijk. Des te meer witruimte, des te meer elk item op zich staat, maar des te minder items er tegelijkertijd getoond kunnen worden. Als er te weinig of geen witruimte is, wordt het makkelijker om bepaalde items over het hoofd te zien.
  • Consistency is belangrijk, zeker bij het ontwikkelen voor verschillende toestellen. Zorg ervoor dat de layout herkenbaar blijft op alle toestellen.

2. Magazinelayout

De magazinelayout kom je vaak voor. Voornamelijk nieuwsgerelateerde websites maken gebruik van deze layout. Het magazinelayout wordt vaak gebruikt wanneer de inhoud van de website regelmatig ge-update moet worden (zoals nieuwswebsites). Deze layout stelt gedeeltelijk ook de layout van een krant voor.

Enkele voorbeelden:

 

 

Een magazinelayout maakt ook gebruik van een grid, maar door de afwisselende groottes van afbeeldingen, artikels of koppen wordt de monotoonheid van een gewoon grid doorbroken en valt het minder op. Niet alle artikels en/of afbeeldingen zijn even belangrijk en daarom worden vaak bepaalde (de recentere) artikels groter of opvallender getoond dan de anderen.

Enkele tips voor het gebruik van een magazinelayout:

  • Een magazinelayout heeft nood aan afbeeldingen om de websites en de artikels aangenaam te maken. Vaak is er een grote dominante afbeelding die de aandacht trekt, voordat de gebruiker de pagina heeft gescand en de andere (kleinere) afbeeldingen en artikels ziet.

3. F-patroon

Wanneer je veel tekstuele inhoud hebt, is een F-patroon aan te raden. Het F-patroon mimiekt de manier waarop mensen lezen, van links naar rechts en van boven naar onder . Lezers lezen grote blokken tekst in een patroon dat op de letter F of E lijkt. Eerst gaan we horizontaal kijken en op het einde van de lijn gaan we een lijn lager terug links beginnen.

In de praktijk zal het F-patroon de inhoud in horizontale rijen verdelen, de ene onder de andere. Soms wordt aan het begin van elke rij een afbeelding geplaatst. Als deze afbeelding de lezer interesseert, zal deze de rest van de rij bekijken. Zo niet zal de lezer direct naar de volgende rij gaan.

Enkele voorbeelden:

 

Enkele tips bij het gebruik van een F-patroon:

  • Zet de call to action aan de linkerkant, waar de lezer begint met lezen, of aan de rechterkant waar de horizontale oogbeweging stopt. Op deze plaatsen blijven de lezers het langst kijken, waardoor de call to action meer tijd heeft om de lezer te overtuigen.
  • Start elke paragraaf met een aanlokkelijk sleutelwoord. Belangrijke woorden highlighten binnenin een paragraaf helpt de gebruiker vinden wat hij zoekt.
  • De rechterkant wordt vaak niet gescand. De rechterkolom kan gebruikt worden om relevante, maar ongerelateerde content aan te bieden.

 

4. Z-patroon

Het Z-patroon is een gelijkaardig patroon als het F-patroon. Het Z-patroon mimiekt het scanpatroon van de mens. Eerst kijken we wat er bovenaan de pagina staat. Dan scannen we van de rechterbovenhoek diagonaal over de pagina tot de linkeronderhoek, waarna we onderaan weer horizontaal scannen. Dit patroon kan meerdere malen herhaald worden op een pagina.

Het Z-patroon is beter te gebruiken voor webpagina’s met een enkel doel  of call to action en minder om content te delen. Het Z-patroon is effectief in het richten van de gebruiker z’n aandacht op bepaalde afbeeldingen of teksten op een webpagina. Bij een Z-patroon wordt er minder inhoud getoond en meer witruimte gebruikt, zodat de geplaatste inhoud op de webpagina de gebruiker kan leiden.

Enkele voorbeelden:

Enkele tips bij het gebruik van een Z-patroon:

  • Plaats afbeeldingen en teksten in het midden van de webpagina. Teksten en afbeeldingen afwisselend links en rechts plaatsen helpt met het leiden van de aandacht van de gebruiker.
  • Plaats Call to actions aan de rechterzijde. Hier blijft (net als bij het F-patroon) de aandacht van de gebruiker het langste hangen. Bovenaan rechts is de beste plaats, aangezien de bovenste horizontale lijn het meest zichtbaar is.
  • Het Z-patroon kan steeds herhaald worden. Na een tijdje zullen de gebruikers automatisch het patroon overnemen.

Dit waren enkele veelgebruikte patronen om je website in te delen. In het artikel worden nog veel andere design-elementen beschreven, dus raad ik je aan zeker een kijkje te nemen.

Auteur: Ruben Junius

Bronnen: 

Cao, J. (2016, November 25). 12 timeless ui patterns analyzed. Opgehaald van thenextweb.com: http://thenextweb.com/dd/2016/11/24/12-timeless-ui-patterns-analyzed/