Page MenuHomePhabricator

Flow side rail for phones, small browsers
Open, MediumPublic


On a phone, we don't have any room for the side rail -- but we don't want to stick all the side rail stuff at the top of the screen for everyone. Flow can be a perfect discussion tool for users on phones, but it's not a good experience for users to scroll down past all the metadata boxes.

For phones and small browsers, shrink the side rail down to a collapsible tab, as seen in the mockup. The text says:

10 notes on this discussion

with "10" being the number of templates in the side rail.

When the user taps/clicks on the tab, it opens to display the full side rail. When it's open, you can tap on the "10 notes on this discussion" label to close it again.

Default will be collapsed, with a sticky preference for logged-in users.

Event Timeline

DannyH assigned this task to Pginer-WMF.
DannyH raised the priority of this task from to Medium.
DannyH updated the task description. (Show Details)
DannyH moved this task to Product/Design Work on the Collaboration-Team-Triage board.
DannyH added a subscriber: DannyH.
DannyH set Security to None.

For reduced space we can communicate that there is information about the topic in a compact way, and provide access to the whole description for those interested.

I created a quick prototype and some mockups illustrating the idea:

The compact version shows a couple of lines as an introduction to the board, and an indicator ("10 notes") to communicate the number of items ("yellow boxes") about the board. As soon as the user starts scrolling, the description can collapse.

Taping on the compact description opens an overlay with the same contents as the right-rail. Users can go back to the discussion and edit the description.

I like this. I think it could be even more compact than this -- the top of most of the pages is a box that says "This article is of interest to the following WikiProjects", which isn't worth excerpting.

I think the way that we'd calculate the number of "notes" is to count the number of templates, unless somebody has a better idea.

With the option to edit the header I was expecting people to write some general introduction, but from the examples I have been checking, I see they are template-only. For those cases, I agree that a more compact option would be preferred (since a short text taken from the templates won't be a great summary of the contents):

If we really need to make the entry point more prominent depending on the content (e.g., if some templates are marked as really important for users to read) we can use the background color in a similar way as notifications (highlight it until the user opens it for the first time):

This is great; let's do it. I'll put the mockup at the top and then on to the estimation meeting. :)

DannyH updated the task description. (Show Details)