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
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
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:
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)
Shift+Cmd+click/drag to speed up the increment
Alt+Cmd+click/drag to slow down
Any of the above + Ctrl to stick to round or known values.
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.
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?
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)
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.
I love that this forum post exists. 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
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).
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:
It has to be easy to use from the get go. So up and down arrows should still be there for this obvious reason.
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.
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
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 ). 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.
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?
And I think 
). 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.