58

I ran into a small usability problem with the StackExchange link on the left side of the header bar. I liked that I could quickly see responses from various SE sites. But it wasn't immediately obvious how to close it. There was no "X" in the upper-right corner and simply clicking on an open space in the window didn't make it go away. I'll be honest, the lower-right corner was the last place I would expect to see a close link. Is this a new trend in web UI that I'm not used to yet?

I'm asking primarily to spark discussion of how it can be improved. If I was confused (and I'm a regular SE user), I'll bet others would be too.

Here is what I (jjnguy) see.

Where Do I click?

Improve this question
24
  • 29
    I was getting ready to post this same thing but a conference call got in the way. For the record, the proper name is the StackExchange™ MultiCollider SuperDropdown™
    – Rebecca Chernoff
    Commented Sep 27, 2010 at 18:53
  • 3
    @rchern We need to go on an editing spree and add that to every meta post that mentions it
    – Michael Mrozek
    Commented Sep 27, 2010 at 18:54
  • 4
    Clicking outside to close it is what I keep trying to do, but I know people don't like that. meta.stackexchange.com/questions/32548/…
    – Rebecca Chernoff
    Commented Sep 27, 2010 at 18:55
  • 5
    I hated not having the X in the corner also.
    – Lance Roberts
    Commented Sep 27, 2010 at 18:55
  • 4
    Me three - I used to reload the page to make it go away, it was only here that others have pointed out to me the "close" button in right bottom corner. Definitely didn't notice it there.
    – Piskvor left the building
    Commented Sep 27, 2010 at 18:57
  • @Michael, I don't have edit privs here.
    – Rebecca Chernoff
    Commented Sep 27, 2010 at 19:09
  • @Michael, nobody will search for "MultiCollider SuperDropdown" if they don't know the name. That's why I haven't yet edited the title of this question.
    – Michael Kristofik
    Commented Sep 27, 2010 at 19:22
  • @rchern Done :)
    – badp
    Commented Sep 27, 2010 at 19:23
  • @Kriso Yeah, I was joking :)
    – Michael Mrozek
    Commented Sep 27, 2010 at 19:32
  • 1
    I wish I could upvote this again given the title change.
    – Rebecca Chernoff
    Commented Sep 27, 2010 at 19:44
  • 2
    <antique_joke> MultiCollider? But I just met her. </antique_joke>
    – gnostradamus
    Commented Sep 27, 2010 at 19:46
  • 2
    header thingy should really be removed from the title though... ;)
    – Rebecca Chernoff
    Commented Sep 27, 2010 at 19:48
  • 2
    Related, or duplicate if this turns into a feature request: meta.stackexchange.com/questions/65669/…
    – Jon Seigel
    Commented Sep 27, 2010 at 22:06
  • 2
    @TheLQ It won't get closed. Trust me. :-) There's at least one precedent and it got 6 up votes. The SO platform often comes up in answers as well.
    – Patrick McElhaney
    Commented Sep 28, 2010 at 21:09
  • 1
    +1 - My wife says you are correct, the close button shouldn't be on the bottom, and a second click on the "Stack Exchange" title should close the popup, not go to another site.
    – Kobi
    Commented Oct 19, 2010 at 19:38

6 Answers 6

Reset to default
26

As well as moving the close button, a click outside of the box should close the window as well. This is to be inline with most other sites (and certain parts of SO) that close popups by just clicking out of the window.

Improve this answer
3
  • Yes, please - I don't know why, but I try clicking outside the box every single time I open it up. I never notice the tiny "close" link, so I guess I try and treat it like one of those lightbox picture popups.
    – Jared Harley
    Commented Sep 29, 2010 at 9:09
  • Actually, clicking on the page behind seems to work on most of the SE sites... in fact, the only page I can consistently get it to NOT work on is MSO
    – Jared Harley
    Commented Sep 30, 2010 at 2:53
  • 1
    And now it's working on all of the sites. Maybe it's just me.
    – Jared Harley
    Commented Sep 30, 2010 at 6:17
24

How about making it a little bit bigger?

alt text

140px should be enough for any one.

