Why have a design pattern library?

[author’s note: This is part one in a multi-part series. Based on material I developed with Christian Crumlish and Lucas Pettinati for a workshop we gave at the IA Summit in 2008 and 2009 and at Interactions 2009, I have expanded this information into a multi-day workshop and this series of articles. Once the series is complete it will be collected together as a white paper available as a PDF download.]

Houston we have a problem

At some point or another in a company’s lifecycle the interaction design team may find themselves seriously outnumbered.

They may be outnumbered by the corresponding number of developers and business folks. They may be outnumbered by the sheer amount of projects they have in their queue at any point. They may be outnumbered by the amount of projects and products that need to feel like they come from the same company. They may need to manage a pool of external consultants doing work for the company.

Whatever the issue, it’s usually at this point that someone on the team will think about an interaction design pattern library.

Chances are that the marketing department has already developed a Brand Style Guide with guidelines for how to use the logo and associated assets. This document generally is used to educate everyone in the company about proper brand usage and when work is outsourced to make sure outside consultants represent the brand appropriately. A pattern library solves very similar needs for the team for interactive experiences.

An interaction design pattern library can satisfy a host of needs related to efficiencies, consistency as expressed in user experience solutions and the ability to keep everyone on the same page—internal and external. Decisions around specific solutions and specific contexts represented in a pattern library can be as representative of the brand for the company as the logo. If the company products are interactive, then that interactive experience is the brand. A pattern library codifies the decisions around what will and will not be an acceptable solution in specific instances.

Additionally, when a team is outnumbered, a pattern library can inform developers and other cross-functional team members about settled design solutions so that the design team isn’t needed for every piece of a project. In these cases, the design team can act as director and provide feedback without having to do the heavy lifting of the design work.

A pattern library is also a good tool to have when there are a lot of designers as well. In this case, there are often a lot of different, disparate teams spread out across a company, across multiple offices and geographic locations. The pattern library becomes one of the tools in which all members can contribute to an agreed upon behavioral vocabulary for the company’s products.

The process by which the team defines the patterns in the library can rationalize multiple variants of a design, can refine outdated decisions and solutions and can help new employees come up to speed and get on the same page as the rest of the team in a quick and timely fashion.

When I was running the team responsible for the library at Yahoo!, we often had new employees reach out to us about various patterns. The library was a resource they studied upon joining the organization and was often referred to as they became accustomed to the way Yahoo! design worked.

So just what is an interaction design pattern?

When we developed the Yahoo! Pattern Library, we defined a pattern as:

an optimal solution to a common problem within a specific context

Patterns are used like building block or bricks. They are fundamental components of a user experience and describe interaction processes. They can be combined with other patterns as well as other pieces of interface and content to create an interactive user experience. They are technology and visually agnostic and we do not prescribe either of these. Interaction design patterns give guidance to a designer for how to solve a specific problem in a context in a way that has been shown to work over and over again.

A pattern also captures the situation, competing constraints and provides a canonical solution.

It is repeatable and is an archetype.

Up Next: Where did the idea of patterns come from? A brief history.

Identity, Privacy and Differences for Women Online

Lately I have been thinking a lot about identity online and how things like age and gender affect how you approach projecting an online identity. Working with a startup that is creating opportunities for kids to be digital citizens with ownershop and accountability for their online identities made me wonder about what should be encouraged and what tools we need to be creating, implementing, educating people about when it comes to managing who they are and how they will be seen online. Can teaching kids early on how to behave and what consequences can be for bad behavior, alleviate some of the issues we see with older folks, particularly women?

Many women create separate profiles for various factors of their online life; personal—sharing photos and information with friends about life, kids, family and other non-business related things; professional—building resume, professional connections, participating in professional discussion groups; spiritual—sharing aspects of spiritual beliefs with others who are like minded. There are others, of course like profiles specific to gaming or politics and other specific interests.

These facets of a person can be seen quite distinctly with women who are overtly concerned with the effects their personal and spiritual life can have on their professional acceptance and credibility. These facets are also important for women who want to participate online but who have concerns or have had experience with stalkers (in real life or online) or obsessive exes.

I attended the She’s Geeky unconference recently and was involved in a lengthy conversation about these topics. Anecdotally, the experiences of the participants fell along this model for how they presented themselves online.

Concern arises with companies like Facebook making changes to their privacy policy and privacy behaviors. The carefully crafted separations are suddenly merged and people are outed in ways they hadn’t expected or approved. This is not acceptable and we shouldn’t shrug it off as if it is.

Another interesting point to consider is that many of the web sites that promote sharing identity and information are built by men, who are often younger and single or only recently married without children. The concerns that women have about their family safety or their own safety through exposed information on the internet, never even occurs to these men as an issue.

When thinking about how to address these concerns through software offerings, some options come to mind:

  • Rather than one size fits all, allow users to create facets of themselves.
  • More clearly indicate how cross linking and sharing across services exposes information.
  • Privacy controls add complexity which can deter adoption, so a combination of efforts is needed. Clear education about how to use privacy controls and what the consequences of various actions might be can be lightly integrated as Did You Know type informative blocks of info on sites. Facebook did alert users that the privacy controls were going to change, but they were rather vague on what the consequences of doing nothing might be.

