Pattern Tap : Interface Design Inspiration

23 Jul 2008 - 3:26pm
6 years ago
23 replies
455 reads
Christian Crumlish
2006

This is a wonderful resource!
I will put my pattern-geek hat on for a moment, though, to say that I'm not
entirely comfortable with the way the term pattern is sometimes used to mean
"gallery of examples." Don't get me wrong, I love galleries of examples.
They are awesome.

Also, I think the individual clusters of images can be called patterns in
the sense that they can plausibly be said to depict examples of patterns.

What's missing, for me, is the next step of abstracting what they have in
common and capturing that in some descriptive form.

This may be a language drift thing, though, so maybe I shouting into the
wind.

-xian-

On Mon, Jul 21, 2008 at 7:12 PM, Matthew Smith <matthew at squaredeye.com>
wrote:

> I thought some of you would be interested to see what we've got in the
> wild for interface design inspiration : http://patterntap.com.
>
--
Christian Crumlish http://xianlandia.com
Yahoo! pattern detective http://design.yahoo.com
Yahoo! Developer Network evangelist http://open.yahoo.com
IA Institute director of technology http://iainstitute.org

Comments

23 Jul 2008 - 4:10pm
Dave Malouf
2005

Christian, I agree w/ the language use. You know me ... always the
guardian of semantics. ;-)

Something the site could add to it though is user input to the
different sections in terms of "why?" and value. I think this would
get what Christian is looking for and open it up a bit more. Is there
a way to submit your own suggestions?

-- dave

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

23 Jul 2008 - 5:00pm
Jeremy Yuille
2007

Matthew, thanks for putting this out there, it's a really great set of
inspiration sources!

re 'patterns': I think something like Pattern Tap compliments other
resources like http://welie.com or http://ui-patterns.com/ for the reason
that it approaches selection from a different angle: 'Tasty Design' ;-)

Funnily enough, I'd had a request from a student just a week ago about
whether there were any places online that collected visual design examples
in the same way that Graphic Design source books have been doing for ages..
none came to mind straight away, so thanks Matthew!

btw - does anyone else here have any design driven sources that I could
share with my students?

Matthew - I'm interested in how you choose designs.. if you have time, it
would be awesome if you could dig a bit into 'designerly implementation and
analysis' you describe upthread and tell us what kind of criteria you're
using to select examples

23 Jul 2008 - 5:05pm
aschechterman
2004

Also Tom's site/page is a great clearinghouse:
http://www.visi.com/~snowfall/InteractionPatterns.html

:::::

Andrew Schechterman

UX Architect, Medical Psychologist

LinkedIn: http://www.linkedin.com/in/andrewschechterman

E-mail: aschechterman at gmail dot com

Phone: 1-303-886-2440

:::::

On Wed, Jul 23, 2008 at 4:00 PM, Jeremy Yuille <overlobe at isomorpho.us>
wrote:

> Matthew, thanks for putting this out there, it's a really great set of
> inspiration sources!
>
> re 'patterns': I think something like Pattern Tap compliments other
> resources like http://welie.com or http://ui-patterns.com/ for the reason
> that it approaches selection from a different angle: 'Tasty Design' ;-)
>
> Funnily enough, I'd had a request from a student just a week ago about
> whether there were any places online that collected visual design examples
> in the same way that Graphic Design source books have been doing for ages..
> none came to mind straight away, so thanks Matthew!
>
> btw - does anyone else here have any design driven sources that I could
> share with my students?
>
> Matthew - I'm interested in how you choose designs.. if you have time, it
> would be awesome if you could dig a bit into 'designerly implementation and
> analysis' you describe upthread and tell us what kind of criteria you're
> using to select examples
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

23 Jul 2008 - 5:27pm
Christian Crumlish
2006

On Wed, Jul 23, 2008 at 3:00 PM, Jeremy Yuille <overlobe at isomorpho.us>
wrote:

> Matthew, thanks for putting this out there, it's a really great set of
> inspiration sources!
>
> re 'patterns': I think something like Pattern Tap complements other
> resources like http://welie.com or http://ui-patterns.com/ for the reason
> that it approaches selection from a different angle: 'Tasty Design' ;-)
>

I totally agree with this! Please don't take my nitpicking on terminology
as a criticism of the site and concept. I love it! It's really useful. I
also accept that language drifts and even terms of art can change and the
"success" of the pattern meme is going to tend to lead to watering it down,
but I'm nonetheless going to try to hold the line on this distinction for
now, as I think it's useful.

