Skip to content

Design Pattern Libraries

Over the years, I’ve been stockpiling useful blogs and design pattern libaries so that I have a go-to list of resources when I’m in need of examples.  Here’s my list, in no particular order, which I hope to keep updated over time.

Change Log

  • May 16, 2010: Original Post
  • October 22, 2011: Updated to include Mobile Design Pattern Libraries
  • November 21, 2011: Added Theresa Neil’s Mobile Design Pattern Library
  • December 1, 2011: Added my iPhone gallery
  • February 17, 2012: Added Mobile Design Inspiration

Web UI Design Pattern Libraries

  • Interface Design Pattern Browser: A true UI design pattern explorer produced by the Interface Design Team of the University of Applied Sciences Potsdam
  • Design Snips: Categorized snippets of good digital design.
  • Welie Interaction Pattern Library: An interaction design library pioneered by Amsterdam’s Martijn van Welie, an Interaction Design Consultant with a Ph.D. in HCI.
  • Open Source Design Pattern Library: A community where designers, developers, and other people interested in patterns can come to reference material, collaborate on patterns and designs and share knowledge.
  • MephoBox: A CSS gallery focused on collections of individual elements.
  • Konigi: A showcase of visual design and interface design
  • Quince: A community-driven UX and UI pattern libary that also offers private design pattern storage.  Definitely one of the most complex and actively managed sources of design patterns.
  • Pattern Tap: This categorized collection of “good web” spans visual and UX design.
  • UI Pattern Factory: Last time I checked, this was SOURCED from the Flickr library above.  A UI Design Pattern library sourced from the Flickr group.
  • Elements of Design: Although this is actually a design showcase, its separated by element and may therefore provide some modular design pattern inspiration.
  • Ext GWT Explorer Demo: This showcases interactive RIA patterns accompanied by code.

Mobile UI Design Pattern Libraries

Design Blogs

  • Knotebook:  A community blog about design, ideas, trends, WordPress, and more.
  • Blink Design Library:  An informal collection of design examples with commentary from Blink, the Seattle-based  user experience consulting firm (love them!)

More Design Pattern Library Lists

If you didn’t find the type of pattern you were looking for in any of the above, here are a few other lists of design pattern libraries, many of which you’ll find on my list, as well. Someday I’ll match these lists back into mine, but for now they are separate links. 

What design pattern libraries are missing from my list?  Please share your favorite resources in the comments so that I can add them.

Posted in Blog, Design Patterns, Mobile design.

Tagged with , , , , , , , , , , .

9 comments

By Erin Lynn Young – October 22, 2011

Why I Won’t Call You “a Creative”

As news rolled through my Twitter feed this week from Cannes Lions, one article in particular caught my attention.  FastCompany’s interview with David Jones, CEO of holding company Havas, reported a changing tide at the self-proclaimed “International Festival of Creativity.”  Formerly attended primarily by ad people, the event now hosts a stream of technologists and marketers from Silicon Valley giants like Google, Yahoo, Microsoft, and Twitter.

The article reminded me of my first toe-dip into the agency world.

“There’s been a big internal debate about where this new discipline – UX – should sit within the agency,” a Creative Director told me.  ”But as far as I’m concerned, you’re a creative.”

I’d been called creative before (thanks, Mom!) but never had I been called “a creative.”  What was “a creative”?  And who would decide whether or not I was one?

As I soon learned, the agency typically reserved the elusive label for designers and copywriters.  So while some saw UXers as creatives, others decidedly did not.  After a while, the mixed messages wore on me; Certain decisions were exclusively within the jurisdiction of “the creatives,” a club to which I only sometimes belonged.  As a thinker who often spent my time in the shower dreaming up innovative interactive solutions to client challenges, it always stung to be reminded that some questioned the place of architects and technologists at the creative table.

Which is precisely why coverage like that from Cannes Lion this week makes me smile. Creativity is far too big to be the sole jurisdiction of one of two disciplines, and technological innovation shines a light on that fact.

Creativity is the responsibility of every coder behind a software build. It’s the mandate of every entrepreneur. It’s the difference between the technologists the client wants to work with and those he doesn’t.

These changing tides challenge more traditional agencies to bring technical chops to the strategic table. In Austin, we’ve seen local firms rise to the occasion. This month alone, Austin-based agency Springbox announced a new freeware offering called Mobilizer. In partnership with a team they call T3 Innovation Labs, T3 announced a new software service called Perimeters.

Although they’re each aided by brilliant copywriting and elegant design, it’s the technological innovation underlying each of these products that makes them showpieces for their founders.  For the increasing percentage of projects like these, it’s the creativity of those outside the “creative team” that’s fundamental.

