Page MenuHomePhabricator

Redesign Crumbs
ClosedPublic

Authored by chad on Jan 24 2015, 11:10 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Dec 12, 1:32 AM
Unknown Object (File)
Wed, Dec 11, 7:36 PM
Unknown Object (File)
Sun, Dec 8, 8:46 AM
Unknown Object (File)
Wed, Dec 4, 2:30 PM
Unknown Object (File)
Sat, Nov 30, 11:29 AM
Unknown Object (File)
Tue, Nov 26, 10:55 AM
Unknown Object (File)
Tue, Nov 26, 10:54 AM
Unknown Object (File)
Tue, Nov 26, 8:54 AM
Subscribers

Details

Reviewers
epriestley
btrahan
Commits
Restricted Diffusion Commit
rP64f145ef46a2: Redesign Crumbs
Summary

Slimmer crumbs, less complex, no sprites, less visual disruption.

Test Plan

Test Conpherence, Objects, Application Search pages.

Screen_Shot_2015-01-24_at_3.23.44_PM.png (724×930 px, 105 KB)

Screen_Shot_2015-01-24_at_3.24.01_PM.png (750×844 px, 104 KB)

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

chad retitled this revision from to Redesign Crumbs.
chad updated this object.
chad edited the test plan for this revision. (Show Details)
chad added reviewers: epriestley, btrahan.

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 PhortuneAccount NameOrdersAll Orders, and LegalpadLnnnnManageAll Signatures because the intermediate crumbs are important and can't be inferred if we remove them. In the common case of AppQuery 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.

chad edited edge metadata.
  • Fix mobile layouts
  • Clean up Phriction, ApplicationSearch
  • Update to use application font icon instead of home
  • Adding back border universal (for now )

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.

epriestley edited edge metadata.

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.

This revision is now accepted and ready to land.Jan 26 2015, 3:24 PM
This revision was automatically updated to reflect the committed changes.

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.