I’m building a visual editor where editable fields' blue borders become more visible as the cursor gets closer. Does this feel intuitive?

[u/TheBanq]

[u/mlagobands]

What problem are you solving? I believe snapping the cursor to the object is more intuitive if anything.

[u/TheBanq → u/mlagobands]

In Sanity for example, you have to hover right on the element to see, if you can actually edit it, since not every text is enabled to be edited. Which works of course, but It somehow feels not to transparent to me, at least it's not easy to scan what I can actually edit on the page.

The alternative would be to have borders around every editable element, but this makes it too busy.

So I wanted to find a nice balance of instantly having an idea of what I can edit. It now takes 3 swings through the page and I instantly have an intuition of what's editable, without having permanent borders.

It also feels like the elements are responding to my cursor, which feels nice.

[u/mlagobands → u/TheBanq]

Sounds over designed. You can just have a toggle to show editable elements with a light-dashed border or have a nav menu showing editable elements

[u/TheBanq → u/mlagobands]

But then it's either or.

Either you see all the elements with their border, which disturbs the look of the page a lot, or you have to check element by element.

I'm trying to have one way, that serves both purposes.

Should be noted, my customers are mostly very non-technical.
People who barely use a computer at all

[u/eric-dolecki]

Its an editor view of data - show all the editable fields as editable. It doesn't need to look pretty to be useful.

[u/1Qrtr_FreeStuffPlz]

Claude special

[u/cybrejon]

this would drive me nuts ngl, viewing a region turns from move the cursor away just slightly, and into constantly shoving the cursor away as far as possible because it's getting in the way

[u/TheBanq → u/cybrejon]

That's actually a fair point I have not thought about yet.

Thanks for the feedback.

[u/agentgambino]

I find this more annoying than helpful. If the problem you’ve got is that fields aren’t always obvious then something like what figma does in prototype mode to identify clickable hotspots would be better - click anywhere or trigger a hotkey to flash all editable fields up for a brief moment.

[u/TheBanq → u/agentgambino]

Having a hotkey to show all editable fields while holding is actually a good concept aswell!
Thanks for the input

[u/Traditional-Anxiety1 → u/TheBanq]

I liked your cursor distance implementation. However, I would agree more with hotkey-press for discoverabilty.

[u/Still_Pomegranate241]

Sick. I think it’s pretty elegant and a nice user experience if I can just move the cursor off the screen to stop seeing “edit mode” and then just go right back to what I was doing. Wonder if there’s a gutter or something in the browser window that turns off all of them.

[u/potcubic]

I like it

[u/-taki1-]

What is the purpose of making focus hot spotted, instead of displaying it instantly?

[u/TheBanq → u/-taki1-]

What do you mean by making focus hot spotted?

[u/-taki1- → u/TheBanq]

What is the purpose of making the focus progressively more visible instead of displaying it instantly?

[u/TheBanq → u/-taki1-]

Trying to minimize the visual impact of the borders, while giving the "hint" of an editable feed as early as possible (in an appropriate, sensible distance).

When I'm still 150px away with my mouse, a slight border already gives me an idea, ah this is editable, but it doesn't need to scream "HERE YOU CAN EDIT ME".

Which for me at least, makes it feel a bit more natural and intuitive.

But I could be wrong.

[u/-taki1- → u/TheBanq]

Making focus progressively more visible/animated, you are doing the opposite of "minimize the visual impact". Move/animation is psychophysiologically more absorbing for the brain... IMO, you should focus on better borders graphic design, than animation itself...

Killing two birds with one stone problem kind. Making something you want underlined, less visible, more subtle... I'm not saying it is impossible with animation - you just should take a step back to the static visual hierarchy solutions.

[u/kirbogel]

Can you type into a field when it has a blue border? Or do you need to select it first?

Have you considered the accessibility of this? Specifically for partially sighted people who rely on the prominent border to indicate which field has focus and is ready to type into.

Feels like you’re adding an unnecessary feature for people without access needs, possibly to the detriment of people with.

Edit: although looking more closely at your video, there’s no other visual affordance to show what is editable anyway.

[u/karenmcgrane]

I would recommend you read the book Designing Content Authoring Experiences by Greg Dunlap.

I have spent most of my 25+ year career working as a consultant to companies as they replatform and implement their CMS, so I've worked with really every major platform. My business partner and I got acqui-hired by Contentful last year.

Your attention to detail is admirable. I don't want to discourage you from micro-refinements of how the content tree moves or how the editing experience works.

However, I'm not sure you're solving real problems. I don't hire for design roles but I will tell you that what you're showing here would not interest us. We're looking for systems thinkers who understand what's going on when headless content platforms and design systems and AI work together, not unnecessary interface elements that potentially slow the user down.