So, I’m taking a stand.  I’m personally done with calling those in any certain roles “creatives.”  Join me if you agree that creativity should be expected from every member of the team.

Posted in Advertising, Blog, Innovation, User Experience.

4 comments

By Erin Lynn Young – June 23, 2011

Harvest Knows How To Announce New Features

I love it when apps I use release new features, but I always have an opinion about them.  That’s one reason that Harvest, a beloved time-tracking & invoicing application, really has it down.  It appears that a good feature announcement is as simple as 1-2-3.

1. A contextual notification about the new feature

Harvest embeds a collapsible notification at the top of affected screens in the application, so I never miss news of the latest updates.   It’s there until I hide it myself.   The notification links directly to someplace I can get the details.

2. A corresponding blog entry describing the feature

In personal, concise language, they explain the recent release and the reasons they did what they did.  And, smartly, they almost always pair it with a quick video demonstration showing me how to use it.

3. An open ear

The best part is always the end of their blog entry.  That’s where the open comments begin.  I’ve often got something to say after a change, and apparently many others do, too.  Responses typically range from “FINALLY!” to “Holy moly, you screwed up my flow big time!”  Harvest makes a good effort to respond to these comments, sometimes asking for more specifics and often guaranteeing users that their latest feedback has made it into the queue.

Like most users, I love a company that listens and a product that’s constantly improving.  I’m always left with the warm fuzzies after I go through this sort of exchange, even if the feature itself isn’t important to me — because I feel valued.

Long story short, I think that Harvest has mastered the delicate art of new feature releases.  I’m looking forward to the next one!

Posted in Blog, Customer Service, Design Patterns, User Experience.

Tagged with , , , , , .

No comments

By Erin Lynn Young – May 16, 2011

Counterpoint: Does Apple Value User Research?

This February, FastCompany (typically a favorite of mine) published a piece by Jens Martin Skibsted so fraught with incomplete logic that my stomach turned.   Skibsted’s main assertions are that:

  • No great design is formed from a baseline of understanding the user’s perspective.
  • The best brands are guided by a clear vision that no user insights could ever change.
  • The most innovative brands do not care about what users want.
  • Listening to users harms design.

Seem a little counterintuitive?  In this series of counterpoint posts, I’ll analyze the logic and evidence behind each of Skibsted’s supporting points.

The First Claim: Apple won’t state it publicly, but they generally believe that user-centered design is ”bullshit…”

“…and hot air created to sell consulting projects and to give insecure managers a false sense of security.”

Skibsted references a late night with some buddies who design for Apple, who openly share their extreme disdain for all things user research.

Truth: Evidence indicates that on whole, Apple values user feedback.

As of 2009, Apple employed 39.8 thousand — surely a mixed bag of individual opinions and philosophies.  Let’s say that Skibsted polled at least 10 Apple employees that night.   That’d be about .0002% of the company’s staff.  Although it seems that his friends strongly believe what they preach, can we infer from this sample that the brand as a whole dismisses user insights?

In my digging, I found that many of Apple’s recent communications offer reasons to question the age-old rumor that “Apple doesn’t do user research.”  Among the evidence:

  • Apple’s own Human Interface Guidelines recommend a design process that begins with knowing your users, stating that “The best way to make sure your product meets the needs of your target audience is to expose your designs to the scrutiny of your users.”
  • A current job listing for a UI design role at iTunes calls for candidates with user-centered design principals, listing research first in the list of responsibilities.
  • Apple’s own website calls for user feedback on everything from Apple.com to the products it offers.

Take it from Jobs himself.  Introducing the iPhone in 2007, Jobs led with the phone’s smarts and ease of use, specifying that the “revolutionary user interface … is the result of years of research.”

I’d love your thoughts.  Have you seen evidence to the contrary?

In my next post, I’ll tackle Skibsted’s next claim: that user insights can’t predict future demand.

Posted in Blog, Innovation, Testing, Usability, User Experience, User Research.

Tagged with , , , , , , , .

8 comments

By Erin Lynn Young – March 25, 2011

A Week of Discoveries: Tools for Efficiency

It was a busy week between travel for work, arctic blasts and rolling blackouts.  But I also stumbled across a few new sites and applications that helped me make the most of it.

Lost No More: Rainbow Folders

Certain sets of folders on my PC catch me every time. In a set of 20 folders, there are always just 2 or 3 that I use frequently.  And it always takes me a moment (or two. or three.) to the find the one I need.

I came across an app called Rainbow Folders, and so far, I’ve been pleasantly surprised. Right click on a folder, select a shade, and presto!  A colorful beacon in a sea of manila. Macs support this by default, but PCs don’t.  So, PC users: Reclaim seconds of your day!

More about Rainbow Folders at CNet »

Annotate the Web with Webnotes

