Redesign concept for Workflow page

[nickneustroev]

Thank you for your valuable feedback!

Although, the left icons still need to be there to expand and collapse nodes, rather than the serial number.

I agree that should be obvious indication if specific node can be expanded. For seeing inner nodes or for comment. And of course white arrows we use now is common and solid solution. But I think it is clumsy and heavy in part of visualization.

So my idea, is that we could use serial numbers itself instead of arrows. For example, circle around the number could be indication, that there is something inside. We can click on this number-button to see inner nodes or comment.

In this design layout color circles means inner nodes (orange for if/else, blue for repeat etc) and gray circles means comments. I wasn’t sure about this layout so I didn’t put it in first post.

If you still doesn’t comfortable with this option, can you please describe in more details why?

Similar question about comments. Why exactly my version doesn’t suits you?

[nickneustroev]

@JonL

You brought to the table an interesting request.

Thank you!

@TomD

One thing you can be sure of is that you won’t come up with a solution which everyone likes

At least we should try

[George]

Very interesting discussion! I like the suggestion about more boxed design.

We are actually already doing some research to build a whole new flow based editor. So keep the great ideas coming!

[artildo]

Great idea, I think. Worth considering. Wappler offers very flexible server-side logic and deserves appropriate visual solution for that.

[otavionestares]

Wow!! This would be great!! Very clear!!

[TomD]

If a redesign is being worked on, it would be great if a search facility could be incorporated - eg to search according to @Antony’s suggestions made here:

…it would be a great time saver to be able to search for the names of:

• Database Queries
• Set Value
• Set Session

And maybe some other things…

I think this is one of those features which somehow got lost, due to misunderstanding perhaps. This request was closed with:

Search input has been added to server connect panel in Wappler 4.0

… but unless I misunderstood the request, this hasn’t been implemented (or perhaps I’ve managed to overlook the feature).

[sid]

@nickneustroev

If you still doesn’t comfortable with this option, can you please describe in more details why?

I would still prefer the arrows. They might not be aesthetically pleasing… But they will be easier on the eyes compared to numbers and circles.
And the border around nodes and numbers seem like too many borders now. Also, since the numers keep restarting from 1, its disorienting.

@nickneustroev

Similar question about comments. Why exactly my version doesn’t suits you?

Its taking up too much space and are too in focus.
In a regular code file, comments can span many lines without any hinderance.
Wappler’s list of steps need some other solution so that comments can disappear and still be usable when needed. Don’t have anys ideas yet.

[JonL]

Indeed. You need some type of indicator that shows if the node is collapsed. Arrows or else.

[nickneustroev]

Thank you very much for the details! All noted.

@sid

I would still prefer the arrows

Got you. I will prepare alternative layout with arrows.

@sid

so that comments can disappear and still be usable when needed

Just in case, maybe I wasn’t clear about comments before. If so, my bad. I meant, that comments not supposed to be shown always. Every comment could be easily collapsed the same way that it was expanded – by clicking on number.

So basically, it is the same comments as it now. But less clicks needed for creation + multiple lines available if needed + specific comments can be hidden/shown in 1 click.

And about comments colors – it is open for discussion. For some reason I pick light grey color for comments background. But we can try another color, less bright.

[TomD]

@nickneustroev

specific comments can be hidden/shown in 1 click

An option to show all/hide all comments would also be useful (and/or an option to expand/collapse all steps).

[nickneustroev]

@JonL

Indeed. You need some type of indicator that shows if the node is collapsed. Arrows or else.

First option is thin circles around numbers.
Same as arrows, it works as indicatior and also as buttons.

It is ok solution, though not perfect.

Also, I gonna make another version of design layout, with classic arrows.

Maybe other ideas will come in mind on the way.

[JonL]

The problem with numbers is that it is not UX standard. So people will not understand intuitively what you can do with them.

Arrows, chevrons and plus/minus signs are the de facto solution for expanding and collapsing.

[Marc]

I really like the border idea as this would make it so much easier to read.

The concept of code collapsing should remain, but if the white arrows are removed then instead for code collapsing do what the code editor does by having a left margin that on mouse hover displays the arrows that allow you to collapse the code, and collapsed code arrows always remain visible until toggled back.

