U bent hier: home » blog
      webshop UX

      Knoppen met vooruitgangsweergave verhogen gebruiksvriendelijkheid van webapplicaties

      Gebruiksvriendelijkheid beschouwen we bij Korazon als een van de belangrijkste factoren voor het succes van een website, webshop of webapplicatie. We zijn voortdurend op zoek naar manieren om de usability van onze online projecten te verbeteren. De integratie van vooruitgangsbalken bij knoppen is er één van. 

      Gebruiker verwacht vooruitgangsinformatie

      Als je in een webapplicatie op een knop klikt, stel je het wellicht op prijs dat je kan zien dat de gevraagde actie aan de gang is. Daarom wordt vaak een vooruitgangsbalk geïntegreerd in de knop, die meteen verschijnt na het klikken en blijft lopen tijdens de duur van de actie - doorgaans enkele (milli)seconden.

      Denk bijvoorbeeld aan het toevoegen van een product aan het winkelmandje in een webshop. Bij deze actie wordt ook de prijs van het mandje herberekend – een actie die misschien maar een seconde duurt, maar een gebruiker verwacht wel die directe feedback na zijn klik op de knop.

      Factor voor online succes

      Een dergelijke vooruitgangsbalk draagt bij aan de gebruiksvriendelijkheid of user experience (UX) van een webapplicatie, wat wij bij Korazon beschouwen als een cruciale factor voor het slagen van een online project. Als webontwikkelaars hebben we voortdurend oog voor de usability en technische implementatie van websites en webshops. De knop met vooruittgangsweergave zagen we voor het eerst op de webshop van Coolblue. Intussen hebben we hem zelf al in verschillende webwinkels geïntegreerd. 

      Voorbeelden van vooruitgangsbalken

      Op het internet vind je veel verschillende knoppen en stijlen. De 3D-knoppen van Tympanus dragen onze voorkeur. Ze zijn volledig in CSS geschreven en vragen dus geen extra scripts. Er zijn diverse types beschikbaar, die makkelijk te implementeren zijn in webapplicaties.

      Vooruitgangsweergave knop voorbeeld Tympanus

      Dit is een voorbeeld van een eigen implementatie van Korazon:

      Vooruitgangsbalk in knop webshop UX

      In deze webshop kan de gebruiker met één klik meerdere varianten van een product bestellen. Dit wil zeggen dat er in één actie verschillende items aan het winkelmandje toegevoegd worden. Om duidelijk te maken dat ze allemaal toegevoegd werden na het klikken en dat de prijs herberekend wordt, maken we gebruik van een knop met vooruitgangsbalk.

      Meer voorbeelden van knoppen vind je bij Tympanus.

      Als je vragen hebt over vooruitgangsbalken, dan mag je zeker iets laten weten! Of heb je zelf nuttige tips om de gebruiksvriendelijkheid van webapplicaties te verhogen? Geef gerust een seintje, we luisteren er graag naar. 

      Lees meer van Redney op Linkedin 

       

      Contacteer ons voor een openhartig gesprek

      20 februari 2017 - Redney Neve, webshop specialist bij Korazon
      Tags :webshops, webapplicaties, user experience, user interface, usability