Pattern Tap : Interface Design Inspiration

[squaredeye]

I thought some of  you would be interested to see what we've got in  
the wild for interface design inspiration : http://patterntap.com.

Its a great collection of over 800 interface design patterns (and  
growing while maintaing quality). Web designers will use it for  
insight into what others are doing and can keep tabs on what they like  
by creating user sets (very similar to lightboxes)

I know that IXDA has a high standard for this sort of thing, and its  
really not geared toward the science of UX, but toward the designerly  
implementation and analysis of the designs that are on the web currently

Hope you enjoy!

Matthew Smith
Squared Eye (http://squaredeye.com)
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Boon-2]

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


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

[David Malouf]

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


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

[Christian Crumlish-2]

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@...>
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
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Jeremy Yuille-2]

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@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Andrew Schechterman]

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: [phone]


:::::


On Wed, Jul 23, 2008 at 4:00 PM, Jeremy Yuille <overlobe@...>
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@...
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

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

[Christian Crumlish-2]

On Wed, Jul 23, 2008 at 3:00 PM, Jeremy Yuille <overlobe@...>
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
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Valeska OLeary]

> 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@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Ivan Bachev]

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


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

[squaredeye]

@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


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

[Jared Spool]

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@... p: [phone]
http://uie.com  Blog: http://uie.com/brainsparks

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

[squaredeye]

@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@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[squaredeye]

@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@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Will Evans-3]

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@...>
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@...
> 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 [phone] | will@...
twitter: https://twitter.com/semanticwill
---------------------------------------------------------------------------------------------
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[J. Ambrose Little]

On Fri, Jul 25, 2008 at 9:10 AM, matthew Smith <matthew@...>
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
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Oleh Kovalchuke]

On Wed, Jul 23, 2008 at 5:00 PM, Jeremy Yuille <overlobe@...>
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
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[squaredeye]

@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


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

[J. Ambrose Little]

On Sat, Jul 26, 2008 at 2:48 PM, Matthew Smith <matthew@...>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
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Oleh Kovalchuke]

 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
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss@...
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

[Jeremy Yuille-2]

@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@...> 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!
>

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