Page MenuHomePhabricator

Design feedback for refined main page of Russian Wikipedia
Closed, ResolvedPublic

Assigned To
Authored By
stjn
Apr 19 2018, 11:04 PM
Referenced Files
F17458129: image.png
Apr 30 2018, 7:54 PM
F17458109: image.png
Apr 30 2018, 7:53 PM
F17303731: cards-on-android.png
Apr 25 2018, 12:24 PM
F17303723: cards-on-ios.png
Apr 25 2018, 12:24 PM
Tokens
"Love" token, awarded by CKoerner_WMF."Barnstar" token, awarded by Capt_Swing."Like" token, awarded by SerDIDG.

Description

Recently I have designed and proposed to Russian Wikipedia community a refined main page that is inspired by Wikimedia Design Style Guide and tries to closely follow it. It is completely responsive for the first time, meaning that it shows the more or less the same content in mobile and desktop versions (most main pages of Wikimedia projects do not do that yet). Given that it is both first update in 8 years and the page receives up to 800,000 visits per day, it is important to have it designed to the best of our abilities.

As it currently stands, it probably will be approved as a way to go forward with the first main page improvements with some changes. The new main page mainly contains visual (and technical) improvements, because our community can be rather stiff about making major design overhauls.

As I am collecting the feedback from the community that does not have a lot of design-oriented people, I thought that it would be also useful to have the feedback from any potential designers that would like to provide it (and maybe WMF designers if they would have time). I can’t promise that every bit of feedback would be acted upon, because I am responsible to community first and foremost, but I would like to hear and consider any potential feedback on topics of adherence to the style guide, mobile and desktop layouts and page accessibility.

The period over which this task will be relevant for any potential replies is up to one month (so, May 20th, 2018). Thanks you in advance to everyone who decides to give their feedback.

(An email about this task was sent out to the [design] mailing list.)

Event Timeline

Some of the thoughts and future suggestions that I have and told to the community (so ‘common points’ would not have to be addressed):

  • ‘Featured lists and portals’ block should be remade from tables and probably somewhat redesigned (I have already made some changes so it could be displayed on mobile properly, so this would be an additional step to that).
  • ‘Featured article’ (Избранная статья) and ‘Good article’ (Хорошая статья) blocks are obscenely long on mobile and that needs to be fixed via communicating with people who do that work about possibility to add .nomobile class for hiding optional content.
  • Those same blocks have their images typically on top and without leading to the article, although it is the biggest clicking point. I have a plan to get it reordered via TemplateStyles and order CSS property for mobile users.
  • Right column with periodically updated lists maybe should not be displayed in full on mobile (so, hidden under a toggle if MobileFrontend allows something like that), but that is subject to bigger community discussion and doesn’t have certainty.

(Disclaimer: I'm not a designer. I just talk about design from time to time. So, relata refero)

I was told that buttons should indicate not links, particularly not internal links, but actions, like "make a step" (save / delete / forward / back etc.). Perhaps it's disputable. I just want to say that my first feeling about the buttons in the bottom corners, when I saw the gears, was "wow, can I set preferences here?". And I was surprised that buttons lead to pages that look like documentation at best (nothing actionable, responsive, no pop-ups, drop-downs or so).

Overall, I like this demo.

I just want to say that my first feeling about the buttons in the bottom corners, when I saw the gears, was "wow, can I set preferences here?". And I was surprised that buttons lead to pages that look like documentation at best (nothing actionable, responsive, no pop-ups, drop-downs or so).

I should’ve seen that coming and should’ve put a note about this. The context in which cog wheel is typically used in interface in Russian Wikipedia is for linking to included templates. It is used across all navboxes and many other templates and is a result of several discussions, so I thought it would be appropriate to use here. It might, indeed, cause some confusion for readers when comparing it with global interface (Page Previews / Reference Tooltips and the like) and we should probably use/have an alternative icon for that in the long term.

To mitigate that effect on non-editors, potentially we can hide those buttons for anonymous viewers because they don’t have the ability to edit those pages anyway, and I will probably act on that. As for more general point, I thought of buttons in such context as a way to represent potential actions for readers. Thank you for your feedback.

Thanks for asking for feedback! I work with New-Readers and my feedback is to consider what someone who doesn't know Wikipedia would want to learn by landing here. IMO, this is that a reader coming to Wikipedia may explore through clicking links, but is probably more likely to want to search. They are unlikely to want to edit at the first time since they won't know what this is, and orienting people to what Wikipedia is should be the first steps to their eventual contribution.

We worked with the Hindi community to redesign http://hi.m.wikipedia.org/ to include a much clearer call-to-action to search Wikipedia, which opens the search bar.

The implementation would be much easier with TemplateStyles , which will be rolling out soon (not sure when) to all wikis.

Thank you for your feedback! If you resize the browser to mobile width (<720px), you can notice that I already nicked that idea exactly from that (Hindi) page :-) [My reasoning, however, was that the search field is not available prominently on smaller page widths.] In desktop version the existing main page already focuses on the search bar if person doesn’t scroll before the script executes.

And as of technical implementation, the page already uses TemplateStyles and that is exactly one of the reasons for having it remade in the first place. The source code.

Wonderful! You’re right I missed the smaller screen width (didn’t shrink
quite enough on my computer). This is really exciting to see adapted beyond
Hindi :D

Looking more, on my phone (iPhone 6 with refurbished screen), the search
bar doesn’t stand out. In fact, the top of it seems to blend into the page.
On the Hindi page, the background is grey so the white box stands out more.
Something to consider.

