Dolphin UI redesign
Open, Needs TriagePublic

Description

This is a task to discuss about how the recent design proposals should affect Dolphin itself, and what should be changed where.

Some mockups of what's been currently discussed:

Breadcrumbs inside view
1x


2x F8105335

Breadcumbs inside the toolbar
1x


2x F8218239

Design changes
Breeze:

  • T11661 - 1px divider instead of frames
  • T10201 (with D27669 and D28317) - Tools Area (merges the look of the window decoration with menu bars and toolbars)
  • T11124 - Unify highlight effect style

Dolphin:

  • D27523 (KUrlNavigator on toolbar)
  • Maybe add more padding between the tools area and the tabs to make them consistent with the normal ones? The ones used in the mockups are different because making the rounded tabs touch the 1px divider looks a bit blurry, not because the style is actually going to change.
There are a very large number of changes, so older changes are hidden. Show Older Changes
ngraham added a subscriber: ngraham.Dec 2 2019, 9:16 PM

I am absolutely in love with the dark version that has the dark separators. I think I might actually use a dark theme if it used dark separators like that!

pedrogomes1698 added a subscriber: pedrogomes1698.EditedDec 3 2019, 2:39 PM


I think that on the non standard UI it's better to not add those separator lines on the top bar, I feel like they clutter it a bit, looks cleaning this way.
And personally I wouldn't want the word "Configuration" showing, but that's personal preference and there's a option to show just icons, just text or both.
But other than that, great design, if dolphin actually turns out like this, I gotta say, it'd look really sleek.

Yeah, you might like the ones with the light blue bg, it's the one that most people from the VDG chat like

Yeah, I'd go for the standard

filipf added a subscriber: VDG.Dec 3 2019, 2:58 PM

I am absolutely in love with the dark version that has the dark separators. I think I might actually use a dark theme if it used dark separators like that!

I would stop using dark themes if it had those separators lol. But it wouldn't be that big of a deal if we had separator color in the color scheme, which is something @ndavis mentioned.


How it'd look smaller, really like it!

alexde added a subscriber: alexde.EditedDec 3 2019, 3:20 PM

Can you please post a screenshot/mockup with several tabs + splitscreen + tree view for both the bright and the dark version?
I'd like to know how it looks like with your new design as the tabs are now above the bread crumbs.

I like it overall very much, though. However, I woudln't mind either, if the separators were removed. :)

Would the file dialog inherit the new style as well?

GB_2 added a subscriber: GB_2.Dec 3 2019, 4:53 PM


How it'd look smaller, really like it!

I love it!


How it'd look smaller, really like it!

with fixed padding between the buttons, it would look like this

joricke added a subscriber: joricke.Dec 3 2019, 7:55 PM

First of all, thanks for linking this @manueljlin
How would the design look with a split view?

Like the bottom left mockup

Like so?

I'm asking because the navigator positioning/spacing/width is depending how many icons users put in the toolbar to the left of it, right? So eventually it could happen that on the left hand side you'd end up with a very small navigator which is barely readable, while the right hand one looks perfectly fine.

Hmm, yeah, I see what you mean... Maybe fixing the same size to both and not centering it to the view itself but to the toolbar might work when there are many icons. Does anyone know any other solution to this?

ndavis added a comment.Dec 3 2019, 8:44 PM

I'm thinking maybe the breadcrumb shouldn't go in the toolbar. If you have to make all toolbuttons icons only to get the breadcrumb to fit, it's not good. There is real usability research that shows how labels are important for buttons with non-standard icons: https://www.nngroup.com/articles/icon-usability/

Yeah, the breadcrumbs shouldn't be squashed to fit, nor the icons.
Maybe making the current breadcrumbs part in dolphin be a regular toolbar part that you can add, remove or move to other toolbars might be another option, while also keeping good defaults. Should we talk about this here or T11663?

I think moving over to the other discussion would be more beneficial.

