The most important issues involved in the design of a web site or a web application are how the information is displayed to the user and how the user can interact with this information, whether it is to obtain more information about a particular topic, dismiss irrelevant information or process the information that he currently has. The rest is purely ornamental. In this post we will review a series of resources to achieve a better interface design.
Designing Web Interfaces
Another book from O’Reilly, this time focused on web interfaces. What is really interesting from this site is its blog, featuring some quality content and pointing to other interesting resources related to user experience, information design and interface design.
This site features an extensive number of passages from the homonimous book from O’Reilly. The excerpts cover topics such as content organization using common interface elements, page layouts and complex data visualization, among others.
The 400 project
These rules are primarily related to games, but after you read a couple of them you will soon realize that you can apply most of these simple but thoughtful rules to user experience. For instance, the rule “Don’t penalize the Player” can be quickly translated to a web application environment where the user interacts in an improper way with the application or a user reaching a 404 error page:
It’s often tempting to design a penalty for the player to emphasize failure at a task or to discourage the player from attempting to do something in the game you don’t like. But “failing” and “being discouraged” just aren’t fun. There’s always a way to turn it around and reward the player for success, or encourage them to do what you want.
We can quickly relate this concept to 404 pages: user must not receive a huge warning in red “What have you done? you #$%!&!”. Instead, offer your offending visitor a soft message stating that there is nothing there but that he can choose to read some other related content (via keywords or url) or encourage him to try a new search with some suggestions.
An Introduction to Using Patterns in Web Design
37signals walks you through a detailed process of designing information using some interesting techniques and design patterns.
Visible Narratives: Understanding Visual Organization
The dicotomy between visual design and interaction design is approached in this article discussing perception focused on visual hierarchy.
Interaction Design on UX Booth
UX Booth is a magazine focused on User Experience & Usability. Its category Interaction Design is particularly interesting for our subject, but keep an eye on the other categories, such as Information Architecture or Usability.
Lo-Fi Sketchbook Techniques for Interaction Designers
In this video, Tim Wood, Senior Creative Director at EffectiveUI, reviews practical drawing and sketchbook techniques useful to the interaction design process.
Information Is Beautiful
IiB is run by David McCandless, a London-based information designer, and contains a lot of beautiful infographics along with some cool articles about data visualization, infographics and information design.
Welie – Design Patterns
This site serves mostly as a library of design patterns, but it also contains some well thought… Thoughts, as Martijn van Welie called his blog. You will find most popular design patterns on this library to give that issue a solution or just to see some other approach to a particular issue. Patterns are grouped in User Needs, patterns that meet a direct need of the user (mostly interface elements), Application Needs, patterns to display information or organize something to communicate it, and some patterns regarding the Context of the design, such as a web application, an artist site, a tutorial pattern and others.
UI Design Patterns
Another design patterns library, with more patterns and categories such as Getting input, Dealing with data, Navigation, Social and others. UI patterns also maintains a blog, focused on usability, information design and interaction design.
Make sure you also check the post 10 Free UI Kits for user interface designers for some great UI kits to speed up your work.
9 thoughts on “10 resources for a better interface design”
I love what you say on your post “The 400 project” Often as developers we forget for whom we are developing our websites.
I like your website. It is very creative.
Thanks Steve. Regarding failure, the rule 68 on “The 400 project” says:
“Make Failures Spectacular, Varied, and Cool.” 😀
Thanks steve for the post. i am interested in interface designing and this post will surely influence me.
thanks for sharing the links, it’s so inspirational..
In addition to the online resources, you could try buying one of the books referenced on the post.
thanks it can help me more when i would like to design website it make me headache.
have already been following your blog for 3 days. really like your posts. btw i will be doing research relating to this area. do you happen to know any great sites or online forums where I might get more info? thanks in advance.
Information about interface design is rather scarce. Most of the links about interface prototyping I’ve quoted here have more links within the article itself so you might want to check them all. I’ve started a site collecting most common design patterns at graphicsnippets.com.
I love your website. Love the design and the smart posts too. 🙂