The work for KDE4 HIG is on te way and let’s see if KDE4 it’s gonna be the most useable environment out there.

Some days ago I’ve read on el’s blog about her work on the guidelines around the configuration dialogs. At the moment the work is around tweaking prototypes made on Qt designer, as you can see in this example, this is a quite complex dialog and the main difference between this type of dialog and the current kde ones is that the layout is centered, the labels are right aligned and the main widgets are exactly aligned and have the same width, giving the dialog a lot less cluttered aspect and seems simpler, even if it has the same number of widgets than a traditional dialog.

The main problem of doing a layout like this is convincing Qt designer to align the widgets as you have in mind and not being too smart…

For the few times I had to use Qt designer, I’ve come with a love/hate relationship with it. Love because it’s one of the most powerful tools for creating a GUIs around here, for example, I still remember with horror how impossible it was to create a decent looking layout with Delphi (an ancient version when I was still trying to use it, looong ago :D). Hate because sometimes it really tries being way too smarter than the user, and especially when using the grid layout it puts the widgets in the most improbable places, and the impulse of beginning to edit the ui file with a text editor becomes so strong :-P.

In this article I will point out some veeery empirical guidelines on how to design a form without getting mad. It will be based mainly on the this dialog used in el’s blog entry, both because i’t a quite complex example and because I’m not expert in usability, so all the tips will be on how to make it in the easier way than in the most useable way and oh, also because of lazyness 🙂

The grid layout

Qt has that neat feature of the grid layout and is the type you probably want to use for almost every dialog more complicate than a simple pile of widgets, but unfortunately is one of the most difficult to work with, being essentially a table and if you have worked a little bit with html or word processors you know that they tend to be wery tricky to work with :-).

So let’s see how a grid layout is done in the Designer’s ui XML files (that has a very straightforward translation in the generated c++) let’s start with this very stupid dialog:

And the source code of the interesting part is:

  <layout class="QGridLayout" >
   <property name="margin" >
    <number>9</number>
   </property>
   <property name="spacing" >
    <number>6</number>
   </property>
   <item row="1" column="1" >
    <widget class="QPushButton" name="pushButton_4" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="1" column="0" >
    <widget class="QPushButton" name="pushButton_3" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="0" column="1" >
    <widget class="QPushButton" name="pushButton_2" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="0" column="0" >
    <widget class="QPushButton" name="pushButton" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
  </layout>

As you can see every item of the layout has the row/column coordinates that determines how the table is done; a quite different method from for example HTML.

But there is one part that is very similar to HTML and that is responsible for most problems. The following dialog has only three buttons, but the right one is in the middle.

The source code is:

 <layout class="QGridLayout" >
   <property name="margin" >
    <number>9</number>
   </property>
   <property name="spacing" >
    <number>6</number>
   </property>
   <item rowspan="2" row="0" column="1" >
    <widget class="QPushButton" name="pushButton_2" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="0" column="0" >
    <widget class="QPushButton" name="pushButton" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
   <item row="1" column="0" >
    <widget class="QPushButton" name="pushButton_3" >
     <property name="text" >
      <string>PushButton</string>
     </property>
    </widget>
   </item>
  </layout>

the property rowspan=”2″ tells the right cell to expand in two rows.
In the same way the property colspan expand the cell of the given columns.

This is a very powerful property that lets you draw very complex layouts, but usually you can’t force Designer to use it where you want, it always guess from the layout you have drawn, so you always must very precise; for example in this particularly bad drawn form in theory you could expect a result like that but if you click on the grid layout button you get that monstruosoty: that correspond to this table: As you can see there are three empty cells (the bottom two resulted from the wrong vertical alignment of the right spacer) and a text label with rowspan=2 where it shouldn’t be.

This is a simple example, but in more complex dialogs this phenomenon could be very subtle and hard to spot.

Constructing a dialog

Let’s start with the bare dialog of the above example and we will progressively populate it with more widgets.

First of all, when you place the widgets, you must be very precise, in order to avoid the above problem. You should give to the dialog the very same aspect that you plan for the final one; usually the Qt tutorials emphasize that you don’t have to be very precise and will be designer that line up the layout, but thrust me, you have 🙂
In this example, the left and right spacers must be exactly aligned with the label and the textbox, in order to avoid unneeded empty cells and the labels should be aligned well with the corresponfig text boxes.

Hint: for the most delicate parts (here the two spacers and the textbox) you can make an horizontal layout and then break it, only for obtaining the components placed well.

When you ‘re done you will obtain the structure of the following table:

I always find a great help thinking about what structure of table, and what rowspan/colspan are needed in order to achieve a particular result (I know: HTML wreaks mind :D).

Adding things that breaks the flow

You may have guessed that the hard part of this article is making all the layout always centered and keeping the ideal line between the text labels and the line edits (or other kinds of widgets) continuous. So what happens when we introduce some titles that are aligned to the left that makes impossible to still use only two spacers, like this image?

You have to consider the layout broken in different logic “blocks” separed by the item that is not centered (in our case that bold labels), and then use one and only one spacer for every separate “block”.

Adding complex groups of widgets instead of a bare line edit

In this step we end up with this dialog:

Nothing particular here, in order to avoid to render the main table too complex and avoiding ugly surprises, I suggest to grup the groups of widgets with an horizontal layout.

If there are widgets without label could be helpful to put a vertical spacer instead of the text label just to make sure that designer understand that cell should be void; it’s not necessary, but if you modify the layout designer could screw things up.

Adding multiline grids in the layout

Sometimes you have two or more lines containing more widgets that are almost identical and should be aligned in a grid, otherwise they would look very bad. In this case you will end up with a multiline block that will have a rowspan of 2 (or how many lines you will need) with the text labels (as many as the rowspan) aligned on the left of the group.

If you want a layout like this I would say that a grid too big should be avoided (as usual, this is not a tip about usability, but only about what is simpler to do). The ugly thing is that you have no way to align items in a grid if there is a title in the middle that breaks the layout.
The only way is to align them into the main grid, but you can use this trick only one time, because another grid of different items would break down everything.

And there it is the final result, with the sources 🙂