Anatomy of a Dialog

In the process of developing BloGTK 2.0, one of the goals was to create a much more polished user interface. Linux is extremely powerful, but it’s never been particularly usable. Love it or hate it, Mac OS X proven that you could create a usable UNIX-based operating system that could appeal to a wide audience. The reason why OS X is such a usable system is because Apple has a nearly fanatical devotion to removing anything that gets in the way of the user.

Take BloGTK 2.0′s settings window as an example:

The old design for the BloGTK 2.0 settings window

The old design for the BloGTK 2.0 settings window

This dialog is not very usable. For one, it looks cluttered. There are dividing lines all over the place. In theory, you want some kind of visual separation to divide up elements of an interface. So in this dialog there are dividing lines between the blog name field, the blog URI field and its attached button, the username and password section, and the section for the blog id and blogging fields. There are four lines just on that section of the dialog, not to mention the dividing line between the dialog buttons and the rest. So even though it’s theoretically usable to put all these lines in, it doesn’t really work in practice.

So, it was back to the drawing board. Yes, separating out all those elements made sense in a way. But would a user actually care? Probably not. Was there a way of making the dialog both look at function better?

This is where GNOME programmers should turn to the GNOME Human Interface Guidelines. Having a consistent set of human interface guidelines is a key part of having a usable system, and far too few programmers follow these guidelines.

Here’s what the GNOME HIG says about visual design. Note how much that dialog from BloGTK looks like the example of bad visual design. Sadly, that dialog is not alone. Programmers tend to like to think of things in terms of discreet “boxes”—and while that’s a great thing for programming, it makes for a really bad UI. So the dialog on the left is cluttered and hard to follow.

The HIG has some very good recommendations for how to avoid an ugly and unfriendly dialog: get rid of frames and separators, make sure that elements are sized and spaced consistently, and design with the user in mind.

Applying those principles, here’s what the revamped Settings dialog for BloGTK 2.0 looks like:

The new BloGTK 2.0 settings window

The new and improved BloGTK 2.0 settings window

This dialog is not perfect. It is a work in progress. But notice how much cleaner this dialog is compared to the one above. Gone are the ugly dividing lines. Instead of having the last four inputs scrunched into two columns, they are aligned with the other elements. Even adding a new element to control the number of posts to be retrieved, the design looks much friendlier than before.

What did I learn from reworking this dialog? For one, the HIG is your friend. It’s as important as the Python Library Reference to constructing a usable application. So few applications follow the HIG, which contributes to users feeling that Linux is hard to use and wildly inconsistent from application to application. Ultimately, it’s up to us application developers to fix this.

I also learned that usability is a process, not an event. That dialog was done and redone several times until it was acceptable—and it will probably change again. The days when programmers didn’t have to worry about design are long since gone. Now understanding basic UI design is as important as knowing how to code.

The first dialog worked well enough. It got the job done. But if Linux is to continue to grow, it needs applications that are consistent and well-designed. That means that developers should find their inner designer, have the HIG bookmarked, and look at bad design as a bug that needs to be fixed. Give your user interfaces some love, and hopefully your users will do the same for you.

Tags: , , , ,

5 Responses to “Anatomy of a Dialog”

  1. hansioux Says:

    Wonderful. It’s nice to see these kind of discussions. And the new Preference window is a beauty.

    I have one question though. What is the embedded tab for? In most blog editor, the 3 tabs usually are “Main” which is a you see what you get kind of editor, and does all the html/css styling behind the scenes. A “HTML” edit mode, which you edit with HTML and CSS tags directly. And finally a “Preview” tab to let you see what it would look like on your blog.

    In BloGTk 2.0 so far the main looks like a HTML mode editor. And there is a preview tab. Then what’s the Embedded tab for?

  2. BloGTK Says:

    The middle tab is for writing an extended entry – many blog platforms let you create a main entry and an extended entry, so that you can display a teaser for a post and then have the reader click on to the longer piece.

  3. boluor Says:

    when i clicked “edit post” button , it prompts :

    An error occurred : enchant error for language : zh_CN.UTF-8

    what’s that mean? and how to solve it?

    when i clicked “New Post” ,it taks a long long time to download account data, and seems will never done.

    thank you ! when there is a response , please let me know.

  4. BloGTK Says:

    It appears to be a bug with certain language settings. I’m investigating it, and will see if I can come up with a fix.

  5. Gerald Says:

    I had the exact same problem with “new post” downloading account data and not ending. I searched around and fixed it by installing hunspell from synaptic. All is working again.

    The solution was found here (fincan’s post)
    https://aur.archlinux.org/packages.php?ID=30403

Leave a Reply