UI Design Essentials

My design skills are limited to stick figures - and even then, people will react "Is that a MacBook the guy is holding?" - "No, that's a chihuahua peeking out of her purse..." Nevertheless, as a commercial software developer, I need to somehow be both a programmer and a designer, at the same time.

And when you cater to the Mac market, you're talking about the platform where applications have to bleed coolness - often with ground-breaking user interfaces, like Delicious Library or Apple's iApps. Following the platform's interface guidelines is only half the work: your job is to provide an elegant user interface that conveys information in an efficient manner, interacting in a compelling way at the same level as your target user.

Granted, I make database front-ends for a living. The boring kind of applications: accounting, order processing, and all that happy fun stuff that involves storing data in and loading it back from a database, and providing reports and statistics so that the end users can do their job. In my time, I have seen plenty of applications that were built from a developers' point of view. Which means it's logical, in a way, though not necessarily matching the user's line of thinking.

If you're lucky, the team that built the thing in the first place, took the time to read up on human-computer interaction, and tried to learn from the other applications out there. And if you're really lucky, they had someone on their team smart enough to say: "It's not enough to have menus and windows and buttons, but we should make sure that all elements in our application work consistently, as this will cut down on user training and support calls."

But I didn't mean to step onto the soapbox here - I just wanted to point you over to this entry on the Theocacao website - a blog for Mac developers, written by Scott Stevenson, who also maintains the Cocoa Dev Central learning center. You can fetch the slides of his UI Design Essentials talk as well as a movie recording. It may take a while to download the 532MB QuickTime HD file, but it is well worth it.

He talks about the history of developers and designers in software development, and although he can't make you a designer in as short a timeframe as an hour, he does make excellent points and offers practical advice. Specific topics touched include: the basics of iterative design and usability testing, the use of whitespace and partitioning, correct labels and prompts, as well as fonts and language design, covering inspector palettes and icons in the process.

He also ran through a real application that someone was brave enough to submit, pointing out design flaws that turn this functionally excellent application into something users can get to work by themselves, but could be so much better and easier to use by making a number of tweaks. In the wrap-up, he mentions a number of 'model citizens' that we should look at. Some of the best bits came up during the Q&A session at the end, which is only available in the video recording, unfortunately.

As you wait for the download to make its way to your computer, you may also want to chase down these books:

• Designing Interfaces by Jenifer Tidwell (O'Reilly)
• About Face 3 by Alan Cooper, Robert Reimann and David Cronin (Wiley)

While the latter is a very theoretical book which goes through great lengths to match up the implementation and mental models of developers and users respectively, the first book has great tips on how to improve the user interface of your desktop as well as web applications, filled with screenshots and explanations in a very readable format.

Of course, there are other resources out there, but I'm not going to add much more to this post - instead, I would like to encourage you to go out and look at applications that you use every day, and write down what you find annoying and what you like about the way it interacts with you as a user. And the n try to repeat what thery do right, and avoid what they do wrong.

While Quartam Reports works the way it does, as it was modeled after the Report Builder that shipped with Foxpro, it's not going to stay that way forever. I've already been prototyping a complete overhaul for a while now, and hope to make it a reality for version 2.0 - balancing between the "let's just get it over with" mindset of a developer who has to develop 189 of those pesky things, and the mindset of someone who is perhaps less-seasoned in the raw developing process, but has a good idea of the end-product and how it should turn mere facts into empowering information.

In the meantime, there's plenty to learn and consider and tweak, as usual... Not to mention plenty of code to toss and rewrite... It just never ends, does it?

Website make-over

After about 4 years of a design that was clean but not very modern, I decided to sit down and give my site a complete make-over. I had a pretty good idea of what I wanted it to look like, and in my hubris estimated I could do it in a day or two.

The original website design was done using Claris Home Page, a dinosaur even in the day that I picked it in 2004 as my tool for table-based layouting. But for the rather simple site I had in mind, it was the logical choice, given that I had last designed a website back in 1994, in the days when HoTMetaL Pro was considered a major step forwards.

My mindset is that of a developer, not a designer. Which means that I'm pretty good at straightforward HTML, and I can work with XML and the gory details of XSL transformations. But for some reason, my brain comes to a grinding halt when it is confronted with CSS. So I generally let the designer "do his thang" and integrate it with my XSLT file or AJAX routine. Which I write in a programmer's text editor, not some fancy tool like Dreamweaver.

However, for my own website I was going to get it right - and of course, it resulted in a lot of expletives and crying and pleading with every deity that could remotely help - not that I really expected the ancient Roman goddess of wisdom, Minerva, to be any good at CSS, but hey, it would have been cool if she had swooped by and fixed the problems - and I was getting desparate at that point.

Until I decided to put away my programmer's hat, and dug out my copy of Freeway Pro, which I had recently upgraded to version 5 anyway. Created by Softpress, it is aimed at visual designers who like working with Quark XPress, drawing graphic elements and filling them with content.

A long long time ago, in a galaxy far away, I was active in various student associations, where I invariably ended up layouting the association's magazine using PageMaker or RagTime. So after a lot of experimenting, unlearning and documentation-consulting, in these past four (*) days, I managed to completely revamp the quartam.com website.

The result is CSS-based, and my website no longer looks like something designed in the 20th century. There's one more section to redo as far as layout goes, and I still have to wrap up those elusive tutorials that I started back in 2006 - I'll let you know when those eggs hatch. Right now, I have to get back to preparing for runrevlive.08 - where I will be presenting the session on Advanced Databases.

(*) Four days, whereas I had planned two days. Great - just great. If my boss reads this, I'm sure he'll have a field day - according to him, you need to multiply a developer's time estimate by 2 and then you may get a more realistic timeframe. Don't you just hate it when the manager is right? Then again, he worked his way up from the coding trenches - which means he has a much better idea about software development than, say, a former bank director pretending to be a CEO in IT...