Usability issues with overlay close button

O_o what does the description mean...

Every close button is at the top of the page...

There's no patch to review.

We can close button make position:fixed so it stays visible while scrolling...

Oooow now I understand...
You could make a patch for that, set it to review and people can judge it then.
Overlay issues are getting smaller everyday, good job casey!

I included this behavior in #668640: Overlay shouldn't be based on jQuery UI Dialog (It should also be possible for current overlay, but because its based upon jQuery UI dialog it might be tricky).

Was removed from #668640: Overlay shouldn't be based on jQuery UI Dialog. With attached patch the close button will be visible all the time.

As mentioned in the other issue, this patch makes every theme, which isn't white on the right side, look ugly.

Themes that don't have a white background always look ugly when used inside the overlay; they could however override the style. I don't think that's a valid argument.

Well, I would say, if it's just about adding some CSS, then that's fine, but the Close button is an image with a white background, right?

We can replace it with only the closing cross and put some background around it wich can be overridden.

I know david, so there isn't a "good" solution for this...

Related: #575904: Admin Overlay: Make close button more jump to the eye which discusses the color of the X icon itself.

What about just for the seven theme? Other themes might do the same.

That's actually a strikingly simple idea, which eliminates the (very valid) concerns raised above. I might be missing something, but I'm pretty sure that's a very good idea!

Yep, I like this a lot. Let's run it up the flagpole.

I don't get it. At the bottom of an admin page in overlay there is usually a submit button that you can click and it will close the overlay. There's a toolbar with more than a handfull of links that can take you somewhere else. There's the ever-present browser back button… So what are we fixing here? Look at the original post: not evident to 1 user… might be hard to close… How important is this button in the overall scheme of things on a page? It sure stands out more with this patch, but should it?

That's true, although the user may not want to submit the overlay (maybe they opened the wrong one by mistake), and the toolbar and/or shortcut bar(s) may not be enabled. That does leave the back button, but do we want to rely on that?

Back button is the most used browser button. Many people rely on it for navigation

The back button doesn't help you though, when you have clicked around in the overlay a bit and have now had enough and simply want to close it.
Also, not all submit buttons in the overlay close it. Actually those are the exception. So there is a very use-case for the close button.
And since it is there, we should make sure it is actually seen, which this patch does.

Still, this is optimizing for not-so likely scenarios. This patch makes the close button too important. It needs to be findable for sure, but not follow you around everywhere you go.

I fail to see how this is not so likely.

You install Drupal. You post an article. You see the 'Submitted by' text is in a format you don't like. You click Configuration > Regional and language > ... > Date formats and change the date formats. You submit the page. Well, how do I see if the change worked? CLOSE-button!

You install Drupal. You care a bit about performace. So you click Configuration > Development > Performance and change a few settings. You submit the page. Well, how do I see if CSS aggregation works on the front page? CLOSE-button!

I could go on and on...

Sorry but I have to agree with David here, that the close button is not standing out is a design decision - as it shouldn't distract from doing your job. The usability results are inconclusive, having it move with you down the page to me has no clear win in any likely scenario.

Sure there are scenarios that it might be helpfull but the true majority the behavior will be to save, end at the top of the page and click close. This patch will be very distracting as it is the only moving part on a Drupal administration page - where it totally should not have such importance.

what about including a simple close link at the bottom of the overlay in addition to the "X"? Nothing fancy:

ooops .. too wiiiiiiiiiiiiiiiiiiide:

What we're saying is that there isn't really anything to fix here.

I am going to mark this by design, as we chose to go down this route for a specific reason; we wanted it to be at a place that one can remember but not prominent enough for it to be distracting.

Alright, so let's separate the two problems -- at least explicitly in our discussions, if not in two separate issues:

1. Users may not understand that the X means close, and therefore may not really understand how to close the overlay once they've opened it.
2. For long forms, closing the overlay might be difficult because the only way to do that is at the very top.

Now, even though these are two issues, we could conceivably come up with a single solution (or not) which addresses both, so separate patches may not necessarily be called for, but let's at least address both problems distinctly. (And whether they really are problems to be solved.)

The X-in-place (position:fixed) solution addresses point 2 but not point 1. The close link at the bottom addresses point 1 but not point 2 (because being at the very bottom is just as bad as being at the very top when you're in the middle of a form).

what about this:

solves 1 but not 2 ... but worth thinkin about none-the-less

We got no details from David and really fixing it properly should be D8 stuff, I am not sure if its not just a bump rather then an actual problem.

We came up with a design for this while seeing users struggle to find their way around Drupal gardens. Of the solutions proposed, #30 comes closest to something that would fix the issues I've seen, but it's still not good enough. The issue Im seeing is that users are clicking Save expecting the overlay to go away. They are not looking in top right area to close. For that reason, we need to do something like #30, plus include a "save and close" button. The solution we were looking to implement is this....

@Noyz Thanks for your details, I am still favoring to fix this in Drupal 8. Because of the limited time finding a proper solution for this, the close next to X seems kind of a hack - which is very distracting in long term usage.

The Save & Close is again somewhat of a hack, which would only apply to pages where the user is tempted to go back to the site? I mean is adding terms one of them, or what is the classification here? Also on creation of content, you will have Save, Preview, Delete - consider modules adding Save as Draft, it will become very hard to add another button to save this issue. I just feel there are many insecurities and making a big change like this, it seems silly to take such risks.

It might be interesting to know, when do people find the X? Does that change their behavior?

*ignore this*

We have no choice but to fix this in Drupal Gardens. It's a serious issue. We'll fix it there, and provide user metrics on the fix.

@Noyz totally understandable, would be awesome!

A save button up there would be useful too so you don't need to track to the bottom of the page.

Can be closed. The style will probably be changing significantly with current UX styling work: http://groups.drupal.org/node/283223#Overlay