Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a grid of items. I want to indicate which item is currently open (which one is the user editing?) The user can select other items in the list so I want the open indicator to be different than the selection indicator.

What is the best way to indicate to the user which row is open? An icon (check, open folder?) or highlighting the row?

EDIT:: Our UI is broken up into multiple steps in a workflow, allowing the user to navigate back to at least see what they have entered previously. The first step is selecting the item to edit. You select an item for editing by selecting it and clicking the "Open" button or double clicking the item. The subsequent 4 steps involve editing what you have selected to edit. Each is on a different screen in the workflow.

A user can navigate back to the first screen where they opened the item. Users have said that they would like an indication as to what item them have open in the list.

We do display in the upper right of the menu bar what item is opened, but the users would also like to be able to easily see it when they navigate back to the list.

EDIT 2:: "So, I can "open" Item 2 and click "Next" into an editing wizard, but can click back to see the list again. Clicking "Next" again (regardless of my selection) would re-enter the edit wizard with the previously open item. Is this correct?"

Correct. You can only change what item you are editing by clicking "Open" or Double Clicking an item. If you have unsaved changes you will be prompted to save before editing the new item.

"Can you describe the use case on why I might need to go back to the list selection mid-wizard?"

These inspections can be at various states and 1 user could be working on multiple at once in a given day. We have the workflow in place so that we can return the user to where they last left off. They could start 1 and have to wait for approval to export it. In which case they would start another one and once they get approval for the previous one, return to it and export it.

enter image description here

share|improve this question
2  
Selection of other element in in-place editing pattern usually means finishing of editing. Can you provide more details on the task and task flow? –  Alexey Kolchenko Nov 20 '13 at 22:23
    
Can you include a snapshot of your current layout, or concepts of what you are thinking? There are multiple ways you could show a "is editing" vs "selected" depending on how you lay things out. –  Evil Closet Monkey Nov 20 '13 at 22:45
    
@EvilClosetMonkey added screenshot –  Darlene Nov 20 '13 at 22:46
    
@AlexeyKolchenko updated question and added screenshot –  Darlene Nov 20 '13 at 22:47
    
@Darlene - So, I can "open" Item 2 and click "Next" into an editing wizard, but can click back to see the list again. Clicking "Next" again (regardless of my selection) would re-enter the edit wizard with the previously open item. Is this correct? Can you describe the use case on why I might need to go back to the list selection mid-wizard? –  Evil Closet Monkey Nov 20 '13 at 22:51
show 1 more comment

2 Answers

up vote 1 down vote accepted

I personally would go with:

  • An icon to show which item is currently being edited
  • Another background color to highlight selected items

Something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

I see two problems in your current design.

  • Unclear hierarchy, which leads to user lost in the interface. Users have reported of this problem, as you mentioned.
  • Lack of system feedback. It's hard to know (or remember) which items are finished and which require executing wizard.

So my proposition is to use Master-detail pattern to organize the items hierarchy and display name of the opened item within wizard steps. Also use status indicators as feedback and recognition of which items should be processed.

enter image description here

Real world example of similar solution is Outlook Express.
enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.