Edit controls for list same page or new page?

Question

Could anyone offer feedback on the following design. Basically the user selects an item in the list from the left and they can edit the details on that item with the controls on the right.

I am thinking that it is too much information on the screen. Would it be better suited to one main list and then the edit controls on a new screen, perhaps with tabs separating the sections rather than the accordion control?

Any feedback is welcome

(click to view enlarged image)

Answer 1

Actually, there's two questions in here, one regarding the master-detail navigation, the other regarding accordion vs. tabs.

Master-detail can be realized on one screen, like here, or with a two-step navigation from the list to a complete screen of details. For me, the decision between these two relies on the following:

• How many detail is needed to identify the correct item? If few columns are needed in the table for identification, it can be small, which points to a master-detail pattern.
• Does the user select one item, look at it or change it, and leave the app? That's a point for the two screens. Note that this is not about the number of items selected per day, but while not leaving the list.
• If the user needs to work on several items from the list, this points towards the master-detail pattern. If he must compare items, or transfer information from one to another, that's an even stronger indication for it.
• Does the information changed on the detail influence the sort order in the list? If it does, I'd rather choose the two-step navigation. Otherwise, a change on the right area of the screen will change the left area, which is an unusual update relation (and might cause issues with screen readers, breaking accessibility requirements).

If you decide to use the two-step navigation, be sure to highlight the previous selection in the list when the user comes back from the detail screen - to give the user feedback about where he was in the list.

Accordion vs. tabs concerns the presentation of the details. There are two kinds of accordions, one allowing only one section to be open at a time, and another allowing any number of sections to be open. Your design looks like the second kind.

• If users needs access to just a single section, I'd choose the tab pattern since it reduces/prevents vertical scrolling.
• If people need to look at different sections in parallel (and there are other reasons for not changing the sectioning), I'd choose the second kind of accordion.
• If people need to search through the sections (e.g., because they are not familiar with the sectioning), use the tabs. The click targets in the accordion design move, which makes it harder for the user to go through them one by one.

Sometimes, detail sections contain lists of elements (such as notes). Add an indication whether a section contains content (such as a counter of notes like "Notes (1)") to the tabs or the accordion.

I hope that gives you some criteria to decide.

Answer 2

Your comment on the infrequency of interaction is important here.

The screen looks very cluttered to me and the visual relationship between the left half and the right half is not very intuitive.

Given the complexity of the two panels and the infrequency of use, I would suggest one of:

• Place the edit panel on a new page.
• Pop up a lightbox style modal do to the edit if you want to avoid the page load.
• Use push or slidealong animations (see this demo) to reveal the edit form in a way that allows users to get back to the nav table.

Although I am partial to it, the lightbox approach is controversial, so I've provided other options for you.

Because this is not a frequently used interaction, you can be a little more liberal with using page loads or animations which may slow down the interaction a bit but will help provide workflow clarity to users who don't do this task often.