Page MenuHomePhabricator

Breadcrumbs or similar UI-navigation for getting back to the ticket overview
Closed, ResolvedPublic

Description

We work with tickets all the time and have a custom query that we have as a starting point.

The workflow is usually clicking on a ticket, doing something with it and then returning to the custom query overview.

The issue is that while going into the ticket and then back is easy by just using back in the browser, it's much more of a hassle if you have commented on a ticket or something similar. There is no easy way to get back to the overview. You have to either click back 2-3-4 times or click on the phabticator-logo, then maniphest and then the query..

Revisions and Commits

Related Objects

StatusAssignedTask
Resolvedepriestley
Resolvedepriestley
Resolvedchad

Event Timeline

epriestley triaged this task as Normal priority.Oct 23 2012, 1:58 PM

This will partially improve once the application navigation bar arrives in Maniphest, by creating a link to return to /maniphest/.

Providing crumbs back to a custom search is a bit trickier since we either need to render all links on the page with crumb information and then maybe clean up the URL with the HTML5 history API so copy/pasted links don't have a bunch of garbage in them, or use ajax for all navigation events, or use local storage / window.name tricks. I don't currently have a good way to do this that isn't a giant mess with a lot of tradeoffs.

For what it's worth, here's how I've solved this problem personally in a general way:

{F21952}

I use a 4-button mouse, and use a program called USB Overdrive to map the buttons based on which application is in the foreground. For Safari, I have them mapped like this:

  1. (LMB) Left click.
  2. (RMB) Command-click (Open in New Tab)
  3. (Left Body) Command-W (Close Window/Tab)
  4. (Right Body) Command-] (Next Tab)

When I'm browsing a list view anywhere on the web (whether it's Reddit or Hacker News or Maniphest), I open content by right clicking it into a new tab. Then I press button 4 to go forward through the tabs, and button 3 when I'm done with a tab to close it and go back to the last tab. Once I've closed all the tabs I opened, I'm back where I started.

Obviously, we should be better about providing navigational elements in Phabricator and can't expect everyone to remap their mouse, but I've found setting up such a mapping really useful -- and it solves this problem for sites like Reddit as well, where the links are third-party content and can't reasonably include navigation links back to the list view.

When I said custom search I did mean a saved custom search. So since everybody got these widey-wide widescreens it would maybe make sense to just add the left meny from the manifest overview page to the edit ticket-views as well. Maybe with a option to hide/unhide it.

That would make a lot of sense for us.

Other than that. I'm going to order a kensington mouse and try your cool mouse-trick. :-)

D4003 / D4004 give us enough technical groundwork to at least take a stab at this once we figure out the UI.

I'll work on the UI tomorrow, finishing up cards tonight.

chad raised the priority of this task from Normal to High.Nov 21 2012, 8:46 AM

Okay, took a pass at some new ideas and looking for feedback. Not sure if it would work everywhere but I think it's the most useful version I've put together.

{F24886}

Based on suggestions by @epriestley I created this https://gist.github.com/4130970 And it works perfectly for me.
It just adds the sidemenu from the maniphest overview to the edit and detail view as well

Here's how far I've gotten with this:

{F25818}

On mobile, my thinking is:

  • The current application crumb ("Paste" in the screenshot) turns into just an icon for mobile.
  • The filter options menu (list icon in the screenshot) stays around. When you click this, there's a dropdown like in your mock.
  • The current filter crumb ("All Pastes") goes away, since it's duplicated in the dropdown and we don't have space for it. On desktop, I think it's useful enough to keep around.
  • Other crumb(s) stick around.
  • The "Create Object" button becomes a green "+" icon (maybe with a dropdown).

So we end up with something like this when resizing the interface:

{F25820}

The breadcrumbs also replace this goofy thing:

{F25824}

The menu is now a dropdown off the "list icon" button in the crumbs, and the content is always visible. Removing the Application menu (D4033) allows us to get rid of the phone variant as well.

This simplifies mobile layouts a lot; we can just hide the side menu in all cases rather than making it slide around and animate.

Do you have thoughts on this? Design-wise, I think the outstanding stuff is:

  • I've separated the crumbs with a simple border, but it should probably be somewhere between that (since they're more buttoney now) and the ">" from the original mock. Maybe just a border shaped more like ">"? I deviated from the ">" partly out of laziness and partly because I think we can indicate the more-buttoney-state of where I ended up more clearly with a different approach.
  • We should probably have a "V" dropdown triangle on the list thing.
  • We should do an app icon treatment for crumbs, to replace the treatment in the app menu? So we can put an anchor, etc., in the crumbs instead of a generic globe?

