background preloader

Patterns : Designing Interfaces

Patterns : Designing Interfaces
Selected patterns from the book are featured here on the website, in their entirety. Here are all of the patterns in the second edition of the book, sorted by chapter. Most of these patterns are not online yet, but many of them will become available over time as featured patterns. What users do Patterns of user behavior Safe Exploration Instant Gratification Satisficing Changes in Midstream Deferred Choices Incremental Construction Habituation Microbreaks NEW Spatial Memory Prospective Memory Streamlined Repetition Keyboard Only Other People’s Advice Personal Recommendations NEW Getting around Navigation, signposts, and wayfinding Clear Entry Points Menu Page NEW Pyramid Modal Panel Deep-linked State NEW Escape Hatch Fat Menus NEW Sitemap Footer NEW Sign-in Tools NEW Sequence Map Breadcrumbs Annotated Scrollbar Animated Transition Organizing the page Lists of things Images, messages, search results, etc. Doing things Showing complex data

6 Steps to Persuasive Design HFI’s latest animated video, “6 Steps to Persuasive Design”, is their best yet. In this compelling 5½ minute animation, HFI’s CEO Dr Eric Schaffer neatly lays out the six major steps to creating an effective and persuasive website experience, one that engages visitors on an emotional level and makes them want to act. I think the biggest takeaways are: It’s a user-centered process. A critical early step is to interview a large number of customers to uncover what goes on inside their heads — their blocks and drivers, feelings and beliefs. In sum, it’s NOT just a question of “piling on” persuasion tactics. Rather, it’s a matter of strategically selecting the best tools for the project: emotional triggers that align with your theme, frame and meme. Truly an excellent video; a must-see for anyone interested in online persuasion.

组件 · Bootstrap 用于显示链接列表的可切换、有上下文的菜单。JavaScript 下拉菜单插件让它有交互性。 案例 将下拉菜单触发器和下拉菜单都包裹在.dropdown里,或者另一个声明了position: relative;的元素。 <div class="dropdown"><button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li></ul></div> 对齐选项 给下拉菜单.dropdown-menu加上.pull-right 使文字右对齐。 <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... 在任何下拉菜单中均可通过添加标题来标明一组动作。 禁用的菜单项 给下拉菜单中的<li>加上.disabled禁用链接。 用按钮组把一组按钮放在同一行里。 按钮组中的工具提示和弹出框需要特别的设置 基本案例 把一系列的.btn按钮放入.btn-group。 尺寸

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.

Smashing Mag | Design Archives Category: Design This category features articles on general design principles, Web design, typography, user interface design and related topics. It also presents design showcases and practical pieces on the business side of design. Curated by Alma Hoffmann. Popular tags in this category: Web Design Typography Inspiration Downloads Freebies An In-Depth Overview Of Living Style Guide Tools Following the market's demand for minimalistic and consistent UIs, and the growth in modular web development, we tend to pay more and more attention to documentation and the efficiency of designer–engineer workflow with each project we undertake. Living style guides help front-end developers transform front-end codebases into well-described pattern libraries with the minimum of effort. Read more... How Being In A Band Taught Me To Be A Better Web Designer “By playing in a band,” was my answer. Read more... Part Five Design Principles: Dominance, Focal Points And Hierarchy Read more... Design Last Read more...

Design patterns, de nouvelles librairies pour la conception d’interface Les sont des schémas de conception, c'est-à-dire des modèles d'interface répondant à des cas typiques d'interaction. Les design patterns permettent d'avancer rapidement lors de la conception en fournissant des gabarits qu'il suffit d'adapter et d'assembler pour construire l'interface. Notre dernière liste de librairies et sa mise à jour commençaient à dater un peu, voici une nouvelle mise à jour plus complète. Au menu de cet article : des librairies de patterns pour trouver des solutions ergonomiques ( ici ), des galeries de patterns pour s'inspirer ( ici ), et des librairies interactives pour se faire une idée ( ici ). Les librairies de patterns Les librairies ont l'avantage non seulement de proposer de nombreux patterns, mais surtout d'en expliquer l'usage. Les nouvelles librairies Des patterns actuels, avec une explication sur leur usage en contexte. Une librairie qui mérite de s'enrichir, car ses patterns sont tous actuels. Les librairies incontournables Le site est très riche. Note :

