2

Here's something I come across fairly frequently: A large collection (list or table) of items serves as an overview, displaying only the name of each individual item (with a link to the respective resource).

For example, let's imagine a list of fast-food restaurant addresses:

    | London    Berlin    Moscow    Paris
----+------------------------------------
McD | <ML1>     <MB1>     <MM1>     <MP1>
    | <ML2>     <MB2>               <MP2>
    | <ML3>
BK  | <BL1>     <BB1>     <BM1>     <BP1>
    | <BL2>     <BB2>     <BM2>
SW  | <SL1>     <SB1>               <SP1>
    | <SL2>
    | <SL3>

Now the global Health Inspector General wants to use this overview to display employees, schedule inspection dates and assign priorities - without having to click through to each individual restaurant's page.

So essentially, what we need here is some sort of on-demand context menu, both for displaying additional details and for performing actions on the respective item.

However, none of the options I can think of seem appealing to me:

  1. overload item link to display a modal dialog -- undesirable because the direct link should still be accessible
  2. display icon(s) next to each item to bring up a modal dialog -- with many items, this adds a lot of noise
  3. make the aforementioned icon(s) only display on-mouse-over -- this seems a bit jarring and unintuitive
  4. expand each item on-click, accordion-style -- this seems like a weird combination of #1 + #2 + #3 and adds the issue of layout disruption
  5. hijack mouse right-clicking -- nobody should do this on the web, ever

Is there a better way, perhaps an already established convention? Any suggestions would be most welcome!

Improve this question
3
  • A selectable list (like the GMail list of mail messages) and a sidebar menu seem to address most if not all of your concerns.
    – Marjan Venema
    Jul 8, 2012 at 9:50
  • I use GMail only rarely, but AFAICT this seems like my #1 - so I'm not thrilled about it. The sidebar option sounds interesting though - could you elaborate on that?
    – AnC
    Jul 8, 2012 at 18:39
  • 1
    Well, in GMail, you can select a single or multiple mail messages and then perform an action on the selected messages. In GMail the actions are in a toolbar at the top of the list. You can also put them to the side of the list. That is all I meant with a side bar menu. Just a list of actions you can perform on the selected items. Preferably dimmed if the action cannot be performed on the selected item(s).
    – Marjan Venema
    Jul 9, 2012 at 8:44

2 Answers 2

Reset to default
1

What about using progressive disclosure pattern - if user pauses mouse move for half of second or so - link can expand to a block, containing more information about hovered item.

You can see how it's working on stackoverflow - info about active users (ex. in this question: https://stackoverflow.com/questions/11253339/testing-ember-js-apps-with-jasmine)

progressive disclosure on stackoverflow

Improve this answer
2
  • Progressive disclosure is just a technique for displaying more detailed information about something that requires user to activate the trigger (either click/touch or hover).
    – dnbrv
    Jul 8, 2012 at 18:03
  • Thanks for the response. I'm afraid I'm not a fan of this though (cf. my #3); it might be less jarring, but a lot less intuitive/obvious.
    – AnC
    Jul 8, 2012 at 18:41
0

Thanks for the responses.

We eventually went with a reveal-on-click solution, sort of like a combination of dropdowns and popovers, with a subtle trigger button to avoid visual noise.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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