Yahoo! design pattern library & social patterns

These were notes taken live, so they will contain errors, omissions and ridiculous typos.

A Brief History of Patterns

Architecture

Christopher Alexander, A Pattern Language

Originated in the 1970s.

Also A Timeless Way of Building

YOu can plan whole towns and buildings through recognising a series of patterns that are replicated the world over. Applies to a number of architectural problems. Trying to demystify architecture. A Pattern Language implies that there are others.

Didn't take off in the world of architecture. Alexander is not respected by contemporary architects.

Software Engineering

Design Patterns by the Gang of Four

The concept of wikis originated here. Ward Cunningham developed wiki to put a pattern repository on line (Portland Pattern Repository).

The ideas coevolved.

User Interface

Designing Interfaces, Jenifer Tidwell

Apply this to the presentation lay. Proposed at a CHI conference.

Originally a website. It's now an O'Reilly book.

Yahoo's Pattern Library

The Yahoo! Design Pattern Library launched in 2005.

Built in Drupal. They have a boxes and arrows article that explains how they did it.

Opened to the public in 2006. Bill Scott (AJAX evengelist) succeed Matt as curator. Curated rich interaction patterns.

Came out as a sibling to the YUI. Not always a perfect pattern, but goal is that for each pattern there is a bit of code. But they are different teams.

It's not technically the YUI Library.

Christian is the third curator in 2007. Cleaned it up, keeps it up to date, prevents link rot. Special focus is social patterns.

While shared with the public the library servers as an internal library as well. UX Design group at Yahoo! is decentralized. They work with teams. The pattern library

Yahoo builds their own products and buys other. Flickr and delicious did the same kinds of things but in different ways. Example: tagging (these two sites popularized tagging). Compound interface elements for facilitating a social experience. (You can never solved the tag problem).

Fast Company article. One Company, 100 Designs. Article about Yahoo (2007). Yahoo! looks different everywhere you go. Numerous examples where things were inconsistent for no good reason. Pattern library provides a common basis that people can innovate on top of.

In the early days of any social interface, awkwardness is built in. Unfamiliarity and no social more guidelines

Topsy Turvy movie example - Gilbert and Sullivan shouting a handshake down the phone line.

Network effect - one telephone isn't very useful, but several are useful. Social interfaces are about this as well.

Telephone is no longer attached to a place, it's attached to a person. This is inherently different. Behaviors have to change (e.g. "I'm on the train."). People shouting on the phone may be jerks, or maybe they grew up with a different kind of telephone.

Users of social interfaces need to be trained how to use them. Don't design awkwardness in. Make it hard to spam everyone.

Five Principles

