New Workflow tab - Discussion Megathread

Especially since we read left to right in most languages today…I think vertical scrolls went out of production some centuries ago

Most people read left to right BUT also from top to bottom. This forum is a good example of it. Books are. Whatsapp messages. Etc etc. I think Vertical workflows are fine, especially when they flesh out the horizontal with the conditional branches. Seems the most natural way to draw a ‘flow chart’ to me, which ultimately is what it is. (but hey i wouldn’t say no to a H/V toggle switch!)

C
r
e
a
t
i
n
g
,

e
d
i
t
i
n
g
,

a
n
d

d
e
b
u
g
g
i
n
g

w
o
r
k
f
l
o
w
s

i
s
n

t

r
e
a
d
i
n
g

a

b
o
o
k

o
r

e
v
e
n

a

p
a
g
e

o
f

t
h
e

b
o
o
k
.

Y
o
u

r
e
a
d

s
e
n
t
e
n
c
e
s

a
n
d

p
a
r
a
g
r
a
p
h
s

i
n

b
o
o
k
s
.

T
h
e

u
n
i
t

t
h
a
t

s

a
n
a
l
o
g
o
u
s

t
o

a

w
o
r
k
f
l
o
w

i
s

a

l
i
n
e
.

L
i
n
e
s

a
r
e

h
o
r
i
z
o
n
t
a
l
.

Or in other words:

Creating, editing, and debugging workflows isn’t reading a book or even a page of a book. You read sentences and paragraphs in books. The unit that’s analogous to a workflow is a line. Lines are horizontal.

17 Likes

Nicely put Rando

1 Like

Well that’s extreme and unrealistic with a single character Rando.

Every heard of paragraphs? You read them stacked horizontally or vertically?
Ever used a code editor?
Ever seen a dropdown menu?

Can’t believe i’m having to defend suggesting that we happily use both left to right AND top to bottom, all the time (especially in a forum which is literally post after post stacked vertically).

2 Likes

Tried to use the new workflow editor – initial reaction was that I didn’t love it, but decided to give it a chance (sometimes change is hard, right?).

The more I’ve used it, the more I HATE it. Thank goodness this thread taught me how to revert back to the old one. Honestly, if this “new” workflow editor had been the prior, I would have been begging for something like what the “old” workflow does.

Bubble, please don’t make this the default. It’s a step backwards (or even many steps backwards).

2 Likes

After taking 90 minutes to read the feedback in this thread, here are my two cents.

I think most of the extremely harsh negative feedback has much to do with nothing other than people afraid of change – get over it haha.

The more reasonably critical feedback is mostly folks needing time to adjust to the changes; there is merit to some of the concerns and I’m sure the bubble team will get things right; give it some time.

Ultimately, I think the feedback on space does not take into account that branching hasn’t been added yet and I think once it’s added this feedback will cease to exist.

My personal feedback is removing the floating settings box and create a static right sidebar for the workflow action settings similar to pipedream (see attached image) and zapier with the ability to toggle and adjust it’s display. Also, give the user the ability to adjust the workflow size from fitting the screen to 200%-300%.

For me personally, that would vastly improve the new workflow tab because I’m constantly moving that box around to view the various details in my workflow.

But that’s just my two cents.

4 Likes

I’ve been using the new Workflow tab for a couple full work days now, and overall I really like it. It took some getting used to, but it already feels more natural to me. Here’s my feedback:

Likes :+1:

  • Removing the “All workflows” view requires you to select a folder. This helps minimize overwhelm a ton on pages with lots of workflows. I think it will greatly increase folder usage, as most the folks I chat with don’t know folders exist. They were too hidden before. This also opens up colors to be used more meaningfully (such as green for create a thing, red for delete a thing) instead of just breaking up the monotony of the grey boxes.
  • The above point also resolves my MOST HATED ISSUE with the old workflow page: when you copied a workflow from one page to another, if it was in a folder, you would get an error because the folder didn’t match in the new location. Now you have to paste it into a folder on the new page (even if it’s Uncategorized). Thank you so much for this! :heart:
  • Drag & drop between folders is great. Much easier to use than the former method of selecting it for each workflow.
  • Shows the triggers for the current workflow. This is amazing and I have already used it a ton. Traversing up and down a chain of flows that call each other is so important.

