Leesbaarheid onderzoek van tekst op desktop

Leestijd: 6 minuten
Samenvatting: Ter verbetering aan mijn huidige blog ben ik tot het inzicht gekomen om een korte samenvatting te schrijven onder mijn titel binnen de blog. Dat heb ik nog niet eerder gedaan, maar ik moet even kijken of het in de instellingen geregeld kan worden.

Inleiding

Dit onderzoek is deel van een series van onderzoek naar de leesbaarheid op… Zo ga ik in dit artikel in op de desktop, maar kun je hier lezen hoe de leesbaarheid op tablet en de leesbaarheid op mobiel onderzocht is.

De hamvraag die ik mezelf stel is eigenlijk hoe ik de leesbaarheid kan vergroten. Daarvoor moet ik achterhalen welke lettergrootte zorgt voor een beter leesbaar stuk. Hangt dit bijvoorbeeld ook af van de lengte van het stuk? Is het bijvoorbeeld prettiger om korte stukjes tekst te lezen met grotere letters? Of juist niet?

Laten we wat prototypes ontwerpen die verschillende groottes tekst laten zien.

Onderstaand heb ik een screenshot gemaakt van de lettergrootte van de website van Wikipedia:

Ik vind het lezen van moeilijk te doorgronde tekst moeilijk te volgen op het moment dat je niet goed kunt focussen op de tekst. Als het ook nog eens veel tekst is wat op een pagina staat, kan het wel zo zijn dat ik het een interessante pagina vind, maar niet dat ik meer betrokken raak bij de tekst. Daarbovenop komt de inhoud ook niet goed binnen als tekst niet voorzien is van enige vorm van context en opmaak van de tekst.

Experiment

Als experiment gebruik ik de blog van Devoked. Ik ga kijken naar wat ik van de huidige leesbaarheid vind. Ook wil ik weten in hoeverre het ‘lekker leest’ vanaf een website. Welk lettertype leest het lekkerst op welke lettergrootte en ik welke context. Welke content is lekker scanbaar? Ik ga het uitzoeken.

0-meting

Eerst maak ik een 0-meting met wat ik ervaar tijdens het lezen van een blog en wat ik zou willen ervaren. Ook kijk ik naar welke mogelijkheden er zijn om dingen weg te halen die niet nodig zijn en dingen toe te voegen die wel nodig zijn.

Tijdens het lezen gebruik je vaak je handen om de pagina te schuiven naar beneden. Dit noem je scrollen. Het gaat erom dat de lezer van een tekst op het internet zijn muis heeft moeten gebruiken om op de website te komen en het is dan ook aangeraden om de muis een dominantere rol te geven in het lezen van de tekst om zo de betrokkenheid bij het stuk dat je leest wordt vergroot.

Laten we beginnen.

Context

0-meting

Er wat nog niet echt context en ik heb er nu een enorme animatie ingezet om mee te beginnen. Als je erop klikt ga je terug naar het overzicht van de blog. Dit ontbrak nog.

Het is wel verstandig om binnen een volledig vierpoort geen animatie te plaatsen, omdat het anders te veel afleidt.

Idee

Boven aan de Pagina wil ik context naar waar ik vandaan kwam. Dit moet mooi vormgegeven worden. Misschien wel met een Lottie file.

Kan dit dragable zijn? Een dragable item op de voorkant van de website met de navigatie?

Progressie bar

Ik heb een progressie bar gemaakt voor mijn blog. Hiermee is het voor de lezer duidelijker te zien in hoeverre het door de pagina gaat. Ik heb de bar aan de linkerkant van het scherm nu. Hij kan ook nog rechts, onder of boven. Maar ik ben al lang blij dat dit mij gelukt is.

Titel post title

