Smashing Magazine has this awesome article on UI Designs: 10 Useful Techniques To Improve Your User Interface Designs. This has to be one of the most informative and well thought out web design article I have ever read. Although I am not a web designer, these are the kind of things I notice when I am building out a website, or reviewing a web designer’s work. Here is a summary of my thoughts and utility of each of their tips.
1) Padded block links – It is absolutely sinful to not use a large padding areas for bigger links on your page. In fact, I am a bit embarrassed that my own blog design violates this concept. However, I ‘kind of’ made up for it with neat hover over underline and color change effects. The point here is to make your links more accessible.
2) Typesetting buttons – I can’t tell you how many hours I have spend moving pixels around to achieve the “balanced” feel.
3) Using contrast to manage focus – Finding a web designer who understands this concept can be hard. It is especially important for blogs and news websites to use this tip, otherwise the page become illegible.
4) Using color to manage attention – I knew there was a reason why I am attracted to colorful websites. I wish this concept of color would work its way into more web applications. One place that uses color really well in their application is Shopify.com. Also, come to think of it, the new WordPress 2.7 dashboard kind of detract from this principle. Everything is so grey now…
5) White space indicates relationships – Sometime you can stare at a web design for hours and never figure out why it just doesn’t look right. This is most likely the reason.
6) Letter spacing – I am VERY careful when it comes to this stuff. Whenever I am handed a PSD design, I usually examine the text elements for any letter-spacing that the designer specified. I wish more designers would just make an itimized list of these things so that these unique effects don’t get lost in translation.
7) Auto-focus on input – I am no sure how useful this tip is. I am more into giving users control and not hijacking their browsers with scripts. However, I can see this being a great tool if your form is the main of focus of the page.
8) Custom input focus – You learn something new everyday. This is definitely something I have never thought about. I will try it in my next project.
9) Hover controls – While this is a great tip, it is also very dangerous. One of the most common flaw of websites are hover controls that a) disappear too quickly when you hover-out 2) displaces other content when they become visible 3) important navigational controls that should be visible at all times.
10) Verbs in labels – One of the best advice yet. The other day I changed a button that said “save” to “change” because I knew the whole point of the form was to make a change.
These are all great tips. I hope you take the time to read the Smashing Magazine article.