Page MenuHomePhabricator

Should Special:Contributions be converted to a table
Open, Needs TriagePublic

Description

On https://github.com/wikimedia/mediawiki/blame/master/includes/specials/SpecialContributions.php#L959

* @todo This would probably look a lot nicer in a table.

A student has attempted this as a GCI task in https://gerrit.wikimedia.org/r/#/c/258897/

I seem to recall something about tables being bad for accessibility... Any thoughts from our UI guys? :)

Event Timeline

Reedy raised the priority of this task from to Needs Triage.
Reedy updated the task description. (Show Details)
Reedy added subscribers: Reedy, Pginer-WMF.

Change 258897 had a related patch set uploaded (by Victorbarbu):
Displaying contributions in table

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

I love the table view. The current view is not much understandable for new contributors.

There are several aspects to consider here:

The general recommendation agains the table element (in HTML) is mostly because it was abused as a general layout model (and not just used for displaying tabular data). In this case, it can be argued that the information has some tabular nature, but considering the presence of action links, columns lacking a title, it does not seem to completely fit in the model and having a more structured markup can be the safest option. Some front-end developers can add more details about this.

Beyond the question on the internal HTML elements to use, there is the question on how to better represent the list of your contributions. This is a bigger issue. For that we need to define the goals (e.g., make it easier to scan), explore possible solutions (present-it as a table, a feed, a list, etc.), consider the implications on other places where similar patterns are used (e.g., watchlist, recent changes, etc.), and validate that the proposed solutions will work well for current and new users.
I'm totally willing to help with this since I think the current representation has room to be improved, but considering that it is a pattern heavily used by many of our users we need to make sure to iterate and validate the possible ideas before a patchset is created.

I could probably help and come up with a model for this problem, if the decision is taken and the solution is found :)

After a few days, are there any ideas about how something like this should actually look?

Was there a community discussion about this? Special:Contributions is a productivity tool for patrollers and people tend to have strong feelings about changing such UIs to be more "spacey".

Also, it might be a good idea to reach out to maintainers of gadgets which will be affected.

About the applicability of the table tag (and in general common look&feel with other similar interfaces such as watchlist, recent changes, log) maybe the UI standardization team has an opinion (ping @Volker_E)?

This would look very broken on mobile. We want to be moving away from tables...

This would look very broken on mobile. We want to be moving away from tables...

The currently available list is pretty much unreadable, by me and 95% of the people I asked (those 95% prefer the table). Also, designs on mobile and desktop don't have to be the same, that's why we use mobile websites.

@Tgr @Reedy @Pginer-WMF @Jdlrobson I have to agree with Pau on his general feedback on the task.
For Reedy's question on accessibility of tables - with help of semantic markup (ex: thead or caption) and involving a few further best practices (making sure, that all table descriptors like th actually make sense without visual connection, accessibility (in the sense of Assistive Technologies) is not a necessarily a counter-argument for not using a table.
The biggest concern comes from User Experience perspective:

  1. The table and the connected interaction elements should be implemented in OOUI as it's our current standard and the more interface elements differ across a website the worse for people.
  2. Tables (fixed width more than flexible ones) are very difficult to implement in responsive design or even mobile first design with an ease-of-use. To my knowledge currently most-used is an overflowing horizontally table layout on mobile, which causes issues with "normal" portrait mode vertical scrolling behavior by users.

UI Standardization haven't had possibility so far to dive into table design. From my perspective it would make sense to start with converting the interface to OOjs UI and improve the table layout for readability (like in Reedy's approach) and go for mobile-first approach after further research.

Here's two connected articles that show the issues to face with responsive tables much clearer and some possible solutions:
https://css-tricks.com/responsive-data-tables/
https://css-tricks.com/responsive-data-table-roundup/

Copyright CSS-Tricks
Image from CSS-Tricks

This needs to be declined in context of Advanced Mobile Contributions. We've been discussing a better content representation there and will apply a responsive solution.

Keeping it open until we've got a clear task to merge this into…
Also removing Accessibility tag, tables can be made accessible when they contain a caption element, marking up header rows as th and include optionally thead, tfoot.

I'd love to have this table view. I am a hardcore mobile editor and I find it hard to access the mobile contributions page. A table view would look nice.

This comment has been deleted.

There is another approve to group the list by date - T219349

Aklapper added a subscriber: ovasileva.

Removing task assignee due to inactivity, as this open task has been assigned for more than two years. See the email sent to the task assignee on February 06th 2022 (and T295729).

Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome.

If this task has been resolved in the meantime, or should not be worked on ("declined"), please update its task status via "Add Action… 🡒 Change Status".

Also see https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator.

Pppery rescinded a token.
Pppery awarded a token.