Whether it’s a heuristic evaluation, a competitive audit, or a design review, I’ve spent hours grabbing screen caps and dropping annotation markers just to effectively communicate specific notes on web assets.

WebNotes is a simple application (with a free basic subscription) that enables users to drop sticky notes right on a webpage for team sharing and collaboration.

In all honesty, the free version leaves a few features to be desired.  (Aren’t marketers smart?)  But for some situations, it’s all you’d need to quickly jot and share comments.  Worth knowing about.

More at WebNotes.net »

Focus Restored: DistractionBlocker

Nothing makes Facebook more interesting to me than a looming deadline.   Which is not a good thing.  Time management is important to full-time employee, but imperative to freelancers.

Chrome is my browser of choice.  DistractionBlocker, a free Chrome application which I found in the Chrome Store, lets me specify sites that I need to avoid to stay focused.  I can toggle the blocker on when I need to focus, and free myself to Facebook once my’s deadline has been met.  Distractions denied.

More about DistractionBlocker in the Chrome Store »

Prototypes on Prototypes

One of my favorite things about Axure RP is that you can prototype for iPhone and then review it… on the iPhone. Brilliant!  But I’ve got an iPad assignment around the corner and although I’ve been reading up for months now, I don’t want to take the plunge just weeks before the iPad2 comes out.

This week, I came across iPadPeek.com – a site which, paired with my little touch-screen laptop, is the simplest little stand-in I could have hoped for.  The UI of the site places the website you specify inside an iPad + Safari wrapper, while my tablet allows me to emulate the touch interaction.  Simple & sweet!

More at iPadPeek.com »

2011 is already flying by, and simple tools like these are helping me get the most from it.   What tools have been floating your boat lately?  Please comment.

Posted in Austin, Blog, Efficiency, Prototyping, User Experience.

Tagged with , , , .

No comments

By Erin Lynn Young – February 5, 2011

The Right Way to Introduce a New Feature

When I logged into LinkedIn today, I was thrilled to see this. Not the new feature, exactly — rather, the way they introduced it.  What’s a new feature without an elegant introduction?

Web applications and increase usability by introducing new features carefully.

New features excite development teams and users alike.  And in the world of web apps, they may appear at any time.  But sometimes, they create usability problems that surprise the teams that crafted them so carefully.

“The users asked for this feature.  Now they’re telling me they are frustrated by it?”

Pre-launch user testing and heuristic review can eliminate a lot of usability woes, often inexpensively.  But even the most well-designed feature disrupts the status quo, which will cause some users to freak out.

LinkedIn’s smart introduction of their latest feature, Signal, goes a long way to alleviating those risks.  How?

  1. It’s hard to miss. It may seem odd to hear a UX Architect advocate obstructing the user, but would you rather be interrupted: immediately upon arrival with news of a new feature, or “in the wild” while you’re trying to complete a task?  Unlike unnecessary, “us”-centered interruptions, this announcement has legitimate value to the user and provides an opportunity to cast the new feature in a positive light. Plus…
  2. It targets users smartly: the first time they log in after the change has gone live.  You can close it, and it doesn’t interrupt you again. Smart targeting.
  3. It explains “what” succinctly. The user’s split-second thought process goes something like this” “Something new?  What is it?”  And LinkedIn respects this — clearly using great restraint to answer concisely.  Their description weighs in at 14 words – shorter than your average tweet.
  4. It support multiple learning preferences. Recognizing that their users range from the busy executive in the corner office to the bored entry-level associate with a desk in the hallway, LinkedIn realized that some will prefer to watch while others will prefer to look busy read.  As such, they provide both ways to learn more.
  5. It’s easy to find later. When I arrived, I glanced, closed the window, and proceeded.  But I came back.  It’s easy to forget the “returning learner” who might come back later for details, but LinkedIn didn’t. The arrow on the outside of the intro overlay is attached to a bright orange “NEW” insignia which serves dual purposes: it draws attention to the new feature while bringing back the intro overlay for those who click.

I’ve been critical of LinkedIn’s design choices in the past, but the truth is that they provide lots of fodder for critique because they are actively innovating.  Sincere kudos to the design team who made these smart, subtle design decisions.

Posted in Blog, Software Design, Usability, User Experience.

Tagged with , , , , .

2 comments

By Erin Lynn Young – January 27, 2011

Can Web Analytics Inform Off-Line Decisions?

This Saturday, January 15 was ProductCamp Austin, the premiere event for Product Management, Product Marketing, and Marketing professionals to teach to, learn from, and network with each other.  As an unconference, there’s no set agenda.  Instead, attendees vote on user-contributed session proposals on the morning of the event.  I was thrilled when the session I proposed made the cut!

From My Session