frdbr added a subscriber: frdbr.Dec 26 2019, 9:45 PM

Just some ideas I'd also love to see implemented:

  1. Have the fallback menu button if no menu is shown be an optional toolbar component that can be moved or removed
  2. Have the menu appear when pressing ALT and then disappear after being used, like in Windows.
  3. Have the fallback menu button not appear if a Global Menu is used

If those ideas are implemented, Dolphin looks just like it does in these concepts layout-wise and Recent is placeable in the Places part as just "Recent" it'd be darn perfect.

abetts added a subscriber: abetts.Jan 3 2020, 4:35 PM
  1. Have the menu appear when pressing ALT and then disappear after being used, like in Windows.

I tried this behavior in Firefox for a while but grew to hate it. I would always hit the Alt key for some other reason than then be mildly annoyed that the menubar showed up, pusing everything else in the window down. And it would disappear again based on an indeterminate condition. I think if we want to commit to hiding the menubar by default and showing a hamburger menu instead, we need to commit to it. No half-measures. :)

@elvisangelaccio, how do you feel about this? I'd like to avoid letting the conversation go in directions you won't be okay with, since you're the maintainer.

Principally, we seem to be a bit stuck on where to put the breadcrumbs bar/URL navigator. Many people prefer it in the toolbar (splitting in half when the split view feature is in use), but some prefer it right where it is inside the view. Maybe you can offer your viewpoint?

Does everything else look okay?

It seems to me that moving the url navigator to the toolbar creates more problems than it solves, because of split views.

What for? Just to be similar to other filemanagers? How many of them have split views anyway?

kderich added a subscriber: kderich.Jan 6 2020, 3:34 PM

It seems to me that moving the url navigator to the toolbar creates more problems than it solves, because of split views.

What for? Just to be similar to other filemanagers? How many of them have split views anyway?

What problems does it introduce? I like the way it looks.

I think there were a few ideas behind moving it to the toolbar:

  • Save a bit of vertical space
  • Fill empty space in the default toolbar
  • Looks better in general (IMO)

Of course the drawbacks of this are:

  • By filling the toolbar's empty space, we can't add more things to it in the future or add text to the buttons (which research shows is better for usability)
  • The Breadcrumbs bar/URL navigator can get quite narrow for narrow window widths
  • Uncertainty regarding how to handle split views. Divide it into two? Use only one and have it reflect the URL of the active split view?

Ultimately I think it's your call here.

I think there were a few ideas behind moving it to the toolbar:

  • Save a bit of vertical space
  • Fill empty space in the default toolbar
  • Looks better in general (IMO)

    Of course the drawbacks of this are:
  • By filling the toolbar's empty space, we can't add more things to it in the future or add text to the buttons (which research shows is better for usability)
  • The Breadcrumbs bar/URL navigator can get quite narrow for narrow window widths
  • Uncertainty regarding how to handle split views. Divide it into two? Use only one and have it reflect the URL of the active split view?

    Ultimately I think it's your call here.

I suspect that this will be entirely customizable, so the user will not be tied into a specific setup. The breadcrumbs bar itself might be usable elsewhere as well (settings maybe?)

ndavis added a comment.Jan 6 2020, 3:56 PM

It seems to me that moving the url navigator to the toolbar creates more problems than it solves, because of split views.

What for? Just to be similar to other filemanagers? How many of them have split views anyway?

I've been thinking the same thing. I think if we commit to putting it in the toolbar, we'll have to make the usability worse. It's more detached from the parts of the UI it actually affects. It needs a lot of dedicated space, so we'll end up needing to use more icon-only buttons.

If we leave it where it is, what I'd like to do is make it more of a distinct element so that it doesn't blend into the toolbar like it does right now. I think @manueljlin had some mockups showing that which looked pretty good.

ndavis added a comment.Jan 6 2020, 4:19 PM