And I’m thrilled that TemplateStyles is working for you.

I guess you didn’t have the scripts loaded on demo above, because the plan is to have mobile version with grey background like header, see here. As of now, of course, I can’t add any CSS code to mobile version because page is still in works. As you see, I drew inspiration somewhat heavily from the work I saw in Hindi case.

Sorry I keep doing it wrong :P

Yes, it seems like iOS is removing the grey. The web browser looks great on
my computer.

I checked in with the Design team as well and they may come back for some
feedback. Thank you!

It is really great to see the style guide recommendations applied here. Overall this seems an improvement over the current version. I shared some comments below (most are based on the automatic translation of the browser, and unaware of previous community discussions and consensus). You can also check in the screenshots below how cards are supported on the main views of iOS and Android apps since those exemplify some of the ideas I described below:

cards-on-ios.png (3×1 px, 2 MB)
cards-on-android.png (3×1 px, 2 MB)

Simplifying navigation
There has been already an effort to reduce the number of links in the UI in the current proposal. I think this is good since it avoids distracting from content, but there is room to go a bit further in that direction. The more options exposed to the user, the less powerful each one becomes individually.

Ideally, cards should provide a clear next step with very few additional options. This requires to decide which is the main purpose. If readers are the primary audience, we can consider removing or de-emphasising some of the links for editing work. Using a "..." menu can be useful to hide advanced options, including the cog icon that can become a spelled out option (e.g., "Configure this card") for additional clarity.
Page views tool can be useful to evaluate how much the current links are being used.

Other specific cases:

  • The "Welcome to Wikipedia, a free encyclopedia that anyone can edit" has 5 links, which require users to navigate through different places if they want to understand what Wikipedia is and how to get started. Having just one link, or a separate entry point with a clear purpose (more on this later) could help.
  • The selected article has both a "more" link and a button to read more.

Emphasise content
The proposed design emphasises section titles such as the featured article. We can consider a less prominent treatment for the section titles and use the title style for the article titles instead. Making images more prominent can also help to make the content more interesting.

Clarifying destinations
Some of the options provided are described in terms of "places" keeping it implicit what can be found in such places. this may make it hard to set expectations. Some examples:

  • It may not clear what "suggestions" or "candidates" are intended for, if the idea is to ask people to "review candidates" or "propose candidates" we can make it explicit.
  • Portals can be a good entry point to discover topic of interest, but it may not be clear to just have a "Portal" label if yo don't know what these are.
  • A more clear entry point about "how to start" or "start contributing" can be more effective than linking the "welcome" word or a generic "help" option.

Other visual adjustments
Some aspects to consider:

  • Buttons are shown with a smaller font size than the content.
  • On mobile we can keep some margin around cards for their structure to be more clear.

Thank you for the detailed feedback!

The "Welcome to Wikipedia, a free encyclopedia that anyone can edit" has 5 links, which require users to navigate through different places if they want to understand what Wikipedia is and how to get started. Having just one link, or a separate entry point with a clear purpose (more on this later) could help.

Yes, that came up in the discussion and we’ll probably do something about this, so thank you for reiterating this point. The other thing you mentioned was a technical issue, sorry.

The proposed design emphasises section titles such as the featured article. We can consider a less prominent treatment for the section titles and use the title style for the article titles instead. Making images more prominent can also help to make the content more interesting.

This is something I thought about and, given the endorsement here and somewhat mixed reaction from the community about blue call-to-action buttons, will probably do in the second iteration soon.

Something to consider, however, is that there will be a subtitle in some headers and won’t be in others, and I don’t know if that would be confusing or not. Headers like ‘Image of the day’ or ‘Latest news’ do not have any possibility of a subtitle, for example.

It may not clear what "suggestions" or "candidates" are intended for, if the idea is to ask people to "review candidates" or "propose candidates" we can make it explicit.
Portals can be a good entry point to discover topic of interest, but it may not be clear to just have a "Portal" label if yo don't know what these are.

("Candidates") These are more of a relic of having a main page for both editors and viewers. Portals, for example, are being neglected both in English Wikipedia and in Russian Wikipedia, but I would guess that people would not be OK with having them removed overall.

  • On mobile we can keep some margin around cards for their structure to be more clear.

But we have diffirent views for Android and iOS apps.

image.png (450×262 px, 66 KB)

Preliminary update on points from discussion here and in community:

Changes after community discussion: less font sizes, less emphasis on the ‘Read’ (Читать) buttons, less links in header.
Changes after discussion here: dropdown menu for additional links, page titles (for now − placeholder text) are emphasised in featured/good article/featured lists/in this day. Some things mentioned here currently are not actionable due to reliance on the old templates, but I am keeping them on the radar.

Thanks again to all of those that provided the feedback here.

stjn claimed this task.

Closing this as resolved as the main discussion in Russian Wikipedia will soon halt. Thanks to all the people that decided to provide the feedback.

Some future fate about individual blocks would have to be decided by community discussions before I could go through with the deployment of the new main page. Also it would help if T162379 would be fixed someday in some way, but that is more of a wishful thinking.

Thanks again to all commentators!

MBinder_WMF edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).
MBinder_WMF moved this task from 2017-18 Q4 to Design on the Web-Team-Backlog board.
MBinder_WMF edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.
MBinder_WMF moved this task from Design to 2017-18 Q4 on the Web-Team-Backlog board.
MBinder_WMF edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).