IDEA09 - Designing Social Interfaces: 5 steps, 5 principles, 5 anti-patterns


Published on

In this presentation we share a family of social web design principles and interaction patterns to help user experience designers and strategists grapple with the social dimensions of their products and services. The family of patterns, principles, and practices provides a framework and starting point for the conceptual modeling of any interactive digital social experience.

We've observed and codified 96 patterns thus far, capturing user-experience best practices and emerging social web customs for practitioners. We won't present each pattern in detail, of course, but we will introduce the conceptual clusters of patterns [the 5 steps], and share fundamental principles [the 5 principles] and deceptively appealing anti-patterns [the 5 anti-patterns] in context through discussion of illustrative scenarios.

The presentation was followed by Social Mania - the game - an interactive game playing session.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Designing social is hard - It’s different - It’s new -It’s everywhere
    Old - computer - person
    New - computer - person - another person
    Humans are complicated
    Interfaces can’t predict and shouldn’t predict their behavior
    Designing frameworks and generative environments

    Agenda - 5 steps, 5 principles and 5 anti-patterns
  • Give people a way to identify themselves and be identified.
    Personas - erin malone - sports star, writer, singer, IA/UX person, which is the erin malone presenting this talk?
  • Identify others and identify self (claim)
    Personas project at MIT
    Personas is a component of the Metropath(ologies) exhibit, that was on display at the MIT Museum by the Sociable Media Group from the MIT Media Lab & was created by Aaron Zinman, with help from Alex Dragulescu, Yannick Assogba and Judith Donath.

    You enter your name, and Personas scours the web for information and attempts to characterize the person - to fit them to a predetermined set of categories that an algorithmic process created from a massive corpus of data. The computational process is visualized with each stage of the analysis, finally resulting in the presentation of a seemingly authoritative personal profile.

    In a world where fortunes are sought through data-mining vast information repositories, the computer is our indispensable but far from infallible assistant. Personas demonstrates the computer's uncanny insights and its inadvertent errors, such as the mischaracterizations caused by the inability to separate data from multiple owners of the same name. It is meant for the viewer to reflect on our current and future world, where digital histories are as important if not more important than oral histories, and computational methods of condensing our digital traces are opaque and socially ignorant.
  • Friendster and the fakesters
    Make sure there is a “there” there. Give users a reason to rally.
    Why would someone come to your site? What’s your social object?
  • Give people something to do
    Activities - participation ladder
    building blocks

    Participation ladder -
    collecting, saving, displaying, add/subscribe, tagging, sharing, send this, share this, activity streams, gifting, broadcasting, publishing, ratings, reviews, comments, feedback, forums, conversation, collaborative, collaborative editing, wiki, social search, pivots
  • Enable a bridge to real life

    Let’s put on a show = spontaneous gatherings, broadcasting of gatherings - enable, embrace location and mobile tools - and the crossover
    Hey Kids - Let’s put on a show. The classic Andy Rooney / Judy Garland movies from 1939 involved gathering their group of friends together for a spontaneous show to raise money for something or other and then they would announce the show to everyone in town. The social tools that create a bridge to real life allow you to gather friends together, broadcast to friends, broadcast to others (public forum), plan real life meetups, and then capture the event and archive it for later viewing back online.

  • Gently Moderate
    Let the Community elevate people and content they value - of the people, by the people with some gentle oversight

    Reputation, recommendations
    gentle moderation
    Flickr - interestingness - views, comments, favorites plus some gentle algorhythm to elevate the objects the community values

    “There are lots of things that make a photo 'interesting' (or not) in the Flickr.
    Where the clickthroughs are coming from;
    who comments on it and when;
    who marks it as a favorite;
    its tags and many more things which are constantly changing. Interestingness changes over time, as more and more fantastic photos and stories are added to Flickr."

    * Views, internal and external to Flickr, of the photo
    * Number of comments on the photo, and also who comments on the photo
    * Tags applied to the photo
    * Flickr discussion groups in which the photo appears
    * Favorites, a.k.a Flickr bookmarking, of the photo
    * Time varying behavior of the above factors
  • Pave the Cowpaths
    A motto often heard from supporters of microformats is “Pave the cowpaths,” which
    means, essentially, look where the paths are already being formed by behavior and then
    formalize them, rather than creating some sort of idealized path structure that ignores
    history and tradition and human nature and geometry and ergonomics and common
    sense. This principle is sometimes applied on campuses, and sometimes a rear-guard
    “keep off the grass” action is fought instead, to no avail.

    Started a photo sharing product, noticed customers putting pics of pets up - niche not being served, so ended up building SN for pets
  • Talk Like a Person
    Conversational Voice - Self-Deprecating Error Messages - Ask Questions
    Your vs. My - No Joking Around

    Of course it’s easy to say “talk like a person,” but what kind of person? Well, how about
    the type of person you hope will get involved with your site? Model the sort of tone and
    personality you’re aiming to recruit.

    So, communicate with your site participants in a human voice. But how? Getting this
    wrong is often creepy, verging on ghoulish, like an aging divorcee with love beads on at
    a love-in. The bottom line is authenticity. Would you really say that? Can you read it out
    loud without cringing? Does it sound like your kind of people?
  • Be Open
    Play Well With Others

    Being open is all the rage these days, but it means many things to many people. It can
    mean radical transparency, the use of open source software, exposing platform hooks,
    crowdsourcing, and more. In the book, we’ll discuss several approaches to openness
    that we believe are essential to the effective design and development of social environments
    online, but for now just keep in mind the question “how could this interface be
    improved if we made it more open?” while designing your experiences.
  • Learn from Games

    An application doesn’t have to literally be a game or be presented as a game to employ many of the same design techniques
    that make games fun to play.
    It’s no coincidence that Ludicorp’s first product was something called Game Neverending
    (its second was Flickr, which owes at least some of its success to the almost addictive
    game-like quality of its user interfaces).

    Even in the enterprise, interfaces don’t have to be dry and tedious. Think about how to
    delight your users and encourage them to engage with one another.
  • Respect the Ethical Dimension

    When you are designing experiences for people, or designing frameworks within which
    people will create their own experiences, there is always an ethical dimension.
    What commitments are you making explicitly or implying when you open your doors for
    Are you promising to keep people safe, to keep their information secure, to respect their
    Are you willing to bend ethical rules to cheat your way through the cold-start problem
    and rapidly build your social graph? en statute of limitations.
  • Cargo Cult
    Wikipedia definition: any group of people who imitate the superficial exterior of a process or system without having any understanding of the underlying substance. The error of logic made by the islanders consisted of mistaking a necessary condition (i.e., building airstrips, control towers, etc.) for cargo to come flying in, for a sufficient condition for cargo to come flying in, thereby reversing the causation. On a lower level, they repeated the same error by e.g. mistaking the necessary condition (i.e. build something that looks like a control tower) for building a control tower, for a sufficient condition for building a control tower.

    Zoomr, flickr
    e out of name, tagline, source code
    AOL homepage - copy Yahoo including source code

    iPhone - Pre, Etc - other phones

    Patterns - used blindly without understanding context and need
  • Don’t Break Email
    Twitter DMs to email versus Basecamp replies to posts announced via email

    If you’re using email as a broadcast medium—to send reminders or notifications, for example—
    and not enabling people to reply to the messages they receive, that’s lame. There’s no reason why you can’t handle replies properly, forwarding them as further notifications
    to the correct recipients. This balances your interest in hosting and facilitating communication among members, and between your service and your customers, with your
    users’ interest in being able to respond to email messages using their existing habits and customs.
  • The Password Anti-Pattern

    [clip of monty python & Holy Grail - the What is your Quest scene] [removed because of file size]
    Teach a man to be phished

    Just what is the password anti-pattern? And why is this an issue? On many social sites, to combat the cold-start situation where a user joins and has no friends, the site might ask a person to find his friends on the site by comparing known data pulled in from another service (such as the user’s online address book). The site may ask the user to open up access to all his various online address books so that it can match names and email addresses to current customers and then offer the new user a list of friends on the service for the purposes of making connections.

    The password anti-pattern teaches users to give their login credentials away to a stranger and sets them up to be more easily phished across the Internet. People get used to the practice and eventually don’t think twice about giving this information to a new site in exchange for some cool new promise.
  • Ex-Boyfriend Bug
    Dodgeball - group connections

    The boyfriend anti-pattern (also known as the ex-girlfriend bug) exists when the social system makes suggestions for connecting, based on friends-of-friends inference, to people who are not desired, such as an ex-boyfriend or ex-girlfriend. The anti-pattern also presents itself when systems without connections grouping or filtering rely on location awareness and alert a user’s network about where the user is or announces an event to her whole network, regardless of whether the user wanted that to happen.

    Consider this: in 2005, the mobile social networking software Dodgeball allowed people to broadcast their location to their network via SMS text messaging to encourage impromptu social gatherings. At first there was only one bucket for friends, but as people began hooking up, dating, and breaking up, there was a very strong need to filter out an ex without totally alienating that person through unfriending or blocking. The founders of Dodgeball called it “the ex-girlfriend bug,” and created a feature called “manage friends” to address the issue. This functionality provides a level of filtering and permissions that allows only certain groups to receive specific updates and announcements. The exes who are on a filtered friends list never know you are in the same neighborhood, and social awkwardness is avoided by not having to “unfriend” them.

    To avoid this issue, give your users more control over privacy and broadcast settings, and provide the ability to filter based on groups of people. Allow users to control their communications and information streams through the creation of buckets or circles of connections. This in turn avoids all those potentially awkward social situations (online and in real life) when information about whereabouts or actions appears to the wrong people.
  • Potemkin Village
    Users may want separate areas for discussing separate topics, and site creators may have
    an elaborate vision of a complex arrangement of topic and groups, but instead of creating
    a complicated empty scaffolding in hopes of enticing community to take root (the “if
    you build it, they will come” fallacy), start small and compact, and then prepare to grow
    Create one main topic, a pinned (permanently on top) welcome topic, and perhaps a
    separate help topic, and nothing else. Resist the urge to anticipate the contours of the conversations
    and groups. Wait until people are begging for a subtopic, then fork the original
    group. Repeat.
    This way, any pioneer community members will all interact in a single shared space,
    with no dilution of numbers. By the time they want to start sequestering topics from one
    another you’ll have already reached critical mass.
  • ×