15 Free Ebooks about User Experience and Interface Design » paul olyslager I have collected 15 free ebooks about UX and interface design, including some best selling books which are definitely worth reading. Not only are these free ebooks pretty good reads but perhaps I could save a small rainforest as well. Please let me know if you have read other great free ebooks lately. Search User Interfaces by Marti A. Hearst (2009) If you want to design innovative search user interfaces, you need this book close at hand at all times. Web Style Guide by Patrick J. A style guide for the interface with real long-run value, showing us deep principles of design rather than simply fashion and technology. Designing Interfaces – Patterns for Effective Interaction Design by Jenifer Tidwell (2006) Anyone who’s serious about designing interfaces should have this book on their shelf for reference. Designing Mobile Interfaces by Steven Hoober and Eric Berkman (2011)

Meaningful Transitions // Home The Right Way to Ask Users for iOS Permissions How Cluster Approaches this Problem Over time, we’ve learned to ask our users for permission when, and only when, we absolutely need it and we think the user can clearly relate how this access will benefit them. We’ve re-engineered Cluster using two methods to only show the system permissions dialog once a user has told us that they intend to say “Allow”. Pre-permission Dialogs We’ve had a lot of success asking for permissions using our own UI before popping the iOS dialogs. As stated above, the worst possible thing is for a user to deny permission at the system level, because reversing that decision in iOS is very complicated. For photos alone, 46% of people who denied access in a pre-permissions dialog ended up granting access when asked at a better time later. This is simpler than you think. Double System-Style Dialogs In an older version of Cluster, when we asked for photo access, we would essentially ask them twice. ** Update: We’ve open-sourced this code. Photos Contacts Push Notifications

Design Shack | This Week in Design Are you in the holiday spirit yet? This week in design we are. From creative thinking during the holiday season to tools for a great photo book and even tips for hiring a designer, this week the theme is looking forward during this busy time. We’d also like to take a moment to acknowledge and appreciate our Design Shack readers. (And if there are things you’d like to see more of in the upcoming year, let us know.) Every week, we plan to a look at major product releases and upgrades, tools and tricks and even some of the most popular things you are talking about on social media.

Où trouver de l'inspiration pour vos animations ? Avez-vous déjà remarqué à quel point les animations sont devenues un composant essentiel au cœur des interfaces utilisateur ? Pour en tenir compte dans vos projets futurs et vous inspirer, découvrez quelques sites et outils de référence à connaître. Annonce Aujourd’hui, l’animation n’est plus réservée à des sites de jeux, pour des expériences interactives poussées ou simplement des applications mobiles. Les traditionnels blocs plats, sans vie et en 2D prennent vie avec des mouvements « réalistes » qui suivent les lois de la physique du monde réel. « Une animation bien réussie est celle que l’utilisateur ne va pas remarquer » La clé d’une animation réussie réside dans sa justesse. Pour avoir une animation qui fonctionne, pensez au réalisme de celle-ci avant tout. Des galeries pour trouver l’inspiration : Les bonnes pratiques sont dans la nature et encore plus dans de belles galeries à bookmarker sans plus attendre. UI Movement User Interfaces Use Your Interface Codepen Patterns Atomic Invsion

The De-Evolution of UX Design I was first introduced to the field of UX in the summer of 2005. After leaving my job as a Java Programmer in Hartford, I moved to San Antonio, where I randomly fell into a UX job—talk about lucky. It’s an understatement to say that I had no idea what I was doing, and I scraped along for a while trying to figure it all out. Back in those days, my role was not described as “UX designer” or “interaction designer;” in fact, the term “UX” didn’t even exist in my world! The first thing I did on the job, which may be surprising to many of us now, had nothing to do with learning how to wireframe. There are several reasons why this was my first step. The second reason that learning and applying the visual vocabulary was my first step was that my design team didn’t want to show an interface to our non-design partners and stakeholders as our first deliverable (which is what showing a wireframe would have been). There are several problems that arise from skipping the IA phase.

Flat UI - Free User Interface Kit Header 3The Vatican transitions to a Header 4Great American Bites: Telluride's Oak, The Header 5Author Diane Alberts loves her some good Header 6With the success of young-adult book-to-movie Paragraph Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Image Lead Text Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quote Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Small Font Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.