Needs work :-1:

  • I like that it shows the count of notes on the tree, but when you click “View Notes” from there, it shows just the notes of the main flow. In my case, this was empty. Since the count includes notes for each action step, I’d expect that top-level “View Notes” from the tree to show me all the notes for each action as well.
  • I expected a single click on the folder name to expand/collapse the folder’s contents in the tree. Take this with a grain of salt as I’m not sure I’m in the majority on this preference.
  • Adding “flow” to the end of everything seems redundant. If everything is a flow then why does it need to say flow? Alternatively, you could reinforce the different types of events like custom events and database triggers by saying “event” or “trigger” at the end instead of “flow” when appropriate.
  • Although the triggers menu is amazing, it’s still difficult to see the whole chain of workflows that get called. I’d love to see a view that shows all the flows that call each other in a single view.
  • Now that the workflow tab has a better view, it would be great to enable the “Lock Property Editor” view setting on the workflows tab like you have on the Design tab. I often have to drag the property editor around because it is hiding something important (like the new triggers menu).

Thanks so much, and keep up the good work!

2 Likes

There’s a lot of anxiety on the new vertical view. People got anxious when Bubble launched the updated expression editor too. I too was overwhelmed at first, but I’m getting the hang of the new WF editor.

Anyway, I’m pretty sure Flutterflow, Airtable and a bunch of other SAAS products still use vertical workflows.

Fit the design to the purpose, not the other way around. When you look at the editor’s roadmap, a vertical layout does work better for Bubble.

1 Like

Desktop and laptops are widescreen, phones are portrait. Aspect ratios have already been decided for us and cannot be argued against.

Yeah, i agree. Horizontal is the way. Most screens are too wide nowadays leaving lots of realestate. Vertical is just very limited. We get to see like 4 actions before needing to scroll.

3 Likes

It’s not too bad this new look, but why not stretch the boxes to be rows? It feels so much screen real-estate is wasted. Wouldn’t it be just better if the action stretched into full width and allowed more details to show — especially not truncacting text?

Also are the arrows really necessary? Since the whole workflow does not fork, the arrows seem redundant.

In that context then the new layout makes more sense.

1 Like

This kind of shows that they have designed the screen thinking their most of the users are working on tablets with vertical layout.

Would that be the case? I thought most would be using laptops with horizontal screens. Why won’t they design according to what most people use?

Maybe vertical flows would make sense for laptops with horizontal screens too, but then showcase in the screen that most people use instead of other way round, right?

1 Like

You might be overthinking this.

They needed to put 3 screenshots on their slide and the only way is to put these side by side and thus the format.

1 Like

But this wrongly assumes everyone is working at full screen or fully stretched out windows. Many people including myself do not, or they have two windows side by side etc.

It also assumes bubble has not already got plans for building things on the left and right sides, such as the nice panel idea suggested by lenox above.

A combination of the above could end up seeing much less space available in the middle. Here is what my bubble window already looks like right now, with the notes panel open. Can you imagine how awkward this would be with a horizontal flowchart? To accommodate horizontal bubble would need to seriously reconsider their otherwise ‘column’ layout of menus etc.

Again, not arguing here that vertical is a better way to display a flow chart than horizontal in general. Just saying i’m totally ok with vertical personally but ultimately the devs need to do what best suits their future plans.

2 Likes

No idea why you’ve opened an empty Notes tab to persistently and artificially take up screen space to support your argument, or why the left panel with all the workflows needs to be fully expanded, but I do think it’s funny that you’ve inadvertently demonstrated my key point.

I have no idea what’s going on in this workflow, since Steps 1-8 and steps 16-?? are completely cut off.

To argue your point even further, you should tape some pieces of paper to the left and right thirds of your monitor to only see the middle. Or you can flip your widescreen monitor vertically, as a small minority of the developer population does.

1 Like

I had thought of that aspect. But that only aids my argument. Their display screen was similar to a typical laptop. i.e. landscape screen. Now in that screen to show three scenarios they had to show three screenshots separately.

Now imagine if they had planned it for horizontal screen. In that case in one screenshot itself they could have covered all the points.

One screen encompasses three screens is just strengthening the argument of using horizontal screen to show workflow.

1 Like

As explained, to demonstrate what it could be like if bubble decides to build something in that space, like in lenox’s mockup.

Surely to see 7 visible steps is still better only seeing the 1 or 2 max that would fit in horizontally in this situation? (especially on a smallish laptop screen)

You can create any set of hypothetical conditions to support your argument. Like I said, desktops and laptops are widescreen for a reason. Nothing you type can change this.

1 Like