This forum has been archived. All content is frozen. Please use KDE Discuss instead.

[Idea] Improve design of "sidebars"

Tags: sidebar sidebar sidebar
(comma "," separated)
kdeuserk
Registered Member
Posts
207
Karma
0

[Idea] Improve design of "sidebars"

Thu Mar 06, 2014 7:15 pm
Traditional KDE Applications often look like this in terms of the "sidebar":
Image
(Actually sidebar is not the right term, but I cannot use the name of the "widget" either, because code wise this can be implemented using different approaches, as outlined here: http://www.qtforum.org/article/24388/ho ... -this.html
When someone comes up with a more descriptive name, I will change the topic name. )

I have seen a few applications that handle that "sidebars" like the music player Cantata (http://kde-apps.org/content/show.php/Ca ... ent=147733):
Image

Notice the difference: There is no white background under the icons which makes the look much better in my opinion.
Secondly, there are no borders, to emphasize the "group" of icons, which is not important anyway to the user of a graphical interface if you ask me (Although it is important code wise :-)).

Also notice the difference the use of monochromatic icons makes! I think the UI of Cantata is a very good example.

So Image should look like Image in the future.

Sorry for the messy screenshots and ratios, I did not have much time.

What do you think? Do you agree?

I think it does also make sense in a logic way: The (usually) white backgrounds are used in an application to show content, but fixed elements of the user interface like tool bars etc. do not have that white background and it would not make sense.
I know this more a HIG question, but I think it fits nicely in the forums.

Overall I think this situation can only be solved code wise, but that should not be too hard.

EDIT: Watch the following screencast to see the dynamic implementation of the sidebar (it can be customized by the user following their preferences): https://drive.google.com/file/d/0B-ihXi ... sp=sharing

Last edited by kdeuserk on Thu Sep 04, 2014 4:14 pm, edited 2 times in total.
User avatar
colomar
Registered Member
Posts
947
Karma
2
OS
I think the standard sidebar (I think the term is pretty accurate) works well in configuration dialogs, but not in general application UIs. I'm not exactly sure why, but they just feel weird KMyMoney but not in System Settings or other settings dialogs. Maybe it's because in settings dialogs, they represent different "pages", changing the whole UI on the right side, while e.g. in music players, they change only parts of the main UI.
Does that distinction make any sense to you?
kdeuserk
Registered Member
Posts
207
Karma
0
colomar: You are right about the approach: They should only be chosen, when everything changes, like a new "page".
I find that sidebar pretty annoying in Okular for example. It bugs me every time I look at it because it makes no sense to me and wastes space.
So I think in Okular it is not appropriate.
I think in Kmymoney the sidebar would be appropriate, because I can not imagine another way to implement it, without radically changing the classical way of interacting with a desktop UI, but you can proof me wrong.
Whether or not it is appropriate in Cantata is a controversial question, but it does not get in your way as much as in Okular.

In Okular a drop down menu would be the most sensible approach if you ask me. (With the drawback of hiding things from the user, but I think this drawback is acceptable as we "hide" many things in menus. It is not possible to present everything in on sight without removing many functions.)

But my suggestion was, if we have a use case where the sidebar makes sense, we should make it the way Cantata does it, which is superior in design imho.

BTW: I highly suggest you to download Cantata and play with the UI, as it provides more than a static sidebar apporach: You can select to have tabs etc.
Alternatively you can watch that screencast: https://drive.google.com/file/d/0B-ihXi ... sp=sharing (disable adblock if it does not work)
The behavior shown in the screencast could be easily provided by sharing the code.

Also VLC media player provides some nice examples in some aspects. I will outline them as soon as I have got time.

