Tests have proven that users have difficulties finding the close button of the overlay. This is also caused by the position of it: the far right side is an area that is far out of focus for an average web-site-scanning. Since I reckon we are going to keep the position, size and color might be a way to give the button more emphasis. Work wit red? How much of it? Make it bigger?

CommentFileSizeAuthor
#8 Overlay_close.png6.13 KBFannon
#3 overlay-blue.png12.05 KBeigentor
#3 close.png559 byteseigentor
#4 close-blue-small.jpg6.31 KBeigentor
Screenshot-189.jpg4.81 KBeigentor
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

eigentor’s picture

eigentor CreditAttribution: eigentor commented
Issue tags: +Usability, +D7UX

More ideas for emphasis: other coloring? Also write "Close" next to the button? (suggestion of a user).

NaheemSays’s picture

NaheemSays CreditAttribution: NaheemSays commented

apart from colouring, what about giving it a fixed position? If you scroll down the page, the close button should IMO not disappear "above the fold", but track the scrolling and stay present.

That should help some IMO.

eigentor’s picture

eigentor CreditAttribution: eigentor commented
FileSize
close.png559 bytes
overlay-blue.png12.05 KB

So, played around a bit. Actually I like a bright Drupal baby blue the best. Red and green do not feel right, yellow is totally ugly, any shades of grey don't cut it for more obtrusiveness.

click for full size image

Attached also the png to stick in /modules/overlay/images and try out the change. It is a straight PNG 24, I remember there are some clever fallback solutions for IE6, but there is sure someone who can fix this when we can agree upon color...

Here is a comparison gallery of color variants:

original, black
http://www.screencast.com/users/eigentor/folders/Jing/media/c2c57c65-aee...

alarm red
http://www.screencast.com/users/eigentor/folders/Jing/media/88bf0aa6-483...

darker red
http://www.screencast.com/users/eigentor/folders/Jing/media/8711490a-5ed...

happy fimo green
http://www.screencast.com/users/eigentor/folders/Jing/media/29dcf425-26d...

Submarine yellow/orange
http://www.screencast.com/users/eigentor/folders/Jing/media/375a5a18-d9e...

and the drupally druplicon blue for comparison:
http://www.screencast.com/users/eigentor/folders/Jing/media/363d3c5a-28f...

Maybe show it to your everyday Drupal Newbie user, which button he would most likely click. Cause it is only for the first time, that you need the color. After a user clicked it once (or twice, as a confirmation it was the click on the button that closed the overlay), the job of the color is done. So maybe a fine adjustment of the right level of jump-to-the eye is necessary...

eigentor’s picture

eigentor CreditAttribution: eigentor commented
FileSize
close-blue-small.jpg6.31 KB

for image improvement

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented

I would like to see this tested more, before we make any calls on it.

Bojhan’s picture

Bojhan CreditAttribution: Bojhan commented
Component: base system » overlay.module
Category: bug » task

Not really a bug, I would like to still do more testing.

casey’s picture

casey CreditAttribution: casey commented

Patch in #655722: Changes made in an overlay session are not reflected when the user closes the overlay keeps the close button visible while scrolling.

Fannon’s picture

Fannon CreditAttribution: Fannon commented
FileSize
Overlay_close.png6.13 KB

I dont like the button to be right beside the overlay. I would expect it to be in the top right corner, like in every application windows.
This is not very special, but this will be where the ppl expect it to be.

I'll attach a conceptual screenshot.

David_Rothstein’s picture

David_Rothstein CreditAttribution: David_Rothstein commented

Re #7, I think @casey actually meant to link to #655514: Usability issues with overlay close button