I think it is important for the larger social networks to understand that not everyone wants all the information about everything they do aggregated together. I use Linked In for one reason, flickr for another, twitter for another and Facebook for a very different reason. My network is different on each although there are overlaps. I want these places separate because frankly, no one in my professional network really cares what concert I just saw or what photos I have posted of my dog. (Of course I say that here, but in reality because of the overlaps in my network across these services, stuff bleeds across and I am not sure how to stop it).

Generational Differences

An interesting point to think about in terms of Identity and Privacy and how someone is presented on the internet are the generational differences that we sometimes see, in addition to the gender differences. Younger women are not as inclined to create facets of themselves as older women. I am not sure what the cutoff is and if regionality plays a role. Additionally, I would be inclined to bet that as these younger women marry and have children, they will start to segment parts of themselves. I think it would be interesting to see if location plays a role as well.

Identity Segregation

The two large areas where I think people still make anonymous profiles or pseudonymous profiles, are around spirituality or religion and politics. Of course, I have no data about this but it would be worth exploring further. There are most likely large groups of women who totally segregate their online activity in these spaces from their professional or even personal generic online activity. These topics can be highly polarizing and despite anti-discrimination laws, people still let their own beliefs and attitudes affect how they relate to others. Subtle and subconscious changes in behavior can happen even when trying hard not to let it.

As more and more companies develop robust social experiences in their products and people spend more of their free time online, the need to have layers of privacy controls becomes even more important.

Issues in Being Open

The other aspect to this identity dilemma lies in the connectedness of information and data across services. As a designer in this space and fully bought into the Open philosophy, I believe that data wants to be free. Data should be owned by its creator (the individual) and should be able to be taken across services easily. The ease with which this can be done, without granular controls – which can hinder adoption and usability – can directly impact the blurring of segregated identity. Therein lies the dilemma. It can’t be solved by one company but should be considered as part of these open initiatives.

There is a certain amount of responsibility that lies on each individual to make sure any segmentation of themselves stays segmented even if it means, for now, keeping up with all the changes that some of these companies insist on making. It also may mean, not using the services of other companies until they add in layers of acceptable control.

Falling off the radar here but not there

I have been super busy lately with client work, presentations and conferences and prepping for an upcoming portfolio review related to my photography work. I have a couple of deep posts about Identity and Using the Social Mania Cards in your work in progress and will get those finished soon but in the meantime, if there is anyone left out there following me, consider coming to one of my upcoming talks or workshops.

IA Summit 2010

Date: April 7, 2010
Event website: http://2010.iasummit.org/
Details: Pre-conference workshop:
Beyond Findability: Re-framing IA practice and strategy for turbulent times — IAI Workshop
Also: Play the Social Mania game at Game Night!
Phoenix, Arizona

German IA Konferenz

Date: May 13 – 15, 2010
Event website: http://www.iakonferenz.org/de/2010/english.html
1/2 Day Workshop: Designing Social Interfaces
Keynote presentation May 14
Cologne, Germany

Web Visions 2010

Date: May 19–21, 2010
Event website: http://www.webvisionsevent.com/
Full Day Workshop: Designing Social Interfaces
Wednesday, May 19th, from 9:00 am to 12:00 pm

Presentation: Go With the Flow
Thursday, May 20th, from 10:45 to 11:45 am
Portland, Oregon

UIE Web App Masters Tour: June

Date: June 7–8, 2010
Event website: http://www.uie.com/events/web_app_masters/philadelphia/
Details: Designing The Social In
Philadelphia, PA

An Event Apart 2010: Minneapolis

Date: July 26–27, 2010
Event website: http://aneventapart.com/2010/minneapolis/
Details: Patterns, Components and Code, Oh My!
Minneapolis, Minnesota

neighborhoods and subcultures in social design

In writing our book, Designing Social Interfaces, we challenged ourselves to creating a social pattern language, much like Christopher Alexander created a pattern language for building and architecture. We have followed the evolution of design patterns but looking back into A Pattern Language, there are some concepts that Alexander talks about that are directly applicable for consideration when designing social spaces.

Architecture is about creating spaces for people. The type of space and how it is created, placed and modeled can directly affect the kind of behavior that might take place in that space. In other words, the space can modify behavior or encourage and support behaviors. Online social spaces should work the same way.

In that light, there are a few of Alexander’s patterns that are worth exploring in relation to online social design.

Early on in A Pattern Language, there are a few patterns that talk about the city, neighborhoods and the cultures that exist and overlap in a city or town. Alexander talks about the division and subdivision of spaces to support and provide havens for these different subcultures.

The Mosaic of Subcultures

Pattern #8 which calls for a Mosaic of Subcultures

“The homogeneous and undifferentiated character of modern cities kill all variety of lifestyles and arrests the growth of individual character”


