Page MenuHomePhabricator

Define product direction for Project/Profile UIs
Closed, ResolvedPublic

Description

I'm fairly happy with the technical fundamentals that are in place for subprojects, and mostly blocked by uncertainty around the top-level design of profile (project and user) pages. I'd like a clearer picture of where these are going before moving forward.

Here are some of the things that I don't have a clear plan on:

Icon Nav: Icon nav feels mostly OK to me, but it's hard for me to hit the items I want consistently, even after long use. I have to fish around in the menu fairly often. I'd like to try adding text labels, so the items have text rather than just icons, but still feel a little different from normal lists.

Before
+---+
| X |
+---+
| Y |
+---+
After
+--------------+
| X  Community | 
+--------------+
| Y  Workboard |
+--------------+

I'm otherwise satisfied with icon nav.

Do you have other concerns about icon nav, ideas for it, or objections to this approach (see also below)?

Crumbs: Crumbs missing on Project and Profile pages feels negative to me. Although I essentially never want to navigate with them on "People", I do miss them somewhat frequently in Projects to go back up a level, and it's not clear why they aren't there (there's plenty of space, and they work well in Instances, where I use them way more heavily than in Projects). Even when not clicking these items, not having them feels inconsistent to me.

I'd like to restore crumbs to project profiles and user profiles.

I think crumbs will become particularly valuable/important with subprojects, because I think they're the most natural way to show a project hierarchy.

(They don't fit terribly well on workboards right now. I'm not sure what to do there, offhand. I'm not too concerned about resolving this right now, though.)

What's your current thinking about crumbs? (My recollection is that you removed them in the last round, but maybe you're missing them now too or maybe I just didn't understand the reasoning at the time? Or maybe subprojects is a compelling argument to restore them?)

Presentation Mode: M1450 mocks out a chrome-free view of workboards. This is way prettier than the current view, but I'm not sure what problem it's solving, except, say, "presenting a workboard on a projector in a meeting". As a user, I use navigation and menu bar elements frequently and don't want to remove them.

I'm tentatively onboard with building this but I'd like to make it a "fullscreen mode" or "presentation mode" sort of toggle/option, not the default view. This mode would hide the chrome and collapse the icon nav and crumbs into an action menu. It could be sticky per-user or whatever, too. But I'm also not really sure we even need this at all? It seems like a lot of complexity (particularly, a lot of JS) mostly in the service of aesthetics.

That said, to the degree that "presenting" or "this is ugly and I hate it" are issues, restoring crumbs and nav text would make them worse by eating more real-estate and adding more chrome-stuff.

Maybe v0 is a toggleable mode which just hides the chrome, crumbs, and icon nav so the JS is simple?

What are your general thoughts on the importance of simplifying this UI, improving aesthetics, providing a presentation mode, increasing real estate, or whatever other goals M1450 is designed to accomplish?

Sibling Tabs: This is a feature in the M1450 mock: projects that have siblings show siblings in header tabs, and cards can be dragged to siblings to move them between projects.

I really like this feature and think it's great, and definitely want to implement it.

This requires a substantial technical change to how draggable items work so they can be dragged outside of the workboard.

Workboard Card Dragging: The major task for this is T5240. Primarily, it is unnecessarily difficult to drag a card from a long column to a short column. D14866 is a very rough approach to improving this, and sticks the headers on desktop while allowing the columns to be scrolled.

It needs significant rework and then design work afterward, but this approach broadly feels okay to me.

I think the major alternative is to make columns scroll internally, like Trello.

I favor the full-height columns because I like the board being more like a physical board and slightly dislike the aesthetics of scrollable columns, but don't feel terribly strongly about it.

How do you feel about "infinite columns" vs "internal scrolling columns" vs other approaches? I'm open to trying internal scrolling if you aren't sold on the general approach in D14866.

Links to Other Applications: People and project profiles both have links to other applications ("Open Tasks", "Open Revisions", etc) in the icon nav.

These feel janky to me, and, as a user, I never use them. I am surprised when clicking an icon nav (which looks like local tab navigation) takes me out of the application and into a totally different view.

I see several reasonable things to possibly do with these:

  • Keep them, but embed them on the profiles, so you get some hard-coded search result set inside the profile. This is how some tabs (Project Members, Feed, User Calendar) work today, and these tabs feel OK to me. I'm basically not sure these are actually useful, though.
  • Get rid of them completely.
  • Create some kind of separate element for "links to other applications"?

I don't really favor keeping these but I'm not sure what to do with them. I don't have ideas for what a "links to other places" element would look like.

Wiki Integration: The major task for this is T7005. There's currently no way to automatically associate a wiki page with a project.

I personally don't think this is important, and that putting the link in the description or adding a custom field is sufficient and reasonable. I have a panel proposal in T7005 but I don't really like it and don't think it would work terribly well. I worry that it conflates "tagging pages with projects" with "setting a page as the one associated with a project" too, and that they'll mean different things and confuse/frustrate users (e.g., "alice keeps tagging wiki pages with 'backend' but that's breaking the tab on the Backend page, give me a permission so I can stop her!").

Project Detail Pages: The major task for this is T5558. Beyond that, there's something of an issue with T7410. While defaulting to the workboard view feels good to me most of the time, it's not so great in the specific case where users have accidentally created a workboard.

Broadly, the information shown on detail pages isn't tremendously useful.

I think figuring this out will probably inform everything else, but I'm not totally sure what we should do with it.


Here's a possible proposal.

First, separate builtin profile components from external links.

  • Split icon nav into "sections" and "links".
  • In Projects, "Links" are fully customizable. You pick an icon, name and destination.
  • UI renders the things in two groups, with a divider between them, to make it clear which parts are links and which parts are not.
  • Throw away "Open Tasks" and "Feed".
  • On profiles, just move all the weird/external stuff down to the links section but leave it there for now.
Custom Project Links
+-----------------------+
| X  Skunkworks         | 
+-----------------------+
| Y  Workboard          |
+-----------------------+
| Z  Members            |
+-----------------------+

+-----------------------+
| A  Main Wiki          | <-- link to wiki
+-----------------------+
| C  Setup Help Wiki    | <-- link to different wiki
+-----------------------+
| D  Urgent Tasks!      | <-- custom task query
+-----------------------+
| D  Primary Repository | <-- speific repository
+-----------------------+
| Q  Support Chatroom   | <-- conpherence room
+-----------------------+
| R  Developer Chatroom | <-- different room
+-----------------------+
| Z  New Bug            | <-- maniphest task form
+-----------------------+

I think the major downside to this is that it might be a lot of work to set things up like you want them, but we can provide API access easily now as a basic workaround and then iterate on making it easier to set/add defaults later if this is popular. I think users are also generally happy when things are possible, even if it takes a little more work.

Does that seem broadly reasonable?

Second, provide a dashboard. (I don't know if we really need this, though?)

  • Add a new builtin section, "dashboard".
  • Like workboards, there is no dashboard installed by default.
  • Projects can optionally install a dashboard.
  • Per-project setting for default view: details, members, dashboard, workboard.
  • Also build "project()" typeahead tokens so you can build a dashboard that queries for the "Current Project" instead of for a hard-coded project, so one dashboard can be reused.

I'd plan to not do this for now, until subprojects are in a better place, but that feels more reasonable to me than trying to, e.g., dashboards onto the detail page or somehow magic dashboards in in some other way.

Revisions and Commits

Restricted Differential Revision
rP Phabricator
Abandoned
D15113
D15103
D15102
D15092
D15095
D15093
D15091
D15090
D15089
D15073
D15066
D15065
D15063
D15062
D15061
D15060
D15059
D15056
D15053
D15046
D15024
D15022
D15020
D15018
D15017
D15016
D15015
D15012
D15011
D15010
D15008
D15007

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

I guess "Personal Workboards" (T5793) and "Separate Workboards Application" (T4890) are also possible things to discuss here.

I'm onboard with building personal workboards and having them work like project workboards, it's just a lot of JS to deal with the differences. But maybe now is the time to make those changes.

I'm a little worried that users will want multiple personal boards, but we can cross that bridge when we come to it.

I don't think workboards should be a separate application. I think (?) the only real use case from T4890 was docking other projects to the board and letting you drag-and-drop, but we could do that anyway, and building the tabs / drag-and-drop UI is compelled by subprojects so we're definitely doing 90% of the work. There's no reason we can't put tabs for "related projects" or "your frequently-used projects" on the right or something like that, and have them work just like the sibling project tabs on the left.

Broadly, I think separating workboards means we end up with multiple different ways to get to the same thing to no advantage. I'm open to building a general "Dock" element but I think that should just be part of Dashboards (or a totally separate "Dock" widget/setting/config thing?) since I think there's no reason you would only want to dock Workboards. Why not dock your team member's profile page so you can drop stuff on them to assign it, dock feeds, dock a specific create task form, dock pages you reference frequently, dock your team chatroom, dock a dashboard, etc?

That is, I think the application described in T4890 is really a "Dock" or "Workspaces" application, not a "Workboards" application. Building a dock application is totally reasonable to me (and might help us solve some future problems in Spaces, too) but I think it can/should be more general than workboards.

That is, "Dock" could work like this:

+-----------------------------------------------------------------+
| Phabricator X  [x] [y]                   o [            ] P S X |
+-----------------------------------------------------------------+
| Dash | #design | Review | Colors | Chat         * Dock Settings |
+-----------------------------------------------------------------+
| Phriction > Engineering > Changelog > Week 32                   |
|                                                                 |
|  blah blah blah                                                 |
|  ...                                                            |

And show up on every page. On a workboard, you could drag stuff to the dock to move/reassign it, if you had a project or user docked. In general, it would just be a bookmark bar. You could swap bars with some action on the right.

I'd probably rather solve the problem of "need to check on multiple projects" with Dashboards, which I believe was my original intent.

or maybe that's Dashboards on Project Profiles. Either way a separate Workboards app has a lot of overlap with better options.

Crumbs: Feel free to add this back everywhere (presume not on Workboards though?)

Yeah, I'll leave 'em off workboards for now. I think they maybe-make-sense there in a subprojects world somehow (you want to know you're on "Differential > Sprint 16", not "Sprint 16") but that UI is special-cased anyway and way more magic than all the other pages.

Maybe for sprints, the title can just be the parent project ("Differential") and the fact that the sprint you're on is highlighted in the tab thing is enough of a contextual clue about where you are.

epriestley added a revision: Restricted Differential Revision.Jan 14 2016, 3:06 PM
epriestley added a commit: Restricted Diffusion Commit.Jan 14 2016, 10:05 PM

Watching a Project looks like it redirects you to the Project default tab, which may be not the details page.

I think this has served its purpose, so I'm going to close it out. Results:

  • Icon Nav: We replaced icon nav with profile menus, which feel like a huge improvement.
  • Crumbs: We restored crumbs to many interfaces. Some special cases (workboards, mostly) may end up with different or more specialized treatments, but this is minor.
  • Presentation Mode: Punting this to T6066. I think adding the profile menu made keeping it around on boards as the default view feel better, since it's more useful than icon nav was.
  • Sibling Tabs: Not planning to implement this right away, but we have the technical capability to pursue it in the future.
  • Dragging Cards: We'll either do internal scroll on columns (more likely) or fixed headers (less likely) if that doesn't work. See also T5240.
  • Links to Other Applications: Resolved by profile menus.
  • Wiki Integration: Resolved by profile menus.
  • Detail Pages: Mostly redesigned and generally feel like they're on a good pathway now.
  • Dashboards: I'll write a profile menu element for this, but maybe probably not until the next dashboards iteration since links seem to cover a lot of this.