Skeleton screens header image

Skeleton screens

zaterdag 28 september 2019 ·Leestijd: 2 minuten
contacteer auteur:

Het is helaas niet onvermijdelijk om laadtijden te voorkomen op uw website, de gebruiker zou een trage verbinding kunnen hebben om welke reden dan ook. Skeleton screens is een mooi alternatief op een normale loading spinner. Een loading spinner zorgt namelijk voor een hoge bounce op uw website.

Door uw doordachte ontwerp al enigszins vorm te geven in de vorm van content placeholders in combinatie met animatie, kan dit voor de gebruiker al interesse wekken, waardoor het geduld van de gebruiker verlengd kan worden en de bouncepercentage verlaagd kan worden.

Dit concept noemen we skeleton screens, Apple heeft dit meegenomen in haar Human Interface Guidelines. Ook grote bedrijven als LinkedIn, Slack en Facebook maken gebruik van skeleton screens.

skeleton-linkedin.jpg

skeleton-slack.jpg

 

Hoe maak je dan skeleton screens?

In onderstaand voorbeeld maken we een aantal lijnen die we in kleur laten animeren in de vorm van een alinea. Hiermee geven we de gebruiker al het idee dat hier een alinea komt waar de gebruiker info kan vinden in de vorm van een alinea.

 

We maken eerst een aantal lijnen aan in de HTML, dit doen we als volgt.

<div class='text-input__loading'>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
  <div class='text-input__loading--line'></div>
</div>

 

We geven de lijnen vervolgens in CSS wat hoogte mee en een pulserende animatie om het laden duidelijk te maken.

.text-input__loading--line {
        height: 15px;
        margin: 15px;
        animation: pulse 1s infinite ease-in-out;
}

Vervolgens gaan we er voor zorgen dat het pulserende effect doorgevoerd wordt in de kleur van de lijn. Namelijk lichtgrijs op 0%, donkerder grijs op 50% en vervolgens weer lichtgrijs op 100%, zodat dit in een loop mooi animeert.


 

@keyframes pulse {
    0% {
        background-color: rgba(165, 165, 165, 0.1)

    }
    50% {
        background-color: rgba(165, 165, 165, 0.4)
    }
    100% {
        background-color: rgba(165, 165, 165, 0.1)
    }
}

Vervolgens geven we in de CSS aan hoe breed elke lijn mag zijn. Zo kun je dus de gebruiker het gevoel geven hoe de content er ongeveer uit gaat zien, let wel op je geeft de gebruiker een verwachting en die moet hier wel aan voldoen.

.text-input__loading div:nth-child(1) {
  width: 50px;
}

.text-input__loading div:nth-child(2) {
  width: 100px;
}

.text-input__loading div:nth-child(3) {
  width: 150px;
}

.text-input__loading div:nth-child(4) {
  width: 100px;
}

.text-input__loading div:nth-child(5) {
  width: 150px;
}

.text-input__loading div:nth-child(6) {
  width: 250px;
}

.text-input__loading div:nth-child(7) {
  width: 250px;
}

Zie hier mijn codepen om mijn code in te zien.


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º