If we leave it where it is, what I'd like to do is make it more of a distinct element so that it doesn't blend into the toolbar like it does right now. I think @manueljlin had some mockups showing that which looked pretty good.

I agree with this. I also think we should integrate the search button with the breadcrumb rather than having it sit in the toolbar, completely detached from the part of the UI it affects.

If we leave it where it is, what I'd like to do is make it more of a distinct element so that it doesn't blend into the toolbar like it does right now. I think @manueljlin had some mockups showing that which looked pretty good.

I agree with this. I also think we should integrate the search button with the breadcrumb rather than having it sit in the toolbar, completely detached from the part of the UI it affects.

I wanted to add one more thing (in addition to my comments above). Not everyone wants more room for the path bar. The breadcrumb bar as pictured above, IMO, is perfect for my needs personally. I also have to wonder how many people are using the unique features of split panel vs actually just using it as a way to navigate to another folder. Many don't seem to realize that Dolphin has a folder view (push F7).

dolphin with breadcrumbs inside view

Thanks, that looks nice.

These mockups appear to have removed the Sort By menu button that's currently in the toolbar next to the view choosers. Is that intentional? I feel like that's useful (especially in the default icon view) and I'd like to keep it.

not intentional

dolphin with breadcrumbs inside view

Very nice!

I agree, quite nice.

I wonder if we should make the status bar span the entire bottom of the window, not just the view area. And maybe we should keep it with a gray background. That way there would be two gray bars at the top and bottom of the window anchoring everything in the middle.

What do you think?

I agree, quite nice.

I wonder if we should make the status bar span the entire bottom of the window, not just the view area. And maybe we should keep it with a gray background. That way there would be two gray bars at the top and bottom of the window anchoring everything in the middle.

What do you think?

I think the status bar is better off being how it is in the current version. It has controls and info that are directly related to the view area and I think it's appropriate that the status bar is duplicated for split views. It should keep using the Window Backround color too, since it is not part of the view area with selectable items.

All right, fair enough.

So are we officially abandoning the idea of moving the Breadbcrumbs/URL Navigator into the toolbar? Shall we close T11663?

ndavis added a comment.Jan 9 2020, 5:15 PM

So are we officially abandoning the idea of moving the Breadbcrumbs/URL Navigator into the toolbar? Shall we close T11663?

I think we should, but I'd wait at least a day for a response from others.

I know @kderich suggested providing an option for this and a lot of people were excited about this. We should be extra careful about adding options that are mainly just cosmetic though. Especially ones like this one that have negative aspects.

I have a feeling this topic is going to come back every once in a while until the feature is implemented.

pedrogomes1698 added a comment.EditedJan 10 2020, 11:48 AM


Was this idea not good enough?
It doesn't take much away from those that use split view and it keeps that elegant style for those that don't care about split view at all.


Was this idea not good enough?
It doesn't take much away from those that use split view and it keeps that elegant style for those that don't care about split view at all.

Personally I'm fine with that and I think it looks okay for split view. But then again I don't actually use the split view feature so I'd like buy-in from some of the people who do.

I do not share the concern that the toolbar will be too crowded when the path is added. Looking at the mockups I feel like there is enough space left even if we keep the current labels as they are. The path becomes a relative one anyways when there isn't enough space which isn't terrible. When this change was discussed in the VDG chat half a year ago there was a consensus that it looked better and I am pretty sure users will be happy with this change as well.

The only concern I share is how to handle split view. I don't use split view but I can see how not being able to directly manipulate the paths of both views might be inconvenient. Falling back to the current behaviour is also always an option if split view users love it the way it is now.
So I hope we can decide on putting the path into the toolbar. If we can't do that I would hope we can decide on having the option to do so.

Sorry, we can't make this an option. Moving the navigator to the toolbar would require lots of changes to the code. We can't possibly maintain both implementations, it would be a nightmare.

So are we officially abandoning the idea of moving the Breadbcrumbs/URL Navigator into the toolbar? Shall we close T11663?

