Page MenuHomePhabricator

Show users that language button has moved
Closed, ResolvedPublic3 Estimated Story Points

Description

Either show a hover letting users see that the new language button is live or when users click on old button redirect them to top.
Remove after being live for 1 month.

Here's a prototype.
https://dl.dropboxusercontent.com/spa/tuyaic6q75gkcv4/Exports/changelanguage-firstrun/changelanguage-firstrun.html

^ open the link.

the page will scroll to the bottom automatically.
then you hit the read in another language button.
the page will scroll to the top with a message that dismisses automatically.

mock

iPhone 6.png (1×750 px, 197 KB)

Related Objects

Event Timeline

I'm skeptical of using popover tooltips for new features. they become annoying because of the unreliability of the "seen" flag. people use different browsers or for whatever reason. the number of times i have collections tooltips is not even measurable :) let's decide on approach first.

first, there are two audience here, 1. people who already know how to change language and they do change language 2. people who have don't know articles exist in other languages.

for 1 - They usually go to the bottom and tap on a button - we need to communicate the button will be on top from now on.

2 is very tricky. we cant say "hey you can change language of an article" and then have only 1-2 languages available for the article they are currently on. we can't portray this feature as machine translated "change language" like any other website.

IMO i think we should cater to the first group.

Thoughts?

Here's a prototype.
https://dl.dropboxusercontent.com/spa/tuyaic6q75gkcv4/Exports/changelanguage-firstrun/changelanguage-firstrun.html

^ open the link.

  1. the page will scroll to the bottom automatically.
  1. then you hit the read in another language button.
  1. the page will scroll to the top with a message that dismisses automatically.

non JS users won't have this feature unless we can pull it off in CSS which i think is possible.

Change 299681 had a related patch set uploaded (by Jdlrobson):
WIP: Help old users discover newly positioned language switcher

https://gerrit.wikimedia.org/r/299681

I posted early to share my thought process. https://gerrit.wikimedia.org/r/299680 is ready to review which allows both buttons to coexist.

Merged the first hygiene, I have some comments on the meaty one, will review the last hygiene one later or when the previous one is ready.

Merged the first hygiene, I have some comments on the meaty one, will review the last hygiene one later or when the previous one is ready.

Are the hygiene ones tagged with this task? I was able to find the first from @Jdlrobson's comment above, but I'm not sure what the "last hygiene one" you're referring to is.

@jhobs see the dependency chain on the gerrit patches. They may not be tagged with the task.

Addressed the issue and https://gerrit.wikimedia.org/r/#/c/299681/6 is ready for another round of review.

I've -1d and addressed my own comment with a new patchset. LGTM but I can't merge now. Please have a look.

Change 299681 merged by jenkins-bot:
Help old users discover newly positioned language switcher

https://gerrit.wikimedia.org/r/299681

Verified in beta cluster. Chrome + Firefox + Safari desktop, Chrome & Firefox mobile on Android.

@Jhernandez hey.. this didn't go through design sign off. there are some css changes. alignment issue.

Here are the css changes

div.tutorial-pointer {
   top: -6px;
   left: 24px;
}
.pointer-overlay .tutorial-pointer{
   border-right: 6px solid transparent;
   border-left: 6px solid transparent;
   border-bottom: 6px solid transparent;
}
.pointer-overlay {
   //remove the box-shadow property 
   //add border radius
   border-radius: 2px;
}

Okay, we can leave this in resolved. We should make sure T141644: Design tweaks for PointerOverlay is done first thing in the sprint so it can ride the train week 1 of the sprint. I'll comment on that task to that effect.