Blog
post

All caps in UI: do or don’t?

Scroll

Auteur

Stephanie Willekens

Gepubliceerd op

12/09/21

We zien het vaak terugkomen in interfaces van websites en apps. Een grote slagzin, tussentitel of button literal in all caps, vaak ook met een grotere witruimte tussen de verschillende letters. Een designkeuze die nauwgezet moet worden geanalyseerd afhankelijk van de situatie.

Een woord of zin in hoofdletters leest moeilijker, da’s een feit dat kan gestaafd worden met cijfers. Het duurt zo’n 13% tot 20% langer voor ons om een all caps tekst door te lezen dan een lowercase tekst. Leg deze teksten naast elkaar en lees deze eens door.


Hoe komt dit? Uit onderzoek is gebleken dat de vormen van lowercase letters ervoor zorgt dat er bepaalde contouren worden gevormd waardoor onze hersenen woorden sneller herkennen. Een woord in lowercase zorgt voor een gevarieerde vorm, terwijl een woord in all caps steeds een rechthoekige vorm krijgt. Onze hersenen hebben het dus moeilijker om all caps woorden snel te lezen, omdat dit er in ons hoofd allemaal hetzelfde uitziet. We moeten dus letter per letter gaan lezen om te zien wat er staat. Dit is maar een fractie van een seconde, maar dit kan een belangrijk verschil zijn.


We zijn het van jongs-af-aan gewoon om lowercase teksten te lezen. Boeken, tijdschriften, kranten, teksten op het internet, ondertiteling op tv …, dit wordt allemaal gedaan in lowercase. We zijn het dusdanig gewend om op die manier teksten te lezen, dat dit vertrouwder aanvoelt en sneller leest. Het is een kwestie van jarenlange training.

Teksten in all caps lijken bovendien ook vaak SCHREEUWEND over te komen. Een knop “schrijf je nu in” vs. “SCHRIJF JE NU IN” komt heel anders over. Schreeuwend komt over als opdringerig en agressief. Dit gevoel wil je niet overbrengen op je doelpubliek.

Wanneer wel, wanneer niet?

Focus op de boodschap

Bron: https://dribbble.com/shots/4411666-MonkeyLearn-Wizard-Part-2


Doorlopende teksten en belangrijke informatie plaats je best niet in hoofdletters. Een belangrijke voorwaarde bij het klikken van een knop, een tekst over de missie van je bedrijf of een uitleg bij het begin van een form-proces plaats je best altijd in lowercase. De gebruiker moet deze informatie rustig kunnen doornemen.

Bron: https://dribbble.com/shots/6672570-Sign-Up 


Korte slagzinnen of tussentiteltjes kunnen wel perfect in hoofdletters. Je beperkt je best tot maximum 1 regel, bij voorkeur slechts enkele woorden. Vanaf je werkt met volzinnen en teksten, kan je dit best altijd in lowercase doen.

Bron: https://dribbble.com/shots/3513300-Volvo-landing-page-concept/attachments/777967


Call-to-actions in de verf gezet

Een call-to-action kan in hoofdletters, al probeer je best de afweging te maken in combinatie met de boodschap. Een “cancel” knop binnen de flow van het invullen van een formulier kan nogal agressief overkomen in caps. Belangrijke knoppen zoals “save” binnen een flow kan je ook best in lowercase doen, voor de leesbaarheid. Verkennende knoppen die doorlinken naar een andere pagina (bv. “bekijk portfolio” of “ontdek onze blog”) kunnen wel perfect in all caps.

Bron: https://dribbble.com/shots/5958906-Pets-Adoption-Onboarding-screen
Bron: https://www.pinterest.com/pin/424253227400593978/


Al is het gebruik van all caps in een knop geen dealbreaker, zolang je je maar beperkt in het aantal tekst. Een woord in all caps is perfect oké. Bevat je knop de tekst “Accepteer de algemene voorwaarden”, plaats deze dan best in lowercase of titlecase. Niet alleen voor de leesbaarheid, maar ook design-matig is dit beknopter en duidelijker. All caps tekst neemt veel meer plaats in. Wees ook zeker consistent hierin.

Bron: https://dribbble.com/shots/4602735-Sketch-Symbol-Example-With-Gradients-Alternative-Radius 


Voor de vorm

Een naam binnen een logo wordt wel vaak met all caps gedaan omdat dit vaak past bij de huisstijl van het merk. Een logo wordt op den duur een herkenning waarbij mensen de naam vaak niet eens meer lezen. Het beeldmerk, de kleuren of de combinatie van het woord- en beeldmerk zorgen ervoor dat je klant je meteen herkent. Wanneer de gebruiker iets dus niet echt moet lezen dan kan dit perfect werken.

Binnen grafische vormgeving wordt all caps ook vaker gebruikt als design-element. Denk aan een cover van een boek of een filmposter.

Good Enough by Jen Petro-Roy; design by Liz Dresner
Inglourious Basterds movie poster

Conclusie

Leesbaarheid is key! Als je twijfelt, gebruik dan best lowercase. Indien je all caps gebruikt in je User Interface, zorg er dan voor dat je je zeker beperkt tot max. 1 regel. Maak een goede afweging en zorg voor een goede balans tussen all caps en lowercase elementen.  The rules don’t apply op logo’s en grafische elementen (bv. posters, boeken, visuele elementen).

Kijk ook wat past binnen je brand en je product. Grafische, visuele pagina’s (zoals productpagina,’s blogs, verkennende pagina’s…) lenen zich vaak beter tot meer all caps dan praktische pagina’s (zoals formulieren, belangrijke informatieve pagina’s…). Maak voor je knoppen een afweging en zorg er zeker voor dat het nooit overkomt alsof je roept tegen je bezoeker.

Laat ook eens enkele mensen doorheen je User Interface lezen en bevraag hen. Voer desnoods A/B tests uit op je websites indien tijd en budget dit toelaat en bekijk hoelang mensen erover doen om doorheen je website te scrollen.

Designdiensten nodig voor jouw organisatie?

Contacteer ons