Page MenuHomePhabricator

Improve design for wiki-facing error pages
Open, MediumPublic

Description

The starting point for this task is the 404 specific

  • which has – in my understanding – already been designed with various applicable error pages and mobile-first approach in mind.

    Design input still needed:

    • Are all error pages easily adaptable to that layout, deriving from 404?
      • what is the icon for each
      • and what is the HTTP status code error number replaced with to assure a clear statement on the specific error pages (also in regards to the design)?
    • Accessible color contrasts compliant to WCAG 2.0 level AA usage
    • Search input field and button
      • exclusively for 404?
      • in alignment with current improvements on Discovery portal (language selector, padding)?
    • Question of the header size with not having a figurative mark like "Wikipedia" as in the mockup

    Event Timeline

    Assuming this task is about all wiki-facing error pages (including non-mediawiki 404s and all errors listed at T113114), this looks like a duplicate of T76560: Better WMF error pages.

    The design for all these error pages would be based on the outcome of T110376.

    @Krinkle @Nirzar As far as I have understood, there are error pages that we can't touch right now or at any time soon, mostly for technical reasons. Therefore T113114 started as a sub-set of error pages, we can address with a baseline in design and hopefully lots of overlap in code. Correct?
    As T110376: Evaluate usability of the non-MediaWiki 404 page is about evaluating 404 as most prominent page, this task here was meant to separately collect, discuss and solve best-possibly the design challenges for the new baseline design for all errors at T113114. A better, clearer title is welcome.

    As far as I have understood, there are error pages that we can't touch right now or at any time soon, mostly for technical reasons

    No, we can change any / all of them.

    @Volker_E
    Taking DR off this again: not assigned to us, not necessarily within our remit (as scoped), but please feel free to re-add us if you require design research resources related to this project.

    Reducing maintenance overhead is appreciated work, but let me point out that the main issue with the current error pages is that they are English-only. Until that's fixed, everything else feels like make-up to me.

    In this regard,

    Screen Shot 2015-09-19 at 01.55.03.png (912×1 px, 197 KB)
    is much better than
    Screen Shot 2017-03-28 at 18.51.09.png (996×1 px, 127 KB)
    .

    This is also bad: https://la.wikisource.org/w/aaaaaa, https://la.wikipedia.org/w/aaaaaa, with hard-coded English text and even an English Wikipedia URL:

    Alternatively, you can visit the <a href="/">Main Page</a> or read <a href="https://en.wikipedia.org/wiki/HTTP_404" title="Wikipedia: HTTP 404">more information</a> about this type of error.

    Krinkle renamed this task from Evaluate and clarify design for wiki-facing error pages to Improve design for wiki-facing error pages.Apr 5 2017, 2:32 AM
    Krinkle triaged this task as Medium priority.
    Krinkle removed a parent task: T76560: Better WMF error pages.
    Krinkle added a project: Wikimedia-Design.
    Krinkle added subscribers: Niharika, Matanya, Sitic and 18 others.

    IMHO the consistency was made in the wrong direction. All error pages should have followed the multilingual design.

    The translations were at least 5 years out of sync with the English versions, and that was before we moved from SVN to Git. Since then the messages have changed various times more in the 3 years that followed. I've tried to trace where any of these come from but I gave up after 2 hours. Yes, these should be localised, but we first need a way to facilitate that in a maintainable fashion. translatewiki.net seems like the natural choice.

    A few things to consider:

    • Create a repo and import messages from current error pages. (Should be fairly simple now that T113114 is fixed.)
    • Set up translatewiki.net integration for this repo.
    • Decide how to localise the error page: Client-side with JavaScript, or server-side (e.g. based on subdomain or Accept-Language)?
    • Create a build script in mediawiki-config or operations/puppet that we can use to re-generate the error pages based on the current localisations. If method is client-side, the build script would substitute a JSON object as part of a <script> element. If method is server-side, the build script would create variations of the file based on language code (e.g. errorpages/404.en.html).
    Krinkle reopened this task as Open.EditedApr 6 2017, 3:30 AM

    This is not a duplicate of T113114, because T113114 is about making the error pages consistent between themselves (which is mostly resolved now), it's not improving them in other ways in terms of design or features.

    The task here is about subsequently creating an entirely new/fresh design for error pages.

    I repeat what I said in another ticket that was way closer to this one:

    Just a wild idea, lots of websites have a fun tone in their error pages (both for 404 and 500). I have seen youtube referring to chaos monkeys, the north face says your page is eaten by a goat, github refers to star wars. I personally think If we do this, it reduces tension caused by frustration of the best website in the world not working. Does anyone think we should do it? If yes, I make another ticket for that.
    Some examples: https://rigor.com/blog/15-awesome-fail-pages

    (We should think of not just 404, but also 500s too)

    Popping in an idea - it would be cool to have the WMF explore partnerships with missing children organizations, to display "missing" notices of such children. Something I stumbled upon today was https://notfound.org/en, which I think is quite a cool idea, and the play on words is nice.

    I think a 'Donate to Wikipedia' button would be very useful as well given the amount of traffic it gets.

    I'm not the authority on statistics so take it with grain of salt but I got the number of page views that the referrer is exactly the previous page title but without /wiki/. So the usual flow of someone writing en.wikipedia.org/Milan and then clicking on the "Did you mean: /wiki/Milan". The number is suspiciously low (I'd guess maybe they use lower case? let me try that)

    spark-sql (default)> select month, day, count(*) from wmf.pageview_actor where year = 2026 and month in (4,5) and uri_path like '/wiki/%'
                       > and referer = concat('https://', uri_host, '/', substr(uri_path, 7))
                       > and not referer like concat('https://', uri_host, '/%/%')
                       > and not referer like '%\?%'
                       > and uri_path not like '/wiki/Special:%'
                       > and uri_path != '/wiki/'
                       > and uri_path not like '%\.%'
                       > group by month, day
                       > order by month, day;
    month   day     count(1)
    4       1       338
    4       2       336
    4       3       355
    4       4       318
    4       5       301
    4       6       376
    4       7       412
    4       8       425
    4       9       425
    4       10      385
    4       11      301
    4       12      316
    4       13      416
    4       14      410
    4       15      389
    4       16      378
    4       17      388
    4       18      314
    4       19      339
    4       20      475
    4       21      416
    4       22      396
    4       23      527
    4       24      308
    4       25      297
    4       26      368
    4       27      386
    4       28      391
    4       29      389
    4       30      385
    5       1       350
    5       2       361
    5       3       382
    5       4       449
    5       5       382
    5       6       402
    5       7       420
    5       8       424
    5       9       335
    5       10      541
    5       11      390
    5       12      391

    We made the 404 page responsive on May 4th (https://gerrit.wikimedia.org/r/c/operations/mediawiki-config/+/1282060) and I think force was strong with @Chlod because if you take one week before and after the deployment, the mean shifts from 377.71 to 413.43.

    grafik.png (373×569 px, 9 KB)

    It's not statistically significant (p-value ~=0.20) but I let more time and data and see what shows up.

    Change #1288274 had a related patch set uploaded (by Ladsgroup; author: Ladsgroup):

    [operations/mediawiki-config@master] 404.php: Force a redirect to /wiki/ in very obvious cases

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

    Change #1288274 merged by jenkins-bot:

    [operations/mediawiki-config@master] 404.php: Force a redirect to /wiki/ in very obvious cases

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

    Mentioned in SAL (#wikimedia-operations) [2026-05-20T00:46:36Z] <ladsgroup@deploy1003> Started scap sync-world: Backport for [[gerrit:1288274|404.php: Force a redirect to /wiki/ in very obvious cases (T129433)]]

    Mentioned in SAL (#wikimedia-operations) [2026-05-20T00:48:28Z] <ladsgroup@deploy1003> ladsgroup: Backport for [[gerrit:1288274|404.php: Force a redirect to /wiki/ in very obvious cases (T129433)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

    Mentioned in SAL (#wikimedia-operations) [2026-05-20T00:54:45Z] <ladsgroup@deploy1003> Finished scap sync-world: Backport for [[gerrit:1288274|404.php: Force a redirect to /wiki/ in very obvious cases (T129433)]] (duration: 08m 10s)

    Change #1290086 had a related patch set uploaded (by Krinkle; author: Krinkle):

    [operations/mediawiki-config@master] errorpage: Fix missing `</b>` tag

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

    Change #1290086 merged by jenkins-bot:

    [operations/mediawiki-config@master] errorpage: Fix unclosed bold tag in 404.php

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

    Mentioned in SAL (#wikimedia-operations) [2026-05-20T22:59:52Z] <ladsgroup@deploy1003> Started scap sync-world: Backport for [[gerrit:1290086|errorpage: Fix unclosed bold tag in 404.php (T129433)]]

    Mentioned in SAL (#wikimedia-operations) [2026-05-20T23:01:58Z] <ladsgroup@deploy1003> ladsgroup, krinkle: Backport for [[gerrit:1290086|errorpage: Fix unclosed bold tag in 404.php (T129433)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

    Mentioned in SAL (#wikimedia-operations) [2026-05-20T23:07:01Z] <ladsgroup@deploy1003> Finished scap sync-world: Backport for [[gerrit:1290086|errorpage: Fix unclosed bold tag in 404.php (T129433)]] (duration: 07m 09s)