There are obviously exceptions to all of these, but these are general guidelines.

  1. Pave the cowpaths - look at behavior that is already happening and try to facilitate that. Brute force attempts to force people into a certain behavior usually fail. Example: Dogster was originally a photo sharing site. People were uploading photos of animals, so they reinvented their business plan. If they had tried to discourage this, they would have killed off a profitable business.
  2. Talk like a person - Web copy should be conversation. This sets the tone for communication style that your users will use. Do not hide that there are human beings behind the site. Flickr is famous for this.
  • Conversational Voice
  • Self-deprecating error messages (take the blame, as opposed to blaming the user)
  • Ask questions
  • Your vs My (Your instead of my creates a conversation dialogue with the user. "My" is asocial - there's only me in the picture. "Your" implies that there is someone saying "you.")
  1. No joking around (It's very tempting to include jokes, but they don't always translate.)
  2. Play well with others - Be open. Embrace open standards, open source, etc. Allow mashups.
  • Embrace open standards
  • Share data outside of the bounds of your application
  • Accept external data within the sphere of your application
  • Support two-way interoperability
  1. Learn from games - Up and comping generations of users are trained on video games, so they have high expectations of user interfaces. There are elements of game dynamics that help people get into a flow state and enjoy what they're doing. There are a lot of small behaviors that can be used outside of a game context. When you design a game you're not designing one static experience, your designing elements of a dynamic experience. The same is true of social sites. People who come into the space are going to finish the experience themselves. YOu may be the architect of the house, but they'll decide how to decorate it. You have to give up some control. Game Neverending by Ludicorp, second product was flickr. Flickr feels a bit like a game. Within flickr people make up their own game. They fostered a game-like culture.
  2. Respect the ethical dimension - Ethics are complicated and you have to balance different goods against one another. But you are putting people together who would not otherwise be together. If you introduce an ax murderer to his victim, you may be responsible and that might hurt sales. (Example: Tagged.com - cheesy, unpleasant site. Ask for email address & password, go through email address book and send a message to everyone in your address book. Checkbox to not do this was below the fold on almost every browser. Plaxo used similar behavior.)

96 Social Patterns

From the Book, Designing Social Interfaces. There's also a patterns wiki and a card came called Social Mania.

Social objects - things that people have an interest in. Friendster & other early social networks didn't have the concept of an object. All you did was traverse the graph (just did this on the UXCamp Europe site). Users of friendster wanted to gather around social objects, so they created fakesters (skiing, Burning Man), which you could friend. Friendster didn't like this because they wanted everyone to be a real person (good principle). Violate pave the cowpath principle. Deleted all their fakester accounts in one fell swoop. Nice to have a third thing you're talking about.

  1. (Representations of the) Self- Give people a way to be identified. Distinguish users from each other. Allow people to pick and choose their own color scheme, avatar. Allow people to express themselves.
  • Engagement patterns - sign up and join
  • Identity patterns - customization, identity
  • Presence patterns - who else is here?
  • Reputation patterns - score, ranking, category, being an expert
  1. Activities involving Social Objects
  • Collecting - least social of activities
  • Sharing - giving things to other people, bread & butter of social networking activities
  • Broadcasting & Publishing - sharing on a mega-scale, less social because it's a one-to-many thing, blogging goes here: more social, but still one-to-many
  • Feedback - rating, comments, voting, favoriting (could also be collecting), interfaces that encourage feedback, this is where the sparking of viral behavior happens, this progresses to people building
  • Communication -
  • Collaboration - highest, richest most complex level of activities, support asking for help
  • Social Media - tools you have to give people for managing a complex, rich system of managing social objects. This gives people a way to 'find the good stuff'
  1. Community
  • Connections - allow people to declare a connection with another person, reciprocal? Tools for finding people? Implicit vs Explicit relationships. What constitutes a connection. This shapes the structure of the community
  • Community Management - establish norms, walk among the human beings, allow people to make choices together, allow people to collaboratively filter content (voting, favoriting), allow people to report abuse
  • Place Geo Location - the best is yet to come, putting these relationships back into actual neighbourhoods (dopplr, tripit)

Five Anti-patterns

These appear to solve a problem, but later on you have to deal with the aftermath.

  1. Cargo cult - Once U.S. left Pacific islands, there was a religious cult to get cargo to arrive (military uniforms, straw planes). Zooomr as example. Nicked much of flickr's marketing and code. Copying but I don't understand why you did it in the first place.
  2. Don't break email - Facebook does not allow you to reply to an email.
  3. Password anti-pattern - see Jeremy Keith's post on the subject This anti-pattern is "breaking down the immune system of the web."
  4. Ex-boyfriend bug - Dodgeball discovered this - kept telling your ex-girlfriend where you were.
  5. Potemkin Village - Fake topic areas that people didn't really create. In the early days of the site, there is not content anywhere. Cure for this is to start with a limited number of forums - just one (and possibly an admin forum). Put everyone in the same room, they'll tell you when it's so noisy that they two rooms. Deadheads on usenet example.

Question & Answer

  • Q: Can we create a pattern library as a large design agency, creating patterns that apply to a broad range of clients?

    A: Patterns wind up being a checklist of considerations. Helps designer implement the design decision.

  • Q: Do patterns stifle innovation?

    A: No, now shut up and do your wireframes. In the wrong hands, they could. If patterns are written and imposed authoritatively, this could happen. Share what other people have already figured out. Save people reinventing the wheel, but free you up to innovate on the edge. Innovate on top of the patterns. Don't take a cookie cutter approach. Experience web developer have the patterns in their head already.

  • Q: Do you see patterns being applicable across devices (e.g. mobile devices & gestural interfaces).

    A: Not necessarily. Some probably do, but all of them don't. The social patterns should because we were thinking about mobile. Gestural interfaces are interesting. I'm not an expert, but I suspect that you can't take a pattern and just map it onto a gestural interface. There is work to be done their. Dan Saffer's Gestural Interfaces is a pattern book on this subject. But for mobile, you should be able to apply a contextual filter on the social patterns and decide which patterns work and which don't.

  • A: Underpants gnomes?

    Q: Anti-pattern.

  • A: Pattern libraries vs style guides.

    Q: The Yahoo! Pattern Library was started as a response to the failure of the style guides. Yahoo! also has a visual specification library. Style guides confused interaction advice and branding. We separated that out. We've had limited success, but it has been successful.