applies to: version 8.0x; author: Michal Rykiert
Even the most sophisticated and technologically advanced system will fail without user-friendly interface. As you probably know, WEBCON BPS Designer Studio allows not only to design workflows, but also forms. They are quite intuitive by default, but there are several quick tips that will help you make them even better.
Putting some extra effort in designing forms will save you a lot of time on:
- Trainings
- Simple questions that could have been avoided
- Helpdesk tickets
So let’s see what can be done to make user experience better.
-
Keep fields separated
Simple forms with several fields don’t require much attention since everything is clear at first glance. However, once your form fields number reach double digits (and that’s what usually happens), you have to start thinking about what to do to make your form well-organized and transparent. Have a look at sample form here:
It doesn’t look very inviting, doesn’t it? Lots of form fields put at once. It’s hard to tell if they are organized somehow or just displayed there with no particular order.
To improve transparency of forms, we’ve implemented special field called “Group”. It allows to separate form fields one from another and group them according to certain logic, e.g. specific matters they regards.
Take a look how form changed after using just 4 groups (Vendor information, Dates, Payment information, Registration information). Please note that original order of the fields hasn’t been changed.
Much better, isn’t it?
Each of those groups can be collapsed/expanded (also by default) in order to present users data relevant for them in particular step of the workflow.
Figure 1 Form field with two groups collapsed
How to create groups of form fields?
Go to the Designer Studio. Choose your process. Click on form fields. On a tool panel to the right, there’s an option to create new group:
Now you can simply drag&drop fields into groups:
After doing so, you can also additionally configure group by deciding if it should be collapsible, expanded/collapsed by default and also to set an order of form fields.
-
Let users know what’s going on
Let’s have a look at the whole form for a second:
For new users of the system may not be crystal clear what is required of them to do in this particular step/workflow. Thus they probably need to be trained first before they start using the system. This can be easily avoided though.
WEBCON BPS allows to put custom instructions directly onto the form. Each and every step of the workflow can have different task details defined. They’ll be placed on the right side of the form, directly above the Attachments area.
With Task details defined, users will see what is workflow all about and what has to be done in a particular step they are in.
Defining task details
Task details are defined in WEBCON BPS Designer Studio. The first (upper) part is defined on each step it’s supposed to appear. Just go to the step configuration, “General” tab and fill in a description.
The result would be:
The second part of Task details is defined on transition paths during task creation. Instructions will be displayed on a step that certain path leads to. Once you’re in path configuration and “Task creation” tab, simply fill in “Task details”.
Now you have all set information needed on the form:
Please note: the first step of the workflow doesn’t have any path that leads to it. Thus the first part of the instruction is defined in General workflow configuration in Description field:
-
Lend a hand with tooltips.
There’s another one simple trick to eliminate frequent questions like: “What do I put here?”, “What does it do?”, “How do I use this?”, that usually appear right after implementation. The answer is: tooltips.
Each and every field and transition path can have a tooltip defined which will be visible after hovering over certain field/path. Take a look on Description tooltip:
To define tooltip displayed for form field, just go to form field configuration in WEBCON Designer Studio and fill in a description.
The same method works for transition paths.
-
Seeing is believing
Although instructions and tooltips are usually enough to make users comfortable with the system, WEBCON BPS offers another visual aid that will help employees understand how workflows will behave. That things is a graphical preview of workflow, accessible directly from a form level.
It allows to get better oriented with business logic applied to the workflow. Users will see in which step they are currently in and what will happen next.
Configuration of graphical preview is really simple. Just go to the Designer Studio and click on a workflow that you wish to generate preview for. Then choose “Workflow designer” tab. After that, on the top of the screen a new section called “Designer tools” will appear with “Designer” underneath. Click on it in order to display available options.
As you can see, the very first option allows to generate preview. Click it. The system will confirm that generation was successful. Save the process to make it available.
-
Make life colorful
Some fields may be more important than others. Some of those you may want to distinguish from others to make sure employees involved in workflow will notice them. In order to do so, you can change coloring of form fields and button paths.
It is possible to change both texts and backgrounds with commands:
Color: red; – to change color text
Background-color: red; – to change background color
Please note: instead of “red” you can put any CSS color value. The expression may also look like this:
Color: #C0C0C0; – for grey text.
In order to change colors of fields, go to certain field configuration and choose “Style an behavior” tab, and input proper expression in one of available fields where you’ll be able to change field name color or value color. Try on your own various combinations. Please note: editable (visible) and read-only fields may look differently with same color applied.
To change path buttons’ colors, go to certain path configuration and put proper expression into “Button style” field:
Keep in mind you may combine color of text with color of background.
Example: background-color: red; color: green; will result in coloring background in red, and text with green.
Overall results may look like this:
Just remember not to overdue color experiments. The goal is to make users comfortable with forms, not to cause seizures :).