So many time without blogging… For being honest I have been really busy with university (still hell busy), and I have had time for coding mostly, without blogging on recent work I have been doing. Anyway, the short story, didn’t find the time to blog.
At this point, I am really happy to show you the new shiny KCategorizedView. It is not still on KDE’s SVN, but it will soon hit it. This new implementation will make it for 4.3, and is the implementation I was dreaming about.
When I was rewriting it from scratch, I could read Celeste’s post, and wrote it down deep in my mind. This was all about KCategorizedView and I had to fix all those problems now that I was on it.
That’s the time I asked Nuno to design a mockup (talking with Celeste also, to have the usability team approval). He sent me this two mockups:
This one is meant for systemsettings, while the next one is meant for Dolphin:
Until now, the “category drawer” was the header of the category. This means, it could say: my height is 15 pixels. The view would ask it to be drawn on a rect of height 15 at the beginning of the category. I understood at this point that this wasn’t enough. So, after looking at both screenshots I understood the category drawer should be able to draw everywhere on that category bounds (imagine if you want to draw a big folder on the bottom right part of the category ‘folders’ when sorting by type). Nowadays, on the new implementation, the category says: my height is 15 pixels. Then the view can do some operations to know the size of the whole block (say, 100 pixels height), and then when the category is asked to be drawn, it gets a 115 pixels height rect where it can draw. Of course is its own decision to only draw on the first 15 pixels if it wants so.
After so many talking, on a first approach of drawing and trying to get those mockups right, I have something like this:
Note that the alternate block coloring is not on the mockup, and probably will be removed, it was just for testing purposes.
Note also that this is not even on KDE subversion repository, and even when it gets to it, the way things are drawn can radically change if someone has objections and they are well based.
Please also note that screenshots are not very close to mockups in certain places. Just be patient, they will =)
I really love to see this on KDE SVN soon, since internally it got amazingly polite from my POV, what makes it really easier to maintain than the older view, and also to contain no hacks internally, what is very important.
If you feel like it, you can find all the work I am doing separately here for kdelibs, and here for kdebase.
Hello, just with regards to your mock-ups: I think that the corners of the ‘separators’ need to be rounded. At the moment, they are square and stand out from the rest of the entire KDE theme (which has rounded corners).
Otherwise, it looks great!
That’s looking really good, definitely better than the current versions.
I like the way you added bold text. The rounded corners in the mock-ups are nice too. Icon spacing could use some refinement: it seems like too much in Dolphin, not enough in system settings.
I think I’m going to copy some of it for a project I’m working on.
Hi, I do not know if its your field, but concerning the systemsettings it is not only the category view. It is the naming of the categories, the naming of the single setting and what is put in the advanced tab or not (which btw is not really needed when there are not so many icons). Unfortunately I am to tired to look up an example, but general feeling is that it is often confusing at least when you are not so computer savy and a problem to find something. As an experienced KDE user you know where what is. Would be great if along with the optical improvements the inner logic of the system settings cold be improved too.
Hi
The mockups are nice but what about changing the color of the gradient with a very light blue color (or the color for selected items) ?
Me again: here is a quick preview for the blue background
http://img75.imageshack.us/img75/9566/systemsettingsbluewr6.jpg
(I should have done it on nuno’s mockup but well…)
Impressive work!
But personally, I don’t like the style.
Because the line increase the complexity.
IMHO, the KDE4′s window and dialog box look crowd.
I like it to be simpler. But it’s just my opinion.
Anyway, thanks your work for KDE4.
I think it is an improvement, but still not perfect in my opinion. I said this in Celeste’s post, I think the key thing is to make the heading stand out compared to the rest of the text. That way people’s brains subconsciously identify it as something distinct. This makes it easy to scan headers while ignoring their contents, scan contents while ignoring headers, and move between the two.
On the other hand, Celeste’s point about needing to identify the header as clearly belonging with its contents is important as well.
I think the current mockup does a good job of grouping the header with the contents, but could do a better job of making the header stand out. One idea that occurred to me is a tweak of the gradient. Currently the gradient looks linear. What I would suggest is keep the gradient smooth, but make it non-linear around the header.
A good way to do that would be to have the gradient smooth up to just below the header, then get darker more quickly for a few pixels, then go flat just before reaching the text. The whole thing would still be fully blended and smooth, it is just the rate of transition that would vary. Another way would be to make it have a smooth transition up to just before the text, then have it reverse direction briefly, then reverse again and go back to where it left off. Basically sort of give the header a look like the slope of the transition is smooth, then speeds up just before the header and then has the header on a flat plateau.
If you do something like that, with a smooth transition followed by a still smooth but different transition your mind should tell you subconsciously “this is something different”, even though it would still be considered part of the same group.
I also echo the request for rounded corners and different colors. I also prefer to the system settings look in general, including for dolphin. I don’t see the advantage of the dolphin look.
Great that you’re working on this, it’s looking good. However I think the lines are a bit too dark. Try to make it more like the mockups, as they look great IMHO (but keep your bold text). And maybe try to add the little rounded corners as others have pointed out.
But it’s looking much better!
Oh and also, I think it looks better if the gradient of the lines fade out completely like in the mockup, and not end abruptly.
I like the first mockup, what has round corners and smoother fade http://media.ereslibre.es/2008/12/image2449.png I like the idea to have normal text on the header and not the bold. What makes it harder to read.
I would use that for Dolphin too and forget the sharp-corner version totally. But on the Dolphin, I still would preferr placing the alphabet letter outside of the box. To left side. So when you scroll folder full of different named files, you can read faster the letter. Now when the letter is inside of the box, it is slower and user needs to use “more brains” to follow the changes. The mockup version works fine with System Settings, where you have only a few groups, but when you have 30 groups… you really wish that letter is outside of box and not inside. Problem is on Dolphin, because you can have the groupping options in different ways. A alphabeth letter or filetype. The filetype needs the header to stay on inside but the letter needs to stay outside.
Yes! Much better than the current implementation.
Very good! but i think it should be mach more descreet
I especially like the system settings mockup with the gradients. In the Dolphin view I’d get rid of the vertical lines. While the horizontal lines divide the categories, the vertical have no function here. Also there are already a few vertical lines near it, in both Systemsettings and Dolphin, making it look crowded. That vertical line bit on right looks a little awkward, like a left over.
Hello Rafael,
Like the general direction, please try to keep it clean – don’t use more lines than necessary.
By ‘polite’ I think you mean ‘tidy’, ‘neat’ or ‘elegant’? ‘Polite’ means to talk respectfully to other people.
Great work! I personally prefer your second version with alternating colors (without the small lines on the right side + rounded corners as mentioned above).
I’m not sure if the fading background (first versions) fits in the existing design. Are there any fading backgrounds in kde4 yet? I know there are several apps with alternating backgrounds (like in dolphins list-view, amarok etc.).
Finally, all your versions are a great improvement! Thanks for your work!
Thanks to all !!
I can see lots of productive criticism, with lots of good points. I love how you guys make us improve things.
Thanks for all your comments, they will be taken into account.
Note that not all people can be pleased, but we can try to make the best thing in general terms.
As I said, those screenshots are not even in SVN, and when they hit SVN they can change.
BTW, @Robert Knight: yeah ! hehe, thanks for the english lesson ! Will do it better next time
Bye all, and thanks again !
Hello,
first of all: Great work!
That is really an improvement.
On thing that hurt my eyes a bit, is the spacing below the icons. I made a rough mockup with a bit bigger spacing:
http://img114.imageshack.us/img114/2001/sysiu5.png
Would be nice if you could consider this, as it should be trivial to implement.
I have mixed feelings about this. As I said at Celeste’s blog, the lines here don’t necessarily have the /separator/ function.
With the lines in black, the lines draw the attention and not the content. So, if it *is* going to be this way (decoration above the text) at least make it a bit less intrusive – not black, so
-1 for http://img114.imageshack.us/img114/2001/sysiu5.png
and
+0.5 for http://media.ereslibre.es/2008/12/image2449.png
Cheerio!
4.2 is not even out yet and things like this are already going to be only in 4.3. IMHO this really shows that KDE’s freezes are too strict. This change is a usability improvement (as evidenced by Seele’s analysis), it has no drawbacks (unlike some usability improvements which remove or hide things), it doesn’t even change any strings and it almost certainly will be done before the 4.2 release. So may I ask why, other than “it’s a feature and no new features are allowed in 4.2″ red tape, this isn’t going into 4.2?
Why not an idea like this?
http://www.giuseppepennisi.it/blog/wp-content/uploads/2008/12/systemsettings.png
Today I have tried to make a mockup and I made this.
I don’t know, can be it an idea?
gp