User Interface Design for Programmers

Joel Spolsky

Mentioned 10

Most programmers' fear of user interface (UI) programming comes from their fear of doing UI design. They think that UI design is like graphic design—the mysterious process by which creative, latte-drinking, all-black-wearing people produce cool-looking, artistic pieces. Most programmers see themselves as analytic, logical thinkers instead—strong at reasoning, weak on artistic judgment, and incapable of doing UI design. In this brilliantly readable book, author Joel Spolsky proposes simple, logical rules that can be applied without any artistic talent to improve any user interface, from traditional GUI applications to websites to consumer electronics. Spolsky's primary axiom, the importance of bringing the program model in line with the user model, is both rational and simple. In a fun and entertaining way, Spolky makes user interface design easy for programmers to grasp. After reading User Interface Design for Programmers, you'll know how to design interfaces with the user in mind. You'll learn the important principles that underlie all good UI design, and you'll learn how to perform usability testing that works.

More on Amazon.com

Mentioned in questions and answers.

I am making the distinction between User Interaction Experience and pure User Interface (UI) design here, even though there is often a correspondence. You can have great user interaction even with a ‘boring’ grey interface, (note that a boring interface is not a requirement!).

My bookshelf contains the following:

What other books or resources would you add to this list?

A recent article on Ars Technica discusses a recent study performed by the Psychology Department of North Carolina State University, that showed users have a tendency to do whatever it takes to get rid of a dialog box to get back to their task at hand. Most of them would click OK or yes, minimize the dialog, or close the dialog, regardless of the message being displayed. Some of the dialog boxes displayed were real, and some of them were fake (like those popups displayed by webpages posing as an antivirus warning). The response times would indicate that those users aren't really reading those dialog boxes.

So, knowing this, how would this effect your design, and what would you try to do about it (if anything)?

The Humane Interface, by Jef Raskin is worth reading. A dialog box is the last resort, and a sign of poor design. Most are unnecessary, and as you discovered are all ignored by users.

Why is there a dialog box? Solve that problem - don't ask users to confirm an operation, instead make it easy to undo the operation. Don't popup a dialog box announcing an error - do whatever recovery you're going to do anyway (or whatever is possible). Definitely don't show dialog boxes which have only one outcome ('OK' only boxes are the devil), present the information within the app unobtrusively.

Lots of good advice above. I just want to add to the book recommendations - Joel Splosky's "User Interface Design for Programmers" book is worth reading:

http://www.amazon.com/User-Interface-Design-Programmers-Spolsky/dp/1893115941/ref=pd_bbs_sr_4?ie=UTF8&s=books&qid=1222233643&sr=8-4

A while back I read (before I lost it) a great book called GUI Bloopers which was full of examples of bad GUI design but also full of useful tidbits like Don't call something a Dialog one minute and a Popup the next.

What top tips would you give for designing/documenting a GUI? It would be particularly useful to hear about widgets you designed to cram readable information into as little screen real-estate as possible.

I'm going to roll this off with one of my own: avoid trees (e.g. Swing's JTree) unless you really can't avoid it, or have a unbounded hierarchy of stuff. I have found that users don't find them intuitive and they are hard to navigate and filter.

PS. I think this question differs from this one as I'm asking for generalist tips

User Interface Design by Joel Spolsky. You can read it in one afternoon.

I don't think that it's possible, in this little space, to give tips which would make it possible to design good GUIs (the question is as big as "how can I write good programs?"). But I can give pointers to some helpful books:

Where do you turn when creating user interface? I am a programmer, not a designer. Any ideas? My "UI" is usually terrible, as I just want to make it work, what do you do?

If you're writing desktop applications, simply following the UI guidelines for your chosen platform will take you a long way.

If it's on the web then you're broadly screwed, you just need a designer.

That said, don't get fooled into thinking that UI design is all about the the visual appearance. Having the right interaction model is probably more important. A graphic designer isn't going to help you with that. If you don't have access to a UI specialist then try starting with User Interface Design for Programmers.

Google User Experience and The laws of simplicity are very good starts.

I was always bad at design, but after reading a lot about usability, simplicity, design and starting to analyse google's design and other designs based on simplicity, my UIs started to suck less.

I usually do it all myself - just because my budget is quite limited.

However there are some books that might be worth reading:

And it's always a good thing to look what other sites do that you like :)

The best book I've ever read on Usability/Interaction Design, and one of the best books I've read period, is a book called About Face 3: The Essentials of Interaction Design by Alan Cooper.

It's a fantastic book because it talks about a lot of fundamental concepts behind interface design for any type of interface, not just on the web. Understanding these concepts will help you make better creative decisions, especially when designing something that hasn't been design yet (like a new product or type of social website), not just help you copy what's already been done.

What are some key UI design tips that every developer should know?