“Do everything possible to enrich the cultures and subcultures of the city, by breaking the city as far as possible, into a vast mosaic of small and different subcultures, each with its own spatial territory, and each with the power to create its own distinct life style. Make sure that the subcultures are small enough so that each person has access to the full variety of life styles in the subcultures near his own.”

The pattern talks about the division of space to make distinctive areas for these subcultures. The web is a good example of this mosaic. Each site in “cyberspace” is a spatial territory with a unique perspective, offerings and in the case of social experiences it’s own life style and community.

In the creation of a social experience, the builders can take this a step further and provide spaces for each subculture within the context of the parent to create a richer, more varied experience. It’s not much fun if we are all always the same.

Community of 7000
In pattern #12  – Community of 7000 – Alexander states that

“Individuals have no effective voice in any community of more than 5000-10000 persons.”

He cites Athenian democracy, both Jeffersonian’s plans for American democracy and Confucius’s book on government, in support of this. His perspective is based on the size of the community and the individual’s effect on government or lack thereof when a community gets too large. While the focus is on government, I think there are lessons to consider here when thinking about the online social experience.

When there are too many people in a community, especially one that is vocal and active, people will get lost. There is too much noise and not enough good content gets to the right people. Once a community crosses over that critical mass sweet spot, you need to either add tools to allow users to help surface the good stuff, find their friends and create their own sub-groups or you need to calve off areas into sub-sections or sub-groups that may be more formal.


“Decentralize city governments in a way that gives local control to communities of 5000 to 10000 persons. As nearly as possible, use natural geographic and historical boundaries to mark these communities. Give each community the power to initiate, decide and execute the affairs that concern it closely…”

Giving your users the ability to create their own groups as needed helps keep them engaged and part of the community since they are actively creating their own version within the space you have provided.

For example, Flickr allows people to create groups around any topic – location, type of image, type of camera, whatever. As groups get so big that you can’t keep up with the number of images flowing by or conversations being had, the tools allow the group creator to gate the number of images posted or to limit the number of users or to create other rules that filter and help surface the contributions by the community back to the community. Additionally, at any time someone can come along and create a new variation on the group or create a private group which keeps the numbers manageable.

In our book, we have a principle that we discuss called Deliberately Leave things Incomplete. This principle reminds site designers that while they can design a framework for interaction, they cannot predict and shouldn’t predict every interaction a social community will have. The designer needs to think at the meta level and allow the participants of the community to define and design their own engagements and interactions. In other words, they create their own lifestyle and execute their affairs that concern them, all we do as designers is give them the space in which to do it.

Alternatively, we can consider adding tools to squash the noise, allow the good to rise to the top and still keep the numbers of people involved large. Things like ratings and recommendations will both address this in different ways. Ratings can help push good up and bad down. The downside, though, of ratings is that lots of people always rate everything high or always rate everything low. So consideration of your context will be important before implementing ratings. Inevitably, ratings are much more meaningful when combined with reviews which then give them context.

Recommendations based on an algorithm and user or content reputation can help people find the needle in the haystack or discover something new that they weren’t necessarily looking for. This combination of features is much more complex to develop and takes longer to fully realize as there are several types of factors that need to be in play—enough content to mine, enough activity to infer quality content attributed to a specific person, mechanisms to indicate quality, like sharing, ratings among others and secret sauce to accurately predict options. This type of approach can be so hard and complex that sites like Netflix recently held a contest with a million dollar prize to the best and brightest computer scientists to create a better recommendation algorithm. On the other hand, this approach has the potential to provide really meaningful, contextually relevant, information to a person which in turn drives loyalty and activity.

Identifiable Neighborhoods
Pattern #14 In A Pattern Language calls for there to be an Identifiable Neighborhood in the town or city.

“People need an identifiable spatial unit to belong to.”

If the web is akin to the mosaic of subcultures in a city or town, then your site is a neighborhood and as such should be identifiable in a way that allows people to belong to it. People should be able to have an affinity – through interest, passion, background etc. to the offerings of your social service. The social object – the thing which draws people together and around which they interact, communicate, build relationships etc. – should be clearly articulated. It’s not about building social for social’s sake, but to create a “there” there.

Once you have a stake in the ground around your social object, you need to think about the kinds of activities that would revolve around that activity. What are people already doing? What kinds of activities naturally want to happen? Let the answers to these questions help define the features that you implement. Keep in mind too, that the social object and the kinds of activities that you support will help define the subculture that will emerge on your site. Different activities are going to draw different kinds of people depending on the level of participation required to be involved.

The decisions around the activities that are most appropriate will also help guide how and when to grow.
These are just a handful of the patterns in Alexander’s book that focus on architecture and how buildings come together to form cities and towns and spaces for humans. As we evolve the online experience, we can learn from some of these lessons and apply these same concepts to our social digital spaces keeping in mind that the design of the space can modify behavior.

There are several other patterns in Alexander’s work that I believe are directly applicable as well and will dive into those in a future post.

