Page MenuHomePhabricator

Visual element to aid discovery of Wikipedia Preview
Closed, ResolvedPublic

Description

Goal

Give users a visual indicator that the link they see and want to interact with is coming from Wikipedia. Visual indicator should ideally be distinct from other hyperlinks.

Design

Preview discovery
zeplin

https://app.zeplin.io/project/5edf645eef92dfb2dc2f8ce8/screen/5edf64c6b1d4aa97af0eaf5c/

Design Details

  • Preview shows up when users tap on the highlighted word.
  • Enable tap for the entire highlighted word including icon.

Event Timeline

AMuigai created this task.Apr 28 2020, 1:16 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 28 2020, 1:16 PM
SGautam_WMF added a project: Design.
SGautam_WMF added a subscriber: SGautam_WMF.
AMuigai triaged this task as Medium priority.May 14 2020, 1:34 PM
SGautam_WMF updated the task description. (Show Details)May 21 2020, 11:54 AM
SGautam_WMF updated the task description. (Show Details)May 21 2020, 11:57 AM
SGautam_WMF updated the task description. (Show Details)May 25 2020, 12:58 PM
SGautam_WMF updated the task description. (Show Details)May 26 2020, 5:22 AM
SGautam_WMF updated the task description. (Show Details)Jun 2 2020, 5:14 PM
SGautam_WMF updated the task description. (Show Details)
AMuigai updated the task description. (Show Details)Jun 3 2020, 1:10 PM
SBisson removed SGautam_WMF as the assignee of this task.Jun 3 2020, 8:56 PM
eamedina claimed this task.Jun 4 2020, 7:04 PM
eamedina moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
SGautam_WMF updated the task description. (Show Details)Jun 9 2020, 10:47 AM

Let's be mindful of the partners ownership of the design of their sites. Anything we propose may be in conflict with what they have already or they may simply not like it. And that's OK.

The component currently allows partners to customize how those links look. I think we should keep that and give them the option to use the style presented here.

The reminder above is actually pretty useful

The component currently allows partners to customize how those links look. I think we should keep that and give them the option to use the style presented here.

@SGautam_WMF I think this simplifies our job a bit, we don't have to worry about other designs then

@SBisson Agreed, this needs to be aligned with partner's design guidelines of treating links. From our side, we can share some options.

@eamedina yeah, for our demo version we can keep 1-2 designs ready.

@SGautam_WMF should we add hover pointer to the discovery style?

@eamedina sounds good for the desktop version.

@eamedina one thing which I forgot to add earlier is Wikipedia Preview's hyper link state once user has interacted with it. This won't require any additional design just the color of a link will change after tap/click on it. I have updated the Zeplin link with the hex code of the color.

@SGautam_WMF sounds good, we can take care of that tap/visited interaction style one we work on ticket regarding touch interactions (T250797)

I have now addressed all feedback to this point, moving to code review

eamedina moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Thu, Jun 25, 4:15 AM
SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Thu, Jun 25, 8:20 PM
SBisson added a subscriber: Jpita.

@Jpita ready for testing. The PR is merged.

when the popup opens the rest of the page's text also changes (it goes down a few lines), is this expected?

when the popup opens the rest of the page's text also changes (it goes down a few lines), is this expected?

hmmm, that shouldn't be like that, can you tell which browser you are using?

Jpita added a comment.Mon, Jun 29, 1:38 PM

when the popup opens the rest of the page's text also changes (it goes down a few lines), is this expected?

hmmm, that shouldn't be like that, can you tell which browser you are using?

any browser

I'm not able to replicate in latest versions of Firefox, Chrome and Safari. Huei are you able to replicate? Pita, could you share with us a bit more about your set up when video was recorded: was that running locally? Looks like the index.html margins are missing

Jpita added a comment.Mon, Jun 29, 1:57 PM

You cannot replicate it on Safari?
The video is on Safari but I can also replicate it on IE11 using CBT and Chrome on my laptop.
I'm using the demo page https://wikimedia.github.io/wikipedia-preview/

I can't replicate it locally or even with IE11 on cbt

Jpita added a comment.Mon, Jun 29, 3:20 PM

On a call with Eduardo we managed to find the issue, if you put your screen resolution to 1440x900 on a macbook pro 15" then open the demo page on any browser, you will see the issue if you hover over the word "Family".
@SBisson is this an issue worthy of a task or we can ignore?

@Jpita definitely worthy of a task, at the very least to understand the problem.

Also, I noticed in the video that the alignment of the icon is wrong. This should be fixed here.

Also, I noticed in the video that the alignment of the icon is wrong. This should be fixed here.

https://github.com/wikimedia/wikipedia-preview/pull/14

Also, I noticed in the video that the alignment of the icon is wrong. This should be fixed here.

https://github.com/wikimedia/wikipedia-preview/pull/14

Merged

Jpita moved this task from QA to Design sign off on the Inuka-Team (Kanban) board.Tue, Jun 30, 1:59 AM

looks fine all three browsers(firefox, chrome, safari).

AMuigai closed this task as Resolved.Mon, Jul 6, 12:10 PM