Menu PLint-sites Webdesign en Webapplicaties
logo PLint-sites

PLint-sites

Webdesign - Webapplicatie klein pijltje

Interactie met javascript

Vroeger bestonden webpagina’s uit HTML en was er nog niet echt sprake van design en interactie of gebruiksvriendelijkheid. Met de komst van CSS is er veel meer mogelijk geworden wat betreft design op het web. Daarnaast zijn er door de komst van Javascript heel veel mogelijkheden ontstaan om gebruiksvriendelijke websites te bouwen. Op moderne websites is Javascript dan ook niet meer weg te denken en verloopt eigenlijk alle interactie tussen de gebruiker en de website via Javascript.

Gebruiksvriendelijkheid

Het is de taak van de website bouwer om te zorgen dat een website gebruiksvriendelijk is. De bezoeker van een site moet snel en gemakkelijk kunnen begrijpen wat een website hem te bieden heeft en wat hij moet doen om via de website iets gedaan te krijgen: Moet ik even wachten, of juist op een knop drukken? Wat moet ik in dit vakje invullen? Is mijn bestand nu al voor 100% geüpload? Al deze vragen kun je met een gebruiksvriendelijke interface eigenlijk voorkomen. Hieronder zetten we een aantal voorbeelden op een rij hoe een website gebruiksvriendelijk en intuïtief gemaakt kan worden door de inzet van Javascript.

Formulieren invullen

datepicker

Om te registreren voor een nieuw social media platform, een hotel of vakantie te boeken, of om informatie te versturen wordt op websites vooral gebruik gemaakt van formulieren. Hier kun je vaak simpelweg tekst en getallen invoeren, maar bijvoorbeeld ook bestanden uploaden. Wordt een datum of een tijd gevraagd in één van de velden? Dan is een datum- of tijdkiezer een handig hulpmiddel om snel en correct een datum of tijdstip te kiezen.

Voordat je een formulier opstuurt door onderaan op een knopje te klikken is het belangrijk dat de gegevens correct zijn ingevuld. Het is dan ook wel zo prettig als je direct feedback krijgt bij het invullen. Is de postcode niet in het goede formaat getypt? Bestaat dat e-mailadres dat eindigt op gmai.com wel? Wanneer de bezoeker in een vroeg stadium al geholpen wordt bij het invullen van een formulier zal dat ook veel gemakkelijker gaan. Daarbij komt dat het veel ergernis kan voorkomen waardoor er uiteindelijk meer bezoekers zich aanmelden of hun reservering voltooien.

Voortgang monitoren

progressbar

Ditzelfde geldt wanneer er een mogelijkheid is voor het uploaden van een foto of bestand. Het is belangrijk om de gebruiker te laten zien wat de status is. Zeker als het om grote bestanden gaat waardoor het uploaden langer duurt, is het handig om een voortgangsbalk te tonen om te laten zien hoe het gaat.

Wachtwoorden

wachtwoord sterkte meter

Een ander voorbeeld betreft wachtwoorden. We weten allemaal dat het lastig is om voor elke webshop of website waar je een account moet aanmaken weer een uniek wachtwoord te bedenken dat je ook nog kunt onthouden. Toch is het van belang om een zogenaamd sterk wachtwoord te gebruiken zodat je gegevens veilig zijn. Een metertje dat aangeeft hoe sterk een wachtwoord is kan dan uitkomst bieden. Zo voorkom je een zwak wachtwoord! Probeer het zelf met de wachtwoord demo hiernaast.

Ook in webwinkels wordt veel gebruik gemaakt van Javascript. Wat dacht je van de zoom mogelijkheden als je een product bekijkt (houd je muis eens boven de foto met de fietsers!) of zelfs een 3D view van je nieuwe keuken of badkamer? Daarnaast kun je het zoeken op een webshop vereenvoudigen door gebruik te maken van autocomplete. Wanneer je start met typen worden er automatisch suggesties gedaan om je zoekopdracht mee aan te vullen en er kunnen zelfs realtime zoekresultaten getoond worden!

Conclusie

Al met al zijn er oneindig veel mogelijkheden om Javascript in te zetten om een gebruiksvriendelijke pagina te maken zodat bezoekers van de website te allen tijden weten waar ze aan toe zijn! Bij PLint-sites hebben we ruime ervaring in het bouwen van gebruiksvriendelijke interfaces waardoor jouw website een succes wordt!