10 resources for a better interface design

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

http://designingwebinterfaces.com/

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.

Designing Interfaces

http://designinginterfaces.com/

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

http://www.theinspiracy.com/

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

http://37signals.com/papers/introtopatterns/

37signals walks you through a detailed process of designing information using some interesting techniques and design patterns.

Visible Narratives: Understanding Visual Organization

http://www.boxesandarrows.com/view/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

http://www.uxbooth.com/view/blog/interface-design/

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

http://www.ixda.org/resources/tim-wood-lo-fi-sketchbook-techniques-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

http://www.informationisbeautiful.net/category/information-design/

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

http://www.welie.com/patterns/index.php

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

http://ui-patterns.com/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.