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

Related Objects

Event Timeline

JKatzWMF created this task.Jul 8 2016, 8:30 PM
dr0ptp4kt added a project: Design.
dr0ptp4kt added a subscriber: dr0ptp4kt.

@Nirzar, would you please add mocks?

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?

@Nirzar will be providing mocks.

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.

Nirzar updated the task description. (Show Details)Jul 14 2016, 7:05 PM
Nirzar updated the task description. (Show Details)Jul 14 2016, 7:10 PM
dr0ptp4kt set the point value for this task to 3.Jul 18 2016, 4:29 PM
Nirzar removed Nirzar as the assignee of this task.Jul 18 2016, 5:51 PM
Nirzar added a subscriber: Nirzar.
Jdlrobson moved this task from To Do to Doing on the Reading-Web-Sprint-77-Segmentation-fault board.

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

phuedx reassigned this task from Jdlrobson to dr0ptp4kt.Jul 28 2016, 6:33 AM
phuedx added a subscriber: Jdlrobson.

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

Jhernandez closed this task as Resolved.Jul 29 2016, 9:37 AM

@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;
}

Given this isn't enabled I've created T141644 which blocks enablement.

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.