Designing an interface that contains text fields as well as a datatable

Question

As a bit of background, I would like to show you some wireframes in the web application.

This is a screen for managing a list of users in the system. Note that by just clicking a trash or disabled button, the account is deleted or disabled, there is no need to submit the form.

^{download bmml source – Wireframes created with Balsamiq Mockups}

---

These are 2 sample screens from an "edit user account page".

This is the "Account info" tab which contains a save button:

^{download bmml source}

This is the "Emails" tab that does not contain a save button:

^{download bmml source}

---

I am now working on a page to edit a group. Groups are basically just a collection of users. The user can edit the group's name, description and add/remove users from the group. Certain users can also be made leaders of the group:

^{download bmml source}

Problem: Based on the the above mockup, there are several inconsistences:

• In the "Emails" tab of the "Edit account" page, there is no need to press a save button. Actions are processed immediately. However, here, while the interface updates when we remove/add a user from a group or make someone a leader, a save button is still required to save the changes.

• The "remove leader status" and "make a leader" may not be the best choice of words and perhaps might even be confusing.

Requirements:

• Upon clicking the "save changes" button, the user should be taken back to a list of all groups and a message disabled that the group has been saved successfully.

• The same interface should be used when someone is creating a new group.

• A cancel or discard button is required to discard/cancel changes. This is because the application supports some level of multi-tasking, so clicking another link without saving the current page will cause the page to be stored in a pane containing unsaved pages.

What can be done to resolve this inconsistency? Are there better wordings for "make leader" and "remove leader status"?

Answer 1

On the Edit Group page, "Make Leader" and "Remove as Leader" links are awkward because changes are not committed until the "Save" button is clicked, whereas on the User Page, change is committed the moment you click "Make Primary".

So changing "Make Leader" and "Remove as Leader" into checkboxes, with "Leader" column header will remove that awkwardness, because people don't associate checkbox as instant-commit action.

Other than that, the UIs are generally sound. It certainly doesn't make sense to start adding "Save" and "Cancel" buttons where they are not needed for the sake of consistency.

I would just make sure the following checks are present:

1. Systems alerts the user that there's unsaved data
2. System provides visual cues that changes have been made. For example, when the Edit Group page loads, Save button should be disabled by default.

Answer 2

Inconsistencies

• The inconsistency on the emails tab is easily solved by not processing the actions immediately by adding a "Save changes"-button. You should be careful with actions that are processed immediately. If this is something you want to have, you should always give the user the option to undo the action. A confirmation popup is not good enough, because nobody cares what that messages says and will press 'Enter' anyway.
• You should ask the user what he/she thinks best describes the "remove leader status" and "make a leader" options. Maybe a nicely styled checkbox under the header "Leader". The primary-email-option should behave in similar fashion.

Requirements

These can be resolved by the programmer, since this is behaviour that needs programming.