02. UX
snelheid
gebruikerservaring
Je gaat online naar bepaalde informatie op zoekt. Een lijst met zoekresultaten verschijnt en je wil de eerste relevante optie bekijken. Maar bij het openen van die website krijg je een leeg scherm te zien, want de pagina is aan het laden is... Je wacht even om dan naar de volgende optie in de lijst te gaan. Paginasnelheid - de snelheid waarmee de inhoud laadt - heeft een enorme impact op de tevredenheid van bezoekers. En ook voor Google is de sitesnelheid belangrijk bij het rangschikken en dus weergeven van resultaten. Afhankelijk van de laadsnelheid van een pagina creëert dit mogelijk frustratie bij gebruikers:
0,1 seconden > gevoel van onmiddellijke reactie
1 seconde > gevoel van kleine vertraging, maar wel gevoel van controle.
10 seconden > hier ligt de limiet voor de aandacht bezoekers die de site onmiddellijk verlaten
Wanneer mensen moeten wachten op inhoud, wordt er gefocust op het wachten en niet op de taak die ze willen voltooien. Indien alles vlot verloopt, voelen bezoekers zich meer betrokken en kunnen ze zich concentreren op de inhoud.
oorzaken vertraging
server
Over het algemeen moet de responstijd van de server minder dan 200 ms zijn. De oorzaken waarom een server traag reageert, zijn veelal in te delen in drie categorieën:
trage applicatielogica (niet geoptimaliseerde databasequery's, code, enz.)
onvoldoende hardwarebronnen (onvoldoende CPU, RAM, enz.)
trage netwerkverbinding
De tweede en derde factor zijn direct relevant voor webhosting. Daarom heeft een juiste hostingselectie, evenals de fysieke locatie, een enorme impact op de laadtijd.
onnodige omleidingen
Elke keer dat een pagina doorverwijst naar een andere pagina, is er extra tijd nodig alvorens de HTTPS request-response cyclus is voltooid. Het is essentieel om omleidingen te identificeren en te verminderen. Via Yslow kan u nagaan of een website goed presteert.
zware CSS-, HTML- en JS-bestanden
Het is van cruciaal belang om de grootte van CSS-, HTML- of JavaScript-bestanden die groter zijn dan 150 bytes te verkleinen. Door gzip-compressie in te schakelen kan de grootte van de respons met maximaal 90% worden verminderd, wat de hoeveelheid tijd die nodig is om de bron te downloaden aanzienlijk kan verminderen. Voor afbeeldingen kan gzip echter niet gebruikt worden.
zware afbeeldingen
GIF-, PNG- en JPEG-bestanden zijn goed voor meer dan 90% van het totale beeldverkeer op het internet. Het is van vitaal belang om afbeeldingen te optimaliseren voor het web - verklein de bestandsgrootte zonder de visuele kwaliteit aanzienlijk te verminderen. Hoe minder bytes de browser hoeft te downloaden, hoe sneller de browser inhoud op het scherm kan downloaden en weergeven. Het is vooral belangrijk om dit voor mobiele gebruikers te doen, omdat te zware afbeeldingen op mobiele apparaten nog steeds vertragingen kunnen veroorzaken.
Gebruik de juiste bestandsformaten. Sommige beeldformaten zijn zwaarder dan andere. PNG's zijn over het algemeen beter voor afbeeldingen met minder dan 16 kleuren, terwijl JPEG's over het algemeen beter zijn voor foto's. GIF en PNG zijn verliesvrije formaten en ze zijn zwaarder dan JPG.
Gebruik contentdistributienetwerken (CDN's). CDN's zijn netwerken van servers die worden gebruikt om de lading van het leveren van inhoud te verdelen. Kopieën van de inhoud - meestal afbeeldingen - worden opgeslagen in meerdere, geografisch diverse datacenters, zodat gebruikers sneller en betrouwbaarder toegang hebben tot een website.
geanimeerde effecten
Mooie animaties en complexe widgets vereisen complexe gegevensverwerking, zowel aan de server- als clientside. Echter subtiele geanimeerde effecten zijn niet alleen goed in termen van bruikbaarheid, maar ze zijn ook goed in termen van laadtijd van de pagina.
laadtijd meten
De procedure om een website qua snelheid te optimalisatie begint met het onderzoeken en analyseren van het huidige laadgedrag. Hiervoor worden PageSpeed Insights of GTmetrix aanbevolen. Beide tools analyseren de inhoud van een webpagina en genereren suggesties om die pagina qua snelheid te optimaliseren. PageSpeed Insights analyseert een pagina om te zien of deze de aanbevelingen van Google volgt zodat die in minder dan één seconde weergegeven wordt op een mobiel netwerk.
CTA (call-to-action)
mobile first
wat vooraf ging
Om het concept van mobile-first design beter te begrijpen, komen eerst twee andere topics aan bod. Onderstaande concepten bestonden voordat responsief webdesign zijn intrede deed. Om de web- of applicatie-interface op een redelijke manier op verschillende apparaten weer te geven, boden ontwerpers aangepaste productversies voor verschillende doeleinden.
Progressive advancement houdt in dat wanneer we een product ontwerpen, we eerst een versie bouwen voor de relatief lagere browser (zoals die op een mobiele telefoon). Deze versie bevat de meest elementaire functies en kenmerken. Daarna neigen we naar de geavanceerde versie voor een tablet of pc, die wordt gemaakt door interacties, meer gecompliceerde effecten, enz. toe te voegen aan de basisversie voor een betere gebruikerservaring.
Bij graceful degradation begint het productontwerp vanaf een geavanceerd einde zoals desktop en bouwt aan het begin een versie met goed afgeronde functies. Vervolgens maken ontwerpers het product compatibel met mobiele uiteinden door enkele functies of inhoud te verwijderen.
definitie
Responsief webdesign is een methode waarmee -aan de hand van css- websites automatisch schalen bij verschillende schermgroottes, zodat de inhoud wordt weergegeven op een manier waarbij bezoekers zich comfortabel voelen. Responsief webdesign vermindert de handelingen van gebruikers, zoals inzoomen en scrollen tijdens het surfen aanzienlijk.
Als het ontwerp van het mobiele eindproduct als uitgangspunt wordt genomen, met beperkingen zoals bandbreedte, schermgrootte enzovoort, zullen ontwerpers de belangrijkste punten van een product aangrijpen en op zoek gaan naar een slank en netjes product met de meest belangrijke functies. Wanneer het platform echter wordt uitgebreid naar een tablet of pc, kunnen ontwerpers profiteren van de unieke kenmerken van deze geavanceerde uiteinden om het product stap voor stap te versterken, ook wel progressieve vooruitgangsstrategie genoemd.
Mobile first ligt in het verlengde van deze "progressieve vooruitgang". "Mobile first", zoals de naam al doet vermoeden, betekent dat we het productontwerp beginnen vanaf het mobiele uiteinde, dat meer beperkingen heeft, en vervolgens de functies uitbreiden om een tablet- of desktopversie te maken. waarom "Mobile First"?Behalve de overwinning van progressieve vooruitgang tegen sierlijke degradatie, zoals hierboven vermeld, hebben we meer tastbare redenen om te geloven dat het principe van mobiel eerst belangrijk is bij productontwerp. Dat wil zeggen, de explosie van mobiel gebruik. 1. Mobiel internetgebruik heeft in 2016 het desktopgebruik overtroffen.2. Mensen hebben steeds meer tijd op internet doorgebracht vanaf mobiele apparaten.3. Begin 2012 heeft de verkoop van smartphones de pc-verkoop ingehaald. productontwerp "Mobile First"De sleutel tot het mobile first-principe is in feite een op inhoud gerichte geest.Ontwerpers kunnen wanneer ze het mobile first-principe toepassen op verschillende websites of mobiele apps, snel beginnen met een handige prototyping-tool om hun ontwerp tijdig te testen en mogelijke problemen in een vroeg stadium op te sporen en op te lossen. Op deze manier zijn ontwerpers in staat om op een soepele en efficiënte manier een product voor meerdere doeleinden te creëren in plaats van meedogenloos die goede eigenschappen te verwijderen om een bijzaak te krijgen.Kortom, het "mobile first"-principe speelt een belangrijke rol bij productontwerp. Enerzijds helpt het om ontwerptijd te besparen en de productiviteit van ontwerpers te verbeteren. Aan de andere kant dwingt het ontwerpers om meer aandacht te besteden aan de inhoud van een product, wat hen helpt om praktische ontwerpen te maken.En een desktopversie wordt dan verkregen door meer functies aan de mobiele versie toe te voegen en het weergavegebied voor promoties en advertenties te vergroten .
best practices
Last updated