Overcoming Programmers' UI

Question

I am decidedly a programmer, and not a UI designer, so when I am working on internal tools, I really struggle with laying out controls in a useful manner.

For example, all those questions I've been asking for the last two days have been for building this tool:

http://www.gfilter.net/junk/taskmanager.jpg

And while I am pretty happy with how it looks, it does not come naturally to me whatsoever, and I'm sure if it wasn't just an internal tool there would be tons of room for improvement.

I found a lot of good advice reading Joel's UI book, but I was wondering if anyone else had pointers on good sites to teach UI design (Web or Desktop) to the programmer types.

EDIT Sorry about censoring the screenshot, I realized I had some employer identifiable information in there.

Answer 1

I found that reading About Face 3: The Essentials of Interaction Design by Alan Cooper really helped my development in UI Design. While artwork and colors still do not come as naturally for me, practice is making me much better.

Hope that helps!

Answer 2

I'm not sure if there's any one good site/book, but I do know that Don't Make Me Think gets a lot of good mentions. Design's something that programmers really struggle with, and I don't think anything short of a few years of study could overcome that. I think in the end it comes down to eating your own dog food and figuring out what sucks, then trying to improve it.

Answer 3

I would recommend WebDesignFromScracth. Talks about what makes a good and bad website, lots of links to go explore in depth and good reasons for why whatever works. The Current Style page is particularly good.

Edit: Second the recommendation for Don't Make Me Think.

Answer 4

If you are programming for a particular os, your os' human interface guidelines are a good place to start. Since it appears you are designing for the web there aren't really any guidelines to reference, but I would say in general a good tactic is to think of the most common way of doing something so that users will be likely to recognize the design metaphor. Your task -- managing lists of items it appears -- is a pretty common task, so just find an example that is done well and model your ui after that.

In regards to that specific UI, the only confusing part is that the new build task table row is not clearly distinguished from the existing build tasks, a little more visual separation of the new item command and the list would help.

Answer 5

I find that I get a lot of helpful information from tutorials and articles directed at graphic designers - tutorials for programs like Photoshop, Illustrator, After Effects, InDesign, etc. There are good websites for learning the basics of Design (not our kind of design) like this one. I've been doing graphic design on the side in the above programs for several years now, but I'm still hopeless at color - so for that I go to Adobe's Kuler site, where artists who are into colors upload their color palettes and everybody votes on them. Just getting a good color scheme will really go a long way to making your app look good. I'm also reading About Face right now, I read Joel's book on User Interface (it was pretty good), and I'm about to start Sketching User Experiences by Bill Buxton.

Answer 6

I feel your pain.

Whenever I've written a largish program from scratch, and therefore "designed" the UI myself, I've struggled to make it usable. I'll think I've designed a form really well, and then get bug-report after bug-report caused by users misunderstanding my GUI. What I think is usable and intuitive, is crazy and wrong to users.

I'm discovering that HCI really is a field unto itself. Good programmers are not necessarily good UI designers.

I'm trying to become a better designer, but I think sometimes you just have to give up and call in a real HCI expert.

Incidentally, one book that hasn't been mentioned yet, and is on my amazon wishlist, is The Non-Designer's Design Book. It's not strictly about UI, but I suspect that most of the principles would carry over.

Answer 7

In my experience, the most useful thing you can do when designing UI is to always be thinking to yourself:

• How can I reduce the number of steps required to perform this task.
  -- The best number of steps is always zero

• How could this be annoying to users -- eg: those stupid 'enter your credit card' forms which don't allow spaces or hyphens.

• If I had never seen this interface before, would it make sense what all the buttons/fields are for and how they work?

Beyond that you get into aesthetics, which aren't my strong point either. Good luck with those :-)

Edit: also second the reco for Don't Make Me Think. Well worth the purchase price

Answer 8

On a note by our sponsor: Joel's own book and articles on the subject are also an excellent read: User interface design for programmers

(For the humor impaired: the sponsor thing is a joke)

Answer 9

I quite liked the book "the humane interface". I think it is a great book to get you thinking about the quality of an interface.
Also, watching other people interact with your GUI is oftenly very revealing. (But you must not give any advice in the process, even though that can be really hard at times).

Personally, I feel that a simple GUI should follow similar rules to Powerpoint-presentations: Few, simple items, only the most necessary text, a plain layout and large, easy-to-hit buttons.
As soon as the GUI needs to get more complex, though, it starts to get mystical...

Answer 10

"Don't Make Me Think!" by Steve Krug and "About Face" by Alan Cooper are excelent reads but i would also recomend "The Design of Everyday Things" by Donald Norman.

The first edition is from 1990 so it doesn't talk about web design but nevertheless it exposes most concepts that you'll need to consider when developing any kind of UI

Answer 11

If you're looking for a simple book then this is not for you.

Interaction Design: Beyond Human Computer Interaction by Helen Sharp, Yvonne Rogers & Jenny Preece

This book is pretty hefty, but covers much of the background knowledge any undergraduate or graduate student would need in a HCI related degree or course. It represents many examples throughout history in enough detail to give you working knowledge, but not enough depth to make it a detailed reference.

One fault with the book is the lack of coverage on the Internet or WWW, but I find that good HCI and UI concepts are universal. This book doesn't necessarily teach you the best way to do something, more the concepts that created these 'best-practices', so if you're looking for a book to broaden your horizon, rather than to teach you how things should be done I'd definitely recommend this one.

If you're just looking for a website to show you some best-practices with things like online forms then I'd recommend only one website:

A List Apart

Simply put, it's an invaluable resource for Web Designers and Developers.

Answer 12

You don't have to be a great designer to come out with a decent UI and a great user experience for your application.

I think there are certain principles you can follow that can dramatically improve your application.

At a high level this includes:

• Identifying your top 3 use cases
• Measuring and reducing the number of clicks it takes to get through the top use cases
• Sketch, Prototype, Throw it away, and challenge yourself to do it with less

I've written a blog entry that attempts to write out some principles related to GUI design. Check it out and let me know what you think.

How to improve the User Experience of your GUI application with some simple principles.

Answer 13

1. Get your users involved early. There is no better alternative to finding out if your interface is confusing to use.
2. Ask your fellow programmers what they think. Quite often you will simply overlook, or not think of an elegant and easy way to lay out an interface and a second pair of eyes will help you, just like it does if you're having problems with code.
3. Look at previous examples. Chances are you are not developing something entirely new, so check out other examples of what you are doing to see how other people made an interface. That is not to say that whatever is currently made is the best solution, but it will give you ideas
4. Read "Dont make me think" as others have stated
5. If you are writing a web app, try referring to already well establised design patterns, such as: http://developer.yahoo.com/ypatterns/

On a side note, I really dont agree with the notion that programmers cant write usable UI's. This might be a problem to some, but all programmers use interfaces every day, to say we wont pick something up is rediculous. Also, many CS courses now offer modules in usability these days which help.

Answer 14

Functiong Form is a good "programmer's UI" blog. It takes a logical approach to UI design, using numbers and not just the eye.

On the other hand don't beat yourself senseless trying to be a great UI designer. You are a programmer and you would not expect your UI designer to be a great programmer. I'd recommend getting into daily conversations with a UI designer. Learn by osmosis.