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
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 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.
