Talk:Reading/Web/Desktop Improvements

Overview

Features

Repository

FAQ

Discussions: Desktop Improvements • Accessibility for reading.

---

You can comment in any language. We are especially interested in:

• Feedback on the functionalities we have already deployed. (Please see Reading/Web/Accessibility for reading/Known issues before reporting bugs.)

• Expanding the list of existing gadgets and user scripts that are related to providing a better desktop experience.

We are discussing with many volunteers and communities at the same time. It may take some time for us to reply here. We apologize for that.

Thank you!

(Translate this page)

Severe mobile usability issues with Vector-2022

I'm not sure when it happened other than it must have been some time after February 1st, 2024, though there seems to be a pretty severe usability issue with mobile devices that use some aspect ratios.

Testing was done with responsiveness dev tools in Firefox to emulate a mobile using 858px height and the "Mozilla/5.0 (Linux; Android 10; SM-G988U) AppleWebKit/537.36 (KHTML, like Gecko) Brave Chrome/87.0.4280.66 Mobile Safari/537.36-481" user agent. My Samsung Galaxy S23 Ultra is 1080x2316 so 400x858 uses its approximate 0.47:1 aspect ratio. Testing was done using the MangoRPG wiki on Miraheze. For reproduction: After setting the resolution to 400x858 with the user agent listed a refresh of the page is necessary for the changes to propagate successfully. Adjust horizontal resolution from there.

Please note that the direct pixel values used are largely irrelevant so long as the aspect ratios are maintained. I believe aspect ratio or percents are used rather than direct px values - a good practice in general for compatibility. Direct values will be given however with the test setup so it is easy to reproduce the same results.

With that test setup the following observations were made: After 720px width the icon (img.mw-logo-icon) is zapped. After 500px the space on the left side of the page starts getting eaten into. The mw-page-container shifts to the right as width decreases but the div.vector-header-container does not - that's what all the logo stuff is contained in which has the ☰ hamburger menu, icon, and wiki name. The vector-main-menu-landmark (☰ hamburger menu) getting removed from the screen at 415x858px. Without the navigation menu the wiki thus becomes unusable. For most users I had test the wiki on mobile devices, the ☰ was at least half cut off for all testers which cuts off a portion of the actual navigation when it is used, harming usability even then. The ellipses (...) menu is also cut off of the screen and text cuts off of the screen along with the header if using MRHeader|header or even a level 5 header as they do not wrap for some reason. Shrinking the page or scrolling to the right one can see the cut off text and ellipses menu but scrolling to the left for the ☰ hamburger menu is impossible.

I've attempted to fix it with a custom CSS for the Vector-2022 skin but I'm sadly not an advanced enough user to do so successfully.

Circa February of 2024 the ☰ hamburger menu, logo icon, and wiki name would display without being cut off on mobile devices at 1080x2316 resolution (0.47:1 aspect ratio). I'm not sure what was done to break it as I'm not sure where the changelog even is.

For functionality I recommend that the ☰ hamburger menu should never be be able to be hidden off the left side of the screen similar to how mw-page-container shifts along with its padding regardless of aspect ratio or resolution and if there's space for it the logo icon should display - I can't think of any device that couldn't display a 50x50px icon and smaller ☰ menu. The wiki name (mw-logo-wordmark) should also display if possible. On one line if it can without obstructing the top right menus such as search, ..., and notifications; otherwise wrapping.

-TiffyWiki (talk) 00:19, 22 September 2024 (UTC)

retest content separation wen

@SGrabarczuk (WMF) In the last update, you mention As we reported previously, the A/B test didn't prove that the color-based separation was an improvement.. However, that's not what the previous update really concludes. The previous update concluded that the prototype was flawed for small screen sizes and recommended Introducing improvements to Zebra, optimizing for narrower screens, and repeating the tests.. Aaron Liu (talk) 14:03, 2 July 2024 (UTC)

Hey @Aaron Liu - thanks for the question! So we tested this idea in two contexts. The first was the prototype testing in a user testing context (testing with a small group of readers who give us feedback). The results of this test are available on this page. Here we found that, while there wasn't a noticeable different in readability that we could measure between the two versions, users did say they have a slight personal preference towards the newer version. Based on this, we decided to proceed testing this version on a larger scale. The second test, which was the A/B test on the feature is the one that showed us issues that showed us that, were we to proceed with this, we would need to go back to the drawing board. While this is still a possibility for the future, we haven't prioritized it yet as, based on the user testing, we don't have a strong proof that it would be significantly helpful to readers and editors. OVasileva (WMF) (talk) 09:04, 23 July 2024 (UTC)

