Leestijd 5 min

Stijn Schutyser

Mensen lezen online niet echt. In plaats daarvan 'scannen' lezers webinhoud op zoek naar nuttige stukjes en beetjes. Als je echt tegemoet wilt komen aan de bezoekers van je website, moet je hun leven zo gemakkelijk mogelijk maken. Hoe? Door je teksten zo scanbaar mogelijk te maken en het je lezers gemakkelijk te maken om de informatie te vinden die ze zoeken. In deze blogpost vertel ik wat de beste manieren zijn om dat te doen, geef ik je een aantal concrete tips van onze eigen webdesigners en tekstschrijvers, en geef ik je een checklist om te zien of je website zo scanbaar mogelijk is. Papier vs. beeldscherm Als je teksten voor websites schrijft, moet je er waarschijnlijk rekening mee houden dat je lezer op een scherm heel anders leest dan op papier. Zoals ik al zei, scannen lezers veel meer op tablet-, smartphone- en pc-schermen . Als ze besluiten om echt iets te lezen, doen ze dat 25% langzamer in vergelijking met lezen op papier . Leestests toonden ook aan dat lezen op een scherm vermoeiender is en dat lezers minder onthouden van wat ze gelezen hebben. Lettertypen op het scherm gebruiken Schermen en papier gaan verschillend om met de leesbaarheid van letters. Microsoft lettertypes zoals Verdana (in plaats van Arial) en Georgia (in plaats van Times New Roman) zijn speciaal ontworpen voor beeldschermen door Matthew Carter . De Nederlandse Lucas de Groot ontwierp het schermlettertype Calibri voor Windows Vista. Voor je online schrijfwerk kun je het beste een lettertype kiezen dat is ontworpen voor schermen in plaats van papier . Bepaal wat de belangrijkste informatie of taak is Waarom bezoeken mensen je website? Controleer je websitestatistieken (bijvoorbeeld via Google Analytics ) of logbestanden en denk na over de volgende vragen: Hoe navigeren mensen naar je website? Verwijzingen, organische zoekopdrachten, sociale media, ...? Wat zijn uw populairste pagina's? Vanaf welke pagina's verlaten mensen uw website? Waar stoppen ze met lezen? Zoek uit wat de meest voorkomende informatie is die bezoekers op uw website zoeken en zorg dat die informatie het gemakkelijkst te vinden is. Mensen bellen bijvoorbeeld meestal naar een school om te vertellen dat hun kind zich ziek voelt. De homepage van de school zou dan iets als dit kunnen bevatten om tegemoet te komen aan hun publiek: Is uw kind afwezig op school? Bel of stuur een sms naar [telefoonnummer] voor 8:30 uur. Vergeet niet te vermelden de volledige naam van uw kind, klas reden van afwezigheid. Bedankt! Dit is veel informatiever dan een homepage die begint met 'Welkom', wat je SEO (Search Engine Optimization) ook niet echt ten goede komt. Het is belangrijk dat op elk van je webpagina's de oproep tot actie zo duidelijk mogelijk wordt weergegeven, bijvoorbeeld door op een knop te klikken. Bezoekers willen meteen aan de slag, dus zorg ervoor dat de belangrijkste informatie of taak eruit springt . Maak uw webinhoud zo scanbaar mogelijk Het internet is een snel zoekmedium, handig voor wie snel iets wil opzoeken. Maar ondoordachte webinhoud gaat snel verloren, zowel in zoekmachines als in het hoofd van de lezer. Meer dan op papier heeft de lezer behoefte aan korte stukken tekst, titels en witruimte. Een titel vat een hele alinea samen in slechts een paar woorden. Je titels moeten informatief zijn en de belangrijkste informatie bevatten. Iets belangrijks is natuurlijk wat de lezer belangrijk vindt of waar hij naar op zoek is, niet per se wat jij belangrijk vindt . Dit biedt de lezer structuur en maakt je tekst veel beter scanbaar. Andere belangrijke informatie moet in koppen, foto's en bijschriften, korte alinea's, knoppen en links. Je kunt ook opsommingstekens gebruiken zoals hierboven. Pijlen zijn vooral handig om iets belangrijks te markeren. Getallen in cijfers werken beter dan getallen in woorden. Om je webinhoud beter scanbaar te maken, schrijf je 100% in plaats van honderd procent. Getallen vallen meer op dan woorden. 7 tips van de webdesigners en tekstschrijvers van ACA Beperk de lengte van je webpagina tot 3-5 schermlengtes Als je webinhoud langer is en alle informatie relevant is, overweeg dan om de structuur van je website aan te passen en meer webpagina's toe te voegen. Zeg de belangrijkste dingen eerst Websurfers kijken 70% van de tijd naar de linkerkant van hun scherm. Een bezoeker bekijkt uw webpagina ruwweg in de vorm van een 'F': hij begint linksboven, kijkt dan rechtsboven, gaat vanaf links naar beneden en kijkt vervolgens weer naar rechts ergens in het midden (zie heatmap rechts). Het is de moeite waard om de belangrijkste informatie linksboven op de pagina te zetten en minder belangrijke informatie rechtsonder op de pagina. Schrijf je webtekst van kort naar lang De eerste alinea moet de kortste zijn. De lezer zal de andere, langere alinea's alleen blijven lezen als deze interessant genoeg is. Let op de beeldspraak Afbeeldingen, hyperlinks, opsommingstekens, ... Zorg voor één absolute blikvanger en maximaal 7 visuele accenten per webpagina. Hou rekening met de tekst-beeldverhouding en het feit dat tekst rechts of onder een afbeelding veel meer gelezen wordt dan andere teksten. Zorg voor contrast tussen tekst en achtergrondkleur Op papier is het zwart op een witte achtergrond. Op een scherm is dit echter te belastend voor je ogen. Donkergrijs op een witte achtergrond is een veel betere optie. Een regel mag maximaal 75 symbolen bevatten, inclusief spaties Een zin mag nooit uitgesmeerd zijn over meer dan 2 regels. Het aantal regels per schermlengte moet 23 of minder zijn. Een regel mag maximaal 75 symbolen bevatten, wat neerkomt op ongeveer 12 woorden per regel. Links moeten de lezers vertellen wat ze doen Gebruik geen 'Klik hier'-links, maar 'Klik hier om te leren hoe je lezersvriendelijke e-mails schrijft'. Gebruik knoppen voor acties zoals zoeken en registreren, en hyperlinks om naar andere pagina's te navigeren.