People should also look at factoryjoe's pattern galleries on Flickr:
http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/(which
he similarly calls design patterns although I think they fall short
of that designation for the same reasons discussed above, while still
believing they are incredibly useful and great).

-x-

--
Christian Crumlish http://xianlandia.com
Yahoo! pattern detective http://design.yahoo.com
Yahoo! Developer Network evangelist http://open.yahoo.com
IA Institute director of technology http://iainstitute.org

23 Jul 2008 - 4:23am
boon
2008

Nice.

Could be useful alongside books like Tidwell's "designing
interfaces" from O'Reilly.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

24 Jul 2008 - 4:50am
Ivan Bachev
2008

It is really a great resource Matthew, thank you!

I am also sharing a video collection of Interface Design patterns -
http://www.vimeo.com/album/17554

Good to check and see patterns in action.

Regards,
Ivan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

24 Jul 2008 - 7:51am
Anonymous

@Christian
Interesting issue about semantics. I chose patterntap partly because
of availability of domain names, and its snappy sound. I can see your
point though. This isn't really a resource for UI engineers and
critical thinkers as much as it is for designers. We took away a lot
of the initial Wiki like interaction for detailing the focus of a
given pattern in favor of a designer buffet approach. The former is
still needed, though perhaps its a second iteration of the site?
(your second comment is right on - useful and great, though semantics
is important and should be addressed)

@Dave
We are looking/have looked at some ways of adding "Suggest a tag"
"suggest an additional collection" (for individual images and for
the tap on the whole). We didn't want to implement things that might
not be useful. Trying to take a small step approach here. Good
thoughts though. Send me your ideas in an email if you're willing,
or better yet, we have a page set up at
http://getsatisfaction.com/patterntap/ (we were using "User Voice"
but its not nearly as complete as the Get Satisfaction stuff"

Thanks for all the encouragement!!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

23 Jul 2008 - 5:49pm
Valeska OLeary
2008

> This is a wonderful resource!
I will put my pattern-geek hat on for a moment, though, to say that I'm not
entirely comfortable with the way the term pattern is sometimes used to mean
"gallery of examples." Don't get me wrong, I love galleries of examples.
They are awesome.
-xian-

I agree with you, xian. I came across PatternTap today and twittered about it like this: ValeskaUXBoston ... found a collection of interesting interface elements screenshots ~ http://patterntap.com I didn't perceive it as a pattern library per se.

~valeska o'leary

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

24 Jul 2008 - 12:30pm
Jared M. Spool
2003

On Jul 23, 2008, at 3:27 PM, Christian Crumlish wrote:

> I also accept that language drifts and even terms of art can change
> and the
> "success" of the pattern meme is going to tend to lead to watering
> it down,
> but I'm nonetheless going to try to hold the line on this
> distinction for
> now, as I think it's useful.

I completely agree with this line of thinking. I think, as a
community, it serves us well to be careful of our language.

I've been fighting a similar battle with personas versus descriptions-
of-people-real-or-otherwise because watering the term down doesn't
help its usefulness.

I'd like to see more efforts in the community to establish and protect
a language we can all use to mean the same things.

Jared

Jared M. Spool
User Interface Engineering
510 Turnpike St., Suite 102, North Andover, MA 01845
e: jspool at uie.com p: +1 978 327 5561
http://uie.com Blog: http://uie.com/brainsparks

25 Jul 2008 - 8:10am
Anonymous

@Jared
How would you best describe what Pattern Tap showcases? What language
would you change or redefine? I'd be interested to see how we can
gaurd those terms well, and honor the work of folks like yourself,
while hopefully at the same time, offering a bit of expansion to
terms like "pattern".

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

25 Jul 2008 - 8:20am
Anonymous

@Jared
How would you best describe what Pattern Tap showcases? What language
would you change or redefine? I'd be interested to see how we can
gaurd those terms well, and honor the work of folks like yourself,
while hopefully at the same time, offering a bit of expansion to
terms like "pattern".

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

25 Jul 2008 - 4:51pm
SemanticWill
2007

Someone asked me in a meeting last week if I had started to see Twitter
conventions seeping into online discussion boards and email lists. MS's use
of @Jared is the first time I have seen it on the list - although it's not
his correct twitter name.

:-)

Interest -- Might start another thread - Twitter conventions becoming
commonplace in other online mediums - examples?

On Fri, Jul 25, 2008 at 9:10 AM, matthew Smith <matthew at squaredeye.com>
wrote:

> @Jared
> How would you best describe what Pattern Tap showcases? What language
> would you change or redefine? I'd be interested to see how we can
> gaurd those terms well, and honor the work of folks like yourself,
> while hopefully at the same time, offering a bit of expansion to
> terms like "pattern".
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=31495
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
~ will

