UI Design

User Interface design is one of the most important aspects of web design/development, as the UI is what the user sees. While this article mostly pertains to Web UI, some aspects may apply to software UI as well. Some basic rules for UI design:

1) Make it usable. This comes above all. The user must be able to use the UI without any help. If your UI is gorgeous and the user can’t use it, then the UI fails. When it comes to UI, put function over form. It doesn’t have to be pretty, as long as it gets the job done.

2) Make it cross-browser compatible. People will hate you if your UI only works in one particular browser. One obvious offender of this rule is MySpace (there’s so much wrong with that site, but that’s for another article). You can’t use the profile editor or the advanced features blog unless you’re using IE 6. Bad. You as a UI designer have to realise that people have different browser/OS preferences, and you have to work towards satisfying everyone.

3) Make it legible. Do not put very light gray fonts on a white/gray background, and don’t use red fonts on a dark background. The basic rule of thumb here is to not make anybody’s eyes bleed. If your retinas are immune to horrible colours, ask a few normally-sighted people to test/review your UI. Fonts should contrast against the background, and they should be simple fonts. No script fonts or anything like that.

4) Make it light. Unless you’re going for an “emo” look, make your UI light-colored. Notice that most programs and sites out there have light-colored UI’s, and that’s because they work well.

5) Use neutral colors. Don’t use super-vibrant colours for everything. A splotch or two of colour may be needed to highlight certain parts, but nobody’s going to want to use a UI that’s a bright tangerine colour. The colours (and graphics) should not be distracting. They should enhance the content, not distract from it. It’s best to stay away from super-bright colours in a UI if you don’t know whether to use them or not.

6) Don’t use fancy new-age coding/techniques in the UI. The UI should work in any browser on any system. Use proven techniques and code until the new-age techniques become ubiquitous. An example is CSS3. You shouldn’t rely on it. Rounded corners in CSS3 are okay to use, but don’t use obscure CSS3 and expect it to work everywhere.

7) User feedback is key. This means two things. The first is that you have to make the UI feel less static. Buttons and links should change color or something like that to show the user that they are in fact buttons and links. The second part of it is literal user feedback. On new or reworked UI’s, you should include ways for the user to give their opinion/thoughts on the UI. Usually it’s a contact form.

8) Links should be links. While yes, you can style links however you want, it’s best to stay with a tried-and-true underlined links. Underlined links instantly tell the user that they are in fact, links. The link color should stand out, and should remain legible even when rolled over. Also, don’t forget to style visited links!

9) Don’t rely on Javascript too much. While a completely Ajax-ed UI is nice to look at, not all browsers have Javascript, and not all people turn on Javascript in their browser. While you may be tempted to use the smooth little “slide” effects, keep them to a minimum. When used in excess, effects can be distracting, and sometimes annoying.

I’ll add on more stuff as needed. If you have any suggestions, contact me.

Posted in Article