Collections panel - a possible improvement?

I love collections, and love the unified functionality of the new collections side panel with Search Results, Binder, and my own Collections. I am not as fond of the actual UI (widget?) used, and wonder if something more like a traditional “Accordian” might be better, where one of the sections expands inline when selected.

Currently my collection panel shows:

  • Foo - (a collection, colored pink)
    Search Results (also gets colored pink??)
    Binder (also gets colored pink??)
    Foo (the collection which is currently selected)
    A
    B (the items in Foo)

As an accordian it would show:

  • Foo - (a collection, pink, expanded inline when selected)
    A (pink)
    B (pink, the items in Foo)
    Search Results (not pink)
    Binder (not pink)

=======
Or perhaps this was already considered and the current UI selected instead to keep the section titles from moving around ? In that case, at least the pink color change should be limited to just the A, B items in Foo?

Thanks.

Hi Sophie,

I may not entirely be understanding what you’re asking for, but I’ll make a couple comments about the way the current Collections interface works that might clarify a few issues.

First, I’ll throw out that as a user, I definitely prefer to have all the collection titles tabbed together at the top, rather than jumping around–if I view one collection, I don’t want to have to remember whether to mouse to the bottom of the screen or the top in order to find the next collection I want. That’s personal opinion; you’re entitled to feel otherwise. (And I could also be misinterpreting your request as how the accordion-style would work.)

Now, for the current collection binder set up. First, regarding the coloring, any collection can be assigned any color you choose via the square color box to the right of the title. When you’re viewing a given collection, however, that collection’s color overlays the collection tabs below it, allowing you to still see their titles (grayed-out, you’ll notice) but visually indicating which collection you’re looking at. If you switch to another collection tab, that collection will appear in its proper color.

You can use the Collections icon in the toolbar or the menu option View>Collections>Hide Collections (to which you can easily assign a keyboard shortcut via System Preferences) to hide all the tabs and view simply the contents of the collection, if seeing all the tabs and the color management is distracting.

You can also rearrange the order of the collection tabs so that those you use more frequently are closer to the bottom. Just drag and drop the collection tabs where you’d like them.

Does any of that help?

MM

I don’t have much to add to this, thanks MM. The reasoning behind having a list of tabs at the top instead of an accordion is as described: it’s best to have UI elements predictably located, rather than moving around based on the current state. You can always find the binder tab because it’s right where you left it every single time. Another problem with accordions is scale. With a small collection of five or six items, it could feasibly work (disregarding the unpredictability problem), but with a collection that contains several thousand items, that means any tabs below that collection would require a ton of scrolling to get to. Now obviously in that case you’d probably want to use the X button to close the collection and pop back to the Binder, but this adds another place you have to go to periodically, depending on how long the collection is—a thing you might not know until you scroll for a while.

The description of how colouring works is accurate. In order to as easily portray the active tab as possible, without moving tabs around (that was another idea we floated for a while; having tabs jump to the bottom of the list when you select them—again it suffers from unpredictability), it made the most sense to simply block that colour all the way down through the other tabs, and use grey to indicate that those tabs are not active (important in case two tabs have the same colour and are right next to each other). Not recolouring the tabs beneath it would ultimately be more confusing in the long run. Recolouring is more confusing during the learning phase, but would lead to a plateau of confusion for everyone, expert and novice alike, in that it would be much less clear which tab was actually selected. When you have 12 or so of these, colours are not always crystal clear. If there are two salmon coloured tabs only a few percentage points different from one another, it might look obvious if they are right next to each other, but it wouldn’t be so obvious which one was selected, if the background colour of the collection were separated by 8 other-coloured tabs.

This is a slightly non-standard UI; but it remove the problem that a lot of tab structures have in terms of space. Most emulate a filing cabinet. The tabs are aligned on the same axis as the wording—like a web browser. Anyone that has use tabs extensively in a browser knows the limitations with that. Once you get more than a half dozen tabs, they get cramped up and difficult to read. This system avoids that problem by stacking the tabs in the most efficient manner possible (using the shortest length as the stacking direction) and in a direction that allows for the most expansion. Stacking the sideways (imagine rotating the tab stack 90º) would maximise stacking efficiency along the shortest edge and allow the colour of the tab to bleed right into the list below—but it suffers from scalability. Now the width of the binder is your constraint, not the height of it, and there is more much more height going around than width—plus sideways tabs make you tip your head to read them.

So yeah, it takes a little getting used to, but it gets around most of the problems with the tab metaphor that I’ve seen. The first custom keyboard shortcut I gave to 2.0 was a set of shortcuts to open and close the tab interface. Definitely recommend that if you use them a lot. Just bind the same shortcut to “Show Collections” and “Hide Collections”