"Where you innovate, how you innovate,
and what you innovate are design problems"

---------------------------------------------------------------------------------------------
Will Evans | User Experience Architect
tel +1.617.281.1281 | will at semanticfoundry.com
twitter: https://twitter.com/semanticwill
---------------------------------------------------------------------------------------------

25 Jul 2008 - 5:10pm
ambroselittle
2008

On Fri, Jul 25, 2008 at 9:10 AM, matthew Smith <matthew at squaredeye.com>
wrote:

> @Jared
> How would you best describe what Pattern Tap showcases? What language
> would you change or redefine? I'd be interested to see how we can
> gaurd those terms well, and honor the work of folks like yourself,
> while hopefully at the same time, offering a bit of expansion to
> terms like "pattern".

Hi Matt,

I'm not Jared, but I've been watching this thread with interest. I
appreciate what you've done and want to do in terms of helping provide
sources of inspiration, but I share others' concern about the extension of
the 'pattern' term. I think there is already too much confusion around it
and think it'd be better not to extend it to mean 'example', which is what I
take away from patterntap.
I think what Alexander was trying to get at in his books on patterns is more
than this and has a lot to offer the interaction design community that we
shouldn't overlook or water down.

Again, I think what you're doing is definitely valuable and appreciated; the
concern's just about the terminology.

--Ambrose

25 Jul 2008 - 5:47pm
Oleh Kovalchuke
2006

On Wed, Jul 23, 2008 at 5:00 PM, Jeremy Yuille <overlobe at isomorpho.us>
wrote:

> re 'patterns': I think something like Pattern Tap compliments other
> resources like http://welie.com or http://ui-patterns.com/ for the reason
> that it approaches selection from a different angle: 'Tasty Design' ;-)

I think you are right, Jeremy.

In our approach to building a corporate pattern library, we plan to provide
generic pattern description with snippets of code in a wiki, and link the
description to the visual "live" examples of various implementations of the
patterns (this visual index is somewhat similar to the PaternTap). The live
examples would link back to the detailed pattern descriptions. This looks
like a good idea so far, since different examples could utilize several
patterns and the other way around.

By the way, thanks to Jared Spool for putting together generic pattern
description template. Instead of re-inventing the wheel, we simply use the
one he has compiled.

--
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

26 Jul 2008 - 1:48pm
Anonymous

@J.Ambrose
Can you point me to Jared's template? A quick googling produced a
few results without a template (that I could see)

I really can understand where you all are coming from. I feel a bit
defensive as a visual designer, but that may be my lack of education
in the UX Engineering field, or even the science end of interaction
design.

I think my defensiveness comes from a sense that while its good to
have a common language for things, its also restrictive and may give
an idea like "patterns" a kind of mortality, rather than letting it
grow into broader meanings?

I don't feel like "examples" is an appropriate way of explaning
what Pattern Tap is (or could be as it grows). Its definitely more
than a well organized gallery, and yet its not an educational outpost
like ixda or some of the great "Pattern Libraries" out there. The
reason I created Pattern Tap was because I felt that all of the
"Pattern Libraries" lacked in any real quality of design, ability
for designers to move through "examples" of those patterns in
active use, and then be inspired or educated by them.

We initially were heading in a much more "educational" route with
examples and code to go, but it made for a more taxing app to move
through.

What are some suggestions you all might have about how I can tweak
the current language (outside of the domain name of course :), to
something more fitting? Or where would you suggest I be careful with
language I use on the site?

Lastly, is there any way that the framework of this site could be
used for a more "traditional" "Pattern Library"? If so, I'd love
to entertain that idea with some help from some of you smart types :),
if you're interested!

Thanks for the VERY engaging discussion.

Matthew

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

27 Jul 2008 - 2:46pm
ambroselittle
2008

On Sat, Jul 26, 2008 at 2:48 PM, Matthew Smith <matthew at squaredeye.com>wrote:

> @J.Ambrose
> Can you point me to Jared's template? A quick googling produced a
> few results without a template (that I could see)
>

Hi Matt,

I don't want you to feel defensive, but I understand where you're coming
from.

I think Welie is a good example; Tidwell's book is also good:
http://www.welie.com/patterns/showPattern.php?patternID=collapsible-panels

Key things to include in "patterns" are:
* Description - Briefly say what the pattern is/does/what it solves.

* Problem - Often patterns solve particular problems/challenges in design,
and identifying the problem can help people identify the kind of issues that
the pattern addresses.

