Adding new data while filtering current data

Question

I'm working on a table that includes employee data (Name, Age, Position). Above the table I have a live filter that can filter the data by Age Group and Position.

(re-inserted from archived old version)

I'd also like the possibility of adding a new employee without refreshing the page, so when the New Employee button is clicked, a form slides down.

How do I go about this? When I click the New Employee button while the filter is on and the form shows up, what should happen in case I add a person that's outside that age group? Cancel the filter, add the data and show all the results again?

Or would it be cleaner to just cancel the filter when clicking on the New Employee button?

Answer 1

This is a tricky one. If you reset the filter, then people might get frustrated that their choice didn't "stick". Could imagine this happening because it's not intuitive — to the user — that the filter and the New Employee action are connected. Conversely, if you don't reset the filter, and the New Employee is outside it, users might wonder why the New Employee isn't showing up.

I lean toward the latter because it keeps the user in control. If you reset the filter, then the interface is changing without the user (consciously and knowingly) initiating the change. A sense of control is well-recognised as an important component of a usable interface (e.g. see the third heuristic here: http://www.nngroup.com/articles/ten-usability-heuristics/).

Assuming you go with maintaining the filter as is, the key might be to visually disconnect the table of employees from the New Employee button. If they are clearly two separate parts of the page, then users are more likely to be comfortable with a New Employee not showing in a filtered table. Further to this, I would make sure that the filter and the table are visually connected (given they are closely related).

Ways to make the visual connections and disconnections could be through colour shading and whitespace (e.g. whitespace between the New Employee button and the table/filter).

Hope this helps, Jessica

Answer 2

I guess most users will add a new employee after they checked the list. So when users have the list filtered by criteria A and they don't find a certain employee there, it's likely that they'd want to add an employee that falls under the same criteria.

If that's the case, there is no problem: the new employee will be listed in the current filter.

If that's not the case, there might be 3 reasons for this:

• mistake: the user applied a wrong filter AND/OR the entered data is wrong
  • → desirable: inform the user
• multi-tasking: the user browses the list and suddenly gets the idea to add a new employee (not necessarily related to the current filter)
  • → desirable: don't change the filter
• unrelated: the user filtered the list for some other reasons, now the user is done with that task and goes to the next, unrelated task: add a new employee.
  • → desirable: show unfiltered list resp. switch to filter that shows the new employee

In all cases you should display a success message: "Added new employee XY"

This message could offer additional information/links, like:

1.:

-----------------------------------------------
| Added new employee John Doe  [show details] |
-----------------------------------------------

2.:

-----------------------------------------------
| Added new employee John Doe  [hide details] |
|                                             |
| Name: John Doe       [edit]                 |
| Age: 42              [edit]                 |
| Position: Intern     [edit]                 |
|                                             |
| [→ jump to John Doe in the list]            |
|                                             |
-----------------------------------------------

If the user clicks at "→ jump to John Doe in the list" (wording should be improved, probably), the list shows all users (or the filter that applies to John Doe) and John Doe is highlighted and focussed on.