Last night I went to a great talk by Christian Crumlish about the Yahoo! Pattern Library and social design patterns. Christian has a book, co-authored by Erin Malone, out at the moment on O’Reilly, Designing Social Interfaces, from which part of this talk was drawn.
Brief history of patterns
Design patterns – concept of a pattern language originated in architecture in the 70s. Christopher Alexander wrote two books: A Pattern Language and A Timeless Way of Building. He posited that you could do architecture and could plan towns and buildings and rooms and even construction through recognising a series of patterns that were replicated the world over. Once you had discovered them you could apply them to problems. Trying to demystify architecture by recognising that there’s a syntax. Not one single pattern language, just that they had derived a particular one.
Idea didn’t take off in architecture. Alexander isn’t that well respected, but it’s taken root in other fields. CompSci picked up on idea of patterns in 80s, Design Patterns is famous book, pushed idea into dev world. Concept of wikis and design patterns in software and architecture are siblings. Ward Cunningham built Portland Pattern Repository, pattern libraries and collections often maintained in wikis, and the ideas co-evolved.
Jenifer Tidwell, proposed idea of HCI or User Interaction design patterns. Wanted to apply idea to software that involves human begins. She put together a book, Designing Interfaces, and inspired a number of UI people to think in terms of patterns, which influenced the Yahoo! Design Pattern Library, launched in 2005. Internal Yahoo! library. In 2006, decided to make it available in the public at least in part.
Added rich interaction patterns. Idea is you can drop stuff into a page and get it working. Should be able to find the code for each pattern in the Yahoo code library. Not all those links exists, but they try. Crumlish now caretaker for the library and is interested in adding social patterns to it. Yahoo! makes own products and buys companies and a number of the most popular social sites, specially early ones, which are now Yahoo! did similar things in different ways. Flickr and Delicious popularised tagging as a way of letting users add metadata that’s not topdown or hierarchical, but their interfaces are different: comment or space delimiter, compound words or not. Talking a look at that aspects of user interface, compound interface elements that make a social experience. Looking for a language. Also found out you can’t solve the tag problem.
Reason why we have a pattern library is a post from Fast Company, One Company, 100 Designs. Yahoo is essentially one site, but it all looks different. It isn’t just one giant website, but there are numerous examples where things were inconsistent for no good reason, so the pattern library is trying to provide common basis for a starting point so people innovate on top of that.
Social designs, in the early days of social interface, it’s got awkwardness built in because of unfamiliarity, lack of mores, customs and habits that show people how to behave.
Saw the problem with telephones: didn’t now how to use them, didn’t think they needed them, didn’t have a model of speaking to people a big distance away from you and the uses weren’t clear. Network effect is also important – one telephone isn’t useful, you need a network of people to communicate with. Early days of blogging, joke was how do you do business with blogs? Well, how do you do it with telephones. And that’s what these social interfaces are about. You don’t teach them. [I disagree that you don’t teach people how to do business with blogs!]
We figured out how to use a telephone, and the model back in the old days is that you were calling a place and asking for a person. Idea now is that a telephone is attached to a person, so you’re always calling the person with the mobile It’s not that one model is better that the other, but it’s inherently different, which means there are habits which need to be changed. If you can be reached at any time, you need to either let that happen or set boundaries, e.g turn your phone off or not answer late at night. But these things are still being negotiated and not everything has been figured out. E.g. people shouting down the phone, being loud, and it may be that they grew up with a different type of phone, and don’t know how to use a mobile yet.
Users are entering new and unfamiliar situations and they don’t know how to act, or how to behave. So they are going to be awkward, but can try to mitigate that, try to teach people, make it harder to spam people, things like that.
Social patterns informed by the whole web, to inform Yahoo! and if they work, they release them out to teach others. Asked a lot at Barcamps, talked to people, wrote an O’Reilly book. Found overarching principles that should inform this kind of work.
Five principles
Pave the cowpaths. Look at the behaviour that’s already happening and facilitate that, rather than forcing people into behaviour you think is better. Brute force attempts to make people behave in a way that doesn’t make sense will fail. Eg Dogster. When we’re online we’re performing, the computer is between us and everyone else in the network, so we get to chose an identity and perform in a certain way. Dog owners, that’s what they are doing. They are talking about their pets, pretending to be their pets, talking mainly about themselves at one remove in a childlike and innocent voice, and people like it. But interesting thing about Dogster is that when it started it was just a photo sharing site, and one thing they noticed early on was that users were uploading photos of animals, and when you have a social component and let people add the value, it’s easy to decide that people aren’t doing what you want, but what Dogster saw was that people like putting up pictures of pets, and created site that supported that behaviour, then supported other behaviours that people like to do. If they had turned away pet lovers, they would have killed off what turned out to be a profitable business.
Talk like a person
On a social site there you’re trying to create a climate of sociability, it’s all the more important that your web copy is conversational, is human, is about how people really talk. There’s a range here, cases where you want to be more formal, or less. But don’t hide from your users the fact that there are human beings behind the site as well as in the network on the site. Set a humanistic tone. Flickr famous for having a human tone, not a faceless corporation.
How to talk like a person:
* Conversational voice
* Self-deprecating error messages (take the blame, don’t put it on the user or cryptic messages, say that you’re going to try to fix it.)
* Ask questions (creates conversational dialogue with the user, e.g. Twitter “What are you doing?”. It’s just a prompt that establishes a dialogue.)
* Your vs My (If you use Your you create a dialogue. ‘My Yahoo!’ is an asocial thing. If it’s only me, it’s like looking in my filing cabinet, it’s me and my stuff. But something that’s Your, it’s ‘who is the person saying you?’. The way your mind works is that it creates a feeling that you’re not the only person there.)
* No joking around (Tempting, when you want to be conversational, to be jokey. But it doesn’t always translate, as you know from sarcasm doesn’t always work.)
Play well with others
Embrace open standards, technologies, OS etc. What you make will plug into other people’s stuff easily, you won’t create barriers to people building on and extending your stuff. Use standards that are established. Allow the data that’s in the site to be taken off the site and displayed elsewhere, mashed up, etc. There’s almost no way to stop that, as people will scrape, so use XML, Json, microformats, so people can create value around what you’ve done. Have ways to bring data into the system. allow for portability, allow for interoperability. There are exceptions, these are just trends, things you should consider.
Learn from games
One issue is that up and coming generations of users are learning on games more often, on video games. they have high expectations for how rich, responsive and sophisticated interfaces should be. You can’t change enterprise software into a game, but there are elements of game dynamics that help people get into a flow state, and you can get into those things.
E.g. if you gave people a way to collect favourite pages, then you can let them express the collectible behaviour people like.
When you design a game, you’e not designing an end-state, you’re designing a set of rules, boundaries, tokens, a space to play in. Every time you play, it plays out a different way. Social design is more like that, less like creating a device. This is a space where people will meet and interact. People are going to finish the experience themselves. You might build the house, but they’ll decorate it. Give up control, design something that has variables that the users can control.
Game Neverending, by Ludicorp. Very much like a MUD, but had chat element, small graphics, and Ludicorp went ton to make Flickr. It was not a game, literally, but it feels like a game, you discover elements, e.g. hovering over a name to provide a drop-down. Playfulness and discovery. People make up their own games in Flickr, they make badges and award them to each other. Early users fostered game-like behaviour.
Respect the ethical dimensions
Ethics are complicated, you have to balance different goods against one another. There are ethical ramifications behind your choices. You are at least putting together people who might not be put together. You’re playing with people lives, affecting people’s lives. You have to think through the consequences of your choices.
Counter-example: Tagged.com. Once you’ve signed up, they ask for your email address, and if you give them that and your password and say ok, then they spam your address book with a marketing message as if it’s from you. Was clear they were designing it so that users were accidentally “agreeing” to this. Plaxo did the same once. This is ethically questionable behaviour.
96 Patterns
[Nice diagram.] Patterns come in three categories, revolving around ‘social spaces’.
Self >> Activities >> Community
Three stake holders: the owner/designer, the user, the community at large. The community starts to behave like an organism.
Give people a way to represent themselves, and give them a way to customise it, claim their work, identify themselves when commenting, etc. Need to distinguish users from each other, so people can differentiate themselves from someone with same name, for e.g. Colour scheme, avatar, name – all self expression.
Self
Four groups of patterns:
Engagement: e.g. sign-up. to be social you need people and thus they need to join.
Identity: Once they’ve joined they can create an identity.
Presence: who else is here? who else has been here? What have they done?
Reputation: your score, ranking, category, help strangers encountering you for first time understand who you are and what you do
(created flash cards based on the patterns)
User cards, mini-profile, gives basics around the person.
Social objects
Things people have a common interest in, want to discuss or find interesting. things they rally around. Early social networks didn’t have that concept, e.g. Friendster. So there was a ‘so what’ moment. You’d join, find friends “traversing the graph”, you’d add them, and then you’d collect everyone. And at some point you’d go “Ok. Now what? What do I do now?”, and there was noting to do. You could talk to them, but you could do that anyway.
Friendster wanted to have ability to gather round common interests. They created Fakester, e.g. a person like Santa, or an inanimate thing like skiing, and through that connection had created symbolic way to form identity around an object or activity. Friendster didn’t like Fakester. Not necessarily a bad thing, making people use real names has a benefit to some extent (me: not always), but they violated the Pave the Cowpaths principle, and they deleted all the Fakester accounts all at once. Massacre. Friendster had a big scaling problem in their architecture but he big decline was when they kill the Fakester off. So you need not just people but also objects, e.g. photos, or freeform objects/topics people can decide for themselves.
Actions
Give people something to do.
Collecting: which is least social, most passive or individualistic thing you can do, but it’s a starting point. E.g. favourites, bookmarks, adding to a page. Small social element there, if i collect something you made. IF i display that collection it says something about me.
Sharing: bread and butter of social network. Giving stuff to each other.
Broadcasting and publishing: sharing on a megascale. Facebook is bad at distinction between broadcast/individually targeted behaviours. Blogging seen as 1-to-many, which is why blogs don’t always foster communication and conversation.
Feedback: comments, rating, voting, favourites (again). Asking for feedback. Feedback is where you get more viral and exponential behaviour.
Communicating Comes later, after collecting, sharing etc.
Collaboration: managing, voting, editing, wikis.
Social media: Following filtering, recommendations, helping people find stuff and sort out what’s good, recent, etc.
Community
Last three are all community. Let community elevate people and content they value. Allow people to moderate itself, within reason. Selfish reason for self-moderation – third party mod doesn’t scale, can never hire enough moderators. Have to make community responsible for quality of the content. Has to police itself, set its own rules within boundaries. Not totally hands off, have to establish clear norms, important in early days to model good behaviour, participate in the community to show people what the community should look like .But want to create mechanisms by which people can manage it for you.
Connections: Relationships, finding people, friends. Declaring a connection between people, what types of relationships you want to support, do they have to be reciprocal or can they be one way, or only one way? Can people find people or do they have to traverse the graph manually. Do you have implicit and explicit relationships. Can you algorithmically determine if people are in same groups? Can you use that info to create implicit relationships. Fans and fame, one to many relationships. What permissions and authorisations are implied by connections? Should they be announced in an activity stream? But do you announce when people stop being friends?
Community management: Rules, establish norms, manifest in your own site and show people how you expect them to behave, give people way to decide what should happen, e.g. Craigslist. Asked the community to discuss what they should charge for to make it tenable. Give people ways to collaboratively filter information. People need to be able to report abuse.
Place, Geo, Location: mapping, face-to-face meetings, calendaring, geo-behaviours. Just scratching the surface of all this. This is a growth area.
Circles of connections – pre-defined or user-defined groups for permissioning purposes.
Public conversation – e.g. Facebook walls. Curious and interesting thing, as people talk to each other who don’t know each other talking on a third person’s wall. Twitter is all public conversation.
Enable a bridge to real life events. Let people do stuff in person too.
Anti-patterns
Noticed there are certain behaviours used repeatedly that are anti-patterns. Something that seems like a good idea, but has negative consequences. Appears to solve a problem or is a shortcut, but has an aftermath.
Cargo Cult: During WWII in Pacific, US would set up landing strips to supply the troops. In natural course of things, western goods would appear on the island, and the more primitive people on the island liked these goods, but when the war ended the US left. So religious cargo cults sprang up, so war uniforms, making effigies of airplanes and towers, did what air traffic guys did, to try to draw new cargo.
In social media, good e.g. is that after Flickr, Zooomr tried to do the same thing, nicked a lot of copy, and decided the lack of an E was the big thing. Just copying without understanding why. May get the right things but may not know why, or ever understand what bring success.
Don’t break email: Lots of email notifications, but the problem is when it’s used as a one-way medium, e.g. if you have noreply@facebookmail.com, and you may not even get a bounce message back. Trying to make people go back to the website to look at an ad, but it’s still not good to break email. Basecamp let you reply, above the line, and it’s added as a comment to the thread. You don’t have to break email. Build on existing infrastructure – work with it not against it.Don’t break users’ existing habits.
Password anti-pattern: Asking for people’s email and password so you can spam their mailbox, or even just help you get your friends list out of the email contacts list into the new social graph. But it encourages risky behaviour as you shouldn’t be giving your password away
Ex-boyfriend bug: Dodgeball discovered this, when “The ‘people you should know’ list on Facebook is actually a list of people you hate.” – Rex Sorgatz. Algorithms show people you should connect with, even though there’s a reason you may not. Algorithm doesn’t need to know who is your ex, but needs to allow you to block someone and say ‘never show me this person or tell them about me’.
Potemkin Village. Settlements in Russia, Potemkin told Catherine that settlements in Crimea were going really well, but it wasn’t, so when she insisted on visiting, he created a series of facades and shipped peasants town to town to create the lie. Don’t create forums and discussion areas and map them out. In first early days of alpha, there’s no one there, and so if there’s a lot of fora, you won’t find people so creates a barrier early on. Cure: start with very limited number of fora, even just one or two. Put everyone in the same room. Odds are your initial community is small, and they will tell you when they want more space.
[There was a short Q&A afterwards. I didn’t capture it, but Jeff Van Campen’s notes did.]