* Context - This elaborates on the problem, providing more context to
further help folks understand when the pattern is applicable and when it
isn't.

* Rationale - This dives into the "why" behind the pattern--why does it
work, why is it good, that sort of thing, with the goal of empowering the
individual to not only understand that particular pattern but to build a
deeper foundation that they can design from w/o the explicit application of
patterns. (Actually, all patterns are kind of geared towards that goal, but
the rationale provides more explicit guidance than the other aspects.)

* Implementation - Describes *how* to apply the pattern.

* Examples - These are concrete examples of the pattern, and I think that's
where your site shines. I agree about the general lack of good visual
design in most examples I've seen of UI patterns.

* Name - This serves the same purpose as names in general; to provide a
common reference point (symbol) to facilitate discussion.

Hope this helps clarify why I, at least, am concerned.

As for the speculation that this more constrained understanding of the term
"pattern" is what causes its lack of adoption, I can see where you're coming
from. I tend to think, though, that it's less a matter of terminology as
much as it is making patterns more usable.

Another way to think of it: If you extend the definition, are you really
encouraging more adoption or are you just changing the underlying meaning
such that it is actually adoption of this new/different thing you are
proposing and not patterns themselves?

Thank you for engaging and not just blowing us off. :)

Cordially,

Ambrose

27 Jul 2008 - 4:41pm
Oleh Kovalchuke
2006

Matthew Smith wrote:

> Can you point me to Jared's template? A quick googling produced a
> few results without a template (that I could see)

http://www.uie.com/articles/elements_of_a_design_pattern/

--
Oleh Kovalchuke
Interaction Design is design of time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

27 Jul 2008 - 10:23pm
Jeremy Yuille
2007

@Matthew,

1.
one way I could see it going is to try define what the design you're
highlighting *is* and wrap some patterns around it.. ie: what do you
mean by 'Tasty Design'?

eg: Pattern Tap could define 'aesthetic patterns' where you describe
the problem and solutions in terms of IxD aesthetics

¿IxD Aesthetics? check out Jonas Lowgren's "Five things I believe
about the aesthetics of Interaction Design"
http://webzone.k3.mah.se/k3jolo/Material/aesthetics_of_ixd.pdf

2.
a second approach i see could be for you to tie Pattern Tap into
existing design pattern collections, by adding value from the design
implementation & inspiration side.

eg: Pattern Tap might help fill out the 'examples' that other pattern
collections use, and also extend these examples from merely
illustrating the IxD pattern to describing different types of
successful implementations from a visual and IxD aesthetics
perspective.

approach #1 is more work than #2 (and more academic.. but hey.. guess
what I do for a living ;-) and could possibly grow out of doing #2
first anyway.. (particularly if you crowdsource it)

re using the P word... as you get closer to your intended design the
distinction between your examples and traditional patterns will
diminish. the work is really in how you describe and present the
examples, and how they tie into a larger idea of strategies.

hope that helps../
cheers
jy

On Sun, Jul 27, 2008 at 4:48 AM, Matthew Smith <matthew at squaredeye.com> wrote:
>
> What are some suggestions you all might have about how I can tweak
> the current language (outside of the domain name of course :), to
> something more fitting? Or where would you suggest I be careful with
> language I use on the site?
>
> Lastly, is there any way that the framework of this site could be
> used for a more "traditional" "Pattern Library"? If so, I'd love
> to entertain that idea with some help from some of you smart types :),
> if you're interested!
>

28 Jul 2008 - 8:22am
Anonymous

Oh Man! Great resources here! Thank you all for engaging in such a
good discussion. I suspected I'd get a good education by taking PT
here.

I'll be looking at the possibilities of implementing some of these
ideas into the next iteration or a tweaked clone of PT.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

28 Jul 2008 - 3:30pm
Christian Crumlish
2006

On Sun, Jul 27, 2008 at 8:23 PM, Jeremy Yuille <overlobe at isomorpho.us>wrote:

>
> 2.
> a second approach i see could be for you to tie Pattern Tap into
> existing design pattern collections, by adding value from the design
> implementation & inspiration side.
>

+1

This is the direction my thoughts have been going. We've got a bunch of
pattern collections where we say to ourselves "it would be great to have way
more visual examples to illustrate the variations and possibilities with
this pattern" and we're starting to have these great pattern-gallery-visual
collections that are prompting grumps like me to say "but it's not *really*
a design pattern unless it has x, y, z..."

