Links on Interaction Design

A huge list of Style Guides and UI Guidelines

If you are a graphic designer or an interaction designer and have ever been tasked with creating a style guide or UI guidelines document (both are different and I’ve had the pleasure to work on both of them creating templates and the actual documents for brands and products), this list should help you out as a consolidated list of references. This list is going to be constantly updated (and will ultimately be a monster list, it’s quite modest for now) of publicly accessible style guides and UI guideline documents on the web. If you find any links not working or would like to suggest one that is not on the list, feel free to comment and let me know.

  1. 3M
  2. ABB Brand Identity
  3. ACDSee Brand Style Guide
  4. Air Products Identity Standards
  5. Ameritech Graphical User Interface Standards and Design Guidelines (This one is from the Internet Archive)
  6. AMAIA Residence Brand Manual (PDF, 816 kb)
  7. Android User Interface Guidelines
  8. Apple Human Interface Guidelines
  9. Barbican Brand Guidelines for Print / Web / and Plasmas
  10. BBC Future Media Standards & Guidelines
  11. BBC Global Experience Language (GEL)
  12. Belfast Zoo Brand guidelines
  13. Blackberry and RIM wireless handheld UI Developers Guide (PDF, 1.3 mb)
  14. BlackBerry Branding Guidelines (PDF, 300 kb)
  15. Brick brand guidelines
  16. Cargill Identity Style Guide
  17. Cambridge University Brand Manual
  18. Cunard Brand Guidelines
  19. Easy Group Brand Manual (PDF, 2 mb)
  20. Eclipse User Interface Guidelines
  21. Federal Identity Program (Canada)
  22. GOOD Technology Brand Identity Guide
  23. Gnome Human Interface Guidelines
  24. Heineken Brand Manual
  25. iPhone Human Interface Guidelines
  26. Java Look and Feel Design Guidelines
  27. KDE User Interface Guidelines
  28. Kew’s Brand Guidelines (PDF, 5 mb)
  29. Microsoft Inductive User Interface Guidelines
  30. Microsoft Surface User Experience Guidelines
  31. MITRE- Guidelines for designing user interface software
  32. NASA’s webstyle guide
  33. Novozymes’ brand guide
  34. The New School Visual Identity Manual (PDF, 6.5 mb)
  35. The New School Web Style Guide
  36. Nokia Design and User Experience Library
  37. Oracle Technology Network Guidelines
  38. Palm User Interface & Human Interface Guidelines
  39. RSA brand standards
  40. SAP Interaction Design Guide for Internet Application Components
  41. SAP Design Guild
  42. SAP User Interface guidelines
  43. Silicon Graphics Indigo Magic User Interface Guidelines
  44. Skype Brand Identity Guidelines
  45. Spelman College Visual Identity Guidelines (PDF, 1.3 mb)
  46. Reuters Brand Center
  47. Taligent Human Interface Guidelines
  48. WebEx brand style guide
  49. Web Style Guide 2nd edition
  50. Windows User Experience
  51. Windows User Experience Guidelines
  52. Windows User Experience Interaction Guidelines
  53. Windows XP Visual Guidelines (There’s a download section to the right to download WindowsXP DesignGuidelines)
  54. Yale Web Style Guide
  55. Yale’s Visual Identity
  56. Yahoo! Style guide

Visualizing Fitts’ Law

Published in 1954, Fitts’s Law is an effective method of modeling the relationship of a very specific, yet common situation in interface design. That situation involves a human-powered appendage at rest (whether it’s physical like your finger or virtual like a mouse cursor) and a target area that’s located somewhere else.

Visualizing Fitts’s Law

Ultimate guide to table UI patterns

For people who need tables in everyday work they are hated element that makes them scream. And it shouldn’t be this way. Here are some of the patterns that can help in creating less evil tables.

Ultimate guide to table UI patterns

Three more table UI patterns

A Wireframe kit for Google Drawings

Google Drawings is the latest addition to Google Docs. You can use it for wireframing with this stencil kit.

A Wireframe kit for Google Drawings