Leestijd 6 min

Stijn Schutyser

Robin Williams - nee, niet die - is een van de interessantste auteurs over tekst- en lay-outontwerp. Haar boek The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice , is een waar juweeltje. In het boek legt ze de 4 basisregels voor effectief grafisch ontwerp uit: contrast, herhaling, uitlijning en nabijheid ( CRAP ). In deze blogpost bespreken we die 4 basisregels en hoe je ze gemakkelijk kunt toepassen in je lay-outontwerp. Ik heb je al geleerd hoe je scanbare webinhoud schrijft , maar in die blogpost kwam de opmaak van teksten niet zo veel aan bod. Dus laten we dit even rechtzetten! Hoewel scanbaarheid in een tekst op zich belangrijk is, hangt het ook nauw samen met de opmaak van de tekst. Een tekst die een lust voor het oog is, is immers een tekst die uitnodigt om gelezen te worden! 1. Contrast Laten we beginnen met de eerste regel voor effectief lay-outontwerp: contrast. Als elementen op je pagina (zoals lettertype, kleur, grootte, vorm enzovoort) niet identiek zijn, laat ze dan extreem van elkaar verschillen. Wees geen watje. Laat contrast schitteren! Een goed voorbeeld is de grootte van de letters in een krantenkop versus die in het artikel zelf. In contrast (zie je wat ik daar deed?), een kop getypt in Constantia 11 boven een artikel in Constantia 10 toont niet genoeg verschil tussen de twee, waardoor het moeilijk is om onderscheid te maken. Dus hoe voeg je contrast toe aan je pagina? Contrast kan op verschillende manieren worden gecreëerd. Je kunt grote letters met kleine letters, een sierlijk oldstyle lettertype met een vet schreefloos lettertype, een dunne lijn met een dikke lijn, een koele kleur met een warme kleur, een gladde textuur met een ruwe textuur, een horizontaal element (zoals een lange tekstregel) met een verticaal element (zoals een hoge, smalle tekstkolom), breed uit elkaar staande lijnen met dicht op elkaar staande lijnen, of een kleine afbeelding met een grote afbeelding. Nogmaals, wees geen watje. Je kunt 12-punts lettertypes niet laten contrasteren met 14-punts lettertypes, je kunt een halve puntregel niet laten contrasteren met een éénpuntsregel en je kunt donkerbruin niet laten contrasteren met zwart. Wees serieus! Contrast is cruciaal voor de organisatie van informatie (de scanbaarheid): een lezer moet altijd een blik op een document kunnen werpen en meteen begrijpen wat er aan de hand is. De informatie in dit cv is er allemaal, maar het ziet er niet uitnodigend uit om te lezen en het trekt je aandacht niet. In de lay-out van dit voorbeeld is er veel meer contrast, wat de scanbaarheid enorm verbetert. 2. Herhaling De tweede regel van effectief lay-outontwerp is de regel van herhaling. Deze stelt dat je een bepaald aspect van het ontwerp in het hele stuk moet herhalen . Het herhalen van visuele elementen in je brochure, nieuwsbrief of blogpost helpt om een structuur te ontwikkelen en versterkt het gevoel van een verenigd stuk content. Het herhalende element kan een vet lettertype zijn, een dikke regel (lijn), een bepaalde bullet, ontwerpelement, kleur, formaat, ruimtelijke relaties, enz. Het kan van alles zijn dat een lezer visueel herkent. Je kunt de regel van herhaling zien als een herinnering om consistent te blijven. Als je aan het einde komt van de informatie op deze kaart, dwaalt je oog een beetje af. Als je nu aan het einde komt van de informatie op deze kaart, dwaalt je oog een beetje af. Als je nu aan het einde van de kaart bent, gaat je oog heen en weer tussen de vetgedrukte elementen. Dat is het punt van herhaling - het bindt een stuk samen en zorgt voor eenheid. Het is net als het accentueren van je kleding: als je een zwarte outfit draagt, kun je die accentueren met sieraden en schoenen in dezelfde tint rood. Maar pas op dat je een element niet zo vaak herhaalt dat het vervelend of overweldigend wordt. Denk aan regel #1 en wees je bewust van de waarde van contrast! Als je bijvoorbeeld dezelfde zwarte outfit draagt, maar nu met een rode hoed, rode oorbellen, een rode sjaal, rode schoenen en een rode jas, zou de herhaling geen prachtig en verenigend contrast vormen: het zou overweldigend zijn en de focus zou verward worden. 3. Afstemming Niets mag 'zomaar' op je pagina's terechtkomen, ongeacht het medium waarvoor je schrijft. Elk element moet een visueel verband hebben met een ander element op de pagina. Zo creëer je een frisse en duidelijke uitstraling. Als elementen op één lijn staan op de pagina, is het resultaat een sterkere eenheid. Zelfs als uitgelijnde elementen fysiek van elkaar gescheiden zijn, is er een onzichtbare lijn die ze met elkaar verbindt, zowel in je oog als in je hoofd. Hoewel je bepaalde elementen misschien van elkaar hebt gescheiden om hun relaties aan te geven (met behulp van de regel van nabijheid ), vertelt de regel van uitlijning de lezer dat, ook al staan deze elementen niet dicht bij elkaar, ze wel bij hetzelfde stuk horen. De elementen op deze kaart zien eruit alsof ze er gewoon zijn opgegooid en geplakt. Geen van de elementen heeft enig verband met een ander element op de kaart. Sommige elementen zijn links uitgelijnd, sommige zijn rechts uitgelijnd en andere zijn gecentreerd. Door alle items op de kaart naar rechts te verplaatsen en ze één uitlijning te geven, is de informatie meteen overzichtelijker (ook omdat ze gegroepeerd zijn). De tekstitems hebben nu een gemeenschappelijke grens die ze met elkaar verbindt. Vermijd het gebruik van meer dan één tekstuitlijning op de pagina. Centreer bijvoorbeeld niet sommige tekst en lijn andere tekst rechts uit. 4. Nabijheid Items op je pagina die bij elkaar horen of op de een of andere manier met elkaar te maken hebben, moeten altijd dicht bij elkaar staan. Onthoud: nabijheid impliceert een relatie. Dat geldt voor mensen in relaties, voor woorden in een zin en voor koppen en stukken in een tekst. Dat betekent ook dat items of groepen informatie die geen verband met elkaar houden, niet dicht bij andere items moeten staan. Dit geeft je lezers direct een visuele aanwijzing over de organisatie en inhoud van je pagina. Laten we een eenvoudig voorbeeld nemen om de regel van nabijheid te illustreren. Ik heb hieronder 2 lijsten geplaatst die allebei dezelfde informatie bevatten. Wat neem je aan over de bloemen op de eerste lijst? Waarschijnlijk niet veel, toch? Hoe zit het met de bloemen op de tweede lijst? Het blijkt dat de laatste vier bloemen op de een of andere manier anders zijn dan de andere. Je begrijpt dit meteen. En je begrijpt het zonder je er zelfs maar bewust van te zijn. Je weet dat de laatste vier bloemen op de een of andere manier anders zijn omdat ze fysiek gescheiden zijn van de rest van de lijst. Meenemen Zelden is slechts één regel het enige antwoord op een pagina. De andere drie regels zijn inherent aan het ontwerpproces en je zult ze meestal alle vier gebruiken. Maar neem ze één voor één. Het is een goed idee om eerst te beginnen met nabijheid en dan verder te gaan. Contrast : Als elementen op je pagina (zoals lettertype, kleur, grootte, vorm enzovoort) niet identiek zijn, laat ze dan extreem van elkaar verschillen. Herhaling : herhaal een aspect van het ontwerp in het hele stuk, zoals een vet lettertype, een dikke regel (lijn), een bepaald bolletje, ontwerpelement, kleur, formaat of ruimtelijke relaties. Uitlijning : elk element moet een visueel verband hebben met een ander element op de pagina. Nabijheid : elementen op je pagina die bij elkaar horen of op de een of andere manier een verband hebben, moeten altijd dicht bij elkaar staan. Ik hoop dat deze 4 regels jou net zo goed van pas komen als mij. Pas ze toe op je lay-outontwerp en kijk hoe het je verbetert! 💩