I think these are two great tastes that will taste good together. People
like me who curate pattern libraries can link across to sites like Pattern
Tap and factoryjoe's pattern collections on Flickr to point to examples of
the patterns we are describing. Likewise, PatternTap and other sites can
feel free to link to written descriptions of the patterns they are
depicting, where available.

Not that I would discourage you, Matthew, from adding
problem/context/solution/rationale type elements to your visual example
collections, but I also don't think you have to do that to gain some of the
value that would be accomplished via cross-linking.

>
> eg: Pattern Tap might help fill out the 'examples' that other pattern
> collections use, and also extend these examples from merely
> illustrating the IxD pattern to describing different types of
> successful implementations from a visual and IxD aesthetics
> perspective.
>
> >
> > Lastly, is there any way that the framework of this site could be
> > used for a more "traditional" "Pattern Library"? If so, I'd love
> > to entertain that idea with some help from some of you smart types :),
> > if you're interested!
>

Absolutely I think this could be so, and I think you are demonstrating some
great social and community features that most living pattern libraries would
probably kill for.

-xian-

--
Christian Crumlish http://xianlandia.com
Yahoo! pattern detective http://design.yahoo.com
Yahoo! Developer Network evangelist http://open.yahoo.com
IA Institute director of technology http://iainstitute.org

28 Jul 2008 - 4:36pm
kimbieler
2007

A few web design collections:

http://www.flickr.com/photos/splat/sets/981332/
http://bestwebgallery.com/
http://www.templatemonster.com/
http://www.designmeltdown.com/

On Jul 23, 2008, at 6:00 PM, Jeremy Yuille wrote:

> btw - does anyone else here have any design driven sources that I
> could
> share with my students?

-- Kim

+ + + + + + + + + + + + + + + + + +
Kim Bieler Graphic Design
www.kbgd.com
+ + + + + + + + + + + + + + + + + +

28 Jul 2008 - 5:37pm
Jared M. Spool
2003

On Jul 25, 2008, at 6:20 AM, matthew Smith wrote:

> How would you best describe what Pattern Tap showcases? What language
> would you change or redefine? I'd be interested to see how we can
> gaurd those terms well, and honor the work of folks like yourself,
> while hopefully at the same time, offering a bit of expansion to
> terms like "pattern".

A collection of designs for inspiration.

It's my opinion that "general" pattern libraries are of limited value.

What teams really need are libraries of patterns that have been proven
for their users in their specific design contexts. These will include
localized thinking, including brand-related issues and details about
the things that make their own experience unique, such as voice, tone,
and feel.

For example, the patterns for KodakGallery.com would be very different
from the patterns for Flickr.com, even though they'll have a lot of
the same types of elements, because they are trying for very different
experiences.

I think both teams could turn to a site like PatternTap for
inspiration (which I think is your goal), but would create a library
of patterns that was unique to their own needs and offerings.

That's my take.

Jared

Jared M. Spool
User Interface Engineering
510 Turnpike St., Suite 102, North Andover, MA 01845
e: jspool at uie.com p: +1 978 327 5561
http://uie.com Blog: http://uie.com/brainsparks

28 Jul 2008 - 6:12pm
Anonymous

@Christian and @Jeremy
These ideas are really interesting to me.
One of the things we are considering trying to accomplish with the
next round of changes to Pattern Tap is a bit of user interaction
with the "sorting" and "organizing" of the design examples. This
would include adding or commenting on tags (from the available list
of tags, or suggesting a tag), adding or commenting on the collection
a design belongs to.

Perhaps an additional resource here, could be an information list of
links to resources concerning the pattern that informed that
particular design.

@Jared
Your comment has me VERY interested in addressing and analyzing whole
sites from a design/pattern perspective. I've found that Michael over
at Konigi has been doing a good job of this, but I wonder if there is
room for even more thorough investigation/documentation into that.

Have you had any experience with developing something of this sort?
In the case of flickr, what's the goal? To show the pattern of a
carousel and then see how flickr implemented it in line with their
brand and web layout?

My question here, is how you provide a resource that has a good
stratus of accessibility/readability. Like a good Bob Dylan song it
needs to be accessible on multiple levels in order to be
useful/educational to a larger audience.

In my opinion, this is one of the issues that is a separator between
the science UX and the implementation of design. Often I've found
the heavy UX articles to be beyond the scope of the projects I've
engaged in. Reading a 3000 word essay on Search Results for instance
is compelling, but I might get the "same" end result by emulating
what a great design team like Apple has done. In a visual way, I can
see how to produce a great list of results with options for my users.
The problem is I don't know WHY its good if I don't read. Perhaps
this is a great need for both?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=31495

Syndicate content Get the feed