Improve visual appeal for KUrlNavigator when in Breadcrumbs mode
Open, Needs TriagePublic

Description

Right now, the KURLNavigator's breadcrumbs bar has a muddy, indistinct visual appearance:

It's hard to tell that it's actually a clickable part of the UI. When you hover over elements of it, the hover effects look so slight, that again, it's hard to tell what it's interactive. We currently have a problem in Dolphin where people ask for the "Up" button to be added to the default toolbar despire the fact that the URL Navigator provides this functionality already. However people don't seem to want to use it for this or even know that it can be used this way, and I think the visual appearance is the problem

I propose a bold visual redesign that corrects these issues by aligning it with the Breeze style, giving it visual presence, and providing a better mapping of appearance to functionality:

You can see the following elements:

  • Each part of the path looks like a clickable button
  • Current directory highlighted using a pressed appearance rather than bold text, which we try to avoid
  • Clickable downward-pointing arrows help the user understand that there are drop-down menus
  • Show the current disk's icon rather than "/"
  • Visible "edit" button on the right to enter URL entry mode, to help people realize that there actually is a URL entry mode

I personally disagree with this change as it is proposed, specifically:
• "indistinct visual appearance": I believe it's not indistinct, but light, in spirit with Breeze. The proposed look, in contrast, looks visually heavy and bloated to me.
• "bold visual redesign": sounds a bit contrasting with the actual change that removes bold and makes finding out what directory a user is in "muddy". From my observations, few people actually keep the filesystem hierarchy in mind when navigating directories, deriving current location from the fact that its name comes with reduced contrast is not obvious.
• "Clickable downward-pointing arrows help the user understand that there are drop-down menus": combining right-pointing and downwards-pointing arrows next to each other does not convey anything to an average user, it makes the UI hard to follow visually and gives me KDevelop shivers.

I do not say that the current look is perfect though; using disk and edit icons I think is nice. But attempts to emulate font weight by reducing contrast and to explain available functions by <^>v maybe need another thought...

mglb added a subscriber: mglb.Sep 15 2019, 6:25 PM

It's hard to tell that it's actually a clickable part of the UI. When you hover over elements of it, the hover effects look so slight, that again, it's hard to tell what it's interactive.

Same looking (i.e. simple label > simple label > ...) breadcrumbs are almost everywhere (almost all content-oriented websites, google drive, dropbox, etc). People already know it and are able to use it, so it seems to be OK. I think we should identify whats wrong with this one.

We currently have a problem in Dolphin where people ask for the "Up" button to be added to the default toolbar despire the fact that the URL Navigator provides this functionality already. However people don't seem to want to use it for this or even know that it can be used this way, and I think the visual appearance is the problem

I think the reason is different. "Up" button is always in the same place and looks always the same. Parent folder on breadcrumb changes its horizontal position and text, so you need to first find it.

  • Visible "edit" button on the right to enter URL entry mode, to help people realize that there actually is a URL entry mode

In future it could be nice to have history as drop down list. What about putting the edit icon on the right of last element?