Sunday, April 17, 2011

User experience, one pixel at a time

  • A couple of weeks ago, I've been attending 2011 user experience Sprint, in Berlin. That was interesting and nice and productive and everything, and above all it was my first live encounter with other KDE people, including Nuno.

There's been (notably) quite some discussions about how information and functionality should be presented to users, organized and formulated, in order to be complete but not overwhelming, sexy, gratifying, and elegant.

Now, no matter how well organized resources, features, and information are, a significant fraction of the above can be wasted if every single brick of the UI is not rendered perfectly.

So Nuno (finger above) and I have been focusing on the remaining UI elements for which we are not fully satisfied, pretty much disregarding how these elements are used later on.

Two screenshots to illustrate the progress we've made during these few days.

First screenshot is Dolphin:
Things one notices:
  • more visible pressed tool buttons at the top
  • new slider at the bottom
  • and new folder icons (quite unrelated with this post actually), on which Nuno has been working lately (and I'm sure he would blog better than I about it).
Things one does not notice (but with which we are happy):
  • improved holes for the scrollbars, progressbars, and main view (note notably how the main view bottom corners are better rounded)
  • improved (well, bug fixed) rendering of the capacity bar at the bottom.
To give proper credit to whom it belongs, some of the improvements above have been primarily instigated by Peter Penz, Dolphin dev.

Second screenshot is K3B:K3B is using nice title frames all over the place for quite some time now (the icons and text over a blue background on the picture above), but which have not been rendered properly by oxygen so far (notably, there was one or two pixel between the frame shadow and the blue content, that was pretty much wasting all the effort). So we finally took some time to fix it, resulting in the above, which is closer, I think, to what was originally intended.

We've made other changes here and there and we still have some in the pipe before KDE 4.7 is out. Most of them are barely noticeable but we believe it will make oxygen look sharper, more polished and pleasant to the eye, one pixel at a time.


  1. The problem is also that inactive tabs (dolphin/rekonq/konqeror) don't look much different from active tabs and it's difficult to find out which tab is actually open? Also, the adress bar in the internet browsers seems to thin, and the icons inside (rss, bookmarks, https) are to small and hard to read. Shall I report it as a wish on bko?

  2. yes you should. And better report it to the relevant application rather than oxygen cause at least some of the issues you mention above are not oxygen specific.

    (as for the active/inactive tab, I believe there is already a bug report about it)

  3. Note that I personally disagree with the active inactive tab being too similar :)

    First: firefox-4.0 tabs are their own and turn out to be quite the same as ours

    Second: you can also change the tab style from "single" to "plain" (in widget config), and there the distinction is clearer, I think.

    Now its only a matter of taste. Problem is that so far nobody (including neither Nuno nor me) has come with a clean satisfying mockup to improve this.

  4. If you talk to Peter, see if you can get him make the top of the Places icons to align to the top of the main iconview, eg add a Places label of the same height as the Location bar label.

  5. I also have some ideas for Dolphin (or other KDE) improvements, where can I leave those? Lefty mentions "bko", what's that? Cheers

  6. So, you finally added a darkened background to pressed toolbar buttons! :-)

    Please also add away of indicating the default button - when the focus moves away from the default button, there is no longer any indicator.

    I also think that the faded line used to indicate focus in views, could be used to indicate focus for tab titles.

    Got to say, Oxygen is the *most* beautiful style I've ever seen. Very unique...

  7. @Quintesse
    You can post bug reports, suggestions to any kde application there.

    bko. You can talk to Peter directly there

    @Craig: problem is, I really don't like this faded line (nor does Nuno). We'd rather find a "better" design (and have found none so far).
    But thanks for the support and the reporting !

  8. It's amazing how you keep finding ways to make Oxygen even better, good job guys!

    I love the subtle changes to the scroll/progress bar and especially the zoom slider.

  9. Ah ok, the good old, "bko" just didn't ring a bell, sorry ;)

    And what can one do when bko seems to get ignored? (All bugs related to widget-folderview for example, even the ones that are obviously fixed/implemented already, are never closed)

  10. @Quintesse
    Well, not much unfortunately. Probably means that the dev is busy with other things, or the code poorly maintained.

    You still can well, learn c++ and contribute :)
    (send patches to review board, or even get a login).

    Otherwise, patience and understanding is the key.

  11. One thing I dislike a bit are the scrollbars. Their double pixel borders make them feel heavy to me.

    Another thing I would like (but this is probably a matter of taste) is an option to turn off some of the hover animations. In particular the color transition of the scrollbars. I would like them colored all of the time and not only when the cursor hovers over them. I think that way they would feel more like physical objects.

    These are of course only suggestions.(not like I'm demanding anything)

    Btw, I use enlightenment a lot, and except in its menus it has nearly no hover animations at all while it has excellent animations when you actually do something. For example in the file manager the animation happens when you select an item as opposed to when you move the cursor over it. Same for the button animation which you can see in this video:

    I think the desktop generally feels more peaceful when animations happen as an reaction to an event rather than when you move your mouse around.

  12. Well, actually my C++ is very rusty but not non-existent (already did a small fix for KDE ages ago). Thing is that without a "mentor" it's quite difficult to find out what to do and how and where to do it. Which gets me to an even more direct problem of trying to figure out who is the original developer (or current maintainer) to ask for help.

  13. I find the new icons little too much same as GNOME has and that blue is default (I hope there could be way to have brown (paper) color for every folder, that means the folder color should be possible change without affecting the special icon/tags in them like papers, photos, videos). But it is personal opinion and hopefully Nuno blogs about the subject.

    Finally as well the dockbar decorations are possible to hide (lock?) to get them smootly out of the way. And the pressed buttons really do look much better now.

    Now I just wish that in Dolphin it is possible to hide the whole bottom bar as I do not need it. I dont have there space or zoom widgets at all. And I dont need to know how many files I have selected or what is size of selected file. Oh, mayby it is for 4.8 <:-/

  14. I never understood the need for those kind of zoom sliders (except maybe in a graphics design package). Are there really people who are so often changing the zoom level (and in arbitrary steps even) that they need a widget for it to be continuously on-screen?

    For me, after having tried the single-click Dolphin interface since when 4.0 came out, I changed it back to double-click yesterday because it was really beginning to drive me insane. I just hate it when I'm trying to multiple-select a bunch of files and losing everything because of a single miss-click... three times in a row. And of going inside a folder when all I wanted was to select it to rename it. Dunno, it just never seemed intuitive to me (and it really is not for lack of trying).

  15. Dolphin: 1. Is there a way to use KIOslaves more effectively, like some panels that were (and are) in Konqueror?; 2. Can we have fixes for the keyboard interaction and Group mode? I've filed some bugs but they have gone unnoticed.

    Oxygen: Can you integrate better the scrollbar to the content, shrinking or deleting the scrollbar border next to the content being scrolled (asymmetrical borders, 1 px or 0 px next to the content, 2 px to the other side)?

  16. Zoom slider and the pushed buttons are a big improvement. However:
    1) The new folder icon is - well, it's lost the "Oxygen" charm. It's now very GNOMElike and the blue that is used is certainly very odd. I hope Nuno asks the community before he impresses this change upon us.
    2) I agree with the above commenter that the 2px border on scrollbars are too heavy.

  17. Is that available in trunk?

  18. @Nost: yes
    concerning the spacing between the scrollbar and the content, we tried that (long ago) and it does not look good. So no. Won't do.

  19. @Quintesse
    On the "usefulness" of Dolphin's bottom status bar, I must say I agree, and have asked myself the same question in the past.

  20. Those small things are what make oxygen really better :)
    What do you think about how the different bars(window bar, menubar, toolbar, and breadcrumb) merge together in apps like dolphin?,
    I've always tought some kind of separation was needed, even if it only was a subtle color change or a thin border.

  21. Am I the only one bothered by the title saying "Format and Era..." in the K3B screenshot?

  22. @Chainsaw
    Full text appear if you make the window large enough. This is common practice I believe, to truncate text when the window size is too small.

  23. Regarding the usefulness of the bottom status bar, I personally find the number of files/folders selected is often valuable information, and whilst I don't use the zoom slider myself, my father seems to make good use of it. Nonetheless, there can often be a lot of blank space in other panels such as the Information side bar, so maybe these things could be added there instead? Or maybe (with a considerable amount more effort I guess), such vertical side panels could transform into horizontal ones when dragged, with the info laid out in a format to suit. That would be the ultimate in flexibility (and a summer's hard coding for some poor soul :)

    One little nag with K3B is that at some time in the run up to v2.0 the Time Elapsed / Remaining status when burning a disc was changed to show in long format, e.g.
    Time elapsed: 3 minutes 22 seconds / Time remaining: 4 minutes 57 seconds
    This info is usually too big for the dialog and will therefore only show on a mouse hover. Also, with some fonts the 1's are a pixel or two narrower so the text string keeps jumping around as the seconds tick. A nicer solution would be to put the Elapsed / Remaining on separate lines, and perhaps stick to short-format, e.g.
    Time Elapsed 03:22
    Time Remaining 04:57
    That would save a few translation strings too!

  24. previous icons are a lot better, I request that these icons placed in a separate theme so that everyone can choose