Page MenuHomePhabricator

Slider for translations on donate.wiki WTG
Closed, ResolvedPublic

Description

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?

Event Timeline

MBeat33 created this task.Aug 7 2018, 6:25 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 7 2018, 6:25 PM
Pcoombe added subscribers: schoenbaechler, Varnent, Pcoombe.

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)

Pcoombe claimed this task.Sep 12 2018, 4:17 PM

@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
Pcoombe closed this task as Resolved.Sep 13 2018, 4:13 PM

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.

Will do! Thank you @Pcoombe

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.