Overall I think this is going to be a big step forward.

(I'll get a diff out for this soonish but I want to try to do a cleanup pass on the mess that is AphrontSideNavFilterView / AphrontFilterView first).

I'll mock up some other directions for this tonight. I had tried some of the things you suggested, like the app icon. The main issue there was the double-stacked icon (Phabricator's Eye and Differential's Gear) looked bad, so I simplified the subnav. Between the two we could probably lose the Eye, but then again that might look weird with just an icon on the second level.

Overall, I'd rather make the second navbar a full navbar, and skip the awkward breadcrumbs. It's interesting, but not really needed. There are more interesting things I think we can do when we're not restricted to a linear, progressive nav structure that crumbs would be.

Mostly, I'd like to take what we've laid out here and work it into the frame/nav revamp I'd sketched out below:

{F25837}

This was where I left off on the mobile redesign.

{F25840}

Strawman for discussion, will develop a mobile view of this tonight.

{F25859}

I do like actual breadcrumbs, at least on the Desktop, and some applications are extremely linear/hierarchical (e.g., Diffusion > Repository > /path/to/file, Phame > Blog > Post) but breadcrumbs don't solve a specific problem that we can't solve in other ways, so I'm not particularly attached to them.

On the most recent mock (T1960#19), I'm not quite sure I understand what's going on -- what is the reasoning for are "Active Revisions" and "My Revisions" both appearing in the second nav, and what is "Bag of Holding"? (Is it basically just moving the vertical side nav into a horizontal nav bar?)

I also wonder how much of this problem would be solved by just making the back button more useful more often. Specifically, if commenting was fully ajaxed I think it would nearly always work, which would reduce the need for upward navigation and probably let us get rid of the "prev" button on mobile duplicating the browser's "back" button. I think doing so has no tradeoffs UI-wise, it's just a bit complicated on the backend.

The buttons names are made up, they are just placeholders testing the design.

I do like the idea of getting rid of the sidebar and moving towards a subnav, but I'd want to make sure it worked everywhere first. Diffs are probably the most difficult, but I don't think it's unsolvable. Basically I'm looking at what happens to the product as it continues to grow / add more features and provide an easier way to manage them (app navigation).

++ on comment ajax.

I'm not sure we'd ever have anything to put in the subnav if we treat it as separate navigation buttons. I don't know what we'd put there in the most complex applications (Differential, Manifest, Diffusion) beyond "Application Home" and "Search/List". I think the only other candidate is "Reports", but it's very infrequently used (there's no link anywhere for Differential, even).

We have a few applications where it might make sense, like the Daemon console, which sort of handles two types of things ("Tasks" and "Daemons"). Drydock and Phame also have multiple object types ("Resources" and "Leases", and "Blogs" and "Posts" respectively). However, these cases are pretty rare and I think we do a fairly reasonable job with them now (Phame could be better, but I think it would be best to make it more hierarchical, since Blogs contain Posts).

We used to have more of these (MetaMTA had "Mail" and "Mailing Lists", Files had "Files" and "Macros") but users had a hard time finding the secondary objects because the tabs weren't prominent, using tabs to find secondary objects was uncommon, and the secondary objects weren't very closely related to the primary objects (it's not obvious that image macros live in "Files").

We also have applications which have strong hierarchies -- we have existing breadcrumb elements in Diffusion and Phriction.

My thought was existing sidenavs would just convert to subnavs (with the subheaders being drop down buttons). Basically the sidenav takes up a good bit of space and I'd like to find a better means of representing those links, while hopefully at the same time providing some additional utility. That's where I started with a bit of a mix between the subnav and breadcrumb nav.

Let's do this, can you tell me the 5 apps that are most 'nav' dependent in your opinion and I'll try a few new versions using all of them to see if we can find a good solution. Or if you're completely against ditching the sidenav, that would be good to know as well. I think some views might present a challenge, like diffs, but I can tackle those independently. I already have a decent diff-mock without the sidenav (needs crumbs though).

Sure:

  • Maniphest: (Side Nav for Query Filters) Most applications use side nav as "quick filters for search". Maniphest is the most complex of these. There may be arbitrarily many filters (users can add queries) and it's a common use case to switch between several filters (this is less common in applications other than Maniphest, though). Other examples of this type of nav are Differential, Paste, Audit and Pholio.
  • Phame: (Side Nav for Multiple Object Types) This application is tricky because it has two types of objects, "blogs" and "posts". Each post belongs to exactly one blog, but we need to support queries against posts without a blog to support "I wrote a post about X but don't remember which blog it's on" and listing of posts which aren't attached to a blog (e.g., because the blog was deleted -- these posts can be moved to other blogs), so we can't have a strict Blog -> Post UI. Other examples of this type of nav are Daemon Console (Tasks, Daemons and Daemon Logs) and Drydock (Resources and Leases) and MetaMTA (sent mail, received mail).
  • Settings: (Side Nav for Navigation) This application has a large number of navigational links which don't necessarily group into neat categories very well. Note that this menu may have an arbitrarily large number of groups, with an arbitrarily large number of items in each group (applications can add new panels). Other examples are User Profile and Project Profile.
  • Herald: (Side Nav for Everything) This application uses a side nav for all three purposes above. A less extreme example is probably Owners.
  • Diffusion: (Side Nav for Views) This application uses a side nav to show different views of an object (History / Browse / Change / Lint). I think this use is fairly unique.

I think I have all the various states mocked out for this. Anything else to look at design wise? Was going to look at cleaning up the sidenav UI if we're keeping it and crumbs.

I'm not blocked -- there will be a bunch of icon/sprite stuff after this lands but I'll get a list together (e.g., slicing 1x and 2x gradients of all the backgrounds and all that kind of thing). I think I should have more stuff up today, I've just been backlogged with a bunch of other stuff (on the plus side, I have a vastly more complete understanding of SSL / TLSv1 + SNI now!)

I have a few more images to slice, but they will all be done here shortly. Not sure gradients benefit from 2x, they seem fine on my retina macbook.

Woah just noticed the retina icons on the remarkup box. Sweet.

Alright, I think this is what we're missing:

  • "Phabricator" menu button (left, primary menu)
    • Has wrong icon (already sliced?)
    • Probably needs style tweaks (style recycled from whatever I had before, which I think was an epriestley "design")
  • "Application" meuu button (right, primary menu)
    • Has wrong icon (not sliced?)
    • Style as above.
  • "Dark Menu" items (items in the Phabricator and Application menus)
    • Need texture graphic.
    • For items which are applications, need application icons (do we already have these?)
    • For items which are not applications, maybe need icons in some cases or other style tweaks (e.g., green for "Create" items?)
    • Maybe general style tweaks, not sure I got all the fonts/padding correct. I also moved "search" relative to the mocks for implementation ease, although I like it in the menu and it's a big pain to move so if you don't haaate it maybe we can leave it there?
    • The Phabricator menu should have "Home" and "Current Application" items shown prominently (first two items under search), I think.
  • Breadcrumbs
    • Need gradient graphic.
    • Need ">" polygon graphic (I sliced a rough one out of Photoshop).
    • Need application icons.
    • Button layout on right is currently "actual button" -- I want to retain green on this element but it can blend into the crumbs better.
    • Don't currently have second-level path nav (e.g., "Revisions > Active > D123" doesn't have "Active"). This is a technical problem since we need to build a ton of JS stuff to get it right.
    • Currently no hoverstates, maybe need more graphics/icons?

I think that's everything?

Some of these should be in _Final in the appropriate /images/ folder. I had forgotten to cut up the mobile stuff, will add.

chad lowered the priority of this task from High to Normal.Jan 1 2013, 12:29 AM
chad raised the priority of this task from Normal to High.
auduny attached 2 file(s): Restricted File, Restricted File.Jan 9 2013, 9:33 AM

I just upgraded to the newest git-version. The breadcrumbs helps, but it's still lacking compared to just add the sidebar as we did to both ticket view and edit ticket view. usually you want to go back to you custom saved search, not the normal ticket overview.

(As you see from the screenshot we added hours worked, and we've misused priority for a easier drag'n'drop scrum-status. :-)

Thanks @auduny, we'll likely have some sidebar navigation in Maniphest when we update that app.

chad lowered the priority of this task from High to Normal.Jun 10 2013, 10:28 PM
chad removed chad as the assignee of this task.Jul 8 2013, 3:56 AM
chad claimed this task.

I think this ticket is as complete as possible now, given you can save and re-order Maniphest sidebar queries. If there is more specific you want, like a persistent side-bar UI, that's feedback we'll keep under consideration for the time being.

chad changed the visibility from "All Users" to "Public (No Login Required)".Feb 3 2016, 8:31 PM