0-meting

  • Kleur: #32383B
  • Typografie
    • Familie: Source Code Pro
    • Afmetingen: 80px
    • Dikte: Bold
    • Transformeren: Normaal
    • Stijl: Normaal
    • Decoratie: Geen
    • Regelhoogte: 1 EM
    • Letterafstand: 0
  • Marge
    • Links: 0
    • Rechts: 0
    • Boven: 0
    • Onder: 0
  • Padding
    • Links: 125
    • Rechts: 125
    • Boven: 0
    • Onder: 0
  • Uitlijning: links.

Op de uitleiding hierboven kom ik terug, het bevordert toch niet de leesbaarheid zoals ik dat verwacht had. Ik heb nu de uitleiding naar links.

Aanpassingen

Om te beginnen wil ik graag beginnen met dingen weg te halen die weg kunnen. Het moge duidelijk zijn dat de grootte waarin de titel nu verkeerd enigszins dominant is. Daarom zal ik de afmetingen verkleinen naar 60px.

Tevens ga ik de marge vergroten aan de linkerkant met 100 en aan de rechterkant met 100.

Resultaat

Voor

Na

Korte samenvatting

0-meting

Onder de titel is het fijn om een korte samenvatting te lezen van waar het stuk over gaat. Het is dan ook handig om te kijken hoe ik dat voor elkaar krijg om te maken. Op dit moment heb ik nog geen samemvatting, maar ik hoop dat elementor zo gek is of WordPress zo gek is om dit aan elkaar te koppelen. Ik ga het in ieder geval eens proberen te maken.

Ik heb op dit moment deze samenvatting toegevoegd aan dit artikel:

Laat ik eens beginnen met het stylen van de samenvatting:

Ik heb een klein beetje context toegevoegd aan de samenvatting, omdat dat duidelijker is voor de lezer. Met de CSS-code <u> </u> heeft het woord Samenvatting nu een onderstreping.

Stijl

  • Kleur: #AC4461
  • Typografie
    • Familie: Source Code Pro
    • Afmetingen: 30px
    • Dikte: 300
    • Transformeren: Normaal
    • Stijl: Cursief
    • Decoratie: Geen
    • Regelhoogte: 1,5 EM
    • Letterafstand: 0
  • Marge
    • Links: 0
    • Rechts: 0
    • Boven: 0
    • Onder: 0
  • Padding
    • Links: 100px
    • Rechts: 100px
    • Boven: 0
    • Onder: 0

Resultaat

Eerste versie:

Tweede versie

Inhoudsopgave

De inhoudsopgave is het volgende element dat te zien is in de blog.

  • Post title staat in de inhoudsopgave. Die moet er nog uit. Dat doe ik door de .No in te voegen als CSS-classes van de titel van de blog.

Aangepaste versie

Eigenlijk wil ik even kijken of ik die teksten kan vertalen naar het Nederlands. Eigenlijk: hoe kom ik eigenlijk aan mijn inhoudsopgave. Staat mijn elementor niet op Nederlands of zo?

Kan het zo snel niet vinden.

Metrix

  • Leestijd
  • Laatste update
  • Aantal keer bekeken
  • De ervaring met een blog als onderzoeker

Tekstuele vormgeving

Hoe de zinnen er staan bepaalt voor een deel de leesbaarheid van een tekst. In onderstaand voorbeeld zie je hoe ik twee zinnen eigenlijk los van elkaar neer heb gezet. Dit is echter niet goed, omdat de mens genijgt is om in blokjes tekst te scannen. Als er dan twee losse blokjes zijn van een zin, is het lastiger te begrijpen welke content wat is.

Het is daarom beter om geen enkele zinnen te schrijven die dan losstaand in de tekst verschijnen. Op die manier voorkom je dat er verwarring ontstaat over de betekenis van de tekst.

De ruimte tussen hoofdstukken/paragrafen

De ruimte die er tussen de verschillende paragrafen zit, moet enigszins duidelijk maken dat er een nieuwe paragraaf begint.

Omdat je met de afbeeldingen nog moet stoeien, zie je nu dit:

Een pagina zonder white space.

Er moet dus white space worden toegevoegd. Dat doe ik het vulelement, de functie van de editor. Dat ziet er in de back-end zo uit:

Omdat ik aan het schrijven was over iets anders, kwam ik dit tegen:

Op deze afbeelding is te zien dat je kunt:

  • Volgen van de auteur
  • Geselecteerde tekst kunt tweeten en highlighten (met een account)

Signaalwoorden

Signaal woorden zijn alle woorden die losstaand betekenis geven aan een stuk tekst. Dit zijn primair titels en koppen en secundair de onderstrepingen binnen de tekst.

Change size elementor for users. Dat zou ook nog wel gaaf zijn als dat kon. Op een mooie manier.

Update

Ik wil graag de teksten wat kleiner, het is nu wel erg groot:

DEVOKED

				
					.woocommerce .widget_price_filter .ui-slider .ui-slider-range {

background-color: #fff;

}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {

background-color: #fff;

}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {

background-color: #000;

}
				
			
				
					<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });

</script>
<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>
				
			

Long Read

nu slechts 4,70!

Uren
Minuten
Seconden

Home

Devoked Welcome and thank you for visiting the Devoked website. Login About us Portfolio Prices Research 0 Tracked Research Hours Last update: september ’21 Human

Lees verder ┬╗

Prices

Pricing Devoked is pricing itself as transparent possible. We want to make sure you see how a price is build up. Over the years I

Lees verder ┬╗

Webdesign

Web Design Onderzoek Kennismaking Overwegen Conversie Aanmelden Inloggen Inschrijven Aankopen Informeren Contact opnemen Tracking Gebruiksvriendelijkheid Vindbaarheid Veiligheid Ontwerp Vormgeving Opmaak Opmaak Tekst opmaak, beeld opmaak

Lees verder ┬╗

Website

Rekening Functionaliteiten Vormgeving Gebruiksvriendelijkheid Vindbaarheid Veiligheid Rekening MovingMatters.nl Welkom Welkom in het account voor MovingMatters. De prestaties zijn onderverdeeld in de categorie├źn hiernaast. Om de

Lees verder ┬╗

About

About us At this moment Devoked is a Research, Design and Development company, focussing on the interaction between humans and life. The Devoked brand Devoked

Lees verder ┬╗

Behaviour

Designing Human Behavior In order to Design Human Behavior we must first understand what behavior is and how it works. Behavior is the act of making

Lees verder ┬╗

Sales

Sales When selling happens between buyer and seller we call it sales. In sales there is a funnel where sales are going through.   Targets

Lees verder ┬╗

Research

Web Design Research In Web Design Research we focus on the following Key Performance Indicators (KPI): Functionality Usability Esthetics  Hierarchy Security Findability Support Functionality One

Lees verder ┬╗

Service Design

About Service Design Service Design is the design of structures, systems, chains, loops, journeys, cycles, models, mechanisms, curves and spectra in order to define all

Lees verder ┬╗

Human

Designing Human Experience Human Experience is a phenomenon happening within the conscious and subconscious mind. The receptors of the central nervous system sensor raw stimuli

Lees verder ┬╗

Templates

Simple Text Padding: 100px Title: 50px | Font: Lato Body: 25px | Font: Helvetica Sub title: 30px | Font: Lato Animations: fade in

Lees verder ┬╗

Web Design

Current work Devoked.com ApointCBP.nl ProMasters.nl Recent work Shoelala.nl MovingMatters.nl Floorvandersteen.nl Van-V.nl ArtistChocolate.com Early work BureauMPA.nl PearlSmileNederland.nl CorreaInstallaties.nl MetEsther.nl SchoppenVideo.nl YogiBag.nl

Lees verder ┬╗

If this then that

Wanneer je Facebook gebruikt om je content te distribueren, dan is gebruik maken van IFTTT* (If This Than That). Deze integratie tussen WordPress Websites Elementor

Lees verder ┬╗

Thuis werken