We all know that Google Analytics can tell you how many visitors your site has, where they’ve come from, and what they did while they were there. But you may not have realized that insights uncovered through web analytics can help your team make better decisions – even outside of web marketing.

Learn 10 ways that web analytics have sharpened decisions in product design, marketing strategy and offline marketing communications.

The graphics get a little crunchy in slideshare, so you might prefer to download the PDF.

As a standalone, this file alone doesn’t really contain the majority of the content covered.  Please get in touch if you’d like more detail on the talking points that accompanied it.

Lessons Learned

Anyone who comes out on a rainy, cold Saturday morning to talk about product management is clearly passionate about what they do — and the caliber of many presenters is a testament to that.  The next time I present, my goal is to get the room more engaged.  I saw some neat techniques for accomplishing that, and I think it’d really take my presentation skills up a notch.

The other session that I attended sparked some big thinking about product management as it relates to (and overlaps) with the UX field.  Expect some thoughts on that topic in future posts.

Help Me!

I’d love to hear your examples of how web analytics have influenced off-line decision-making — or better yet, for you to call me out on gaps in my logic!   Do you think web analytics are a valid source of user insights?

If you were in attendance at the presentation, please let me know what you liked about the presentation, how I could improve my presentation skills, and most importantly, whether you have any unanswered questions I can help you with.

Posted in Analytics, Blog, Events, User Research.

Tagged with , , , , , , .

1 comment

By Erin Lynn Young – January 17, 2011

Too late for predictions?

I know. It’s more than too late to talk about predictions for 2011. But I’m going to do it anyway.  Because an interesting list of predictions has been compiled that I want to share with you.  Things that make this list different:

    Happy Somewhat New Year

  • Distributed applications
  • Personalization
  • Device cross-talk (not to be confused with Girl Talk)
  • “Do not track”
  • Facebook’s saturation point
  • Social search and eCommerce
  • App stores and mobile infrastructure for internal enterprise use
  • Flash sales and group discounts

Best of all?  I’m referred to as an “AI Nerdesse.”   Second time this week someone’s pulled the “AI” card.  Humor only an IA could love.

Rich Malley is a friend and an awesome copywriter.  But he’s also drop-dead funny — which I didn’t entirely realize until he kicked his habit of working full-time and started blogging away over at Oblogatory.

Posted in Blog, Innovation, Predictions.

Tagged with , , .

1 comment

By Erin Lynn Young – January 12, 2011

Exciting January Events in Austin

In addition to ridiculous cedar and freezing temperatures, the next two weeks will also bring Austin some exciting events in the design and product management realm.

Saturday, Jan 15, 2010: Product Camp 6 Austin

ProductCamp Austin is the premiere event for Product Management, Product Marketing, and Marketing professionals to teach to, learn from, and network with each other. The event is FREE and driven by user-contributed sessions — and I decided to submit one this time!  Here’s the description:

Can Web Analytics Inform Off-Line Decisions?

We all know that Google Analytics can tell you how many visitors your site has, where they’ve coming from, and what they do while they are there.  But you may not have realized that insights uncovered through analytics can help your team make better decisions — even outside of web marketing.  In this presentation, we’ll talk about how web analytics can sharpen the decisions made in product design, marketing strategy, and offline marketing communications.

Unfortunately, registration has already capped out for this event (450 attendees!  Eek!)  But, I’ll certainly take notes and post them as the event plays out.

Tuesday, Jan 18, 2010: IXDA Austin

As a part of my scaled-up involvement with the Interaction Design Association of Austin, I’m excited to have planned and be moderating this event.

Using Online Communities to Harvest Ideas, Decrease Support Costs and Kick-Start Loyalty

National Instruments has won awards for the way it has built user feedback into the development process for its flagship product. The company invites users to submit features and rate others’ submissions, collects feedback about new technologies before they’re ready for release and actively measures the success of their co-innovation.

In this panel, we’ll bring folks together from Community, Product Management and IT teams to teach us how they’re doing it – and how they’re measuring it. Panelists include:

Please RSVP at Austin IXDA.  (FREE Membership is required.)  And, I’ll certainly blog my notes for those of you who can’t make it.

Posted in Analytics, Blog, Events, Social Media, User Experience, User Research.

Tagged with , , , , , .

No comments

By Erin Lynn Young – January 10, 2011

Questionable Designs: Visio Installation

Call me crazy, but this makes no sense to me.  The intro line talks about choose an installation type.  Are the two types “Continue” and “Customize”?  I made it through this installation process, but I’ll be the first to admit that I have no idea which “type” I installed.

See more Questionable Designs.

Posted in Blog, Design Critique, Software Design.

Tagged with , , .

2 comments

By Erin Lynn Young – December 22, 2010