The Questions We Ask

A couple of weeks ago I gave the 5 Principles, 5 Practices, 5 Anti-Patterns talk to the IxDA Los Angeles group. It was a great group of people and they asked me some really tough questions at the end of the talk. I thought some of them were so good, I have been thinking about them since and wanted to share more thoughts about the ideas.

1. We are now seeing lots of people online and using sites like Facebook. People are living out their experiences online and sharing all sorts of things  – pics, comments etc. What do you think about the fact that people are now realizing that all the things they share online can be found and seen by prospective employers, by spouses, by parents – sometimes long after the original events occured? How do we as designers, let people know that this can happen, that what goes up is hard to control once it is free on the internet, and how should we be thinking about giving people controls over their content?

I think this was the gist of the question. In general, as discussed by danah boyd in many of her talks and research papers, and discussed in our book, we are seeing this sense of Many Publics. We are also seeing the evolution of attitudes and behaviors and generational differences. What is shocking to our parents, our bosses etc.,  like finding the pictures of our coworkers or prospective employees partying like idiots when they were in college, is not as shocking to the younger generation. What we may have deemed youthful indulgence, when heard about in an anecdote, was not visible for all in the past, non-online life, but today these experiences will eventually have to be re-categorized and put into their appropriate place even if they can still be retrieved instantly with the flick of a mouse.

Everyone is stupid when they are young. We do dumb things. We used be able to leave those things in the past as we grew up. Our personal and our professional lives could be kept separate. Today this is much harder as more and more people are coralling their network across various contexts in the same spaces – like Facebook. I believe that the generations up and coming, who have lived their whole lives online, will have a better attitude about the blurring of these public, private, youthful, professional lines than those of us who spent part of our life living one way and now another.

As designers and creators of social spaces, we need to educate people about the visibility of their images and words. We need to remind people, in polite and gentle ways, that what goes up on the internet often takes on a life of its own and is often difficult to remove later. I know I can find postings to email lists from 10 years ago through google.

Additionally, we need to make sure the tools to manage contexts and circles of connections are available and understood by users. This doesn’t mean having everything always up front and center – the complexity would kill any usability – but the tools should be easily accessed, easy to use once found and learned and control over who sees what, when, should be always available to people.

2. How do you know which social patterns to bring together around a particular social object? Which will work best and why?

This is a really good question. We have almost 96 patterns and proto-patterns in the book and a design team shouldn’t and can’t use them all. I reminded the audience to think about their users and to think about what it is that people do around their social object traditionally. What I mean by this is, what behaviors are people already doing. For example, if travel is your topic,  think about how people research travel today. If it’s knitting, what do people already do on or offline. Who do they talk to, how do they find new yarns, new patterns, new ideas? What do they do with items they have made, how do they share successes and problems?

Most things that people are interested in have an offline life (unless all you are interested in is online games, designing online and other tech related things).  Remembering to look at the obvious and then look at the social patterns that support the most basic of these behaviors. This is what you should start with and then support those interfaces with related patterns. This can help constrain what is designed and built allowing you to start simple and grow as needed or as your customers demand.

3. Do you work with marketing when designing social interfaces and experiences?

A little unpacking of this question reveals that the person asking was really trying to understand how a site that sells something can utlize social features to not only create an interesting social experience but also market to it’s users in meaningful ways.

I would think back to question 2 and what behaviors people already have around the topic and support those. Additionally, I would consider the features that provide the most viral impact in the least annoying manner to get the word out about your product or your service. Christina Wodtke talks a lot about Viral Distribution in her talk from Web 2.0 (start at slide 95) and she reminds us that in order for things to go viral we need to make sure that the ability to share and distribute is FRICTIONLESS (it’s got to be easy, drop dead easy), it must be AT HAND (it has to be readily available and convenient, everywhere that makes sense),  it must be IMPACTFUL (meaning you need to get bang for the buck. If you are going to spend time and effort creating a viral tool, it needs to be worth it), it must be TARGETED (the tools need to be available to the right people at the right time), and must support OUTREACH (does it have a broader life beyond the simple share, can it be rebroadcast or aggregated for even more reach).

When thinking about social patterns to support and encourage social behavior, the needs of the business must always be considered. This balance can be tenuous and sometimes can sway too far one way or the other to the detriment of the business or to the detriment of the community. If it’s all about selling or marketing then eventually the community will falter and if it’s all community at the expense of the core product or business supporting the community then that doesn’t generally make good business sense.

People need to remember that for some sites, tools as simple as sharing from one reader to a prospective reader, may be all that’s needed.

There were more really good questions asked that I will recount here in a future post.

Unintended Side Effects

I have been presenting the material from our book over the last several months and have been asked questions about some of the anti-patterns and how we avoid or solve them. Most recently at Web 2.0, I was talking with a bunch of smart, interesting people and a few things have bubbled up that I think are worth poking at that we need to pay attention to as “social” becomes more ubiquitous.

Issue 1: Authentication Service Hell
The first is the UI and conceptual quagmire we have inadvertently created through the pushing of OpenID. We (the large internet developer/designer We) have been pushing to protect people from the password anti-pattern and from ID/password fatigue. This is a good thing and we still have a ways to go to finally have people stop taking this shortcut. But, as a result we have OpenID, and have options from many different providers. And now we have Facebook Connect and Google Friend Connect and who knows how many other options will appear before it resolves into something understandable.

Bragster login - from Chris Messina - http://www.flickr.com/photos/factoryjoe/4108699332/
Bragster login - from Chris Messina - http://www.flickr.com/photos/factoryjoe/4108699332/

Now when I go onto a site, a site wanting to embrace open standards, a site committed to allowing their users to sign in with authentication credentials they already have, I am assaulted by a thousand logos and options, usually in addition to the ability to create a new account. Chris Messina, labels this the Nascar problem.

This new world is almost as bad as the problem it was trying to solve, especially for a less tech saavy person. The potential dangerous, security side effects are dealt with but the confusion and uncertainty of what is happening and how it all works still remains. I consider myself an early adopter and I am overwhelmed and don’t always remember my OpenID or other logins and it isn’t always clear how logging in with my Yahoo! ID on a non- Yahoo! site isn’t logging into Yahoo!

I am not clear on what the answer is, my team worked on the OpenID implementation at Yahoo! and we struggled for months with just the provisioning half of the equation. That said, I think we need to think long and hard about how we implement these solutions because in our effort to make things clearer and easier for our users we have created another, equally confusing (although safer) problem.

If you have ideas, there is an OpenID User Experience list for just this discussion. And it’s definitely a space that needs more design thought.

Issue 2: Location Hide and Seek
The second thing that I have been thinking about are all the applications launching for the phone that are utilizing the intersections between the social graph and the geo features. Lots and lots of cool things people are trying out and experimenting with which is fabulous and should yield new ways of thinking about self and location and devices. But from a safety consideration viewpoint, we are teaching people, especially young women, to share their whereabouts with everyone they know and sometimes don’t know, all the time. Can you say stalkers-r-us?

Loopt - location display
Loopt - location display

And from another aspect, we are also telling people when we are not at home. It’s only a matter of time before some tech saavy burglers figure this out and start ripping people off who are tweeting or foursquaring that they are in another state or across town or on vacation for awhile.

Not enough of these apps have enough security features and privacy filters built into them yet and if they do it’s not clear where they are and how to activate them when mobile. We spend a lot of time worrying about the phishers and the online scammers and even to some extent, online stalkers, but as soon as it moves into applications with offline capabilities, the stakes increase exponentially. I expect we will see more experimenting while audiences and adoption is small but once one of these apps becomes more popular and hits scale, these kinds of concerns will have to be addressed. It’s easier when to play with ideas when there isn’t scale.

It will be a fine balance between ease of use and providing functionality for users to be able to filter as they see appropriate. How granular is enough? When is it too much? We know people won’t/don’t go into preferences so considering the defaults that marry a nice balance between the needs of the business with the privacy and security concerns of the people becomes even more important for consideration.

Web 2.0 NY – Designing Social Interfaces Workshop

I attended Web 2.0 NY Expo this past week as a workshop presenter. I took the talk that Christian and I did at IDEA 09 and that I did at IxDA SF and fleshed it out into a 3 hour, hands on workshop. I believe it went well. workshop attendees workshop attendees working on an exercise Here are my slides:

One the new things I did, was take leftover cards from the Social Mania game and use them as flash cards (our original idea). I gave each participant a set of cards – each with 3-5 social objects, a demographic, a couple of principles, patterns in each category and an anti-pattern or two. These cards were then used by the group to create and build a product around, or the teams could use a real world problem if they chose.

Each section of the workshop used some of the cards and built on the previous section. The physical objects provided direct things to talk about and created an immediacy for discussion. At the end of each exercise one or two groups presented what they were building and answered some questions related to the section we had just completed.

The other thing I noticed about using the cards was they acted as a social lubricant for groups of people who didn’t know each other. The cards have a lot of uses beyond the game and make a nice companion to the book for brainstorming with teams or with clients or with engineers or whoever you are working with on a social project.

I want to evolve the cards into a set of flash cards as well that we can sell, give away or even potentially bundle at some point. I think it takes these abstract concepts from the book and puts them in a form that is physical and tactile and in some ways, even though the content is the same, brings the ideas to life in a way that reading just doesn’t do.

Anyway – thanks so much to all the people who attended my workshop and participated eagerly. Your participation made it so much more dynamic and interesting than I could have planned on my own.

Speaking about social interfaces at IxDA SF

Last night I spoke at the IxDA San Francisco October event. I did a little longer version of the talk than what Christian and I did at IDEA09 and I think it’s a better talk. The expansion riffed off what Christian did in Australia and is the beginnings of the framework for the workshop I will be doing at Web2.0 NY in November. This was the first time I did the talk by myself and it seemed to go really well. Folks seemed very interested in the material, asked a lot of questions and generally were very responsive. I gave out eight books and a lot of cards. Folks asked great questions and I ended up chatting with people for over an hour afterwards.