I vote yes.

The-Feren-OS-Dev added a comment.EditedJan 11 2020, 6:41 PM

So are we officially abandoning the idea of moving the Breadbcrumbs/URL Navigator into the toolbar? Shall we close T11663?

TBH I vote no. It won't look cramped by default in single-pane mode IMHO and if it's hard to maintain both implementations then we should just keep to the toolbar idea and, for space-saving on split view, here's an idea:

The pathbars can have two states in Split View: Normal when they appear as they normally do and Contracted where they just show their current folder.

The active pane's pathbar will automatically be Normal, while the inactive pane's pathbar will be Contracted (obviously the positions of these will reflect the locations of the panes (left-pane has the left-side pathbar, right-pane has the right-side pathbar))

When hovering over the Contracted one, it'll become Normal while the other becomes Contracted

When no longer hovering over that now Normal pathbar the process will reverse (unless you're editing the folder path in which case it'll only happen once the path is no longer being edited), making the active pathbar Normal and the inactive pathbar Contracted again

To make it less visually jarring, maybe have an animation of the pathbar expanding and pushing the other one into a Contracted state.

alexde added a comment.EditedJan 11 2020, 10:53 PM

Have you had a look at the KDE based NX desktop? I just stumbled over the screenshots they posted in their announcemet of about teaming up with Manjaro:

It seems they have put the breadcrumb into Dolphin's toolbar. I don't have the time currently, but you may check it out and have a more detailed look at how it performs overall, also considering the splitview.

That's not Dolphin, that's their Index file manager. Nonetheless, it does show that having the Breadbrumbs/URL navigator in the toolbar can in principle work. :)

onvitaik added a subscriber: onvitaik.EditedJan 12 2020, 12:27 AM

So are we officially abandoning the idea of moving the Breadbcrumbs/URL Navigator into the toolbar? Shall we close T11663?

I'd say no. I prefer how the toolbar looks like no space is wasted with the URL in it. It makes me feel like my screen space is being more respected than the other. That's just my thought on it, anyway.

So, I've not had much time to get involved here, due to a combination of serious medical issues and needing to find a job. However, I'd like to share my thoughts on some of these UI redesigns, starting with this one:

  • In the original mockup, the breadcrumb bar is a MUCH needed change. I assume the drop down next to each item will let you quickly switch to other folders. That is a very handy feature. Having it inline like that saves space and makes everything look nicer. I know there has been some discussion about where to put the path bar, etc. However I think that, as long as users are provided the flexibility to change things, it is a MUCH needed addition to KDE. Also, for those that are worried that the breadcrumb bar/path bar won't have enough space on the same line: my android phone has a similar setup and has no problem showing even the deepest of paths. I do agree, however, that it should be user choice.
  • Regarding dolphin: The 'Up' button should be shown by default. Yes I am aware that you can potentially just 'click the parent directory' in the breadcrumb bar (path bar in current Dolphin), however, as a user, I find myself preferring the 'Up' button as it requires less thought. Most file managers I have used, including the one for my android phone have an up button.
  • Regarding Dolphin icons: It is of my opinion Dolphin should use view icons that look more familiar. The big blocky icons look out of place. I will try to find a sample of what I mean, but you probably know what I'm referring to, rather than big blocks, smaller blocks or blocks beside lines. Also, by default, I believe it is only necessary to have 2 view icons: Icon view and Details View. If the user wishes, they can add other icons.
  • While I understand that the gray neutral color in the header is likely used for mockups, this really should be the default KDE look/feel. It makes everything appear to tie together. Right now, dolphin looks a bit awkward in it's default form. The transition from the titlebar to the toolbar is almost jarring, particularly when either/or can be used to move the window.
  • I would like to know (I guess telemetry will tell us, but feel free to share your thoughts) how many people use the split view, and HOW they use it. Also how many people use tabs, and why? I'm genuinely curious as to others' workflow. My personal workflow involves having a Dolphin window open in one path, and another in another path, and copy pasting between the two. I've tried split view, but always end up accidentally in the wrong part of the split. Tabs to me are awkward to use.