While there are a number of UI resources for developers (for example, Joel Spolsky's User Interface Design for Programmers), I'm interested in more of a bullet list that can be communicated in 1 to 2 pages.

I'm interested in more tactical, day-to-day UI tips, as opposed to overarching UI design goals that would be covered in a UI design meeting (presumably attended by at least one person with a good UI sense). A collection of these tips might cover about 80% of the cases that an everyday programmer would come across.

  • use a standard menubar (amateur GUI designers seem to like to chart their own course here for some reason). Make sure the first items are File, Edit and View, and the last one is Help
  • don't worry about color themes or skins; stick to a standard look that is consistent with your platform
  • use the default system font
  • use menu accelerators that are consistent with your platform
  • stick to the tried and true layout with a menubar on top, a status bar on the bottom, and if required, a navigation pane on the left
  • never do a system-wide grab
  • If you have a choice, make all windows resizable.
  • use groups of radiobuttons for "choose exactly one"
  • use groups of checkbuttons for "choose zero or more"
  • constrain input if necessary (ie: simple ignore non-digits in a numeric input field) rather than waiting for a user to enter data, submit, then throw up a dialog saying "hey, letters aren't allowed!". If they aren't allowed, don't accept them in the first place.
  • be liberal in what you accept as input. For goodness sake, don't throw a fit for a SSN field if they leave out the hyphens, or put then in when you don't want them. The computer is smart, let it figure out that xxxxxxxxx and xxx xx xxxx and xxx-xx-xxxx are all valid.
  • always allow spaces in long fields such as serial numbers and whatnot. Data quality goes way up if a user is allowed to group numbers in sets of three or four. If your data model can't handle the spaces you can always remove them before saving the data.
  • Avoid pop-up dialogs like the plague. Never display one unless you absolutely must. If you decide you must, stop and rethink your design before continuing. There are times when they are necessary, but those times are considerably less frequent than you might imagine.
  • pay attention to keyboard traversal. Most toolkits make an attempt to get it right, but always double-check.

All of these rules can, of course, be broken. But only break it if you are breaking it for a justifiable reason.

Remember, the software is there to aid the user, it should be doing what they want, rather than making them do what it wants.

I'm going to make my monthly trip to the bookstore soon and I'm kind of interested in learning some user interface and/or design stuff - mostly web related, what are some good books I should look at? One that I've seen come up frequently in the past is Don't Make Me Think, which looks promising.

I'm aware of the fact that programmers often don't make great designers, and as such this is more of a potential hobby thing than a move to be a professional designer.

I'm also looking for any good web resources on this topic. I subscribed to Jakob Nielsen's Alertbox newsletter, for instance, although it seems to come only once a month or so.

Thanks!

Somewhat related questions:

http://stackoverflow.com/questions/75863/what-are-the-best-resources-for-designing-user-interfaces User Interface Design

This is not directly related to GUI design or programming, but The Psychology of Everyday Things is a good book to read.

It is a general look at how things are designed and how they fail. The concepts in this book, although not directly applicable to GUI's, do apply. In fact you could say they apply to all instances of user centered design.

http://www.amazon.com/Psychology-Everyday-Things-Donald-Norman/dp/0465067093

The design of everyday things ? An "old" classic, but useful if you plan anything that requires human interaction.

Although completely independent of web and programming, The Design of Everyday Things by Donald Norman taught me a lot!

For a less in-depth, more cook-book approach (if you don't want to think), try Robin Williams' The Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice.

Presonally I much prefer The Design of Everyday Things.

"Don't Make Me Think" is great. After sitting in on several usability studies I can safely say that several of his biggest points are the kinds of things drilled in your head over and over.

Joel Spolsky's book on user interfaces is also decent.

http://www.amazon.com/User-Interface-Design-Programmers-Spolsky/dp/1893115941

How would you, as a developer with little (or no) artistic inclination, design a GUI for an application? In particular, I'm thinking about desktop apps but anything that relates to Web apps is welcome as well. I find it extremely hard to design something that both I and potential users find pleasing. I can look up color schemes on the net, but how would I know where to place buttons/textboxes/etc.?

Update: To clarify, I don't mean what controls and such to use. Rather, are there any guidelines/hints to when I should buttons, combos, textboxes and so on? How long should they be and where would I place them on the form?

It's not clear if you're talking about how to create a good dialog window or how to create a coherent look and feel for a huge application.

A pretty good reference for how do design an effective and clear UI is User Interface Design for Programmers by ... wait for it ... Joel Spolsky.

I'm looking for websites that showcase screenshots of applications with exceptional UI design. I'm writing an application and am taking my time considering what the UI should look like. My audience is not business but family.

My previous UI-design experience (and comfort) is with Windows Forms so I would typically use standard list boxes, buttons, tabs, etc. Now I'm experimenting with WPF and was looking at more...attractive...interfaces (as long as it still meets the needs of the application and enhances - not detracts - from its purpose).

Any thoughts of galleries or specific examples of applications with great UI design?

EDIT: I'll also take individual application's that you feel make a great, intuitive design.

It's not a gallery, but Joel Spolsky wrote a great book on User Interface Design for Programmers.

I am interesting in creating a better User Experience (UX). There are a lot of books out there, what are some that would be useful to a software engineer?

I would also recommend The Humane Interface: New Directions for Designing Interactive Systems by Jef Raskin. Has some really inspiring ideas.

My favorites:

At some point in your career, you may enjoy this wonderful book that draws parallels across multiple fields of design. (For example, the "confirmation" technique occurs both in software design and nuclear launch control.)

I am putting together some mock-ups of my first real interface and I am left wondering: What are some basic tenets of good user interface design? I am looking for something like a bullet list summary and maybe some resources that might be useful for each tenet.

"Don't make me think!", the title and the book are extremely useful when designing a UI. Some of my favorite sections from it include:

  • Create a clear visual hierarchy.
  • Conventions are your friend.
  • Happy talk must die.
  • Instructions must die.
  • Four reasons why I love tabs.
  • The trouble with Rollovers.
  • Farmers vs. Cowmen.
  • The myth of the "Average" user.

Go and read Controlling Your Environment Makes You Happy and then read Don't Make Me Think! A Common Sense Approach to Web Usability.

Keep it simple, don't ignore convention and mimic sites/programs that work well.

Joel Spolsky (who is co-creator of SO :) ) has a book called "User Interface Design for Programmers" as well as a series of articles on his website (Joel On Software) related to that book.

Another great resource to start with is Jacob Nielsen's usablity website.