Skip to content
This repository has been archived by the owner on Nov 21, 2020. It is now read-only.

Add visual feedback for field focus #150

Open
DirtyF opened this issue Sep 20, 2016 · 6 comments
Open

Add visual feedback for field focus #150

DirtyF opened this issue Sep 20, 2016 · 6 comments
Milestone

Comments

@DirtyF
Copy link
Contributor

DirtyF commented Sep 20, 2016

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 DirtyF changed the title Textarea text position Distinguish fields Sep 20, 2016
@DirtyF DirtyF changed the title Distinguish fields Field Focus Sep 20, 2016
@almet
Copy link
Member

almet commented Sep 20, 2016

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?

@DirtyF
Copy link
Contributor Author

DirtyF commented Sep 20, 2016

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.

@rlecellier
Copy link
Contributor

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.

@almet
Copy link
Member

almet commented Sep 21, 2016

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

@DirtyF
Copy link
Contributor Author

DirtyF commented Sep 21, 2016

@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.

@almet
Copy link
Member

almet commented Sep 21, 2016

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 almet added this to the v2 milestone Oct 20, 2016
@almet almet changed the title Field Focus Add visual feedback for field focus Oct 20, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants