The shortcut bar toggle (i.e., the little arrow on the right) seems backwards. The direction of the arrow should indicate what will happen when you click on it -- up means "close this" and down means "open this." See the attached screenshots from D7 and compare them to one example, the NPR website. The NPR way seems much more natural, at least to me.
The arrows should be switched.
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | windows.jpg | 166.83 KB | amc |
| #9 | Untitled.png | 2.55 KB | salvis |
| #8 | googlearrows.jpg | 151.51 KB | amc |
| #6 | wordpress_drawer.png | 1.59 KB | Bojhan |
| #6 | Flickr_drawer.png | 16.95 KB | Bojhan |
Comments
Comment #1
amc commentedForgot attachments.
Comment #2
David_Rothstein commentedThis feature is actually provided by the toolbar module - the shortcut bar is just renting space there :)
Comment #3
Bojhan commentedWell, It doesn't really seem natural to me?
Comment #4
yoroy commentedIt's a classic interaction dillemma. Show the current state or show the result of the action. Ideally you avoid having to choose. In this case we're showing the current state, which is fine, because it doesn't really look like a button anyway (nor do we have to promote that).
Lets try and open this kind of issue only when we experience or see people struggle with this.
Comment #5
amc commentedSorry, but I disagree. I've attached yet another example from http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm that illustrates the point. It seems pretty clear from looking all over the web (and lots of software, moreover) that the expected usability pattern is as I described, and D7 as it stands now violates it. Granted, this is a minor aesthetic issue and I don't want to push it too hard, but at the very least I think at least a little more discussion is warranted.
Comment #6
Bojhan commentedI still don't see it being more natural? It's likely that you will find more examples, besides the web being full of bad usability patterns its also full of appropriate alternatives. I'd like to stress, this is not something - we would rush conclusion of, its an important detail.
So a couple examples :
http://www.welie.com/patterns/showPattern.php?patternID=collapsible-panels
Comment #7
amc commentedThanks for submitting those examples. It's hard to tell without the open and closed pictures, though. Another pattern is a simple downward arrow to indicate a dropdown menu, which doesn't switch directions when opened. (This is probably the most widely used pattern.) And the collapsible panels are analagous to what we use in Drupal 6 (and the drupal.org issue queue, for that matter), but it's generally used when the arrow is next to the panel title, and starts out sideways and turns downward when the panel is opened. I don't think either pattern is exactly what's going on here.
Comment #8
amc commentedJust another example: Google's search sidebar. It's a bit different precisely because it's a sidebar and not a toolbar control, but the arrow directions are consistent with the examples I posted earlier: click a downward-facing arrow to open and an upward-facing arrow to close.
Comment #9
salvisI understand and appreciate the nerdy explanation, but let's go mainstream here! Just because a few of us are challenged by this dilemma doesn't mean we should challenge our users with it.
Did you notice that the hint says "Open the drawer"? — it doesn't say "The drawer is closed."
Imagine for a moment that our arrows were reversed; if the 'closed' arrow were pointing downwards now — would you honestly expect the drawer to open upwards, because you interpreted down as being the state?
Look at the screenshot: we have two arrows pointing upwards in close proximity. The arrow on the scrollbar moves the thumb upwards, the arrow on the toolbar button drops the toolbar down. Hmm...
Look at the drop-down controls on this page, Version for example. Do their arrows point upwards because they are in 'up' state? What would you think if they suddenly started to point upwards?
The right arrow examples that have been mentioned above to defend the current up arrow implementation are not applicable. Did you notice that right != up? The right arrow to the left of something can reasonably be interpreted as "go into this container," i.e. open it. (The icon for the open state is secondary.)
I challenge you to find wide-spread (or even just one mainstream) use of an up arrow for the closed state!
That being said, I don't think anyone will "struggle with this," but most people will think it's backwards. Are we so desperate to be 'different' that we make odd choices, just to be different?
Doesn't that make you wonder whether Drupal works as you'd reasonably expect, or whether it's riddled with other odd choices?
Put yourself into the shoes of a nasty reviewer. What an easy shot! Do we really want to serve him such a nice pass?
This is completely wrong. The purpose of those pixels is not to show the state. The user can tell by the presence or absence of the toolbar whether the toolbar is present or absent. There's no need to show the state separately. However, we do want to promote that the user should click there if he wants to change the state. IOW, we do want to promote that it's a button that changes the state, even if it doesn't look like a button.
Making a good and solid impression is not negligible, that's why I'm raising the priority to normal.
Comment #10
amc commentedTwo more examples from Windows. Um, can we agree that this is the correct pattern yet?
Comment #11
hthstnrd commentedI completely agree with amc on this one. I think the link should display the action that will occur on-click. If it was a textual link it would say 'show shortcuts' - and therefore the image should represent that text (and be a downward facing arrow).
I do understand the other argument (of showing the current state) - but I think this is going to confuse the majority of users.
Even the arrow next to 'Refine your search' in the header of this page (Drupal site) points down - although admittedly this doesn't change once clicked.
Comment #12
callison commentedYes, I agree that the arrow should display the action that will occur. When I first started using Drupal 7, I actually thought this was odd, but I didn't think about it too much.
Comment #13
yoroy commentedMore than a year in, we haven't seen any reports on this being an issue. If people feel strongly about this: supply an updated image sprite.