KDE Dialog Layout II

Summarising the comments on the previous blog entry and my own consideration:

Top-to-Bottom – Users do not want to think about the proper sequence of options. The layout should therefore support the workflow. Top-to-bottom is mostly perceived to fulfill this requirement.

Screen is broader than long – a strict top-to-bottom approach wastes screen space as each element is presented in a new row. Given the number of options in current KDE dialogs and the fact that screens are broader than long, it still makes sense to put related options into a row where appropriate. This should not result in a grid layout – it must be clear that the reading direction is row-wise, not columns.

Indenting is required – We have to decide between indenting or stretching user interface elements. Otherwise normal-sized input widgets will look lost on a broad page. Stretching is something we want to avoid as the relation between label and input element gets lost in some cases (see example below).

[image:2339 width=600 class=showonplanet align=center]

Visual indicators support the recognition of relations – for strongly indented or centered layouts, some kind of visual indicator is required that separates group. This may be space, lines or group boxes, or etc. Which ones do you prefer?

[image:2340 width=600 class=showonplanet align=center]
[image:2341 width=600 class=showonplanet align=center]
[image:2342 width=600 class=showonplanet align=center]

Variable indenting – neither a purely centered nor a design with a fixed indent is optimal. A large fixed indent unnecessarily increases the width of a dialog, while a small one makes the right of the dialog look empty (as many KDE dialogs are extremely broad atm). In a centered design, it may happen that the distance between left-aligned group label and options grows too high.

[image:2343 width=600 class=showonplanet align=center]
[image:2344 width=450 class=showonplanet align=center]

If we could make sure that the width of dialogs does not become larger than, let's say, 600 px in "normal" font sizes, then the indenting would be much less problematic!

Note: This is not the final layout. I'm looking forward to further ideas and suggestions.


...suck. Please don't start proposing them. This is one of the most ugly things, when it comes to UI design, imho. It's like writing a business letter with all lines centered.

By carlo at Sat, 09/09/2006 - 17:37

on the other hand it is one way to bring labels and widgets close together, which is very important.

It's actually more important. An option to achive both is to right align labels and keep widgets close still. That would give a ragged right edge of the widgets however.

In the example dialog that would be bad for the date widgets. They really should be aligned on the widgets. One could choose to locally add some more distance between label and widget for one of the date widgets. This is however not always possible if eg one label is much larger than the other.

By boemann at Mon, 09/11/2006 - 18:55

Although I like to avoid every non necessary line in normal apps, like in konqueror I like line-boyes in configuration dialogs. Therefore my preferred visual indication theme would be the third.

About centered and non centered positions: the most web pages today are made with a central, quite narrow information source in the middle and one or two navigation columns (think about the majority of blogs, most of them have a fixed width around 500 px) - and even on big screens these pages keep their structure. Therefore the users are kind of used to the fact to have large, blank areas, or not?

And, one question: I followed some discussion here about if icons should be placed on the desktop or not - is this also part of the work of the usability group? And if yes, I would like to talk about some experiences related to the topic I made with "normal users" - where can I discuss it?

By liquidat at Sat, 09/09/2006 - 17:39

i think groupboxes should be used for grouping stuff. they give the most freedome to style creators, so its easier for users to customize their dialogs.

serenity, for example, uses completely different groupboxes.

and i hope the apple style indenting (right aligned labels) will be in the hig. even if its difficult to do with qt right now - bringing the labels near the input fields makes it much easier to understand the layout.

By siberianhotdog at Sat, 09/09/2006 - 17:40

It's very cool what you have done to the lay out of that dialog. It looks "manageable and not scary" now. Bold sections are very good approach. Very cool.

As for "boxing" or just using space and bold section titles:
It not a question of "or" it's a question of "when"

The dialog you presented only has 3 sections. Objects in sections sit tightly together and are clearly distinguished as "clusters" Hence, both lines and boxes just seem to complicate things a lot. If you would have loose "clusters" of elements that do not "appear" together - box them. Once again - unfortunately, you can't really make that a categorical HIG rule, as it's more of a "eye of the designer" thing.

The other approach - make that a box and have users use UI styles that don't render them - the idea sorta suggested by dude plugging Serenity style :) Or, have "Do not draw line of boxes, only make box titles bold" option in the default style.

Right-aligned titles are awesome in bringing order. Yet, in cases like "Comment" box, I would rather have title above, than to the left, which would allow for wide text entry field... Where to draw the line, hard to say. But my suggestion - each "box" can have different centering line.

By suslikreal at Sun, 09/10/2006 - 04:06