Wat er met je ontwerp gebeurt in de browser
Interactieve demo's: probeer het zelf.
Geschreven door Robin Poort, front-end designer in Hilversum.
Een ontwerp is een momentopname van een pagina, vaak met tekst die je zelf hebt uitgekozen. Een uitgebouwde pagina daarentegen krijgt echte titels, echte getallen, ontbrekende afbeeldingen en bezoekers met eigen instellingen. Dat verschil zie je pas als de pagina er staat, en vaak pas vlak bij de oplevering.
Hieronder staan zes voorbeelden die dat soort zaken kunnen veroorzaken. Van wat je in Figma nog kunt zien als je oplet tot wat een ontwerp in Figma moeilijk of niet kan tonen. Bij elk voorbeeld staat een demo waar je het probleem zelf kunt ervaren.
In de praktijk spelen er meestal meerdere tegelijk.
De demo's op deze pagina hebben JavaScript nodig. Je krijgt nu de uitleg zonder de demo's, want een knop die niets doet, is erger dan geen knop.
1Langere tekst dan bedacht
Het ontwerp toont "NPO". De echte naam is "Academie voor Ambulancezorg".
DemoKlik op de knop en kijk wat er in de voorbeelden gebeurt.
Titel met een vaste hoogteFout
NPO
Titel die mag groeienGoed
NPO
In een ontwerp kies je de voorbeeldtekst zelf, en zorg je er vaak voor dat het allemaal mooi past. Op een uitgebouwde website ben je afhankelijk van wat er uit de database komt. Geef je een titel een vaste hoogte en de langste naam uit de database valt mogelijk buiten de container, of duwt iets anders weg.
Werk je aan een meertalige website? Let er dan ook op dat sommige talen uit veel langere woorden kunnen bestaan.
OplossingGeef tekst geen vaste hoogte en test je ontwerp met de langste naam die echt uit de database komt.
2Meer items dan er ontworpen zijn
In het ontwerp staan er drie. Op de website moeten er twaalf komen.
DemoKlik op de knop en kijk wat er in de voorbeelden gebeurt.
Ruimte voor drieFout
- front-end
- ontwerp
- design system
- toegankelijkheid
- CSS
- JavaScript
- Figma
- interactie
- prototype
- onderzoek
- testen
- beheer
Ruimte voor wat er isGoed
- front-end
- ontwerp
- design system
- toegankelijkheid
- CSS
- JavaScript
- Figma
- interactie
- prototype
- onderzoek
- testen
- beheer
Een ontwerp toont een prettige hoeveelheid, want dat leest fijn in een presentatie. De echte hoeveelheid kan flink anders uitvallen, en verschilt vaak ook per pagina.
OplossingOntwerp met nul, met één en met meer dan er past, en niet met het aantal dat mooi uitkomt. Toch een vast aantal? Ontwerp dan ook de situatie waarmee je de gebruiker laat weten dat er nog meer is.
3De afbeelding die niet komt
Een ontwerp heeft altijd een foto. Een pagina soms niet.
DemoKlik op de knop en kijk wat er in de voorbeelden gebeurt.
Hoogte hangt aan het beeldFout
NPO
Ruimte staat vastGoed
NPO
Zolang de hoogte van een element aan de afbeelding hangt, verspringt je hele grid op het moment dat er eentje ontbreekt of te laat ingeladen wordt.
OplossingLeg de verhouding van het beeld vast en zet er iets neer voor als de afbeelding er (nog) niet is.
4De bezoeker heeft een grotere lettergrootte ingesteld
Dit is een groeiende groep, en in Figma is dit lastig na te bootsen.
DemoKlik op de knop en kijk wat er in de voorbeelden gebeurt.
Maten in pixelsFout
NPO
Maten in emGoed
NPO
Wie zijn lettergrootte omhoog zet, verwacht dat de pagina meegroeit. Staat de hoogte in pixels vast, dan groeit de tekst wel, maar de pagina niet.
OplossingReken in em of rem, dan groeit de pagina mee met de tekst.
5De toestanden die zelden ontworpen worden
Een ontwerp toont één moment. Een invoerveld heeft er al vier.
DemoKlik op de knop en kijk wat er in de voorbeelden gebeurt.
Alleen de ruststand ontworpenFout
Elke toestand ontworpenGoed
Rust, focus, fout en uitgeschakeld komen in een ontwerp niet altijd allemaal voor, maar de bezoeker ziet ze de hele dag. Een foutmelding in rode tekst zonder verdere aanwijzing is er een die je bij het ontwerpen niet mist maar bij het gebruiken wel.
OplossingOntwerp ook focus, fout en uitgeschakeld. Dat zijn de toestanden die een bezoeker ook tegenkomt, en misschien wel op de belangrijkste momenten.
6De breedte ertussenin
Het ontwerp bestaat op 375px en 1440px. Je bezoeker zit op 960px.
DemoKlik op de knop en kijk wat er in de voorbeelden gebeurt.
Twee vaste breedtesFout
MeebewegendGoed
Een ontwerp bestaat in de maten die de ontwerper heeft gekozen. Daartussen zitten de breedtes die niet zijn ontworpen. Maar daar zit wel een deel van je bezoekers.
OplossingOntwerp de 'overgang' tussen de breakpoints en niet alleen de twee uitersten.
En dan (bijna) alles tegelijk
Dit is hoe het uiteindelijk op de website zichtbaar wordt: niet één 'probleem' tegelijk, maar alles door elkaar.
DemoKlik op de knop en kijk wat er in het eerste voorbeeld overblijft.
Gebouwd zoals het ontwerp eruitzagFout
NPO
- front-end
- ontwerp
- design system
- toegankelijkheid
- CSS
- JavaScript
Gebouwd om het te overlevenGoed
NPO
- front-end
- ontwerp
- design system
- toegankelijkheid
- CSS
- JavaScript
Een langere naam, een grotere lettergrootte, een ontbrekende afbeelding en meer labels dan er ontworpen waren. Elk apart is het soms nog te overzien. Bij elkaar blijft er in het eerste voorbeeld weinig over van wat er in Figma stond, terwijl in het tweede precies hetzelfde binnenkomt en meegroeit, waardoor de bezoeker nog steeds alle inhoud kan zien.
Staat de pagina er eenmaal, dan komt er een tweede soort verschil bij: wat er gebeurt terwijl hij laadt. Daarover gaat waarom je site traag voelt.
Dit is het werk dat ik doe onder website- en interfaceontwerp. De bouwstenen die dit soort gevallen vooraf vastleggen vallen onder design system.