background preloader

Main Page - Social Patterns

Main Page - 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.

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

Reader - Eirik shared items for Web Developers - Développeurs Facebook All Docs Web SDKs Docs/Web SDKs/JavaScript SDK/ On This Page Facebook SDK for JavaScript A rich set of client-side functionality for adding Social Plugins, Facebook Login and Graph API calls. Guides Frameworks Termination of SHA-1 Support Design Pattern Library We, Yahoo, are part of the Yahoo family of brands The sites and apps that we own and operate, including Yahoo and AOL, and our digital advertising service, Yahoo Advertising.Yahoo family of brands. When you use our sites and apps, we use Cookies Cookies (including similar technologies such as web storage) allow the operators of websites and apps to store and read information from your device. provide our sites and apps to you authenticate users, apply security measures, and prevent spam and abuse, and measure your use of our sites and apps If you click 'Accept all', we and our partners, including 237 who are part of the IAB Transparency & Consent Framework, will also store and/or access information on a device (in other words, use cookies) and use precise geolocation data and other personal data such as IP address and browsing and search data, for personalised advertising and content, advertising and content measurement, and audience research and services development.

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.

The Logos of Web 2.0 The Logos of Web 2.0 There is no official standard for what makes something “Web 2.0”, but there certainly are a few tell-tale signs. These new sites usually feature modern web technologies like Ajax and often have something to do with building online communities. But even more characteristic among these brands is their appearance. You can see some of these striking commonalities in Ludwig Gatzke’s compilation of nearly 400 Web 2.0 logos. The Softies A clear trend in new identities is the use of soft, rounded sans serifs dominated by VAG Rounded (AKA Rundschrift), but also including Helvetica Rounded, Arial Rounded, Bryant, and FF Cocon. Oct. 2008 Update — New and underused fonts in this category: Foco, Tondo, FF Netto, Estilo Text, and FF Unit Rounded. The Futurists Some sites are reflecting the technological breakthroughs of Web 2.0 with a look that says “tomorrow’s techno”. The Classics Oct. 2008 Update — Using uncommon alternatives to classic typefaces can ensure a logo is unique.

Real-Time Analytics For Social Plugins Over the past year, social plugins have become an important and growing source of traffic for millions of websites. Today we're releasing a new version of Insights for Websites to give you better analytics on how people interact with your content and to help you optimize your website in real-time. Like button analytics For the first time, you can now access real-time analytics to optimize Like buttons across both your site and on Facebook. We use anonymized data to show you the number of times people saw Like buttons, clicked Like buttons, saw Like stories on Facebook, and clicked Like stories to visit your website. You can use this real-time data to test the impact of button placement on Like Button CTR or identify the Open Graph image that generates the highest Like Story CTR. Comments box analytics Last week we launched an updated Comments Box that improves the quality of conversations and drives traffic to the websites that use it.

UI Design Patterns and Library Builder 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?