When loading https://donate.wikimedia.org/wiki/Ways_to_Give in Firefox 61.0.1 and Safari 9.1.1, a slider appears briefly below the list of translations available at the top, but then disappears. I am able to click and drag the whole list left or right, but it's a little counterintuitive. Would it be possible to make the slider stick, or insert an easier way to see the translations available on the right side of the list?
Description
Event Timeline
Thanks Michael. You're not the first person to raise this as a usability issue. @schoenbaechler and I are already thinking about alternatives.
(cc @Varnent)
@schoenbaechler I've made a first pass at the design you suggested over email. https://donate.wikimedia.org/wiki/Ways_to_Give
Any thoughts? I think we're better using an icon since it won't need more translations and can take a consistent amount of space, although I'm not sure if this is the best one.
Next steps:
- add a hover effect and better cursor
- change the icon when expanded
- tweak the spacing on mobile
- try and hide the icon when there are few languages and it's unneeded
Okay, managed to do all the above and I think it's looking a lot better now.
@MBeat33 Please let us know if there's any donors still getting confused.
This is awesome (and even keyboard accessible) @Pcoombe!
The only suggestion I have is to change the icon’s rotation when expanded. Instead of ’transform: rotate(-90deg);’ I’d set it to ’’transform: rotate(90deg);’. It’s debatable but I find its movement more natural with ’90deg’, see video below:
https://www.dropbox.com/s/esqpu6oxu1w86jq/donate-wiki-caret-direction.mov?dl=0
@schoenbaechler Thanks, that's one thing I wasn't sure about. I think you're right, and have edited it to rotate 90deg now.