Hi everyone!
Since the new SC Flow Designer was presented recently, I want to talk again about the current Workflow designer.
I criticized it for a long time. But on fundamental level I like this concept. I like that nodes are compact and they go from top to bottom like a regular code.
I feel that this approach is the strong side of Wappler.
But current Workflow designer have critical issues with UI/UX
Here is an example of some workflow.
It is impossible to understand what’s going on here. I instantly get a headache when I open such a workflow.
But it is not a fundamental problem of this type of workflow designer.
This is just specific problems and mistakes in current UI/UX. And I believe it could be solved.
Core problem is that nodes are not distinguished enough visually. That’s why it is hard to visually read the hierarchy levels of it. Which is important.
I see 3 different options that can be applied here. They can be used separately or combined together for better effect.
.
Option 1. Get rid of the chevrons (by the left side of the nodes)
Chevrons prevent the easy reading for the left border of the node. So it interferes with the whole visual reading for the node’s hierarchy.
But if we delete them, then how are we gonna understand, that node can be expanded?
I suggest making subheading nodes (EXEC, THEN, ELSE, etc.) always visible. And they also keep chevrons, but they will be on the right side.
Here the result.
It’s not much, but I believe it will improve the quality of UX/UI here.
.
Option 2. Make subheading nodes (EXEC, THEN, ELSE, etc.) less attractive
Currently those nodes have problems:
- They add additional level to node’s hierarchy
- Their style is the same as regular nodes: icon and white font color.
So we have to delete the icons, make the font gray and bring the node to the same level as child nodes placed.
Result: (combined with the option 1)
So Workflow’s look became concise.
Another style:
I think those 2 options significantly improve Workflows.
.
But the problem with chevrons is that they exist not only in Workflows, but in other places in Wappler too.
Particularly the problem also persists in App Structure. And proposed solutions are not suitable here.
So I want to suggest another option, that is more universal, therefore it can be used in any place in Wapper.
.
Option 3. Make different background colors for different node levels.
That means the background color’s alterations:
1 level - dark gray,
2 level - light gray,
3 level - dark gray again,
etc.
Take a look. It is still a bit complicated, but better than the original.
Also, the same, but with little different composition.
So every node group gets an easily distinguished vertical border on the left. It is seen despite the presence or absence of chevrons.
And here how the same approach is gonna look at the App Structure.
In Workflows this option could be enhanced by combining with options I talked about at the beginning.
Here is the look, when you reduce the accents on subheading nodes. (EXEC, THEN etc.)
And here the result, when combining all the proposed options together. That includes to get rid of chevrons on the left.
I think it looks quite clean and easy to read and edit.
.
By the way, one of the things that I always wanted in Workflows - is to make titles/descriptions for every node. I just read that this option is planned, so here is how the same layout will be with this addition.
.
I’m very curious to hear what you guys think about all my thoughts and suggestions.
.
What UI/UX of Workflow designer do you like the most?
- One of the proposed above (“chevronless” and/or “striped”)
- Current Workflows (Wappler 5)
- New Connect Flow Designer (Wappler 6 Beta)
- I don’t like any of it.
0 voters