A little more seriously though, moving it to the top seems to me like a worse option, since the space up there is incredibly tight. Instead, may I suggest making the entire bottom area (which current doesn't contain anything anyway) the target area for the close link, as well as giving it a different shade of gray to easily distinguish the close link.

alt text

Improve this answer
5
  • 7
    +1 because every user can immediately implement this solution himself simply by using this cream.
    – ЯegDwight
    Commented Sep 29, 2010 at 10:19
  • 1
    excellent idea.. for a two letter first name person, anyway :)
    – Jeff Atwood
    Commented Oct 19, 2010 at 19:10
  • You can click anywhere in the footer to close the widget now (after tonight's push).
    – Jarrod Dixon
    Commented Oct 19, 2010 at 23:32
  • 5
    @Jeff If you make that joke one more time I'll come over to your house and smash your head open with a giant "Yi"
    – Yi Jiang
    Commented Oct 20, 2010 at 2:35
  • 1
    violence is never the answer. but sometimes an additional letter is.
    – Jeff Atwood
    Commented Oct 20, 2010 at 14:27
14

My instinct tells me that when I click again in the same place where I clicked to open it, then it should be closed. Taking me to stackexchange.com page really annoys me.

So I sugest moving stackexchange.com link to the bottom, and make top bar a "close link".

alt text

Improve this answer
2
  • 3
    This is the one and only correct answer. If you make it look like a pull-down menu, make it behave like one too. The text "click again to close" isn't even necessary: simply changing the downward arrow to an upward one would work just as well.
    – Thomas
    Commented Jan 14, 2011 at 14:19
  • Dammit - i want to click the questions in that screenshot
    – russau
    Commented Dec 5, 2013 at 17:25
9

Actually, the quickest way is to press esc.

But I happen to agree that it isn't hugely obvious at the moment (via either route).

Improve this answer
2
  • 5
    Keyboard shortcut! YES!!!
    – Rebecca Chernoff
    Commented Sep 27, 2010 at 18:59
  • 6
    Oh, I guess that's rather obvious. I can't get in the habit of trying standard desktop keybindings on web apps
    – Michael Mrozek
    Commented Sep 27, 2010 at 19:06
3

I think the problem is that it's straying away from the time-tested control it evolved from. People know how to use drop-down/combo-boxes... they've been using them for years. Don't try to invent a brand new control.

How about making it behave more like a real drop-down box, where whatever pops up out of it doesn't obstruct the original control you clicked on. This way you don't need "close this" type links (which aren't very appealing), and the user will automatically know that they can click the drop-down box again to close the list.

Improve this answer
1

Huh. My first impulse was to just click the Stack Exchange logo again, and it worked.

Well, okay, it was only my first impulse because I'd already read this question. But it would have been my second impulse anyway.

EDIT: Proof in pictures:
Before
After

Improve this answer
10
  • 3
    The StackExchange link (with the dropdown open) takes me to stackexchange.com. Do you have an updated UI as a moderator?
    – Michael Kristofik
    Commented Sep 27, 2010 at 19:35
  • I mean the one that you clicked on to open the dropdown, not the "Stack Exchange is a network..." bit. Does that not work for you?
    – mmyers Mod
    Commented Sep 27, 2010 at 19:37
  • 4
    Knowing that you run IE7, I think this might be browser specific - I used to do this when the dropdown first came out. But at least nowadays when I click it, the dropdown actually obscures the logo, so you can no longer click on it.
    – Grace Note StaffMod
    Commented Sep 27, 2010 at 19:39
  • Come to think of it, it seems to me that the dropdown used to appear below the logo, whereas now it's to the side.
    – mmyers Mod
    Commented Sep 27, 2010 at 19:41
  • 2
    @mmyers, with Firefox 3.6.8 I click the little down arrow to bring up the box. The arrow isn't visible after the window is open. Ironically, I was going to make a joke about not including a picture with freehand circles but now it seems I may need one.
    – Michael Kristofik
    Commented Sep 27, 2010 at 19:41
  • The thing you click to open the dropdown turns into the "Stack Exchange is a network..." With 'Stack Excange' being a link to stackexchange.com.
    – jjnguy
    Commented Sep 27, 2010 at 19:42
  • OK, pictures added. @Kristo
    – mmyers Mod
    Commented Sep 27, 2010 at 20:02
  • 5
    Woah, that's not what I see.
    – jjnguy
    Commented Sep 27, 2010 at 20:10
  • Yeah, this looks to be browser specific. In my native IE8, and when running on FF at home, the dropdown will obscure the logo. But if I switch to compatibility mode, it will appear to the side just as you depict in your images.
    – Grace Note StaffMod
    Commented Sep 27, 2010 at 20:12
  • 1
    @mmy, see the edited question to see what we see.
    – jjnguy
    Commented Sep 27, 2010 at 20:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .