UX of UI? 35 verwarrende webtermen duidelijk uitgelegd
Als jij het hebt over toegankelijkheid en ik over bruikbaarheid, hebben we het dan over hetzelfde? Zoek je een UX-writer of een UX-designer? En waarom zegt iemand UX waar-ie eigenlijk UI bedoelt?
Ik geef het eerlijk toe: veel webtermen lijken op elkaar. Of we gebruiken ze door elkaar, alsof ze hetzelfde betekenen. Maar dat is niet zo. Woorden doen ertoe. De juiste woorden al helemaal. We hebben een gedeeld begrip nodig van termen. Zo voorkomen we verwarring en vertraging bij het zoeken naar de juiste expertise. En dus verspilling van geld en moeite.
Lijst in alfabetische volgorde
Daarom vind je hier een lijst van 35 webtermen die verwarrend kunnen zijn. Of waarvan de betekenis soms een beetje vaag blijft. Op alfabetische volgorde, met duidelijke uitleg.
Vind je dit een fijne lijst? Denk je dat een bepaalde term beter uitgelegd kan worden? Of mis je juist een term? Dan hoor ik graag van je! Mail gerust: mail@jeroenschalk.nl
Alt-tekst Een korte beschrijving van een afbeelding voor mensen die de afbeelding niet kunnen zien. Bijvoorbeeld blinde gebruikers met een screenreader. Vaak denken mensen bij alt-tekst aan inhoudelijke informatie overbrengen, maar zelf zie ik het liever als betekenis overbrengen. Dat zit ‘m niet alleen in inhoud, ook in sfeer en gevoel. Daarom vind ik het te makkelijk om te zeggen dat een decoratieve afbeelding standaard geen alt-tekst nodig heeft.
B1-niveau Met B1-niveau wordt een tekst in duidelijke taal bedoeld. Nog preciezer: een tekst die voor het grootste deel van de volwassen lezers te begrijpen is. Dat komt neer op ongeveer 80% van de lezers. Eigenlijk zegt B1-niveau helemaal niets over hoe duidelijk een tekst is. Het gaat juist over het niveau waarop iemand een vreemde taal beheerst. Er zijn hierin 6 niveau’s: van A1 (laagste) tot C2 (hoogste).
Begrijpelijkheid Onderdeel van gebruiksvriendelijkheid. Gaat over hoe makkelijk de tekst en functionaliteit (van een website of app) te begrijpen zijn. Gebruik je simpele woorden of vaktaal? Zijn instructies helder? Snapt iemand wat er gebeurt als ze ergens op klikken?
Bruikbaarheid Onderdeel van gebruiksvriendelijkheid. Kunnen mensen hun doel bereiken op je website? En gaat dat makkelijk en prettig? Als iemand een product wil bestellen maar de bestelknop niet kan vinden, dan is de bruikbaarheid slecht. Bruikbaarheid gaat dus om hoe soepel iets werkt.
Call-to-action (CTA) Een knop of link die mensen aanspoort tot actie: ‘Meld je aan’, ‘Bestel nu’, ‘Download de gids’. Effectieve CTA’s zijn concreet en maken duidelijk wat je krijgt of wat er gebeurt als je klikt. Het is een vorm van microcopy die specifiek bedoeld is om mensen iets te laten doen.
Content Alle vormen van inhoud in schrift, geluid en beeld. (Content is dus een enorm containerbegrip en je kunt niet overal specialist in zijn. Voor mij de reden dat ik mezelf geen ‘contentspecialist’ meer noem.)
Contentmodel Weergave van hoe een contenttype in elkaar zit. Een nieuwsbericht kan bijvoorbeeld bestaan uit een kop, een label of categorie, een uitgelichte afbeelding, een intro, samenvatting en een meta-descriptie voor zoekmachine-optimalisatie. Met een contentmodel kun je ervoor zorgen dat een redacteur in het CMS het juiste contenttype kiest voor de te plaatsen content.
Contenttype Nieuwsbericht, kennisartikel, landingspagina, klantcase, uitlegvideo: allemaal zijn het voorbeelden van een contenttype. Elk contenttype bestaat uit vaste onderdelen. Een uitlegvideo kan bijvoorbeeld bestaan uit de video zelf, het transcript (tekst) en een thumbnail (afbeelding). Al deze eigenschappen kun je vastleggen in een contentmodel. Daardoor kun je heel gericht je CMS (laten) aanpassen aan de typen content die je wilt plaatsen.
Copywriting Het schrijven van teksten met vooral werven en overtuigen als doel. De nadruk ligt bij copywriting meer op (commerciële) conversie dan op informatie (en dienstverlening). Copywriting is een apart vak. Tegelijk is het een vaardigheid die een webredacteur of UX-writer ook kan beheersen.
Customer journey Ook wel een klantreis genoemd. Of een patiëntenreis, in de zorg. Dit is een weergave van welke weg je klant/patiënt/cliënt/prospect/whatever maakt rondom jouw dienst of product. De weg omvat alle momenten waarop deze persoon mogelijk met je dienst of product in contact komt. Een customer journey zet de feiten en volgorde op een rij. Met per stap een overzicht van hoe de persoon zich op dat moment voelt en waar-ie behoefte aan heeft.
Doel Iemand voert een taak uit op je website of app. Die taak ondersteunt een doel. Die doelen kunnen meer praktisch zijn, zoals kennis opdoen of een weten wanneer je een afspraak hebt. Doelen kunnen ook abstracter zijn. Zoals geruststelling ervaring, je ergens op verheugen of groeien als ondernemer. Doel en taak van elkaar onderscheiden helpt om beter te communiceren.
Gebruiker De persoon die op een bepaald moment je website of app gebruikt. Dat kan iemand uit je doelgroep zijn, maar ook iemand anders. In gesprekken over websites en apps draait alles om de vraag: wat wil de gebruiker? Wat heeft de gebruiker nodig? En hoe ervaart de gebruiker dat wat je aanbiedt?
Gebruiksvriendelijkheid Dit is de optelsom van toegankelijkheid, begrijpelijkheid en bruikbaarheid. Is iets toegankelijk, begrijpelijk én bruikbaar? Dan is het gebruiksvriendelijk. De sweet spot dus:
GenAI Afkorting voor generatieve AI. Er zijn al ontelbaar veel toepassingen van genAI waarmee je in tekst, geluid en beeld content kunt maken. Zelf gebruik ik het voor eerste tekstconcepten en om snel structuur aan te brengen in grote hoeveelheden tekst. Vooral als deze uit verschillende bronnen komen. (GenAI hielp me ook bij een eerste opzet van deze begrippenlijst. 😀)
Informatiearchitectuur Hoe je content organiseert en structureert. Hoe deel je het menu van je website of app in? Hoe zijn pagina’s ingedeeld? Welke labels, categorieën of thema’s gebruik je voor verschillende contenttypen? En hoe vinden mensen hun weg op je website of in je app? Een goede informatiearchitectuur zorgt dat mensen snel vinden wat ze zoeken.
Koppenstructuur De logische volgorde van koppen op een pagina: één hoofdkop (H1), daaronder hoofdstukken (H2), daaronder eventueel paragrafen (H3), enzovoort. Dit is belangrijk, omdat mensen koppen gebruiken om snel door een tekst te scannen. Daarnaast hebben gebruikers van screenreaders een duidelijke koppenstructuur nodig om te navigeren op een pagina.
Meta-data Informatie over een pagina die niet direct op de pagina zelf zichtbaar is, maar wél door zoekmachines en andere systemen gebruikt wordt. Denk aan de paginatitel die je in je browsertabblad ziet, de beschrijving die Google toont in zoekresultaten, of alt-tekst bij afbeeldingen. Belangrijk voor vindbaarheid en toegankelijkheid. Vergeet trouwens ook de meta-data voor zoekmachine-optimalisatie binnen je eigen website niet.
Microcopy Alle kleine tekstjes in een scherm (user interface): tekst op knoppen, labels bij formuliervelden, foutmeldingen, tooltips, bedenk het maar. Microcopy is kort en gericht op het helpen van gebruikers bij wat ze aan het doen zijn. Belangrijk verschil met ‘gewone’ webteksten: microcopy is altijd gekoppeld aan een actie of interactie. Het vak van microcopy schrijven heet UX-writing.
Prototype Een klikbare versie van (een deel van) een website of app. Met een prototype kun je testen hoe iets werkt, voordat het echt gebouwd wordt. Verschil met wireframe: een prototype is interactief en ‘werkt’ al, een wireframe is een meer statische schets. (Trouwens, er bestaan ook papieren prototypes. Zoek online maar eens op de term ‘paper prototyping’.)
Redactieproces Alles wat nodig is om tot actuele en relevante content te komen. Meestal cyclisch en onmisbaar voor webredactie. Bijvoorbeeld (zie ook afbeelding): eerst input, feedback en updates verzamelen. Dan de tekst schrijven of aanpassen. Daarna afstemmen met een inhoudsdeskundige en collega-redacteur. Daarna testen met de eindgebruiker. En de cirkel rond maken, door feedback te gebruiken om de tekst aan te passen. Hier kun je natuurlijk nog allerlei variaties op bedenken of stappen aan toevoegen.
Scanbaarheid Hoe makkelijk het is om snel door een tekst of pagina te scannen en tóch de belangrijkste informatie te vinden. De scanbaarheid wordt bijvoorbeeld beter door korte alinea’s, duidelijke koppen, lijstjes en voldoende witruimte. Ook het gebruik van afbeeldingen kan de scanbaarheid verbeteren.
Taak Een gebruiker komt met een taak naar je website of app. Niet om de taak zelf, maar om een doel te bereiken. Een taak is bijvoorbeeld een online cursus aanschaffen. Maar het doel is meer leren over het onderwerp van de cursus. Of specifieker: nieuwe kennis over het onderwerp toepassen voor X, Y of Z. Taak en doel van elkaar onderscheiden helpt om beter te communiceren.
Testen Checken of iets werkt zoals bedoeld, door te kijken hoe gebruikers ermee omgaan. Je kunt bijvoorbeeld mensen uitnodigen om de site te gebruiken terwijl je meekijkt, of twee versies met elkaar vergelijken (A/B-test). Ook een tekst kun je prima testen. Dit helpt om aannames te checken en problemen te ontdekken die je zelf niet ziet. Dit is iets anders dan het gebruikelijke (interne) testen op functionaliteit, toegankelijkheid en andere eisen.
Toegankelijkheid Onderdeel van gebruiksvriendelijkheid. Toegankelijkheid gaat over zorgen dat iedereen je website of app kan gebruiken, ongeacht de vaardigheden en omstandigheden van de gebruiker. Denk aan: blinde mensen die een screenreader gebruiken, slechtziende mensen die tekst moeten vergroten, mensen met motorische beperkingen die geen muis kunnen gebruiken, of mensen met dyslexie die moeite hebben met lezen.
Tone of voice De persoonlijkheid en stijl in je content. Een consistente tone of voice zorgt dat alle teksten herkenbaar aanvoelen en passen bij je branche en organisatie. Belangrijk: onderscheid ’tone’ en ‘voice’ van elkaar. Mailchimp omschrijft het mooi in diens tone-of-voice-document: “You have the same voice all the time, but your tone changes. You might use one tone when you’re out to dinner with your closest friends, and a different tone when you’re in a meeting with your boss.”
UI (User Interface) Alles wat je ziet op een website of app: knoppen, menu’s, formulieren, kleuren, lettertypen. Het verschil met UX: UI is hoe het eruitziet en wat er gebeurt als je iets doet (scrollen, klikken), UX is hoe het voelt en werkt. De totale ervaring dus. (Zelf vind ik het leuk om tussendoor een UI af te pellen en te delen wat ik van een user interface vind.)
User flow Het pad dat een gebruiker aflegt om een doel te bereiken. Bijvoorbeeld (zie ook afbeelding): homepage, productpagina, winkelwagen, betalen, bevestiging. Door user flows in kaart te brengen, zie je waar mensen mogelijk vastlopen of afhaken. Als je gaat testen met gebruikers, kan het dus ook handig zijn om specifieke user flows te testen.
UX (User eXperience) De complete ervaring die iemand heeft bij het gebruiken van je website of app. Dat gaat over meer dan alleen of iets werkt: hoe voelt het? Is het prettig? Frustrerend? Verwarrend? UX omvat alles: bruikbaarheid, toegankelijkheid, hoe het eruitziet, of de inhoud begrijpelijk is, en zelfs hoe snel het laadt. Kortom: UX is het grote geheel en gaat dus over totale gebruiksvriendelijkheid.
UX-design De functietitels UX-designer en UX-writer worden vaak door elkaar gehaald. (Ter illustratie: meerdere recruiters op LinkedIn hebben mij, een UX-writer, al gemaild omdat ze een UX-designer nodig hebben.) Een UX-designer ontwerpt user flows en/of een user interface. Maar de toon en woorden in die flows en interface? Die schrijft de UX-writer. UX-designers en UX-writers moeten wat mij betreft dus altijd zoveel mogelijk samenwerken.
UX-writing Het schrijven van teksten die gebruikers helpen bij het gebruiken van een website of app. Deze teksten zijn kort, gericht op (inter)actie en wordt ook wel microcopy genoemd. Denk bijvoorbeeld aan knoppen, foutmeldingen, instructies en bevestigingen. Verschil met ‘gewone’ webteksten: UX-writing draait om interactie en het begeleiden van gebruikers bij acties, webredactie gaat meer over langere en informatieve teksten (en dit aan de achterkant goed organiseren).
WCAG Staat voor Web Content Accessibility Guidelines: internationale richtlijnen voor toegankelijke websites. Deze zijn ontwikkeld door W3C (de organisatie die webstandaarden maakt). WCAG geeft concrete criteria waar je website aan moet voldoen. Er is discussie in de wereld van toegankelijkheid over of voldoen aan de WCAG ook hetzelfde is als daadwerkelijk toegankelijk zijn.
Webredactie Het voorbereiden, schrijven en beheren van teksten voor websites. Dat gaat vaak over tekst zoals artikelen, nieuwsberichten, productbeschrijvingen of informatiepagina’s. Verschil met UX-writing: webredactie is breder en gaat vooral over informerende content, UX-writing is specifieker en gaat over teksten die direct gekoppeld zijn aan acties en interacties (microcopy). Voor webredactie is een duidelijk redactieproces enorm belangrijk.
Wireframe Een eenvoudige schets van een webpagina, die laat zien waar dingen komen te staan. Een wireframe bevat nog geen kleuren, echte teksten of afbeeldingen. Het gaat puur om de indeling en structuur. Deze maak je vroeg in het ontwerpproces, voordat je echt gaat een pagina ontwerpt en er teksten voor schrijft. Verschil met prototype: een wireframe is een statische schets, een prototype kun je al ‘gebruiken’.
Zoekmachine-optimalisatie (SEO) Content zó maken dat zoekmachines deze makkelijk kunnen scannen en inschatten op relevantie. Met als gevolg: een hogere plek in de zoekresultaten. Bij SEO wordt er meestal nagedacht over vindbaarheid in externe zoekmachines. Maar vaak wordt optimalisatie voor de interne zoekmachine vergeten. Daarom zijn zoekfuncties (zoals een zoekveld of zoeken via filters) op veel websites, heel erg slecht.
Vind je dit een fijne lijst? Denk je dat een bepaalde term beter uitgelegd kan worden? Of mis je juist een term? Dan hoor ik graag van je! Mail gerust: mail@jeroenschalk.nl
