Slimmer crumbs, less complex, no sprites, less visual disruption.
Details
- Reviewers
epriestley btrahan - Commits
- Restricted Diffusion Commit
rP64f145ef46a2: Redesign Crumbs
Test Conpherence, Objects, Application Search pages.
Diff Detail
- Repository
- rP Phabricator
- Branch
- crumbs-redesign
- Lint
Lint Passed - Unit
Tests Passed - Build Status
Buildable 4026 Build 4039: [Placeholder Plan] Wait for 30 Seconds
Event Timeline
Try this out. I need some more work on ApplicationSearch which I think looks a bit worse, but don't have solid ideas on what to do there. (Remove?)
(this will need to be build for mobile too, just tossing up for you to check out early)
First impressions:
- Looks great.
- Does the home icon need to be there? It feels a little odd, since it doesn't take you "home" (i.e., Phabricator root), and most applications don't have a strong "home-like" base page. It would make more sense if it was a per-app icon, maybe? (Is that the intent, just not implemented yet?)
- The navigation and actions feel a little disconnected now. In my mind, the heavier background bar previously tied them to the menu bar visually and put them in an "application" space between the "global" space of the menu bar and the "object" space of the page content. Now they don't have a clear spatial identity and it feels like they associate with the object -- that is, visually, they look like they're related to the object to me. That's probably fine for the crumbs, since it's basically accurate, but on pages like /T123 where we have a "Create Task" button, it looks to me like that's going to act within the object scope (e.g., create a subtask?) not within the application scope. I've always felt the scope that these sibling-level buttons act in is a bit odd, but this design makes the feeling stronger. But I don't know if this is just me. We also aren't very consistent about them -- Conpherence, Phriction, Differential, People, Maniphest have "Create X", but Repositories, Almanac, Projects, Phortune, etc., don't. They feel good to me in Conpherence and Phriction (where there's no separate list view), questionable to me in Differential, People, and Maniphest, not missed in Almanac, Repositories, Projects, and correctly absent in Phortune.
- ApplicationSearch is a touch odd, but I don't have a fix offhand. I don't think it's too bad. We could leave it for now and take a crack at it when the search/filter UI gets touched next, maybe? I think it's important to retain the crumbs in the nontrivial/scoped cases, like Phortune → Account Name → Orders → All Orders, and Legalpad → Lnnnn → Manage → All Signatures because the intermediate crumbs are important and can't be inferred if we remove them. In the common case of App → Query they're less useful, of course.
I think we can get rid of most new x actions, they are just additional clutter and the quick create should solve this in a global sense.
I'm currently partial to the home icon with text over the app icons. Mostly I want to diminish the use of app icons and maybe move to the FontAwewsome version. My main design thinking here is the grey canvas is the 'app' and the header is the global scope. So home works here, I also feel it relates well on mobile, where something like a gear icon for differential might be more confusing. At least if applied across all apps, it should give a more consistent user experience. I'd like to try it unless you really don't like it. The alternative if we try it and still hate it is use app icons. I'll probably make a parallel version of the app icons at least from FontAwewsome soon anyways.
I like the floaty look a lot, and in using it at home for a week feel the other version is a bit gross now to me haha. It's pretty common UI to just float them without any bounding borders. I can dig up some examples. Mostly these crumbs aren't as important like a secondary mac usually is and if we did need a subnav globally this aligns with that direction.
This is ready, I backed out the border-less changes for now, I'll explore more down the road. It does remove an image, and simplify the crumb ui a bit on its own.
I'm like 98% onboard with tossing the border, especially if we can get rid of like "Create Diff", but we can always do that later / when ApplicationSearch gets retouched to de-float it a bit. Holding it for now seems reasonable.
Using the application icons completely resolves my original concern with the omnipresent home icon, they look great to me now.
I want to solve the display with some sort of .crumbs + .box = no border, it was whack-a-mole to find places like config history where we still wanted crumbs to have a border.