[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Page MenuHomePhabricator

[Language switcher] Determine placement of indicators, coordinates, help icon, etc.
Closed, ResolvedPublic

Authored By
alexhollender_WMF
Sep 22 2020, 1:22 AM
Referenced Files
F33939691: Screen Shot 2020-12-08 at 10.36.50 AM.png
Dec 8 2020, 9:39 AM
F33939668: Screenshot_20201208-094029_Firefox.jpg
Dec 8 2020, 8:52 AM
F32414951: image.png
Oct 26 2020, 7:24 PM
F32414929: image.png
Oct 26 2020, 7:24 PM
F32414949: image.png
Oct 26 2020, 7:24 PM
F32414827: image.png
Oct 26 2020, 7:24 PM
F32414932: image.png
Oct 26 2020, 7:24 PM
F32414938: image.png
Oct 26 2020, 7:24 PM

Description

Description

Our intention is to put the language switcher on the same line as the article title, on the opposite side:

image.png (633×1 px, 99 KB)

However there are currently various elements in and around that area. Here are a few examples:

projectelements directly in areaother nearby elementsimagelink
English Wikipediapage indicatorscoordinates, From Wikipedia... tagline
image.png (277×1 px, 68 KB)
link
German Wikipediapage indicators, audio icon, coordinates
image.png (207×1 px, 73 KB)
link
French Wikipediapage indicators, coordinates
image.png (255×1 px, 61 KB)
link
Dutch Wikipediacoordinates, audio player
image.png (263×1 px, 110 KB)
link
Basque Wikipediapage indicatorscoordinates, quality score
image.png (199×1 px, 48 KB)
link
Russian Wikipediapage indicators, coordinatesadditional edit links, From Wikipedia... tagline
image.png (272×1 px, 128 KB)
link
Arabic Wikipediapage indicators, coordinates, page issue iconsadditional edit link, From Wikipedia... tagline
image.png (603×1 px, 193 KB)
link1, link2
Swedish Wikipediapage indicators, coordinatesadditional edit links
image.png (245×1 px, 112 KB)
link
Ukrainian Wikipediapage indicators, coordinatesadditional edit links, From Wikipedia... tagline
image.png (502×1 px, 130 KB)
link1, link2

Where do we put these elements?

So the question then is: if we want to move these elements to make space for the language switcher, where should we put them? And given the amount of inconsistency already present, can we move towards a more consistent approach to all of this article metadata going forward?

The table examples above are meant to illustrate the variety of elements that appear in a non-standardized way within that article header space. Also relevant is the space right below that (above the lead paragraph & infobox), which also happens to be an area with lots of non-standardized elements: page notices/hatnotes/page issues. This area is relevant because if we're going to move page indicators, coordinates, and other elements shown in the above examples, to a new location below the line, we need to be mindful of making a further mess in an already messy area of the page. There is consistency in the sense that all Wikipedia projects seem to use that area for the same types of elements (for the most part), but again the styling of those elements is all over the place. Here are a few examples of how that space looks with various notices:

image.png (304×1 px, 76 KB)
(link)
image.png (332×1 px, 71 KB)
(link)
image.png (325×1 px, 75 KB)
(link)
image.png (350×1 px, 103 KB)
(link)
image.png (358×1 px, 87 KB)
(link)
image.png (343×1 px, 82 KB)
(link)

A very organized approach would be to have some kind of clearly defined page template/consistent page layout that was used across all Wikipedias. Such a thing would help guide/determine which elements appear where on the page. For example:

image.png (677×1 px, 74 KB)

However I'm concerned that something like this might be too ambitious for us at this time.

Establishing a more consistent, clutter-free baseline?

Part of what makes this challenging is the variety of elements that appear in an inconsistent manner across the various Wikipedias. Additionally some of the elements that are present may no longer be serving their purpose, or there might be a better solution to achieve the same goal. Do we want to have some conversations up-front with the communities about removing or modifying existing elements, in service of getting a more consistent, clutter-free baseline to work from? Candidates include:

  • removing the From Wikipedia, the free encyclopedia tagline found on several Wikipedias
  • proposing a plan to merge the various protection/lock icons with the Edit button
  • questioning the value of the coordinates links that appear on many articles
  • discussing if a more prominent Edit button might make people feel comfortable with removing the additional edit links on the page

Goals of this task

  • identify the various elements in and around that area
  • discuss our options of where we can move them to and the associated complexity
  • decide where we're going to move them to

Non-article pages

need to fill in with notes about the language switcher on non-article pages.
Also: T262472

Eye towards responsiveness

Event Timeline

My initial thought was that we could shift any elements to the area just below the border, opposite from the title, like this:

image.png (546×1 px, 212 KB)

That works well for projects that have the From Wikipedia, the free encyclopedia tagline below the title (e.g. English, French, Portuguese, Japanese), because there is already a nice empty space:

image.png (276×1 px, 124 KB)

Even in cases where there is already something there (usually coordinates) we could still put the indicators there:
image.png (277×1 px, 67 KB)

However most projects do not have the From Wikipedia... tagline, so there is not an existing space there. We could of course create space by moving the content down, but then there's a slightly awkward gap/space that gets created below the title:

image.png (270×1 px, 92 KB)

Another option would be that for projects that don't have the From Wikipedia... tagline we shift the elements (indicators, coordinates, etc.) below the line but place them on the same side as the title rather than opposite, eg:

image.png (270×1 px, 81 KB)

In T263511#6492459, @alexhollender wrote:
  • proposing a plan to merge the various protection/lock icons with the Edit button

However, the edit icon itself indicates protection on mobile, so I agree the colorful padlocks are not needed.

One thing I forgot about in August is that padlocks usually not only indicate the protected status of an article, but also usually (if not always) link to the protection policy. The edit link does not and cannot provide this functionality as it links to the edit (view source) interface. Also, the mobile interface doesn’t show the padlock on protected pages the current user is able to edit (on semiprotected pages for autoconfirmed users, on fully protected pages for admins etc.) as of now, while this is IMO an important heads-up for senior editors.

@ovasileva @RHo here are the first sketches regarding what the top of article would look like after shifting things around to make room for the language button.

Wikipedia's without a From Wikipedia... tagline

currentupdated
image.png (152×1 px, 46 KB)
image.png (456×1 px, 237 KB)
image.png (255×1 px, 61 KB)
image.png (456×1 px, 255 KB)
image.png (263×1 px, 81 KB)
image.png (456×1 px, 235 KB)
image.png (199×1 px, 48 KB)
image.png (456×1 px, 267 KB)
image.png (245×1 px, 81 KB)
image.png (456×1 px, 252 KB)

Wikipedia's with a From Wikipedia... tagline

currentupdated
image.png (277×1 px, 62 KB)
image.png (570×1 px, 376 KB)
image.png (272×1 px, 82 KB)
image.png (570×1 px, 373 KB)
image.png (252×1 px, 62 KB)
image.png (570×1 px, 248 KB)
image.png (371×1 px, 98 KB)
image.png (486×1 px, 201 KB)
image.png (254×1 px, 71 KB)
image.png (486×1 px, 259 KB)

We could also pursue the possibility removing the From Wikipedia the Free Encyclopedia tagline, in which case those elements would just shift to the other side, underneath the article title.

From the description

However I'm concerned that something like this might be too ambitious for us at this time.

Major changes to the article structure, like this, should require talks with the community - WMF should not unilaterally change the structure of long-established community conventions.

Please see related T248761: [modern Vector only] Move indicators underneath firstHeading

Regarding

However most projects do not have the From Wikipedia... tagline, so there is not an existing space there. We could of course create space by moving the content down, but then there's a slightly awkward gap/space that gets created below the title:

We should be able to move indicators down and reserve space, let content float on the left with top starting position when we're able to rely on modern CSS layout techniques like Flexbox.

after reviewing @ovasileva and myself have found that placing the page indicators below the page title significantly increases their visibility on the page (compared to their current location). At this point we don't feel confidently that increasing their visibility is a good idea, as we have little understanding of the value they provide.

image.png (789×1 px, 223 KB)

Two other options we could explore:

  1. shift the icons over to the right, even though this results in a little gap underneath the article title
    image.png (268×1 px, 174 KB)
  2. shift the icons over to the right + add the tagline back in
    image.png (268×1 px, 166 KB)

Here are a few additional mockups of how each approach would look:

shift, no taglineshift + tagline
image.png (268×1 px, 164 KB)
image.png (268×1 px, 167 KB)
image.png (268×1 px, 97 KB)
image.png (268×1 px, 100 KB)
image.png (268×1 px, 96 KB)
image.png (268×1 px, 99 KB)
image.png (268×1 px, 142 KB)
image.png (268×1 px, 150 KB)
image.png (268×1 px, 120 KB)
image.png (268×1 px, 126 KB)

@alexhollender - I like this! I think it feels like a more natural place for them. My only comment is when we have page issues, but no headline, it looks a bit awkward, as in the Amsterdam example above.

image.png (268×1 px, 96 KB)

A second note on the headline - this approach also unblocks the work while the conversations about the headline are happening, as the location is now independent of them

hi @alexhollender - posting a comment for posterity based on a conversation we had about this today:
I agree with @ovasileva that moving the the icons to the right regardless of whether there is a tagline or not is good in terms of decoupling the decision about removing the tagline. A second benefit would also be the simplicity of always having the icons in the same position regardless of tag or no tagline (as I understand it, originally the idea was if the tagline stays, then wikis without tagline would have the icons on the opposite of the article title).

However, playing devil's advocate, I do question if the icons under the headline is really that much more prominent? And secondly think there might be value in exploring further whether this could be a desirable thing (surfacing contextually relevant meta info about an article being edit-protected, featured, etc under the heading). Though I do personally prefer the version with icons shown opposite the title with tagline underneath as being the most visual balanced option.

There’s sadly nothing we can do about coordinate positioning without talking to the community as coordinates are provided by templates right now. We might want to hop on that sooner rather than later once we have a plan.

I see 3 options:

  1. We make coordinate display part of the skin itself and get the community to drop the use of their templates. We'd need to find a way to configure geohack service or whatever services the community needs to make sure this is a seamless transition
  2. We ask them to be proactive drive the design and implementation change before we land these changes by updating the templates to behave differently in modern Vector.
  3. Same as 2, but we break it first and allow clean up retroactively

Which of these do you think is more likely?

FWIW I think building something of our own, would be the best approach here. It would likely leave 2 coordinates displayed in the page at first as we collaborate with the community to make that transition but on the long run just as we've done with indicators this will be easier to manage.

Discussed with @sgrabarczuk last week. I think the plan so far will be:

  • Reach out to all test wikis and as many other wikis as possible within the top 20+ to start the discussion and give a heads up
  • We then break it, but work with wikis that come to us later in the process to get them working again

Our request here would be to ask all the wikis to change their templates to match the location we want for the coordinates. @Jdlrobson, @alexhollender - how's that sound?

Our request here would be to ask all the wikis to change their templates to match the location we want for the coordinates. @Jdlrobson, @alexhollender - how's that sound?

How about something like:

"The reading web team are interested in making the rendering of coordinates part of the MediaWiki software, to standardize display across our projects based on what editors are doing in templates. This will allow us more control in displaying this information on mobile and the upcoming desktop design refresh.

The coordinates would continue to work as they do currently, pointing to tools such as geohack where necessary.

Practically this would mean coordinating with template editors to ensure that we do not render multiple coordinates on the screen.

We would like to hear any concerns you have about this and how we can best handle such a migration."

Our request here would be to ask all the wikis to change their templates to match the location we want for the coordinates. @Jdlrobson, @alexhollender - how's that sound?

How about something like:

"The reading web team are interested in making the rendering of coordinates part of the MediaWiki software, to standardize display across our projects based on what editors are doing in templates. This will allow us more control in displaying this information on mobile and the upcoming desktop design refresh.

The coordinates would continue to work as they do currently, pointing to tools such as geohack where necessary.

Practically this would mean coordinating with template editors to ensure that we do not render multiple coordinates on the screen.

We would like to hear any concerns you have about this and how we can best handle such a migration."

I'm a bit more cautious about this approach because it would require all wikis to remove the coordinate templates (unless we plan on doing that ourselves). Sometimes the location of the coordinates is defined on multiple places on the page. If we ask the wikis to move the coordinates only, this would only need to be done for ~50% of the wikis, as the remainder already have the coordinates in the correct place and would require changes to the template only. @sgrabarczuk - what do you think?

I'm not sure how much I can add beyond what you already know. I'll just put some pieces together :)

  1. Our changes should require/be dependent on as little changes of the editing practices as possible. Also, ideally (IDK if that'd be easy, just ideally) we only should standardize this for Vector (and be invisible for monobook users).
  2. Removing the templates altogether would be OK if there was each community's consent. That could be costly in terms of our person-hours. It's difficult to predict.
  3. Stats for top100 wikis (of all sorts, incl. sister projects, Meta, etc.) are: above 22, below 36, n/a 42. That looks... promising.

You seem to have forgotten that the coordinates are NOT ONLY a simple link. On Polish Wikipedia we open up a map that shows placement of the object/POI that article describes.

Making users do extra steps to just show a map they want to see is just bad UX.

Screenshot_20201208-094029_Firefox.jpg (1×1 px, 714 KB)

Also note that coordinates in the template influence not only the top bar, but also contents of an infobox. Not sure if that's what you meant by saying: "Sometimes the location of the coordinates is defined on multiple places on the page."... But I want to stress that this is not just display of coordinates. They are shown on maps as well.

Again a good example is any Polish city. We show a marker on 3 different maps (there is a switch above map in the infobox).
https://pl.wikipedia.org/wiki/Gda%C5%84sk

So I think it's just not feasible to remove coordinates from templates. Unless you can remove them and still make them available for templates (with e.g. some parser function that would format coordinates for current page).

So to me that is a whole different story from a relatively simple change of layout of those meta elements.

@Nux - thank you for the feedback. Just to confirm - we're not suggesting that we remove coordinates. The two approaches we're thinking about here is either working with communities to request moving the coordinate template location to under the title (while retaining all of the current functionality). The new location would be similar to what we see on English or Japanese Wikipedia:

Screen Shot 2020-12-08 at 10.36.50 AM.png (530×2 px, 211 KB)

The second approach would be adopting coordinates as a part of MediaWiki itself, meaning we would work towards standardizing them across the wikis.

You mentioned removing templates so I assumed that would be part of the process of moving coordinates to MediaWiki. From a programmers stand point that's how I would do that 😉... Don't know how you would want to do that otherwise.