I personally don’t see the need for index numbers as I think this will create more confusion and visually you can see where each logical flow is especially with the colored borders

Agree with multi line comments that are collapsible, but would add a request for a global comment expand toggle switch on top of the page that will toggle expansion / retraction of all comments at once this would reduce a lot of mouse clicks. This is very similar to what Ken asked for in another post to have a global output toggle switch at top of the page, which would also be a great addition.

Thank you for creating this feature request, excellent idea.

[ben]

@George

We are actually already doing some research to build a whole new flow based editor.

Great! Either I stop making videos now or re-do them when the time comes.

Just joking guys, a change is as good as a holiday.

[psweb]

Lol, @ben, it’s a bit tricky to keep up hey.

However, I do love the idea.

[sid]

@nickneustroev

Every comment could be easily collapsed the same way that it was expanded – by clicking on number.

Not at all sold on the number thing.
Having so different collapses for every comment will be a big hassle. I like the idea about just a single show/hide for comments as suggested by others.
That way, the comments can look however they want, since they will not be always visible.

[bassoon.avowal.0f]

Hey Nick, wanted to chime in here. Amazing effort.

When building a visual design tool with user experience in mind, it’s really important to take advantage of the space you have, the whole canvas, similar to how a painter will take advantage of all the space on their canvas to tell their story. The same should apply here. The more breathing room each element of the logic interface has, not only will it be easier to read each element, it’ll be easier to understand the bigger picture that each element combined creates. It’ll also be easier to understand contextual fit for each element, which, in some instances, can be just as important. With all that said, I think that taking the approaches that AppGyver takes with their visual tool is ideal in that regard. Merely the simple premise of their logic tool immediately takes the most advantage of the canvas while also maintaining efficiency and high readability, which is impressive to say the least. They also cleverly made their logic elements to look like literal puzzle pieces, thus allowing us to immediately recognize each element as what it actually is, one piece that when combined with the others creates a completed picture. So, while I think your redesign is wonderful, I’d seriously consider looking at AppGyver’s take and stealing theirs.

[nickneustroev]

I wanna thank everybody for support, upvotes and detailed comments!
Seems like this topic is really needed and I have a feeling that our discussion will affect future design in Wappler.
.

It feels I should clarify why I am not comfortable with arrows.

First of all, yes, I love the idea with numbers. And if we keep both arrows and numbers, that means we have one extra column, so overall design gets more details and becomes more clunky.

But there is another problem. Arrows don’t appear in every line, so sometimes it is empty space instead of it. Because of that there is no imagined vertical line that helps us to understand that all steps are on the same level.

Here I see the sequence clear even without numbers.

But here it isn’t so easy. Arrows and empty spaces confuses me

I have some possible solutions for this problem. All acceptable, but I don’t like any of them too much.

1. Fill empty spaces with some elements. For example, with dots. It’s ok, but not quite good
   

   

2. Incorporate arrow to border. Original, but seems too unfamiliar. (but gets along with numbers)
   

   

3. Incorporate arrow to text. Accurate, but also strange. (also gets along with numbers)
   

   

That’s why I prefer circles.

But I also have some more ideas that don’t have anything to do with circles or arrows. Gonna show it later.

[nickneustroev]

@sid

I like the idea about just a single show/hide for comments as suggested by others.

That definitely should be, I agree.
But sometimes I just wanna see comments for specific nodes. This option should be available too.

[nickneustroev]

@Marc

having a left margin that on mouse hover displays the arrows that allow you to collapse the code, and collapsed code arrows always remain visible until toggled back

Good idea, thank you! I will try that

@bassoon.avowal.0f

So, while I think your redesign is wonderful, I’d seriously consider looking at AppGyver’s take and stealing theirs.

AppGyver is indeed an interesting tool with a nice UI.
But I am just trying to refresh the existing Wappler design without significant changes.

Of cause there are many different approaches for visual programming design. It would be interesting to examine them all in order to find or develop the best solution. But at the moment It is too complex and a big task for me to participate.