Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IMPORTER: Required fields should be more obvious #2354

Closed
mathetos opened this issue Nov 17, 2017 · 6 comments

Comments

Projects
None yet
5 participants
@mathetos
Copy link
Member

commented Nov 17, 2017

Issue Overview

We should make it obvious which fields are required in order for the import to work. Potentially, the "Import" button would also be greyed out until all required fields have been chosen as well. Doing an alert upon submission is not an awesome user experience.

@ravinderk ravinderk added this to the 2.0.1 milestone Nov 18, 2017

@ravinderk ravinderk modified the milestones: 2.0.1, 2.0.2 Jan 22, 2018

@raftaar1191

This comment has been minimized.

Copy link
Member

commented Jan 29, 2018

@mathetos

  1. Potentially, the "Import" button would also be greyed out until all required fields have been chosen as well
    -> But how come Admin come to know that these fields are required. What should I do to show the required fields

  2. how would Amin come to know that these fields are compulsory unless the Admin press the submit button?
    -> I think ajax check is good and if error comes scroll to the error message

Video Link: https://screencast-o-matic.com/watch/cFVUqsovwN

@mathetos

This comment has been minimized.

Copy link
Member Author

commented Jan 29, 2018

The general idea is that they shouldn't have to select everything and hit submit only to find out AFTER a page refresh that they didn't configure a required field.

  1. The Submit button should be disabled until all required fields are configured.
  2. We should have a dark red asterisk in front of the field labels that are required.
  3. If one or more required fields are not configured and they hover over the greyed out Submit button, a tooltip should appear saying "Please configure all required fields to start the import process."

Showing an alert only after the submit button is pressed and a page refresh happens, and having the alert be far away from the fields that are required is not an optimal user experience. Similar to our front-end forms, the validation happens directly on the field, and submission is not possible until required fields are configured.

I hope that clarifies. Thanks!

@kevinwhoffman

This comment has been minimized.

Copy link
Member

commented Jan 29, 2018

We should have a dark red asterisk in front of the field labels that are required.

Two recommendations:

  1. Place the asterisk after the field label per convention and for better accessibility.
  2. Add * denotes required field. to the table description where the marker points below.

image

@ravinderk ravinderk modified the milestones: 2.0.2, 2.0.3 Jan 30, 2018

@mathetos

This comment has been minimized.

Copy link
Member Author

commented Jan 30, 2018

AFter discussing with @raftaar1191 in depth, I realize that what is required is not the items in the "Column name" column; but the "Map to field" column; which complicates the issue a bit. So the user is required to MAP some fields that perhaps on first page-load are not obvious.

So based on our conversation, we felt that adding a visual checklist of sorts of the required fields would help. Essentially, when the user maps one of the required fields, the checkmark turns green.

Also discussed fixing the Submit button to the bottom similar to how we do WP Rollback, and greying out that button. So with all those ideas in mind, here's a rough mock-up:

give-import-required-fields

@DevinWalker

This comment has been minimized.

Copy link
Member

commented Jan 30, 2018

Nice concept. The gray/green icons make it really clear which fields are required. Let's also ensure the field labels for those four fields have the * label after the text just to further reinforce it.

@raftaar1191

This comment has been minimized.

Copy link
Member

commented Jan 30, 2018

Really awesome @mathetos Thanks will do like in the CSV
@DevinWalker noted your point as well

Will start working on this once done with #2744

raftaar1191 added a commit to raftaar1191/Give that referenced this issue Feb 5, 2018

raftaar1191 added a commit to raftaar1191/Give that referenced this issue Feb 5, 2018

raftaar1191 added a commit to raftaar1191/Give that referenced this issue Feb 5, 2018

@ravinderk ravinderk added the has pr label Feb 5, 2018

raftaar1191 added a commit to raftaar1191/Give that referenced this issue Feb 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.