Hey @OVasileva (WMF), the A/B test on the feature seems to be the same one reported in the previous update. See my last sentence. Aaron Liu (talk) 14:38, 23 July 2024 (UTC)

Bumping this to avoid archiving before resolution. Aaron Liu (talk) 11:51, 5 September 2024 (UTC)

Infobox section display error on mobile

Infobox display error on Mobile

This error appears on infoboxes on the mobile web version of Wikipedia, where double lines appears below section headings (such as Government, Formation, etc. as shown below) and single lines appear seperating every single line. This error appears on the mobile as well as the desktop layouts in the mobile version of Wikipedia (one where the links start with en.m.wiki [...]), but does not appear on the desktop web version (en.wikipe [...]). I'm not sure if this is the correct spot to report this error, and I'd be glad if someone could tell me what to do in this situation. PadFoot2008 (talk) 08:09, 27 August 2024 (UTC)

This is an error in the template generating the infobox, where the infobox is emitting an empty row. That causes problems like this. P.S. Next time, please link to pages where you see a problem, so that we don't have to type over the content of a screenshot into a google search, in order to find the article. —TheDJ (Not WMF) (talk • contribs) 10:21, 4 September 2024 (UTC)

Inappropriate images shown in search results

When I look for w:Scroll on enwiki in vec2022 (i made the switch a few days ago), the infobox image for w:Scrotum shows in the tentative search results as I type. While I get that Wikipedia is not censored, I do find it a bit odd that we show inappropriate images to users who have expressed absolutely no interest in seeing them. Like, if I actually navigated to the latter page, that's on me, but users should have the ability to choose their UX and this is not that. Theleekycauldron (talk) 06:56, 6 September 2024 (UTC)

Visibility of Wikipedia search field

Following content copied from https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(proposals), as advised.

Invariably the first thing I want to do after landing at the Wikipedia home page is search for the article that I want to look at. I think it would be sensible to make the search field permanently visible. There is already room there at the top of the page, and although only a click away, it seems unnecessary to have to click on the magnifier. Why not just have the field there ready to type into? Am I right in thinking that it used to be that way? I wonder why it was changed. 2A00:23C8:7B0C:9A01:8A7:5D88:5F57:107E (talk) 19:53, 8 September 2024 (UTC)

I think the magnifying glass only appears when the window is narrower than some threshold (looks like about 1100 px). I'm not sure why they do that; there's plenty of space left at all but the most extremely narrow widths to allow for a full search box. But in any case, this is really a Vector 2022 skin issue, not something enwiki has any direct control over. Perhaps ask on meta:Talk:Reading/Web/Desktop Improvements? RoySmith (talk) 20:04, 8 September 2024 (UTC)

You're right, it's dynamically controlled. I didn't realise that. When I lower the browser zoom level the search field becomes visible. It seems to me that all that needs to be done is adjust the "trigger" level at which it is displayed, so it is only suppressed when there is "obviously" not enough room to type a search query. 2A00:23C8:7B0C:9A01:8A7:5D88:5F57:107E (talk) 20:32, 8 September 2024 (UTC)

Yes, but to repeat what I said earlier, this is not anything that is under the control of enwiki. This is a feature of the Vector 2022 skin, which is under the control of the Wikimedia Foundation web team and best discussed at meta:Talk:Reading/Web/Desktop Improvements. RoySmith (talk) 20:50, 8 September 2024 (UTC)

Page does not exist / link does not work, though actually I see now that there is another link there pointing to the correct page. 2A00:23C8:7B0C:9A01:8A7:5D88:5F57:107E (talk) 21:03, 8 September 2024 (UTC)

We've been getting an influx of questions over this at places like the English Wikipedia's help desk and Teahouse. Was there a recent skin update, WMF staff? I suppose my real question here is:
Is there a link to a changelog? Tenryuu (talk) 15:39, 10 September 2024 (UTC)

User icons

User icons do not show up at top right of the page. Please look here --Superyetkin (talk) 16:42, 13 September 2024 (UTC)