Thuis werken is het nieuwe normaal. Sinds de corona crisis neemt het aantal thuis werkenden toe. Het is daarom belangrijk om voor deze ervaring van

Lees verder ┬╗

De slaapbeleving

Slapen doen we allemaal. Vaak slaapt een mens 1/3 van zijn leven (8 uur). Dit is aanzienlijk veel en daarom dat je in dit artikel

Lees verder ┬╗

Het gebruik van Spotfy

Spotify is d├ę app voor het streamen van muziek en podcasts. In dit artikel schrijf ik op wat er qua gebruikerservaring verbeterd kan worden aan

Lees verder ┬╗

Voedsel bereiden

Hoe maak je voedsel goed klaar? Ik ga vandaag spruitjes koken, maar hoe maak je die nou het lekkerste klaar? Het ‘kontje’ er af Buitenste

Lees verder ┬╗

Over Devoked

Hallo, ik zal mij even voorstellen. Ik ben Joep Schoppen, eigenaar en oprichter van Devoked. Sinds juli 2018 ben ik als internet ondernemer mezelf gaan

Lees verder ┬╗

Slapen

Slapen moeten we allemaal. Daarom beschrijf ik in dit artikel de ervaring voor, tijdens en na het slapen van de gemiddelde mens. Voor het slapenVoor

Lees verder ┬╗

Ik heb een Error

Heel verveld natuurlijk, maar ik heb een error. Deze error: er heeft een kritieke fout voorgedaan op je site wordt veroorzaakt door de volgende foutcode:

Lees verder ┬╗

Het maken van een website

Een website maken is een vakmanschap. Het vergt disciplines uit meerdere delen van ontwerp tot ontwikkeling en van schrijven tot communiceren met andere partijen betrokken

Lees verder ┬╗

Toileteren

Toileteren doe je tijdens je dag meerdere keren. Je doet het na het consumeren. Wat je er voor doet is consumeren en zorgen voor WC

Lees verder ┬╗

Naar huis gaan

De ervaring met de supermarkt eindigt als de klant de supermarkt verlaat. Daar wordt de klant weer een mens. De mens zal naar huis gaan.

Lees verder ┬╗

Bedrijfsonderzoek

Over het bedrijf Wat doet het bedrijf? Wat is het aanbod? Wat is het doel van uw bedrijf? Wat maakt uw bedrijf speciaal? Wie probeert

Lees verder ┬╗

Een brief schrijven

Wie de brief schrijft kan verschillen. Dit kunnen mensen zijn, maar vooral bedrijven / de marketingafdeling. Wat staat er in de brief? Wij schrijft het?

Lees verder ┬╗

Een enveloppe maken

Voordat iemand een brief ontvangt, moet deze natuurlijk wel in een enveloppe. Deze moet worden gemaakt. Hoe wordt deze gemaakt? Hoe duurzaam is dat?

Lees verder ┬╗

Brief versturen

Het versturen van een brief gaat via een postbus. Daar stop je de brief in. Vervolgens wordt deze geleegd en wordt de brief verstuurd via

Lees verder ┬╗

Bewustzijnsvormen

Hoger bewustzijn: flow Hoog bewustzijn: mindset, vrij wil Basis bewustzijn: gedachten Laag bewustzijn: karakter Onderbewustzijn

Lees verder ┬╗

Bootcamp

Een bootcamp is een meerdaagse training in het leren toepassen van de kennis van levensbelevingen. Via:– Workshops: Diepteanalyse, Brainstorms,  – Focusgroepen: Mapping, – Prototyping: A-B testen,  Proof

Lees verder ┬╗

Logo laten maken

Als merk wilt u een logo laten maken bij Devoked. Hoe die ervaring er uit ziet, kunt u hieronder lezen. Briefing Iteraties Aliteraties

Lees verder ┬╗

Login

Als Devoked Member kunt u inloggen om de taken, planning, status en statistieken te vinden over uw project met Devoked.

Ontdek de ervaring