formbuilder icon indicating copy to clipboard operation
formbuilder copied to clipboard

Add visual feedback for field focus

Open DirtyF opened this issue 8 years ago • 6 comments

Could we improve field active state appearance to help distinguish active from non active state ? (space, borders, light shadow, better color contrast, lighter opacity on inactive fields, … you name it)

field-focus

DirtyF avatar Sep 20 '16 18:09 DirtyF

I don't understand what you're proposing here? Isn't the created form already focusing different parts of the form depending on where the user is?

almet avatar Sep 20 '16 21:09 almet

If by that you mean the very light gray background, I guess it is. If it does not bother anybody else but me, feel free to ignore this.

DirtyF avatar Sep 20 '16 21:09 DirtyF

It seems linked with the idea of adding a marker to show that the questions are sortable. Generaly do something tell the user that each question is a item.

rlecellier avatar Sep 20 '16 22:09 rlecellier

I'm sorry @dirtyf I just don't understand what you are proposing (I'm not opposed to the idea). Can you rephrase?

almet avatar Sep 21 '16 08:09 almet

@almet Sorry if I wasn't clear. I was just pointing that when a field is selected and active, a user should be able to distinguish it clearly from the others. The active zone should stand out, to help user focus and get a better visual confirmation of what he is edting. Could be a long select, with options, etc.

It's just a matter of showing what zone is active, and not just rely on the focus of the text field as it is the case on the example screenshot. The whole field box is not very visible by default as it only relies on a very light background.

As a comparison other services like Google, Wufoo of Typeform clearly show what field is currently selected:

Border color and light shadow for Google Forms:

google-field-focus

Arrow and constrasted background color for Wufoo:

wufoo-field-focus

Actions Icons appear only when the field is selected on Typeform:

typeform-field-focus

My 2 cents.

DirtyF avatar Sep 21 '16 16:09 DirtyF

Thanks for the clarification! We probably can make this easier to understand yes ! I like how Google does it by having a visible color mark.

almet avatar Sep 21 '16 22:09 almet