Streaming live at 10am (PST)

UI improvement : edit values, something that both Macaw and Reflow do better than Webflow


#1

Editing values in Webflow is perfectible.

  1. the arrow at the right of the fields are the most tiniest pieces of UI ever made by mankind (Webflow is ran by very agile elves, I concluded wink
  2. the fields often are so close to the edge of the screen that you miss a click and click on the elevator, the page then jump up or down
  3. apart from the 10x shift multiplier, there is no helper

Macaw and Webflow have it better, and it works like a charm. Click and drag on the field symbol and adjust the value.

Macaw

Adobe Edge Reflow

And it's even perfectible. It could be like in Photoshop, where, you can cmd+click+drag within a field to set value, and add +ALT to be able to set it slower, finer, and Shift to speed it up.

Photoshop

And you could go beyond that! Adding CTRL to the recipe to go from round value to round value.

I think this is the one piece of UI behavior that I cringe a little bit with on Webflow.

The holy grail would be:

  1. Cmd+click/drag on the field to drag to set value (so you keep the click on the label which is a feature in WF)
  2. Shift+Cmd+click/drag to speed up the increment
  3. Alt+Cmd+click/drag to slow down
  4. Any of the above + Ctrl to stick to round or known values.

Thanks for listening.


#2

+1 to everything that was said above! UI changes are needed, especially in the field sections, the arrows are too small!


#3

I agree.

However, the padding + margin settings are very nice to use already.


#4

Oh yes I should have mentioned that I like the padding margin and the positioning panels.


#5

Great suggestions! What about math operations in the input fields? That would be awesome!
Another thing I would love is... For example you have a value of 100 px. When you put the cursor behind 100 and type pct or %, ENTER or tab, it will change the value to percentage. Vice versa for px or even em. Without clicking on the small dropdown.


#6

Haha! You should be our copywriter! Love it.

It's true our input buttons are very simple and conservative in the UX sense. We'll play around with the ideas you suggested.

When you put the cursor behind 100 and type pct or %, ENTER or tab, it will change the value to percentage. Vice versa for px or even em. Without clicking on the small dropdown.

@Benzai_san That's the current behavior. How would you like us to improve it?


#7

Cool! I didn't know it is the current behavior. I also didn't know you could use em for the font sizes inputs, very nice.


#8

Haha! You should be our copywriter! Love it.

Lol, Kyle already asked me for quotes ;p

To close on this topic, I kinda forgot to deal with the problem in a more universal manner.

Why do editing values work on Macaw and Reflow and not in Webflow?

They all are visual design tools. It means when you change something, you look at the design, not the controls. Once the first click on the controller made, you should not be obliged to keep looking at the control panel, but only at the design. The software has to "capture" the cursor and lock it into a set of functions until the click button is released. That should be true for most of the controls.

And I can't help it: not buttons, more a "capture zone" with visual indicator of what you can do with it. (raise the question: do people prefer to grad horizontally or vertically for values? Adobe's says horizontally)


#9

+1 on the "capture the curser".

I also found the panel hard on the eyes. When just starting out workflow would grind to a halt as I hunted for tiny buttons. Found myself fantasizing over a 'brighten and enlarge' on hover/ roll over' interaction.

Life is better with Webflow.


#10

I love that this forum post exists. heart_eyes And I think @vincent may be onto something with those vertical capture zones.

Vertical drag makes more sense to me for these input boxes.. not only because up/down seems like more of a universal +/- but also because there are times when the right sidebar may be up against the screen, leaving no space to drag.

Also agree that clicking on the box should auto-select it, and we've been trying to improve this in our newer components smile


#11

I'm quite happy using the up and down arrow keys. Have you tried that?


#12

Oh yes of course, use it all the time, with Shift for x10 increments of course.


#13

Autodesk also use capture + vertical, and I think 3DS MAX 1 may have been the first software I used using capture + drag... must have been around 1997. And I don't know if it's possible to code that for web apps, but their approach would ignore all screen of apps boundaries : once captured, you could increment/decrement as long as your mouse could go. On 3DS MAX 1.0, the Windows cursor would reach an edge of the screen (say the top one) and reappears on the bottom, infinite drag. Since 3DS MAX 2, the cursor is stuck where it has been captured, allowing you to set the value without any edge blocking you. Once released, the control lets the cursor where it has been captured.

One Windows software had it even better, but it would take me weeks to find it back and make captures. It was a companion for Corel Draw 5 to make isometric designs. It would capture the cursor and freeze it like Max, but it would make it move slightly in the direction you were dragging... not much, just to give you a sense of "you're in control here, it's not a bug". The cursor would move in a 15 x 15 px area, maximum, I recall. This companion software was coded in VBA I think, because Corel Draw was friendly with VBA, or in Delphi because this company was doing a lot of things with Delphi.

So are you limited by your in-browser approach on that "no-edge" or "cursor-freeze-capture" matter?

Edit : went to try how Cinema4D does : the most tiniest zone to click on, ever, vertical, affected by screen boundaries. (= not so good).


#14

I personally think up and down are the way to go. Left and right are limited especially as the right panel is on the edge of the screen (so incrementing upward will be limited with horizontal drag).

Here are two things that I feel need to come across with a new button+drag design:

  1. It has to be easy to use from the get go. So up and down arrows should still be there for this obvious reason.
  2. It has to convey "drag" in the icon. This part is tricky, but it can be done.

Here are some ideas:

The first, second, and last use up and down arrows. Ideally the user can click the top and bottom hitzones to increment value, but as soon as they drag any part of the button it will initiate vertical drag increment. Shift+drag will increment faster and command+drag will increment slower.

I also found the panel hard on the eyes.

@FutureCompost we're working on that as well.


#15

The first one is I think the best design: arrows are there and what's in between conveys the "handle" idea.

What about making this 2x or 1,5x as large? I find them very tiny to aim at, at least not comfortable to, and we use that all the time.


#16

I'll see what I can do. thumbsup


#17

Hmmm...I'm a big Maya and Mudbox user. Totally off subject but since you are migrating to Cinema 4d from Max (which i use to use) why not make the big leap to Maya? Geodesic Voxel Binding changes the way you can rig now, fluid dynamics and PTEX integration. Then switch to mudbox for auto Retopology (for low or high poly models) send all edited texture channels back to Maya. The UI has been revisited with new and smarter tools. Just a side note there wink


#18

Oh I'm not transitioning... I'm a 3D enthusiast but I rarely had to produce something paid. In another life I was an editor for computer software books abt internet and graphic design so I had time to use certain softwares in-depth. I'll be back at doing 3D soon (printers are coming smiley ). Your advice may be wise but I'll probably go where my friends are, Cinema 4D and Max, meaning where I can find good quick help whenever.


#19

Hello Vincent. Just wanted to know how you create those gifs to show your examples. What program do you use? Thanks!!


#20

This improvement is going to be great!

Another thing that would be awesome is if we could customize the panels.
When working on large screen it would be great to f.ex have the layers hierarchy panel visible at all time to have control over the page structure & make faster edits. What do you think?