Overall the mockup by itself looks amazing. It's clean, simplistic, and modern while not sacrificing usability.

Just my thoughts.

  • While I understand that the gray neutral color in the header is likely used for mockups, this really should be the default KDE look/feel. It makes everything appear to tie together. Right now, dolphin looks a bit awkward in it's default form. The transition from the titlebar to the toolbar is almost jarring, particularly when either/or can be used to move the window.

Yep, that's the idea! See T10201. It probably needs to be updated with new mockups. @manueljlin, would you like to have a go?

Regarding split views, I had a thought here. Back in the day, browsers used to show tabs below the navigation bar. This created a bit of an interesting UX issue. Eventually, the tabs moved *above* the navigation bar to make things more proper. I'm wondering if both the tab bar and split view should do the same thing in dolphin. With the default dolphin layout, there are only 2 buttons on the toolbar that are 'shared' between each part of a split view ('split' and 'menu'). The rest function independently based on which part of the view is focused.

I'm wondering if Dolphin should take a similar approach. Each split view would ideally have it's own tool bar that is specific to that pane (as well as path bar).

  • While I understand that the gray neutral color in the header is likely used for mockups, this really should be the default KDE look/feel. It makes everything appear to tie together. Right now, dolphin looks a bit awkward in it's default form. The transition from the titlebar to the toolbar is almost jarring, particularly when either/or can be used to move the window.

Yep, that's the idea! See T10201. It probably needs to be updated with new mockups. @manueljlin, would you like to have a go?



Sorry, we can't make this an option. Moving the navigator to the toolbar would require lots of changes to the code. We can't possibly maintain both implementations, it would be a nightmare.

So are we officially abandoning the idea of moving the Breadbcrumbs/URL Navigator into the toolbar? Shall we close T11663?

I vote yes.

One last comment about this and then I'll be quiet. Forgive me, still learning QT, but wouldn't this simply be a matter of creating a QWidgetAction that contains the breadcrumb bar, then a simple if() that conditionally calls QToolBar::insertWidget() to determine if it should be shown or not? The breadcrumb bar itself would require effort to implement, of course, though other applications could potentially use it.

Note that even without the breadcrumb bar being created, isn't it possible to do this with the existing path bar?

Here's a small design change to maybe consider:

We have a View menu button in the toolbar Dolphin uses that's unused... what about if we condense the view buttons in the toolbar into just being that view menu button by default?

Here's a small design change to maybe consider:

We have a View menu button in the toolbar Dolphin uses that's unused... what about if we condense the view buttons in the toolbar into just being that view menu button by default?

That would be fine with me. I personally rarely change views from list view. I only use other views for folders containing photos.

@The-Feren-OS-Dev For the latest discussion on the view mode button check out D23075: Change default Dolphin toolbar layout.

@kderich I think it is a bit more complicated than you imagine it to be because the toolbar is configurable. In other parts it's easier than you think because the breadcrumb widget is already in frameworks – called KUrlNavigator. Anyways the biggest problem I see so far is that the current path bar has a lot of interconnection with other parts of Dolphin and sensibly duplicating that for the QWidgetAction might be the part that @elvisangelaccio calls "a nightmare [to maintain]". I had the idea of maybe synchronising the current path bar with a QWidgetAction directly but I'll have to explore that more or find the energy to program at all really and maybe that idea would still become a mess that would get blocked.

manueljlin added a comment.EditedFeb 15 2020, 6:27 PM

Moved the mockups to the description

I want to preface this with saying that I greatly appreciate @elvisangelaccio's work. I am interested in working on Dolphin because it is such a great piece of software.
Nevertheless I went ahead and implemented moving the url navigator to the toolbar as an option. I was hoping that if I provide a decent implementation of this it won't seem that unmaintainable anymore. I have to admit it was more tricky than I expected but I think it worked out okay. Let's hope I succeeded. :)
Have a look:

