Gebruiksvriendelijke pagina's of schermen
Pagina / scherm

Alhoewel er bij websites meestal gesproken wordt over pagina's hanteren wij meestal de term schermen. Een pagina is een scherm met een eigen url. Vroeger was dit eigenlijk de enige manier om een scherm binnen een website te openen. Tegenwoordig zie je echter pop-ups, tabs tructuren, animaties en vele andere interactieve mogelijkheden die de volledig inhoud op je scherm vervangen. Vaak is daarmee de inhoud en het doel van de pagina veranderd. Elke keer als dat gebeurd spreken wij over een nieuw scherm.

Een gebruiksvriendelijk scherm zou aan de volgende eigenschappen moeten voldoen:

Snelheid

Laadtijd pagina

Zoals bij websites / webapps besproken is, is de laadtijd van een pagina essentiëel. Zeker qua perceptie. Dat betekend dat de elementen die er voor zorgen dat je de pagina herkent als pagina statistisch zijn. Voornamelijk de titel van de pagina moet direct uit de cache komen. Deze elementen zijn zo direct zichtbaar voor de bezoeker. Dit geeft de bezoeker een gevoel van snelheid en oriëntatie. Overige elementen kunnen later worden geladen en beïnvloeden zo niet de laadtijd van de pagina.

Snelheid andere schermen

Vaak wordt voor andere vormen van schermen gekozen om er voor te zorgen dat de bezoeker de pagina niet hoeft te verlaten. Daarbij moet nu eerst de vraag worden gesteld: als de pagina heel snel kan worden geladen, is dit dan nog steeds zo?

Mocht er toch voor andere vormen van schermen worden gekozen, bijvoorbeeld omdat het bewaren van de scroll positie essentieel is, dan moet er ook optimaal gebruik worden gemaakt worden van dit soort opties. Zodra de bezoeker klikt om zo'n scherm te openen dient er direct een reactie te komen. WIj doen dat door de popup, tab of elk ander element alvast in de pagina te verwerken. Zodra er geklikt wordt kan deze direct worden getoond. Enkel de inhoud hoeft dan nog maar te worden geladen.

Navigatie en orientatie

Eén scherm - één doel

Om een scherm gebruiksvriendelijk te krijgen mag het nooit meer dan één doel dienen. Heeft een scherm toch verschillende doelen of functionaliteiten? Deel dan het scherm op in meerdere schermen met een duidelijk navigatie tussen elk scherm.

Deze manier van werken is in app al vrij standaard. Het is ook op mobiel, waar schermruimte beperkt is, de meest praktische oplossing. Het afstemmen van het scherm zorgt ook voor duidelijkheid richting de bezoeker. In één oogopslag kan hij zien wat er op die pagina gedaan kan worden en wat er van hem wordt verwacht.

Compleet beeld boven de vouw

Dat wat je in eerste instantie op je scherm ziet moet een totaalbeeld geven over wat je verder op de pagina kan verwachten. Zie je op je scherm een lijst met nieuwsberichten dan verwacht je als je scrollt enkel nog meer nieuwsberichten te zien. Staat het helemaal onder de nieuwsberichten een optie om zelf ook een bericht mee in te sturen dan is de kans klein dat deze ook door veel bezoekers gevonden wordt. Als je zo'n functie aanbiedt, zorg dan dat deze boven de vouw al zichtbaar is.

Locatie

Als je een pagina opent begin je meestal bovenaan. Is dit echter het meest logische? In sommige gevallen kan het beter zijn om direct naar een bepaald deel van de pagina te verwijzen. Zo kan een bezoeker direct zien waarom hij/zij naar deze pagina is gestuurd.

Bij andere type schermen, zoals pop-ups en tab structuren is orientatie nog belangrijker. Deze dienen direct goed in beeld te komen zodra ze openen.

Titel

Niet alleen een pagina, maar ook alle andere schermen dienen voorzien te zijn van een titel. Deze titel geeft de bezoeker direct zin oriëntatie over waar hij/zij was. Dit voorkomt verwarring als er een paar knoppen dicht bij elkaar staan en je twijfelt op welke je hebt geklikt / gedrukt. Ook kan een bezoeker de website een tijdje open laten staan en na een tijdje weer terug keren. De titel laat de bezoeker dan direct weer weten waar hij gebleven was.

Terug

Als je een pagina opent moet het op de volgende pagina duidelijk zijn hoe je weer terugkomt op de vorige pagina of op een andere plek waar vanuit je weer eenvoudig kan navigeren door de website (bijvoorbeeld de homepage). Bij andere schermen, bijvoorbeeld popups, dien je eenvoudig te kunnen zien hoe je deze weer kan sluiten.

Interactie

Er zijn twee belangrijke interacties bij schermen: terug / sluiten en verder / openen. Terug en verder hebben te maken met pagina's en zorgen er voor dat de complete inhoud vervangen wordt. Sluiten en openen refereert meer aan ander soort schermen die bij of over het bestaande scherm geplaatst kunnen worden, bijvoorbeeld popups.

Terug en verder

In principe is de navigatie voor terug en verder gebaseerd op basiselementen die we al kennen: klikken op een link of de terug knop gebruiken in de browser. Alhoewel beide technisch goed werken, is de feedback minder. Of je nu terug gaat of verder: tijdens het laden van de pagina, hoe kort ook, zie je of geen verandering of een leeg wit scherm. Beide gevallen geven geen goede feedback over wat je actie correct wordt verwerkt. Om hier duidelijk in te zijn kan gebruik worden gemaakt van animaties:

  • Het wegschuiven (in inschuiven) van een scherm. Dit werkt vooral logisch als de opvolgende schermen ook als chronologisch worden ervaren.
  • Het wegfaden van de inhoud van de website. Dit werkt vooral goed als het opvolgende scherm gebruik maakt van dezelfde template en de inhoud dus weer op dezelfde plek verschijnt.
  • Het donker maken van de achterste laag. Dit werkt vooral goed als de interactie komt uit een bovenliggend scherm, bijvoorbeeld een mobile-first menu

Openen en sluiten

Bij schermen die niet via een url geladen hoeven te worden is de tijd tot verschijnen zo kort dat een animatie hiervoor weinig zin heeft. Wel kunnen animaties helpen de bezoeker te oriënteren. Als bijvoorbeeld een pop-up gesloten wordt kan deze in een animatie kleiner worden en eindigen op de plek waar de knop zit om deze weer te openen. Zo weet de gebruiker direct waar de pop-up weer terug gevonden kan worden.

Meten

Laadtijd

Zoals boven al beschreven is, heeft laadtijd een impact op het gedrag van bezoekers. Daarom nemen we de laadtijd van een scherm mee in onze statistieken. In sommige gevallen is het niet de inhoud, maar de laadtijd die het gedrag van de bezoeker verklaart.

Openen en sluiten

Naar welke functies en welke informatie zijn mijn bezoekers op zoek. Deze informatie wordt deels beantwoord door te kijken welke schermen zij openden. Daarom meten we elke keer dat een scherm opent en sluit. Dus niet alleen het laden van pagina's, maar ook elke popup, tab en alle andere vormen van schermen.