The event was held at the Armory – home of kink.com – and we ended up not playing the social game because everyone was getting tours of the armory. Hard to compete against that – since it’s a private company, people don’t often get to see the space and the sets.

I want to thank Aynne and Josh, who planned the IxDA event and Erik Gibb for hosting and being so incredibly organized. I had a great time and these guys made it so much easier.

Look for an announcement of a Game Night coming soon – we plan to have an IxDASF night to play Social Mania sometime in the next couple of months.

Diagramming the Social Ecosystem

One of the things we have been doing since way before we started the book, was to visualize the social ecosystem and the inter-relationships between categories, patterns and principles. Back in 2007, when I was still at Yahoo! and Bryce Glass was on my team, we developed a diagram for our general manager to talk about the social platforms we were developing and how they worked together.

Christian and I took that diagram and modified it a bit for our Core Conversation at SXSW 09 [pdf] and handed it out to participants.

Since then we have sketched out a variety of ideas, even trying to show some differences in the Enterprise.

But so far nothing really hit the nail on the head. The diagram granularity was uneven and we have been having difficulty figuring out how the principles and anti-patterns fit into the scheme of things.

I have collected a bunch of interesting diagrams into a couple of galleries on flickr to spur ideas and to see how others visualize these same or similar concepts. Additionally, I have been grabbing models off the web that I have found inspiring [see slideshow at bottom of this post].

Christina Wodtke has created an interesting diagram [slide 36] that grows and contracts depending on the scale of discussion. And I like it a lot, but it isn’t clear how to work in things like principles and anti-patterns. I also think some of the concept placements could be tweaked a bit – there’s that level of granularity issue again.

Today, however, I was reading an interesting book online through the Safari feature at O’Reilly and I came across a very interesting diagram. And it hit me, that this would be a great start to visualizing our ecosystem. It’s not as sexy as the diagrams Bryce has done with all the little people, but it has the potential to show all the levels I want to show. So I sketched it out and as I was sketching it, I figured out that the Principles could be shown as a revolving set of ideas around the core and the Anti-Patterns could be shown as if they were trying to get at the core but being deflected by the principles. And in a way they do play off each other this way – if you keep the principles in mind when representing the core, then decisions that would create an Anti-Pattern are easier to make or become non-issues. The diagram also takes all the patterns into consideration as text nodes off each category which then maps to one of the overarching concepts. This categorization is the same in our game and on the wiki.

The diagram may not be 100% there – I have come to the conclusion that no diagram can show it all because of the fact that concepts live across clusters, concepts and patterns often live at different levels of scale with different ramifications and it just isn’t this clean. But I think it’s pretty close and usable as talking document when trying to explain all these crazy relationships.

Social Ecosystem diagram 2009

Image 1 of 16

Social Ecosystem diagram by Erin Malone. Structure evolved from a diagram by Nancy Duarte in the book slide:ology:

Unveiling Social Mania: The Game at Idea 09

What a rush!

As part of our (mine and Christian Crumlish) presentation at Idea 09, we were presenting from our book: Designing Social Interfaces – 5 Steps, 5 principles and 5 anti-patterns. The talk went well but the big deal was unveiling and playing the game.

While we were writing the book, we had discussed doing a set of Pattern cards. Like flash cards. Or the IDEO cards. Pretty cool idea and the patterns are perfect for cards. So I started to develop them and create the production files for them.

As I was designing the cards, I thought how much more interesting these would be if they were more interactive; like a game. So I started to research game design. In my travels I came across a most interesting PhD thesis in which the author had designed a game to teach game design. Called GameGame, this information was exceptionally helpful in fleshing out the design of the game – the material forced me to think about outcomes, about goals, about the end state, about points collecting and competition – in addition to what I hoped people would learn from a game where they build a social product. Additionally, I read everything I could find from Amy Jo Kim and her game mechanics papers and presentations.

I started by making a list of notes of ideas, things like:

  • Games tap into primal response patterns
  • Games engage us in flow
  • Game mechanics in social
  • Collecting – bragging rights, completion
  • Points – game points by systems, social points by others, drive loyalty, drive behavior (Leaderboard), punctuate game experience by unlocking new powers or access
  • Feedback – social feedback drives engagement, accelerates mastery and adds fun
  • Exchanges – structured social interactions – explicit or emergent/implicit
  • Customization – character or interface

I asked a lot of questions:

  • How do you earn points?
  • How do you get feedback?
  • Where do you have exchanges?
  • What do you collect?

Once we had finished the book draft we knew we had very large list of potential elements to work with. These included:

  1. 96 patterns
  2. 43 principles and practices
  3. 5 anti-patterns, 6 if you count Leaderboard

