Readability of form input fields and confirmation

Question

I have a form that the user inputs some data to send to a server but I'm wondering how does a user normally read a form for input purposes?

Should it be Input, Button, Confirmation then close:

Or Input, confirmation, Button then close:

The 2nd method seems to be the most conventional way in terms of form structure by having the buttons on the bottom right, but is it wrong to add the confirmation text before (instead of after) the next form item forcing the user to visually backtrack (instead of going top to bottom seamlessly)?

Or is it ok to add the button with the form fields to keep them in the same place, like in the first example?

Answer 1

The best approach would be to take the confirmation box out of the primary form flow and make it pop-up over the form.

Your current dilemma is only because you are adding the elements to your form, which are not a part of the primary flow.

Similarly, you can do away with the close button in the form and use only the cross icon on the top right for this.

Answer 2

1st method is better, because you need to lead the user along the logical path:

1. Input data;
2. Confirm the data;
3. Check status of data;
4. Nothing left to do? Close everything.

Answer 3

Buttons should be close to the action

In your case you have 2 buttons with different contexts. One closes the whole form while the other does a specific job on the form. The "Add" button should be close to the input fields because it relates to the action of adding jobs. Also, the distance from the input fields to the "Add" button is lower, which makes target selection faster (see Fitts's law). Anyways, the close button can be removed as there is "X" on the upper right corner doing the same thing.

Confirmation should be easily seen

The position of the confirmation text doesn't matter as long as users can see it immediately without scrolling. The important thing here is that the user can see the feedback from the form. The place you put the feedback should be consistent with rest of your interface.

Other remarks on the form

• You can remove the "Add" button because you already have one on the upper right corner of the modal. It just adds more choice and clutter.

• The headline "New Jobs" is not descriptive enough. Specify the purpose of this modal, like "Add New Jobs". Same goes for the "Add" button.

• Use input labels. Relying only on placeholder text creates usability problems (see here).

• Having input labels allows us to put more descriptive text into the placeholder

• Use autofocus on the "Job name" input fields. This way the user can start typing immediately without having the need to point to the field and then select it.

• Input field width should match expected input (see the 6th recommendation).

Answer 4

I would suggest that you take advantage of Gestalt laws of grouping and keep your buttons together either above of below the notification - users are more likely to expect to find these buttons grouped together as they are both functions associated with the whole content of the same panel.

The notification should be treated as part of a reading sequence: If the user should be aware of it before they continue then it should appear before the buttons. If it's less important that they see the notification before continuing then it could appear after the buttons.

I also suggest, in the interest of readability, that you improve the contrast ratio on your input fields as they don't currently pass accessibility testing

Answer 5

Instead of using two buttons, you can simply use single button named as “ADD JOB” and put close icon in top right corner of your form. This approach free from you to unnecessary buttons on your form.

Some what like below:

Answer 6

As you did't describe the full user story I have to build my answer on a guess, that is as follows:

1. The user is on a list of jobs and clicks [new job]
2. A modal is opened with form for job details
3. User fills out job details
4. The user clicks [add job]
5. Form is validated
6. Case: error
   1. Error message is displayed inside the form
7. Case: success
   1. Modal closes
   2. Separate, temporary message is displayed

In this example I'm asuming, the user wants to add one job at a time. So the user has three actions to take:

new job -> fill form -> add

compared to

new job -> fill form -> add -> close

Multiple jobs

If you want your user to be able to add multiple jobs, I would suggest to leave the modal opened and position the confirmation (with an additional job title: >> Job "title" successfully created <<) above the form.

If the confirmation is above the form the users attention is back at the top of the form, where the next flow starts.

Naming buttons

As mentioned by others I would omit the [close] button, as you already have the close button on top. If you would like to have a button, you could name it [cancel] or [abort] to clarify no action is taken. (This is usefull, since many applications change inputs on edit. Mostly checkboxes or radios, that change status instantly and don't need a additional confirmation.)