Page MenuHomePhabricator

[EPIC] Redesign category pages and overlay for mobile
Open, LowPublic

Description

Category button

In the Mobile interface beta there is a categories button but I think this is not very intuitive, most people will be just too lazy to explore it. Instead, please, we could try to expose the first 2-3 categories with a 'More...' button next to them.

The following layout has been suggested which shows 3 of the categories and a link to view them all:



2 categories:

3 categories:

4 categories:

15 categories:

mock demonstrating clicking category tag and clicking "other categories"

Choice of top 3

@Nirzar said: "I think fixing the content issue is very essential in order to implement this feature. I think it's a blocker. it's not only which categories are useful but also what happens when you click on a category. right now mobile rendering of category pages is bad and difficult to navigate."

Previous work: https://gerrit.wikimedia.org/r/298029

Category overlay

Viewing category (clicking category)

The API, which exposes a list of pages in a category, is already available, e.g.:
https://commons.wikimedia.org/w/api.php?action=query&list=categorymembers&cmtitle=Category:Lower_Yarkon_River

As far as I can see, the api should support our InfiniteScroll module, too (haven't tested).

Adding categories

When i was working on VE i had similar prototype for adding categories quickly

Problems/open questions

  • Clarify, what happens with the text of a category (a category doesn't just contain pages, it can contain (a lot) of wikitext, too.
  • What happens with sub-categories (which currently are exposed on the category page, too, e.g. https://commons.wikimedia.org/wiki/Category:Lower_Yarkon_River)
  • Clarify, if there's already an API, which exposes a list of pages for a category.
  • Which mock is more up to date? tags or list?
  • If there are only 2 categories and clicking a category opens all pages in the category how do I add a new category?

Developer Notes

This will need a CategoryListGateway which @Florian wrote a patch for

Event Timeline

Florian created this task.Aug 4 2016, 6:59 PM
Restricted Application removed a project: Patch-For-Review. · View Herald TranscriptAug 4 2016, 6:59 PM
Nirzar added a comment.Aug 4 2016, 7:01 PM

@Florian thanks for creating this task. I will flesh this out more and answer the open questions.

Florian updated the task description. (Show Details)Aug 4 2016, 7:02 PM

I took a look to our existing MediaWiki API, and we can get the pages of a category very easily I think :)

Nirzar added a comment.Aug 4 2016, 7:05 PM

@Florian that sounds amazing. i was merely pointing towards the direction but now i will spend more time going through flows and cases and populate this task.

thanks again for being patient with this :) and apologies for the delay.

@Nirzar: Just for you to take into account about the open point "What happens with sub-categories": We can retrieve sub-categories via the api, too, so we coult probably have two sections, one with pages, and one with subcategories. Or mark subcatgeories in another way. If a user clicks this category, we could show another overlay with the new list of pages/subcategories :)

Change 303265 had a related patch set uploaded (by Florianschmidtwelzow):
[WIP] Prototype of CategoryListGateway

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

Nirzar added a comment.Aug 5 2016, 8:03 PM

@Nirzar: Just for you to take into account about the open point "What happens with sub-categories": We can retrieve sub-categories via the api, too, so we coult probably have two sections, one with pages, and one with subcategories. Or mark subcatgeories in another way. If a user clicks this category, we could show another overlay with the new list of pages/subcategories :)

I was thinking of the same. we can use segmented controller which says "articles" "sub categories" and show it that way.

@Nirzar, would it be better for small screen devices if we removed the space at the top, or somehow made the title bar on the same line as the close icon similar to other overlays? Also, would you please upload mock-ups for the tablet sized devices? I have a suspicion that the current UI won't look that good given how much horizontal space at the top will be wasted.

Hey Florian,

I have been working on it for past few days and had multiple iterations based on your feedback on the rough idea that i had posted.

I came to a conclusion that we need a page template. page template meaning, all the non article pages. i.e. special: pages need a better template. sorry to dig this deeper but i can't solve a problem which takes care of this alone.

I set out to create a category page with two segmented controls. i.e. Granite domes and it has two section "articles" and "subcategories"

I looked at the existing page template that fit this need. i came across watchlist which has main segmented control "list/ modified" and a title on top.

from their i looked at user pages and contribution pages and talk pages. and everything seem to have different layouts. so i ended up taking a shot at creating one single page template which has section selector and a title. Here's how it will look ->


Sorry about opening so many things but i can't just add more inconsistency in our interfaces.

@bmansurov currently in the description the mock shows a modal window. but i think categories being a separate page of itself (it has different ways to reach) it needs to be a page and not modal. this above approach solves your concern too.


Hmm, the problem is, that we would need to rewrite the HTML for that, as far as I can see. And rewriting _content_ just for (or at least in) mobile mode isn't something we really want to do (as far as I know, and I support this :]).

Btw.: This also doesn't take the wikitext part of a category page into account :) See the Granite domes example: https://en.wikipedia.org/w/index.php?title=Category:Granite_domes&action=edit

With respect to the category page proposal:

I should note we are doing something similar with the user page so I don't feel to bad about adjusting the markup for category pages. That said it seems like it might also be useful for desktop.

@Moushira is that worth investigating with the community (showing them Nirzar's designs)?

The category pages are quite hard to navigate in current form and it would be great to bring them to life in this way.

Florian removed Florian as the assignee of this task.Apr 10 2017, 7:28 PM

Removing myself as assignee, as I'm not working on it at the moment, and I still don't think, that we should focus on it or even do it in the proposed way :/

Jdlrobson lowered the priority of this task from Normal to Low.May 17 2017, 9:17 AM
Jdlrobson added a project: patch-welcome.

Reflecting reality.

Jdlrobson renamed this task from Create a mobile-user friendly presentation of a category page to [EPIC] Redesign category pages for mobile.Jun 28 2017, 9:05 PM
Jdlrobson added a project: Epic.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added subscribers: Sumit, Nemo_bis.

Has lots of open questions.

Jdlrobson renamed this task from [EPIC] Redesign category pages for mobile to [EPIC] Redesign category pages and overlay for mobile.Jul 10 2017, 3:59 PM
Jdlrobson updated the task description. (Show Details)

Change 303265 abandoned by Jdlrobson:
[WIP] Prototype of CategoryListGateway

Reason:
I encapsulated this gerrit link into https://phabricator.wikimedia.org/T142124 so that it's not lost but it doesn't look like this is actively looking for review. Hope that's okay.

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