Leestijd 3 min

Ibn Renders

Je kunt niet iets ontwerpen of ontwikkelen voor alle 7,9 miljard mensen op deze planeet. Dus als we aan een project beginnen, bepalen we een doelgroep om het te beperken. Van daaruit bouwen we onze functies en ontwerpen op een manier die geschikt lijkt voor die doelgroep. Wat we echter niet kunnen beperken zijn de toegankelijkheidsfuncties. Iedereen moet de mogelijkheid hebben om jouw creatie te gebruiken of te ervaren. Sommige apparaten hebben ingebouwde functies zoals Google Talkback , waarbij je apparaat je kan vertellen wat er op het scherm gebeurt en die informatie zelfs kan gebruiken met een digitale braillelezer. Of soms zorgen we ervoor dat onze platforms toegankelijk zijn om te gebruiken, zoals onze website, die overigens een Google Lighthouse toegankelijkheidscore van 98 heeft! Maar waarom zouden we het daarbij laten? Elk stuk content moet toegankelijk zijn voor iedereen. Dit geldt ook voor PDF-bestanden. Ga aan de slag met deze 3 tips die we hebben verzameld aan de hand van een MediMarket Case Study : Doe een toegankelijkheidscontrole met Acrobat Pro First things first: doe een toegankelijkheidscontrole met Adobe Acrobat Pro. Deze controle geeft meteen in een duidelijke lijst aan welke problemen je moet aanpakken. Sommige van deze problemen kun je direct in Acrobat Pro oplossen, voor andere moet je terug naar je bronbestand of handmatig controleren. Je kunt wat meer kennis vergaren door op de optie Document automatisch markeren te klikken. Hierdoor wordt de PDF gelezen en krijg je nog een toegankelijkheidsoverzicht over ontbrekende alt-tekst, maar daarover later meer. Besef het belang van de leesvolgorde Heb je ooit een schermlezer horen flippen omdat hij je leesvolgorde of structuur in het PDF-bestand niet begrijpt? Stel je iemand voor die veel te snel praat, zonder te stoppen en zonder enig idee wat hij wil zeggen. Klinkt chaotisch, toch? Denk nu eens aan de gebruikers die echt afhankelijk zijn van dit soort digitale hulpmiddelen. Je PDF is in principe nutteloos als dit gebeurt. Zorg er dus voor dat je een gestructureerd document hebt met de juiste identiteitskoppen, paragrafen en secties wanneer je de PDF maakt. Wil je dit toevoegen aan een bestaande PDF? Met Acrobat Pro kun je de leesvolgorde later lezen dankzij hun toegankelijkheidsopties. In deze schermafbeelding kun je duidelijk zien wat de schermlezer als eerste, tweede, derde enzovoort zal lezen. Wist je dat Alt Text ook mogelijk is in PDF-bestanden? Is dit de verrassing van de dag of heb je nooit de moeite genomen om een alternatieve tekst toe te voegen aan je documenten? Nou, begin met het toevoegen van alt-tekst op afbeeldingen of interactieve velden. Een schermlezer kan je JPEG-bestanden niet lezen en je moet uitleggen wat er wordt weergegeven. Overdrijf het echter niet, je gebruiker hoeft echt niet te weten dat je die schattige kattenfoto als opvulling hebt toegevoegd. Doe dit niet alleen met afbeeldingen. Audio- en video-elementen hebben ook alt-tekst nodig. Dit is niet alleen nodig voor gebruikers die slecht zien of horen, maar ook voor gebruikers met een slechte internetverbinding die alleen de tekst van je PDF kunnen downloaden. Er is nog veel meer mogelijk, maar deze 3 tips kunnen je zeker op weg helpen! Wat ik echter echt wilde bereiken met deze blogpost is dat je gaat nadenken over het toegankelijker maken van al je content. Wil je meer informatie over toegankelijkheid, bijvoorbeeld in mobiele applicaties? Ga naar onze diensten en kijk zelf waar we je mee kunnen helpen!