The other elements that needed to be accounted for in a product included:

  1. context – how is it delivered
  2. social objects – or need
  3. demographic – who is it for?
  4. anti-social behaviors – how do these come into play?
  5. rewards – things like early adopter and good press cards – how can I use these?

Then I started to flesh out some of the process of gameplay – ending up with a lot more questions.

  • draw an object card
  • draw some combination of pattern /principle card
  • can a player discard and redraw?
  • collaborate with others?
  • combine cards?
  • trade cards?
  • trade with other teams?
  • how do the anti-social behaviors come into play?
  • what about the good things – moderation, good press.
  • what is the end state – is there an end state or goal set of cards too?
  • Do teams trade with other teams to get the cards needed to complete a product?

I then took these questions and an excel spreadsheet of the patterns, principle, antipatterns and other elements to my good friend Matt Leacock to get his help in wrangling these ideas into something playable. Matt is an award winning game designer and interaction designer. We brainstormed and sketched some end states. He took everything away and came up with a set of draft rules for the game.

sketch of how pattern cards could be put together in a game
sketch of how pattern cards could be put together in a game
Picture 18
schematic from sketch of different card types coming together to make a product

While he was drafting rules, I sketched out some more diagrams of what an end state might look like – from the pencil sketch we did at lunch. Looks pretty complicated but isn’t far off from where we have eventually ended up.

Once we had a draft set of rules, I had to finish the production of a draft set of cards.

I started out with the cards at 6×4 – thinking flash cards. But then I started to look into the prices for printing and soon realized that this size, for the quantity of different cards we potentially had, was totally unaffordable. So I started to look into trading card size – 3.5 x 2.5. A lot more options for printing – most still too expensive but a few on demand options that seemed relatively reasonable.

draft game cards
draft game cards

Taking the card sizes down, meant an edit on the content for every card. So while Christian and I were editing and proofing the manuscript for the book with our editors, I was cutting and pasting text into Illustrator and in some cases re-writing the patterns, principles and anti-patterns to fit the small size. I had already decided to cut the content down to the simplest form: What and When for the patterns. Figuring people will have to buy the book to get the how and all the examples.

I printed a set of cards on my large format printer (app. 25 up on 17×22 sheets) and hand cut the set out. I was able to print front and back so made a draft – Alpha – set of cards.

Meanwhile, Christian took a PDF of all the cards and printed the text sides and then took them to Overlap to have folks think about imagery and potential clustering for a poster idea we have.

We then took the draft rules, the Alpha set of cards, a couple of volunteers – thanks Brynn and Brendan – and we play tested the game. We discussed a lot of the mechanics as we played and the biggest thing that stood out was that there were too many cards. It was impossible to get the cards needed to create a product in the giant deck. We discussed breaking it into 4 sets of cards. We also discussed how the cards could go together.

Draft game cards with rules and notes
Draft game cards with rules and notes
Game play and points
Game play and points

When Matt and I had been discussing the game, we talked about symbols along the edge of the cards to match up to symbols on the feature cards. I wasn’t sure how that could physically work given the size of the cards and the sheer number of categories. When we played the game though, it was clear there needed to be some mappings and the triangle, circle, square mappings emerged.

While the game was definitely designed for multiple teams to play, we were able to play it with 4 people. Once we finished, I came home and went through the notes. I amended the game rules to account for the issues we saw and added elements where we thought things were needed.

I went through the set of cards and did a cull to remove redundant or similar type patterns, and ended up removing over 50 cards.

Over the next couple of weeks I thought about the game play as I finished doing the card production. I sent the cards off to be printed – 4 up on 5×7 (cheap overnight prints for 5×7 cards) and a week later 4 giant boxes showed up on my doorstep. Next I had to have the cards cut, so I had that done locally. In the meantime, I had found a nice, gusseted clear plastic, string bound envelope to package the game in and ordered some stickers to put on the outside to brand it.

Cards needing to be collated
Cards needing to be collated

Once the cards were here, I had to collate and as I was thinking about that, I realized that 4 decks was going to be insane to play with so I ended up collating into 2 decks, interspersing the lucky cards and anti cards into each deck. The large deck features all the patterns (or features) and the smaller deck is the product particulars (who is it for, how will it be delivered and what is it about) or rather the social object, the delivery, and the demographic.

Starting over labor day and working on a few sets every night, then finally getting some help, I was able to put together 45 sets for IDEA 09.

At IDEA09 we played the game with two teams to see how it would go. It was great fun and I took a ton of notes from both watching what was working and from the questions and feedback from the players. The feedback helped craft a revised brief – quickplay – set of rules that we shared with folks at the conference the next day and gave me ideas for what needed to be clearer from a design standpoint on the cards.

So at the end of our presentation [great post from MaRS blog on our talk][recap of day 2 of IDEA on Johnny Holland], we  set loose the people and the decks of cards. Note to self: explain the rules and the goals to people before setting them loose. We had promised Russ (the conference organizer) chaos, and boy did we deliver. It took an extra 15 minutes or so to explain the rules and goals of the game than it should have because once people got the game cards and were in their groups, they started talking and looking at the written rules rather than listening to me or looking at the Quick Play rules that I had up on the projector. Thank goodness we had several people from the night before interspersed on team, as they were able to help explain how to play.

