8 Things Programmers Should Know About UI Design

In an ideal world, each big subject from the software development process would be handed to a specialized professional: UI designers, programmers, architects, database administrators etc. Unfortunately, this is not the case most of times. There a plenty of cases out there where projects suffer from lack of proper expertise and well trained people.

That’s not to say we should know everything, nor that we should refuse doing work we are not sufficiently prepared for. From freelancers to big companies, we are sometime facing the need of wearing someone else’s hat. In those cases we have no other option but to simply get ourselves wet and just do it.

While the Internet is big place, stuffed with lots of information and answers, it doesn’t hurt ones knowledge base to play, from time to time, with subjects collateral to your main professional field. Besides enriching your skills, it also gets you a little bit more prepared when forced to actually use that knowledge.

And while we should always respect our more experienced colleagues and be aware of our limits, I personally find no shame in being an amateur in a particular subject.

amateur: “one who has a taste for (something),” from Fr. amateur ” lover of,” from O.Fr., from L. amatorem (nom. amator) “lover,” from amatus, pp. of amare “to love”. Meaning “dabbler” (as opposed to professional) is from 1786.

These being said, I’d like to summarize in the following some of my findings regarding UI design, listing the big items that a developer should at least be aware of when programming user interfaces.

1.  Content Layout

This is of course very important. A nice, aesthetic and well balanced content layout will assure that users will easily spot what they are looking for. A technique which was well known and used in print media for a very long time, and has got a lot of attention in the past few years is the so called grid based design. Basically, it means that you will organize the content of each screen such that it will fit nicely in a grid of equally sized vertical columns.

• Designing With Grid-Based Approach
• 960 Grid System

2. Typography

Readability is another key factor in the way users interact with your software. Understanding basic principles of typography such as font types, sizes and families will help you improve certain aspects of the user work flow. And sometimes very sensitive aspects, such as check-out or sign-in process.

• Typography is the backbone of good web design
• On Web Typography
• I Love Typography

3. Colors

While written words send a clear and explicit message, non-verbal communication can also be used successfully to help users fulfill their tasks or enjoy using the software. From establishing a certain mood to sending specific messages (warning or error messages for instance), colors are an important factor in achieving the desired result.

• Color Theory for Digital Displays: A Quick Reference (Part I and Part II)
• Techniques & Tools for Using Color In Computer Interface Design

4. Technical writing

Every bit of text used in your software user interface it’s you talking to the users. Sometimes users can guess things based on their previous experience with other software applications but, more important, the rest of the time they don’t. A self conservation instinct makes us ignore what we don’t understand. But when confusion or misunderstanding prevents us from achieving a goal or finishing a task, that will lead to pain and frustration. I have personally seen successful software applications with both very terse as well very long and explicit texts. But they both had very good reasons to do so. Decide for yourself but be very cautious on every piece of text you put in the UI. Make sure it gets read as intended on the other side of the screen.

• Technical writing and Copywriting
• Copywriting is Interface Design

5. Error handling

This may be considered a sub-item of the previous point. Nevertheless, it is so important that it can be very well taken by itself. Error messages are extremely important. One can not stress enough how much time is actually spent on a feature after that feature has been completed. From properly documenting it for the user and all the way up/down to the customer support department, a mis-implemented feature will cause lots of problems and will cost lots of money. Make sure you do everything you can to anticipate anything that could go wrong (because it will go wrong eventually) and try to take control when something bad happens.

• 10 Tips on Writing Hero-worthy Error Messages
• Error Message Guidelines

6. Forms

I guess that there are very few software applications that don’t require, at least once, some sort of input from the users. In the end, that’s why we call them user interfaces, because they represent the mean by which the computer exchanges information with a human being. This means that data flows in both ways, from the computer to the user and the other way around. Forms grew up to be a quite complex subject, too. From simple login or sign-up forms, up to very complicated forms like flight bookings or even more complex ones, UX professionals have tried to come up with the simplest and most efficient ways to improve forms design and usability.
There are several aspects that should be taken into account when designing and implementing a form, such as: label/controls positioning, input validation, double-submission prevention, invalid data submission prevention, error and warning messages, default values, hints and help messages etc.

• Web Application Form Design
• Web App Form Design a talk by Ryan Singer, designer at 37Signals
• Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points

7. Keep it light and simple

As tempting as it may be to stuff everything into the main screen or on the home page, up high above the fold, well… as dangerous that is. Cluttered and bloated interfaces are as ugly and hard to use as the cluttered and bloated code that we all have to debug from time to time.
Users will have a hard time making their way though dozens of UI elements that each will ask its own right of being clicked or accessed. As a matter of fact, most of the time users will only access a very small percentage of the features initially thought to be needed. Learn what are those features and differentiate them.

And even if there are plenty of things that you need to show your users or to ask from them, you don’t need to do that in one step, do you? Take it step by step and lead users to the end of each task gracefully and gently. They will thank you for that or, at least, you will save them time and frustration.

• Progressive Disclosure

8. Understand your users

This may also be translated as: think like an user, use the application yourself daily, understand the problem your software is solving etc.
However you may put it, it’s challenging and a quite difficult thing to do. I have tried to address this aspect in a previous post. Usually there are business analysts or product managers that are supposed to do this job for the developers. In an ideal world, a nicely crafted set of requirements documents would be handed to developers and a beautiful software will result, perfectly matching client’s vision and needs. As you may very well know, this doesn’t happen. At least not always.

It’s then up to all of those involved in the software development process to do their best in making sure the delivered software will prove to be useful and will really solve people problems.

What are your thoughts?

I am not an UI designer, nor or UX professional. So what I have wrote above may very well be incomplete or wrong. I’d love to hear your opinion, thoughts or whatever you may find useful to be mentioned.

Thanks for reading this! 🙂