Front tools

At 4BIS we are continuously working on new building blocks to the make our lives, our users lives and their users lives easier! We create our own flexible parts the we can offer to our customers.

At 4BIS we are continuously working on new building blocks to the make our lives, our users lives and their users lives easier! We create our own flexible parts the we can offer to our customers. While creating a platform/website, it’s important that it’s easy to follow for your users. This goes from the location of a button to filling in a form or creating new accounts. How the user experiences his visit to your website is called User Experience (UX). The things a user sees on the website, like colors, shapes and the layout, is called User Interface (UI).

To make the users experience as fluent as possible, we developed so called “front tools”. These are tools that we make available to the user to make their experience on the website as good as possible!

During the development of these tools, we make sure that we can re-use them in all the projects, and not make them project-specific.

You’re probably familiar with one of these tools!

One of the most well known tools that we uses are “Wizards”. If you’ve ever installed some software on your computer, then you’ve probably used a wizard to do so.

A wizard is a form that you follow in steps, on each step you make some simple choices or you enter some information. Therefore the user doesn’t get a full form with a lot of fields given to them, but they can fill the form step-by-step. Things can get overwhelming when you see all the fields at the same time and it’s easy to lose the overview.

Another pro of wizards is that after each step you can take specific actions. For example, we can save the progress after each step so that when the user accidentally closes the tab, leaves the page or something goes wrong, they won’t have to start over.

One of the tools we use in almost every project, are the Slideouts. Slideouts are tabs the come from the side of the screen with content in them.

Slideouts give you the possibility to create new data, edit something or do other tasks without leaving the page. If you have to select a customer in a form, but you haven’t placed the customer in your system yet, you can open a slide to create the customer. After the slide closes you can then select the new made customer in your form without having to leave the page and lose unsaved changes.

In theory Slideouts can be stacked infinitely. They are (usually) not related to the context of the page.

On most platforms or website you will find a table somewhere. This can be a regular table to display, for example the prices of a service or product. These are usually not big tables and they don’t have dynamic content. However, when you look at a table that holds all of the users in our platform or website, then this table is going to get a little bigger. That’s why there’s some solutions that will “upgrade” our tables. We always make our tables with pagination, this means that data won’t be fetched from the server all at once, which makes for way quicker response times. Also, a sort button will be added to the columns, for sorting your data. Along with that we can create custom filters in order to make it easy to search for very specific data. There is also the possibility to make exports to CSV files (Excel). Tables created this way are better known as DataTables, jQuery DataTables is the most well-known.

Today, these tools are pretty much a “must” on modern platforms/websites. It helps you keep the overview and helps you with controlling your data. And the most important thing, it helps your users with a fluent experience!