Playing Social Mania
Playing Social Mania
Two teams playing Social Mania
Two teams playing Social Mania
Playing Social Mania - building a product
Playing Social Mania - building a product

Once things got going it was pretty amazing to watch. Several teams were totally out for points and not really caring about product quality, until we reminded them that quality, a well balanced product tapping into the three main categories of Self, Activities and Community, would rack up extra points. Some teams were very thoughtful, discussing every feature as it would apply to their object or demographic. It was amazing to watch and see it actually working despite the chaos.

We discovered the night before that there were not enough delivery cards to map to the object cards, so people were allowed to wing it with post it notes or to reuse the cards once they shipped a product. Once we explained that negative cards could be played on someone else’s product it got really interesting and teams against teams really started to emerge.

It was fascinating to watch and take notes and just see what was working and what was still awkward. Lots of people came up afterward to give feedback and between the observations and the explicit feedback, I have made some changes to the cards. There is now a new set available for purchase at The Game Crafter (a print on demand game publisher). I want to thank everyone for playing, for giving us feedback.

Next steps are to see how this new version plays and to figure out how to bring elements of the game into presentations that are more auditorium focused – like my 3 hour workshop at Web 2.0 NY.

The Book is on the press

Designing Social Interfaces book cover
Designing Social Interfaces Front Cover

Designing Social Interfaces - Back cover
Designing Social Interfaces - Back cover

Designing Social Interfaces:
Principles, Patterns, and Practices for Improving the User Experience

by Christian Crumlish and Erin Malone

This book presents a family of social web design principles and interaction patterns that we have observed and codified, thus capturing user-experience best practices and emerging social web customs for web 2.0 practitioners.

Pre-Order the book from Amazon

Can’t wait until September? Get a rough cut (and we mean rough!) copy now.

Contribute to the companion wiki with new patterns, comments, examples and your ideas. You’ll find most of the patterns and other related material.

Check out the screenshots from the book in our flickr stream

Join me at IDEA2009 on Sept 15-16

A couple of weeks from now I will be attending the IDEA conference, put on by the IA Institute, for the first time. Over the years I have heard about the previous versions of this conference but was never able to attend (working for the man, I was only allowed one conference a year and inevitably used my slot to attend the IA Summit). So I am extremely fortunate to be not only attending this year but speaking as well.

What is the IDEA conference?
The IDEA Conference is about how to create experiences in a world where tangible and virtual are converging. And not just in a lofty way, but in a practical context for professionals who need to understand this convergence. Where are you seeing convergence in your job or life?

Our Presentation:
Christian and I will be talking about the concepts in our book, Designing Social Interfaces, and sharing some of the patterns, principles and anti-patterns that make designing this space so interesting. Additionally, we have a second slot where we will be asking the participants to join us in playing a game: Social Mania – crafted from the materials in our book. The game is still a beta, it will be fun and entertaining, and hopefully folks will give us insights to make it even better and more fun to play as a game and brainstorming tool for teams.

For the last year, Christian and I have been researching and writing our book. The book, comes out of several years on both our parts, of practical experience designing social spaces and social interactions plugged into Yahoo! as part of the Platform team there, as well as for other people along the way, including AOL and AltaVista.

Over the course of the past couple of years, the taxonomy which provided the seed of the book, has been workshopped, discussed at bar camps, been manipulated and data exchanged with other people who care about this topic and eventually crafted to become the outline for the book. This in turn has been iterated and needs to continue to be shared with the community.

We approached the content, the interaction design patterns, as a language in the Christopher Alexander Pattern Language mold and only through iteration, conversation, sharing and use is the language alive and vital and continually evolving.

An Awesome Speakers List
The list of speakers looks amazing and I am honored to be part of the list.
Some of the other speakers include:

Luke Wroblewski – who always gives good talk.

Lisa Reichelt – who has been doing good things in the open community.

Lisa Galarneau – I am personally looking forward to hearing her presentation: Think Water, Not Data: The Nature of Social Experiences Online. She has piqued my interest through her mention of indigenous cosmological myths and folklore as a basis for finding metaphors to support and understand human behavior in social spaces—even online.

Christina Wodtke – who will teaching us about radical architects.

Stephen Anderson – Always a good speaker who know how to educate and entertain at the same time.

Of course, I am excited about having a room full of people play our game.

Thomas Malaby – is talking about Making Virtual Worlds: Games and the Human for a Digital Age. He delves into a space I am only just learning about but know there is a lot to learn that is applicable to even the most tame online tools with social features. Should be interesting.

There are other speakers whose presentation descriptions look really interesting and I expect that I will learn alot, see things in new ways and come away with more information to enhance my practice designing social experiences.

Who’s In?
I am excited about meeting new people, making new friends and further enriching the relationships with my friends from across the internet.

Will I meet you?