Hover issues on wallets page

[schildbach]

Maybe its just me, but I somehow think hovers are overused on bitcoin.org. I personally think hovers only work if they're small enough to not cover any main content, so only for small single-line phrases or thumbnail images. Everything that is bigger should be clicked to activate.

The most problematic hover is the wallet description. Once popped up, it obstructs the entire list of wallets and makes it impossible to select another without moving the mouse into the edges. As more wallets are added, it becomes more difficult to reach the wallets in the center as you need to skillfully navigate your mouse between all the other icons (unless you have a touch device of course :-)

We should also reconsider the hover behaviour for the mobile/desktop/web tabs. If you hover over the main items, they're automatically selected, and the filter action executed. I think this is entirely unexpected by most users. More than once I accidently deselected my previous selection just by moving my mouse too far.

[saivann]

On icons: It is possible to use clicks at the cost of requiring javascript to display wallets (but I like to only require CSS as much as possible). Edit: Althought we could fallback to CSS hover if javascript is disabled.

On the menu: That is possible too. But actually clicks are supported, you can just click "Android" and it will be selected, no matter if you hover "iOS" afterwhile, selection will switch back to what you selected (Android) as soon as your mouse leaves the menu. My impression is that most people expect menus to work with mouse hover, not clicks, so I've offered both options.

[schildbach]

Good points. Loosing the ability to navigate without JavaScript would be unfortunate.

About the menu: Hover "Mobile", click BlackBerry. You'll only see one wallet (expected). Now hover "Desktop" or "Web", don't click. The BlackBerry selection is undone, even if I move my mouse away from the hover zone. It behaves as if I had clicked on Desktop or Web.

[harding]

I get the same behavior @schildbach gets on the menu, and I find it to be the only part of that page which really annoys me. If it worked the way @saivann describes (restore view to click-chosen display on unhover), that would be great.

[saivann]

@schildbach @harding I didn't expect users would "accidentally" hover "Desktop" after hovering "Android" (these menus are pretty far from each other and not in between the cursor and wallets). So I intended this to work only within submenus:

1. Hover and click on "Android".
2. Hover on iOS or BlackBerry.
3. Hover on any wallet.

...But, really making it work on all menus as you're suggesting wouldn't be that hard technically, however we can't display a "check" icon on "Desktop/Mobile/Web", so the user wouldn't know selection worked on click in this case.

[harding]

@saivann your expected use case makes sense, but it doesn't completely capture how I tend to use the page. For example, lets say I do steps 1 through 3 similar to what you describe:

1. Hover Desktop
2. Click Linux
3. Hover GA.it (on second row). The GA.it entry now obscures the top row.

I read the GA.it entry by hoving over its scores to get the detailed descriptions. Then I want to see another wallet from the top row---say Armory---so I move the mouse out of the hover box and move the cursor towards Armory, but in the process I accidentally cross Web and it gets selected instead of Desktop. This seems to happen to me quite often. (Maybe the merged screenshots and mouse trail below will help illustrate this.)

[schildbach]

Yes it happens to me accidently quite often as well. I think it's ok when we can't/don't display a check icon, we don't that currently as well.

[saivann]

Ah... right! I'll open a pull request about this soon, thanks!

[saivann]

@schildbach @harding I have just opened pull req #548, thanks!