Page MenuHomePhabricator

Current fundraiser site-notice is fiddly to dismiss.
Closed, ResolvedPublic

Description

The current fundraising site-notice, "Please read: A personal appeal from Wikipedia found Jimmy Wales" consists of a rather large banner, all of which is a clickable link to the appeal page, plus a very tiny [x] button to dismiss the banner.

I have had to dismiss this banner on several sites already (partly due to accessing WP anonymously from various machines) and about 50% of the time I miss the tiny tiny close link and end up on the appeal page.

I don't know how long the current banner is due to remain. If it's only going to be up for short while longer then it may not be worth fixing in this current situation. Either way, it should definitely be done differently in any future site notices.

I would recommend that the link text and the 'read more' link click through to the appeal, that the close button is made larger and that the background image is not clickable at all (so if you miss the [x] you don't get taken to an unexpected page, you just have another go at clicking).


Version: unspecified
Severity: normal

Details

Reference
bz25952

Event Timeline

bzimport raised the priority of this task from to Lowest.Nov 21 2014, 11:22 PM
bzimport set Reference to bz25952.
bzimport added a subscriber: Unknown Object (MLST).

Moving ticket to the content team.

Thanks for the report. I know some others have had issues as well and we're going to talk about what the best option is. We've found the full banner click is fairly important (people get confused and don't click through) but we don't want to make it hard for people to hide either. We have a collection of new banners we will be testing in the US including one going up within the hour all of which have a significantly larger close button as well which I think may be better for that (you can see the first example at http://en.wikibooks.org/wiki/Main_Page?banner=2010_JA1_Banner4_US but more are made and will be going up).

(In reply to comment #2)

you can see the first example at
http://en.wikibooks.org/wiki/Main_Page?banner=2010_JA1_Banner4_US

That's an improvement. However, in that banner it looks like clicking anywhere in the top stripe (or at least, on the right half of it) would cause the banner to be dismissed, but actually it is just the x itself. This is confusing.

Created attachment 7828
Example of what should be clickable.

Here is an example showing what should count as part of the 'dismiss' link in the new design, linked to above. In this case the size is dictated by the design (the top stripe implies a close 'button'). In other designs, it may differ, however the important point is that the clickable area should be larger than the size of the [x] (or else the [x] should be a lot bigger).

Attached:

Banner_click.png (188×1 px, 402 KB)

Sorry for the delay in responding. I'm going to close this off for now. I know this isn't exactly what you want but we made the X in the corner larger across the board (by 2px in each direction) and have run with that for the past couple weeks globally and, at least anecdotally (from asking online and from a lack of the emails which we got before) this seems to work much better.

We may be able to adjust it a px or so larger but not sure if we want to do much more then that. Using the entire section though will be problematic especially when on smaller browsers that section can get right up next to the text.

As always please let us know if you think it still needs improvement.

Created attachment 7909
Example of current banner

Here is what the current banner looks like. The close button is still absolutely tiny. I know it is there, so I use it whenever I encounter the banner, and still I occasionally end up clicking through to the fundraiser page instead of closing the box as I intended.

However, anecdotally, it seems that most people probably don't even notice the close box at all, due to its size, placement and colour.

For example, I was watching a very tech-savvy friend browse Wikipedia recently, and on each page he had to scroll down to get to the content, because on his smallish widescreen laptop the banner (combined with the top-level navigation) took up over half of his screen, vertically. I asked him "Why don't you get rid of the banner?" to which he replied "How do you do that?". I had to physically point to the [x] on his screen (his first thought was to start looking through his preferences). He was very relieved to get rid of 'that annoying face', as he put it.

I am surprised you are worrying about people being able to accidentally close the banner on small browsers, without being concerned about how the banner cripples the use of the site in those cases. I expect most users with 'small browsers' would be ecstatic if the annoying banner went away, so why make it so difficult?

I am re-opening this bug, as it is clearly not fixed. If you want to close it as a WONTFIX then that's not something I can argue with, but an extra 2 pixels is clearly not good enough to resolve the problem.

Attached:

temp_for_wp_click_bug.png (273×1 px, 431 KB)

Created attachment 7910
Illustration of the problem.

In the interests of making a more constructive criticism, I thought I'd upload an example of the problem, so you can see more clearly what I am referring to.

In the first example, clicking the mouse will close the banner.
In the second example, clicking the mouse will go to the fundraising page.

Can you spot the difference? It is hard, even when you know what you are looking for.

This could be massively helped by two things:

  1. Make the clickable area at least 5px larger than the area of the visible box. That way as long as part of the 'finger' of the hand is on the box then it will detect it as a click.
  2. Give some kind of visual feedback when the mouse is over the box, e.g. changing its colour. Currently the only visual feedback is that the text in the banner (all the way on the other side of the screen, on large screens) stops being underlined.

Attached:

temp_for_wp_click_bug_-_flattened.png (200×501 px, 26 KB)

The fund raiser is over, so closing this.

And is there any plan to learn from this problem? What is being done to ensure that it does not re-appear in the next fundraiser? Or will I just have to re-open the bug at that time?

We want to make this as workable as possible and I've definitely been thinking of options and I want to thank you for the suggestions you made in your last comment. I was never able to test ideas at the time but I will be over our testing cycle before this fundraiser.

So far the biggest thing that I would like to do is put a title on the close link so that we can get a hovered 'hide' (translated since we already have most of those translations) when you hover over the x. This was in place of your color changing idea but I think would work a bit better in the end. The slightly larger box for it is also a distinct possibility.

Another fund-raiser, and the problem is still there, so re-opening. Perhaps it will get fixed this year. I have seen people other than myself caught out by this.

See comment 7 for detailed example of problem and some possible solutions.

It's happened again. I thought I'd clicked the miniature [x], but I still ended up on the fundraiser page.

Seriously, guys. I know I'm the only one reporting this, but that's because most people (based on my observations) just get annoyed with it and curse the site. It probably doesn't drive people away, but nor did Monobook, and a lot of effort went into Vector, nonetheless.

Usability should be an ongoing concern.

Fixed in r105740 and r105741. Expect to see it on the live banners within a week or two.