Page MenuHomePhabricator

Sticky header should show the site logo
Open, MediumPublic

Assigned To
Authored By
Theklan
Oct 14 2021, 5:07 PM
Referenced Files
F54198804: irudia.png
May 23 2024, 6:12 AM
F54198687: irudia.png
May 23 2024, 6:12 AM
F54198599: irudia.png
May 23 2024, 6:12 AM
F54198559: irudia.png
May 23 2024, 6:12 AM
F54198509: irudia.png
May 23 2024, 6:12 AM
F54198378: irudia.png
May 23 2024, 6:12 AM
Tokens
"Like" token, awarded by JAnD.

Description

Branding is important. The sticky header at Beta doesn't show the page logo. It should.

Event Timeline

I agree. The "smaller" projects deserve more recognition

Well, is not only about the "smaller" projects. Is a branding issue. Wikipedia also needs branding. Is the only web I know that isn't displaying the logo when a sticky header is used.

The missing logo also causes that there is no easy way to jump to the main page when you scrolled down on a wiki page. You have to scroll all the way up to do this. I believe a small puzzle globe would be enough, you don't need the full logo.

I also like this simple design (with only the W): screenshot. Not sure if something like this is available for all projects though.

A persistent visible logo for all projects was asked by users of sister projects in several occasions, e.g. on fr.wiktionary here, here and here :

"I think it's a mistake to remove the project's logo when you scroll down a page, it is weakening the project's identity, which is necessary to better understand the nature of the content you're consulting and the community that produced it (because Wikipedia's community is not the same as the Wiktionary's, its codes and practices are also different). The different projects share common values, but are very different and should be better identified for what they are." Noé

ovasileva triaged this task as Medium priority.Mar 20 2023, 3:50 PM
ovasileva moved this task from Not ready to estimate to Groomed on the Web-Team-Backlog board.

This was asked also in the talk page of the project here.

KSarabia-WMF subscribed.

Thank you for the suggestion regarding the sticky header displaying the site logo.

However, it seems like the design for the sticky header has already been settled some time ago after thorough consideration and review.

If you or others feel strongly about revisiting this decision, please feel free to reopen the ticket using the Request Form here, and we can reassess it accordingly.

Thank you for your understanding.

Sorry for reopening this, @KSarabia-WMF, but claiming "after thorought consideration and review" should have a link or a proof of that consideration and/or review.

What we have here is:

  • Adding a logo to the sticky header improves:
    • Branding
    • Reading experience for people with neurodiversity
    • Awareness
    • Navigation
    • Consistency
  • Not adding a logo improves:
    • Nothing

It has been proposed in discussions, and mentioned as feasible by the design team itself. It is common at most websites in the world, and it is expected. Take a look:

irudia.png (121×1 px, 17 KB)

irudia.png (103×1 px, 25 KB)

irudia.png (83×1 px, 55 KB)

irudia.png (202×1 px, 56 KB)

irudia.png (260×1 px, 54 KB)

irudia.png (119×1 px, 23 KB)

Every web I have visited with a sticky header has a logo in the left, which improves branding, helps in navigation (clicking there has consequences) and helps you identify what you are reading. I have only found one site where this didn't happen: us.

Thanks for raising this @Theklan. This is actually great timing, as we are looking at a bunch of potential improvements and new features for mobile and desktop headers starting next month (e.g. T315611 and T365631). Deciding what to include in a header and what to exclude is a difficult information architecture challenge, especially in the mobile site, and we'll need to be really explicit about which features to prioritize over others. The header is also a space where the signed in experience is very different from the signed out one, so there's complexity in the use cases to consider, and we're probably going to want to add more page-level features at some point.

The question here is: What are the best affordances to show a reader that is scrolled down a page to ensure an optimal reading experience? How might those affordances differ for readers that are reading an article deeply for intrinsic learning versus a reader who is searching out a quick fact?

I agree that a wordmark, or just the logomark would be a nice "jump to home" affordance, to @Stefangrotz's point. I also agree that they would increase the prevalence of the brand for someone who is midway through reading an article, but I'm not sure yet where those affordances sit in the priority list of all the possible things we could put in that space.

For the folks who have contributed to the discussion here, I would love to know how you would prioritize this list of theoretical features we might want to put into a (sticky) header some day. How would you rank the following list of items in importance for any of the reader types I described?

  • Main menu
  • "W" only logo
  • search
  • Link to user page
  • Appearance settings
  • Notifications bell
  • Notifications inbox
  • Watch list
  • Table of contents
  • A "listen to this article" button
  • A "read a simplified summary of this page" button
  • A "Donate now" button
  • A "Save to read later" button
  • An "Explore related articles" button
  • An edit button
  • Any other features you can think of that would make sense in this space.

To the broader point that folks made about branding: obviously a logo is the clearest example of branding we have on our pages. The tagline "From Wikipedia, the free encyclopedia" is another one. Conveying a brand with the design goes beyond these things, though, and includes everything from the layout, typography, how the projects are spoken about off Wiki, and a myriad of other things that add up to a "gut feeling" that someone has about the WMF and the work we do. Beyond logos and taglines, I suspect that articles' big blocks of long form black text on a white background, infoboxes, and blue links do a lot of work to convey our brand. A lot of branding is context-specific, as well. We need to consider what a reader is doing and where in addition to what they are seeing.