Awesome work, thanks so much!

manueljlin updated the task description. (Show Details)Apr 5 2020, 10:42 PM
joricke removed a subscriber: joricke.Apr 17 2020, 5:10 AM
clel added a subscriber: clel.Jun 12 2020, 8:22 PM

dolphin with breadcrumbs inside view

Just my POV, but I prefer having it inside of the toolbar. The current approach lacks a strong visual separation of the navigation. It can be even confused with column headers you have in Windows Explorer in column view. There are also too many lines meeting each and forming a grid without the content having a strong relation with each other. I really like the concept of breadcrumps like the address bar in Firefox for example where there is a clear separation of the content.

I agree, quite nice.

I wonder if we should make the status bar span the entire bottom of the window, not just the view area. And maybe we should keep it with a gray background. That way there would be two gray bars at the top and bottom of the window anchoring everything in the middle.

What do you think?

I think the status bar is better off being how it is in the current version. It has controls and info that are directly related to the view area and I think it's appropriate that the status bar is duplicated for split views. It should keep using the Window Backround color too, since it is not part of the view area with selectable items.

I also don't really like the current way the status bar looks. I had some doubt whether making it grey would help, but other mockups with that look better imho. Regarding having controls in the status bar: I find the position of the slider in the status bar rather unfortunate. Maybe that can be achieved in a different way which makes more space in the status bar up to the degree one might consider removing it altogether (at least the clear line separation). This is by the way what Nautilus seems to be doing: https://wiki.gnome.org/Apps/Files?action=AttachFile&do=get&target=general.png

I have two concerns with the proposed (and current) UI.

  1. it is very unclear what the three different icons mean. Based on the last one, the black square is an item within a folder, a sub-item if you will. However, the first two icons contradict that notion.
  2. The folder icons with their sharp angles are not visually appealing and do not look professional. Maybe switch them for a less angular set of icons?

I have two concerns with the proposed (and current) UI.

  1. it is very unclear what the three different icons mean. Based on the last one, the black square is an item within a folder, a sub-item if you will. However, the first two icons contradict that notion.
  2. The folder icons with their sharp angles are not visually appealing and do not look professional. Maybe switch them for a less angular set of icons?

That's Breeze Icons related, nothing to do with Dolphin

These are from another task but I'm adding it here as a comment too since there are many differences from the one in the task and ocean

Icon view


@2.5x F9413403


Compact view


@2.5x F9413471


Details view


@2.5x F9413476

So nice. I’m so happy that cyan border is finally gone. Thumbs up!

vkhatab added a subscriber: vkhatab.EditedJul 9 2022, 10:33 PM

Dolphin still doesn't look anything like this and even that cyan border is still there. While I understand the need to redesign a major app, all the other QT apps look just as bad or worse. A lot of this is down to the theme engine. There's been some kind of theme change recently but it hasn't made anything better - arguably worse by blending in the titlebar with the window chrome without making the whitespace in the chrome actually act like a titlebar. For the love of god people, please take the well thought out platforms as your point of reference - Windows 95, Mac OS, even Gnome ... anything. (sorry if this sounds hostile - as a dedicated KDE user I mean well).

For the love of god people
[...]
sorry if this sounds hostile - as a dedicated KDE user I mean well

Yeah, it kinda does. :)

To my knowledge nobody is being sponsored to work on this dolphin UI redesign project; feel free to contribute to make Dolphin look more like the mockups. If you can't, nagging or castigating the volunteers for not doing a good enough job isn't really a great motivational technique though, and I would encourage you to try a different approach. See https://community.kde.org/Get_Involved/Issue_Reporting#Have_realistic_expectations

I don't think volunteers can fix this problem. However, volunteers might be able to understand that there is a problem.