Front tools

Bij 4BIS zijn we continu bezig met het bedenken van nieuwe bouw blokken om ons, onze gebruikers en de gebruikers van onze gebruikers het leven makkelijker te maken! We maken onze eigen flexibele onderdelen die we kunnen bieden voor onze klanten.

Bij het maken van een platform/website is het van belang dat het voor je gebruikers makkelijk te volgen is. Dit gaat van de locatie van een knopje, tot het invullen van formulieren of het aanmaken van accounts. Hoe de gebruiker zijn bezoek aan de site beleeft noemen we User Experience (UX). Wat de gebruiker ziet op de website (kleuren, vormen, layout), noemen we User Interface (UI).

Om de gebruiker zo’n vloeiend mogelijke ervaring te geven ontwikkelen we zogenaamde “front tools”. Dit zijn tools die voor de gebruiker ter beschikking gesteld worden om hun ervaring op website zo goed mogelijk te maken.

Bij het ontwikkelen van zo’n tool letten we erop dat we hem eenvoudig opnieuw kunnen gebruiken in een ander project.

Je bent vast en zeker al bekend met een van deze tools.

Een van de bekendste tools die wij gebruiken zijn “Wizards”. Als je ooit een keer een programma hebt geinstalleerd op je computer, dan heb je waarschijnlijk gebruik gemaakt van een wizard.

Een wizard is eigenlijk een formulier wat je doorloopt in stappen, waarbij je voor elke stap een aantal simpele keuzes maakt of gegevens invult. Hierdoor krijgt de gebruiker niet direct een overweldigend formulier vol met velden voorgeschoteld, maar kan er stap voor stap gefocust worden op welke velden ingevuld moeten worden. Het kan overwelmend zijn als je alle velden tegelijk ziet en kan ervoor zorgen dat je het overzicht kwijt raakt.

Een ander voordeel aan een wizard is dat er na elke stap ook acties uitgevoerd kunnen worden. Zo kunnen we bijvoorbeeld de vooruitgang bij elke stap opslaan, zodat wanneer de gebruiker perongelijk het tabblad sluit, de pagina verlaat of er tussendoor iets fout gaat, je niet alle gegevens opnieuw hoeft in te vullen.

Een van de tools die wij in bijna ieder project gebruiken zijn de Slideouts. Slideouts zijn eigenlijk tabbladen die uit de zijkant van het scherm komen waarmee we eenvoudig handelingen uit kunnen voeren.

Slideouts geven je de mogelijkheid om zonder van schermen te wisselen nieuwe gegevens aan te maken of andere acties te ondernemen. Als je in je formulier een klant moet selecteren die je nog niet in het systeem hebt gezet, dan hoef je terug naar een ander scherm om dit te doen, je kunt simpelweg een Slideout openen waar het “Nieuwe klant” formulier in staat. Je kunt dan vanaf daar een nieuwe klant maken, de Slideout sluit weer na het aanmaken van de klant en vervolgens kun je op hetzelfde scherm je nieuwe klant selecteren.

Omdat je niet hoeft te wisselen van scherm kunnen al je al ingevulde gegevens blijven staan en hoef je ze niet opnieuwe in te vullen!

Slideouts kunnen zich in theorie onbeperkt opstapelen. Ze zijn (meestal) niet gerelateerd aan de context van je pagina.

Op de meeste platforms of websites kom je ergens wel een tabel tegen. Dit kan een gewone tabel zijn voor bijvoorbeeld een overzicht van prijzen voor een klant, dit hoeft geen grote tabel te zijn en er staat niet veel dynamische data in. Echer, als we bijvoorbeeld naar een tabel kijken waar alle gebruikers van een platform in staan, dan kan de tabel wel veel groter worden. Daarom zijn er oplossingen die de tabellen upgraden. Wij maken onze tabellen altijd met pagina indeling, dit betekent dus dat je per pagina gegevens ophaalt van de server, dit zorgt voor veel snellere reacties! Ook wordt op elke kolom een sortkeer-knop toegevoegd. Daarnaast voegen wij voor onze tabellen ook uitgebreide filters toe, waardoor je zeer specifiek kan zoeken naar gewenste items. Als laatst kunnen we de tabel gebruiken voor het exporteren van data naar bijvoorbeeld een CSV file (voor Excel). Tabellen die op deze manieren zijn gemaakt staan ook wel bekend als DataTables, jQuery DataTables is de bekendse.

Vandaag de dag zijn deze tools eigenljik niet meer te missen in een modern platform. Het zorgt ervoor dat je snel en makkelijk te werk kunt gaan met je data en dat je het overzicht kunt bewaren en dat de gebruikers van je website/platform makkelijker te werk kunnen gaan, en dat is natuurlijk het belangrijkst!