Last edited by kdeuserk on Thu Sep 04, 2014 4:16 pm, edited 1 time in total.
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Kdeuserk: You have my undivided attention (I recently made a mockup of a launcher using monochrome icons in kinda the same way so this is really going in a nice direction).
Ok this means that we need to look at a standard monochrome icon theme to use as places too. (so we don't have to redo icons to every little app)... Have you seen that idea with Awesome Font as a base for an icon theme?

Colomar: I think this might actually work. The tricky bit is giving them enough room to create a nice visual space AND make certain that what ever method of highlighting the selected section is clear enough so that you don't get muddle up in it.


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
colomar
Registered Member
Posts
947
Karma
2
OS
Absolutely, I do not object to the idea at all. I was only asking myself whether distinguishing visually between sidebars in settings dialogs and those in main UIs could make sense. Maybe not. Still not sure.
Whatever, those grey sidebars with monochrome icons on them certainly do look cool!
User avatar
lazyit
Registered Member
Posts
125
Karma
0
OS
Monochrome icons of Cantata, look very beautiful and cared for, you could ask them, a collaboration of black and white icons for all applications kde
davidwright
Registered Member
Posts
153
Karma
0
OS
+1 For this. Love that screen cast.

jensreuterberg wrote:The tricky bit is giving them enough room to create a nice visual space AND make certain that what ever method of highlighting the selected section is clear enough so that you don't get muddle up in it.


What about something like this (but obviously much better!) :)

Image
kdeuserk
Registered Member
Posts
207
Karma
0
davidwright: The vertical blue bar could work, but it will be more difficult to implement code wise. It would make the whole thing more clear to the user though, so this is definitely a nice idea. So in Systemsettings this could really work. I am not sure about applications though. (Imagine it in Cantata)

colomar: I do not think it will be necessary to distinguish between settings and the main application interface in that regard.

Jens: Yeah some icons of http://fortawesome.github.io/Font-Awesome/icons/ are a really good starting point imho.
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Well without giving things away here but the idea is for a layout form that is ment to be used as much as possible ("as possible" being the marked word as it would be impossible everywhere - but also because there is a benefit of having rather strict layout rules because it tends to be helpful in creative work) - the issue being is that right now it's the fevered dream of maniac so I don't want to claim it is anywhere near being the goal in question...

Aaaaaaaand (long first sentance) it would go rather well with the ideas so far. My point being that I think this one of those issues where things can be improved immensely but that also go nicely with something else already planned.

As for Font awesome - if someone converts them to SVG's and put them up somewhere that would be brilliant! I mean that's the first actual step because from there we can set up a "lets create icons bonanza" and just make it happen.
(I gave the convertion a crack yesterday but got stopped by not grasping the damn issue of getting ttf into SVG's since in essence they are the same thing from my pov so if anyone else feel like giving it a go, please please do and we can get a thread going!)


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar
colomar
Registered Member
Posts
947
Karma
2
OS
kdeuserk wrote:colomar: I do not think it will be necessary to distinguish between settings and the main application interface in that regard.


It certainly isn't necessary. but might still be useful to make clear to the user whether clicking an element in the sidepanel will change the whole UI or just some part of it. We don't have to make that distinction, though. It was just an idea.
kdeuserk
Registered Member
Posts
207
Karma
0
Jens: Maybe converting by yourself is not necessary? https://www.iconfinder.com/search/?q=ic ... nt-awesome

https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG might also be relevant. (It contains all svg icons).
To make it easier for you here is the link: http://ubuntuone.com/6bJNEGslV7yroduqJFjAXg

The Cantata icons can be found here: http://ubuntuone.com/7YphlRC5hNNHSQkRZGBJ2K
User avatar
david_edmundson
KDE Developer
Posts
359
Karma
1
OS
I like the idea of unifying sidebars.

Another use-case to consider is kmail and konversation
http://wstaw.org/m/2014/03/08/plasma-desktops32392.png
here these are something more like a treeview.

I dislike our current sidebars (and your original examples) being in a sunken frame.
It's the other main difference in Cantana other than the monochrome icons. In my opinion something sunken shouldn't control something else sunken, they end up visually disconnected.
kdeuserk
Registered Member
Posts
207
Karma
0
David: Which "original examples" do you mean?

Did I understand correctly, you like Image but dislike Image ?
User avatar
david_edmundson
KDE Developer
Posts
359
Karma
1
OS
Yes.
User avatar
jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Ok I'm breaking out the Awesome Community Icon Theme into it's own thread so we can focus on that and invite people to work on that issue alone.


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"


Bookmarks



Who is online

Registered users: Bing [Bot], claydoh, gfielding, Google [Bot], markhm, rblackwell, sethaaaa, Sogou [Bot], Yahoo [Bot]