Social Software: The Other ‘Design for Social Impact’

Human-centered approaches to industrial and interaction design have long focused on studying human behavior to create informed and appropriate designs. A social interaction designer must consider not only people, environment, and existing tools, but also the unseen elements of the system such as social relationships, power dynamics, and cultural rules.

Social Software: The Other ‘Design for Social Impact’

In Defense of Lorem Ipsum

If you’re running a project where you mock up designs, get them approved, code them up, build a CMS, hook it all together, and then everyone looks around and says “Who’s got the content? Wait, this content doesn’t match the designs and it won’t fit in the CMS!” then you have a problem. A big problem.

Lorem Ipsum is not the cause of your problem. It’s a symptom. The real problem is an overall process that treats design and content as separate tracks without appropriate communication, collaboration, and checkpoints along the way.

In Defense of Lorem Ipsum

A Collection of Printable Sketch Templates and Sketch Books for Wireframing

This post provides a list of more than 20 resources that can be used in sketching phase of application development categorized as follows:

  • Printable sketch templates for websites
  • Printable sketch templates for mobile applications
  • Sketch Books
  • Make you own sketch templates

A Collection of Printable Sketch Templates and Sketch Books for Wireframing

Case Study: Freescale Netbook Design at SCAD

Freescale conducted extensive research with existing non-Windows netbooks and learned that both the user interface and form factor issues co-mingle in these devices. They approached the Savannah College of Art & Design (SCAD) industrial design department and asked them to work on concepts that address issues for specific markets: tweens, teens and soccer moms.

Two sponsored courses that participated in this project. What follows is the class’ process for developing the initial framework and vision for a new graphical user interface to run on top of an existing operating system (like Linux) that can take advantage of an ARM CPU chipset on something akin to a netbook or a smartbook.

Case Study: Freescale Netbook Design at SCAD

Expert Ratings of Usability Maxims

Published in the ‘Ergonomics in Design’ journal in 1997. The author collected and created this list of 34 thumb rules (given below in order of priority) that were found particularly useful during the design process by colleagues working in the human-computer interface (HCI) design field.

  1. Know thy user, and YOU are not thy user.
  2. Things that look the same should act the same.
  3. Everyone makes mistakes, so every mistake should be fixable.
  4. The information for the decision needs to be there when the decision is needed.
  5. Error messages should actually mean something to the user, and tell the user how to fix the problem.
  6. Every action should have a reaction.
  7. Don’t overload the user’s buffers.
  8. Consistency, consistency, consistency.
  9. Minimize the need for a mighty memory.
  10. Keep it simple.
  11. The more you do something, the easier it should be to do.
  12. The user should always know what is happening.
  13. The user should control the system. The system shouldn’t control the user. The user is the boss, and the system should show it.
  14. The idea is to empower the user, not speed up the system.
  15. Eliminate unnecessary decisions, and illuminate the rest.
  16. If I made an error, let me know about it before I get into REAL trouble.
  17. The best journey is the one with the fewest steps. Shorten the distance between the user and their goal.
  18. The user should be able to do what the user wants to do.
  19. Things that look different should act different.
  20. You should always know how to find out what to do next.
  21. Don’t let people accidentally shoot themselves.
  22. Even experts are novices at some point. Provide help.
  23. Design for regular people and the real world.
  24. Keep it neat. Keep it organized.
  25. Provide a way to bail out and start over.
  26. The fault is not in thyself, but in thy system.
  27. If it is not needed, it’s not needed.
  28. Color is information.
  29. Everything in its place, and a place for everything.
  30. The user should be in a good mood when done.
  31. If I made an error, at least let me finish my thought before I have to fix it.
  32. Cute is not a good adjective for systems.
  33. Let people shape the system to themselves, and paint it with their own personality.
  34. To know the system is to love it.

Expert Ratings of Usability Maxims (article access requires purchase)

Wireframes Magazine

Wireframes Magazine is a collection of UI design techniques and samples by interaction designers and information architects across the globe.

Wireframes Magazine