What's a good way to manage your list?

I always find it difficult to create a UI when it is manipulating a list of objects.

For example, I need to manage a list of employees. In my work, we have always switched between two ways of managing employees:

  • Use one split screen, and the left side is the employee list and the right side is where you edit the employee. Usually the toolbar (or ribbon bar) at the top allows you to add / modify / remove.
  • Take a two-window approach: the first is a complete list of sizes with the same panel at the top. When someone clicks a button (or double-clicks on an employee), they open a dialog box that allows you to add or modify that employee.

While I prefer the second approach, I don't have any UI expert reference to return my choice or reject it.

Does anyone have any suggestions or links to help me create a good UI for managing the list of objects?

+2


source to share


5 answers


Option 1 allows the user to see more list items at a time, so it is preferable when the user is likely to need to jump a lot in the list (for example, to find the next entry to edit). More items means, among other things, scrolling.

Option 2 can usually force the user to edit the field faster, as there is no pending new browser window to open and no cognitive reorientation required by the user, so better for heavy data entry (e.g. making changes to each record, one by one).

Both options are significantly inferior to in-place editing in the table, using an editable grid or replacing the table with an array of appropriate controls (text boxes, combo boxes, check boxes, etc.) that are populated with a value field for the corresponding recordset. Users change fields directly in the table and select the "Save" button or menu item to immediately update all changed records. Or you can save automatically whenever a field loses focus if your bandwidth can handle it.



Compared to options 1 and 2, in-place editing has the following advantages:

  • There is no need to click the "Edit" button to edit the entry, an additional navigation step that takes time and training (for example, the user needs to recognize the "edit" icon).

  • There is no need to visually re-acquire fields elsewhere to edit them, making editing faster and easier.

  • There is no second window or form to learn and understand, and consume onscreen real estate that the user might want to use for something else.

  • No modes - users can switch between editing and viewing and save whenever it's convenient.

If you have too many Worker fields that will appear in the table even with horizontal scrolling, then you need to choose between (1) splitting the split screen in a separate window and (2) having two windows and the ability to expand. However, optimizing the display of "additional" fields is a separate issue related to editing records. A general rule of thumb for usability is that if a field can be edited by the user, always make it user-editable wherever the field appears, be it in a table, an on-screen overflow area, or a separate unfolded detail window.

+1


source


I don't believe that you will find any real research on this specific issue as it is so application specific. What it comes down to is how individual objects are used / accessed / modified / etc.

However, I have walked back and forth over the years, and came to stop at # 2. Here's a snag from one of our internal apps.



alt text

Power users can middle click to open in a new window and you get sorting, filtering, etc. As the list grows.

+2


source


Dialogues are modal, and people who work with them are usually unhappy about it. The split screen allows not only editing, but also a very natural "reading of all the details" of one given employee [or other type of object] (there may be more information about each than a bare list might seem); the "make this detail editable" button feels very smooth, natural and seamless, without the hassle of dialogs, pop-ups, hover tooltips, etc.

For a reference summary of UX criticism for modal operation, you can start at wikipedia and follow their links.

+1


source


I've used the email client layout with some success. The left side of the screen contains navigation elements (similar to folders in an email client); the right side is divided into upper and lower parts in a split window, and the upper part contains a list (for example employees - similar to the list of letters) and the lower part contains a form (consisting of tabs) for editing the selected items in the list (similar to one email you compose or view). An email client layout has the big dating advantage - just about everyone uses email! And major email clients follow the same layout, amplifying the benefits of dating.

0


source


The correct answer depends on whether your main list object revolves around edit or list view objects.

If editing is infrequent, you can set it to be in a separate window and use the screen space on the home screen to show as much detail as possible.

However, if editing is going to be a frequent operation, you want it to be in place with the list, as opening a new window creates too much friction.

0


source







All Articles