background preloader

UI Design Pattern Library

UI Design Pattern Library

Patterns in Interaction Design 509 Bandwidth Limit Exceeded Social Patterns Interaction Design Pattern Library - Suggest a pattern Have you seen new examples of patterns out there that have not been described on this site? Send me a link to an example and I'll add it to my to-do list. Suggest a pattern Latest comments Form (Lucas Gwadana) Sometimes the ERROR handling is not explicit enough because when a user makes an... Map Navigator (Marcus) For print pages etc static maps are still relevant. Accordion (dellmre) Ajax accordion samples with source code Autocomplete (Zorg) I believe the name of this pattern to be misleading. Slideshow (Joshua) Slideshows on Homepages can be very beneficial.

So You Wanna Build a Library, Eh? The following article is an abridged version of Chapter 7 of Nathan Curtis’s 2009 book, Modular Web Design published by New Riders. The book’s first half addresses how to modularly break down your design, build it back up, and communicate in new and interesting ways. With those design techniques in hand, the book then drills into how to organize and build a library, teach it to others, and establish a process for maintaining it for an organization. Design patterns and modular components are effective techniques for designing and building long-lasting, consistent experiences. Many teams have realized incredible efficiencies, savings, and better design through design libraries and related standards. Therefore, precede any kind of library build out with a period of discernment. 1. What is your primary rationale for building a library? Beyond efficiency and consistency, other benefits that drive teams include: Portability: Designers come and go. 2. A component is a chunk of a page design.

The Best Tools for Visualization - ReadWriteWeb Visualization is a technique to graphically represent sets of data. When data is large or abstract, visualization can help make the data easier to read or understand. There are visualization tools for search, music, networks, online communities, and almost anything else you can think of. Whether you want a desktop application or a web-based tool, there are many specific tools are available on the web that let you visualize all kinds of data. Here are some of the best: Visualize Social Networks Last.Forward: Thanks to's new widget gallery, you can now explore a wide selection of extras to extend your experience. Last Forward Friends Sociomap: Friends Sociomap is another tools that generates a map of the music compatibility between you and your friends. Fidg't: Fidg't is a desktop application that gives you a way to view your networks tagging habits. Fidg't The Digg Tools: One more: Digg Radar. YouTube: Visualize Music Musicovery music visual tools: Amazon

What Makes Them Click » Blog Archive » 100 Things You Should Know About People: #49 — The Brain Looks For Simple Patterns - Applying Psychology to Understand How People Think, Work, and Relate What do you see when you look at the x’s below? xx xx xx xx Chances are you will say you see four sets of 2 x’s each. People are great at recognizing patterns – Recognizing patterns helps you make quick sense of all the sensory input that comes to you every second. Individual cells respond to certain shapes – In 1959, two researchers, Hubel and Wiesel showed that there are individual cells in the visual cortex of your brain that respond only to horizontal lines, other cells that respond only to vertical lines, other cells that respond to edges, and cells that respond only to certain angles. The Memory Bank Theory – Even with Hubel and Wiesel’s work in 1959, for many years the prevailing theory of pattern recognition was that you have a memory bank that stores millions of objects, and when you see an object you compare it with all the items in your memory bank until you find the one that matches. Take-Aways: What do you think? And for those of you who like to read the research:

The Disciplines of User Experience UPDATE: I updated this diagram in 2009 for the second edition of Designing for Interaction that addresses some of the shortcomings I note below. The diagram now looks like this (click for larger image): Like almost nothing I’ve done, a model that I put in my first book Designing for Interaction showing the overlapping disciplines of user experience/experience design has been referenced repeatedly in various places. The problem is I was never very happy with the diagram. For one thing, it’s missing architecture in there, which is becoming increasing important. So I redrew it: Click for a larger image or download the pdf. It’s still not perfect: it’s missing Sound Design and Ergonomics/Human Factors, and the way the circles had to overlap downplays Visual Design. This diagram also begs the question: what is user experience design by itself, those areas that aren’t filled up with other bubbles?

43 Essential Controls for Web Applications Designing a web application? Familiarize yourself with Rich Internet Application technologies and the best UI controls for creating your application. Rich Internet Application technology has empowered us to create really amazing user experiences. The best RIAs on the web today rely on a discreet set of UI controls to provide a lively and timely experience. If you are moving from website design to web application design, the best information you can have at your disposal is an understanding of these essential controls. Most of these libraries, toolkits, and/or frameworks have an online gallery of controls (also called components, widgets, UI controls) you should explore. Many products are siloed by the RIA framework they are using, and designers create novel controls when the framework doesn’t have what they need.

30 concepts-clés de l'utilisabilité Dans un article intitulé "30 Usability Issues To Be Aware Of", Smashing Magazine recense 30 concepts et définitions que toute personne s'intéressant à l'ergonomie et à l'utilisabilité devrait connaître. Ce billet en est une adaptation en français : Le principe des 7±2 éléments Le cerveau humain étant limité dans sa capacité à traiter l'information, celui-ci aborde la complexité en traitant l'information par blocs. La règle des 2 secondes En vertu de ce principe, un utilisateur ne devrait pas avoir à attendre plus de 2 secondes certaines réponses du système, comme le passage d'une application à une autre, ou le lancement d'un programme. La règle des 3 clics Selon cette régle, les utilisateurs tendent à abandonner un site lorsqu'ils ne sont pas capables d'accéder à l'information ou au service en l'espace de 3 clics. Le chiffre de 3 clics n'est cependant pas critique : le plus important est que l'utilisateur sache où il en est, et qu'il n'ait pas l'impression de perdre le contrôle.

Get Wireframing: The All-In-One Guide Wireframing is a great tool to incorporate into your projects as it allows for rapid prototyping and helps to pinpoint any potential problems. I personally find it invaluable on projects to have a visual representation of content, hierarchy and layout. Overall it’s an excellent step to incorporate into your project before the design process begins for both you and your clients. I am continually intrigued about how other firms and individuals incorporate the wireframing stage into their process. I know i’m not the only one, so this list aims to group together some of the best techniques, tools and resources to help you create effective wireframes. Techniques Building a Wireframe in Illustrator – From AiBurn – a step by step tutorial. Tools Omnigraffle – Create diagrams, process charts, quick page layouts and website mockups Visio – Visualize, explore, and communicate complex information. Wireframe Examples Wireframing Articles of Interest Paper Prototyping Useful Wireframing Resources

Designing Social Interfaces User Interface Design Pattern Library