Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

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

on

  • 15,575 views

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

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.

Statistics

Views

Total Views
15,575
Views on SlideShare
13,663
Embed Views
1,912

Actions

Likes
55
Downloads
325
Comments
0

25 Embeds 1,912

http://xguru.net 453
http://boxesandarrows.com 423
http://www.interacciones.com.ar 325
http://glennas.wordpress.com 224
http://www.boxesandarrows.com 188
http://mediajunkie.com 64
http://zzomen.tistory.com 62
http://blog.daum.net 33
http://www.slideshare.net 33
http://creativemix.ca 24
http://www.emdezine.com 23
http://feeds.feedburner.com 15
http://www.hanrss.com 8
http://mysite 7
http://www.slideee.com 6
http://blog.marsdd.com 5
http://iamreal.tistory.com 4
http://xss.yandex.net 3
http://theoldreader.com 2
http://www.netvibes.com 2
http://localhost 2
http://minhyungko.blogspot.com 2
https://glennas.wordpress.com 2
http://www.e-presentations.us 1
http://10.1.6.85 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Designing social is hard - It&#x2019;s different - It&#x2019;s new -It&#x2019;s everywhere <br /> Old - computer - person <br /> New - computer - person - another person <br /> Humans are complicated <br /> Interfaces can&#x2019;t predict and shouldn&#x2019;t predict their behavior <br /> Designing frameworks and generative environments <br /> <br /> Agenda - 5 steps, 5 principles and 5 anti-patterns
  • Give people a way to identify themselves and be identified. <br /> Personas - erin malone - sports star, writer, singer, IA/UX person, which is the erin malone presenting this talk?
  • Identify others and identify self (claim) <br /> Personas project at MIT <br /> 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. <br /> <br /> 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. <br /> <br /> PHILOSOPHY <br /> 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&apos;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 <br /> Make sure there is a &#x201C;there&#x201D; there. Give users a reason to rally. <br /> Why would someone come to your site? What&#x2019;s your social object?
  • Give people something to do <br /> Activities - participation ladder <br /> building blocks <br /> <br /> Participation ladder - <br /> 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 <br /> <br /> Let&#x2019;s put on a show = spontaneous gatherings, broadcasting of gatherings - enable, embrace location and mobile tools - and the crossover <br /> Hey Kids - Let&#x2019;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. <br /> <br /> Erin
  • Gently Moderate <br /> Let the Community elevate people and content they value - of the people, by the people with some gentle oversight <br /> <br /> Reputation, recommendations <br /> gentle moderation <br /> Flickr - interestingness - views, comments, favorites plus some gentle algorhythm to elevate the objects the community values <br /> <br /> &#x201C;There are lots of things that make a photo &apos;interesting&apos; (or not) in the Flickr. <br /> Where the clickthroughs are coming from; <br /> who comments on it and when; <br /> who marks it as a favorite; <br /> 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." <br /> <br /> * Views, internal and external to Flickr, of the photo <br /> * Number of comments on the photo, and also who comments on the photo <br /> * Tags applied to the photo <br /> * Flickr discussion groups in which the photo appears <br /> * Favorites, a.k.a Flickr bookmarking, of the photo <br /> * Time varying behavior of the above factors
  • Pave the Cowpaths <br /> A motto often heard from supporters of microformats is &#x201C;Pave the cowpaths,&#x201D; which <br /> means, essentially, look where the paths are already being formed by behavior and then <br /> formalize them, rather than creating some sort of idealized path structure that ignores <br /> history and tradition and human nature and geometry and ergonomics and common <br /> sense. This principle is sometimes applied on campuses, and sometimes a rear-guard <br /> &#x201C;keep off the grass&#x201D; action is fought instead, to no avail. <br /> <br /> Dogster <br /> 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 <br /> Conversational Voice - Self-Deprecating Error Messages - Ask Questions <br /> Your vs. My - No Joking Around <br /> <br /> Of course it&#x2019;s easy to say &#x201C;talk like a person,&#x201D; but what kind of person? Well, how about <br /> the type of person you hope will get involved with your site? Model the sort of tone and <br /> personality you&#x2019;re aiming to recruit. <br /> <br /> So, communicate with your site participants in a human voice. But how? Getting this <br /> wrong is often creepy, verging on ghoulish, like an aging divorcee with love beads on at <br /> a love-in. The bottom line is authenticity. Would you really say that? Can you read it out <br /> loud without cringing? Does it sound like your kind of people?
  • Be Open <br /> Play Well With Others <br /> <br /> Being open is all the rage these days, but it means many things to many people. It can <br /> mean radical transparency, the use of open source software, exposing platform hooks, <br /> crowdsourcing, and more. In the book, we&#x2019;ll discuss several approaches to openness <br /> that we believe are essential to the effective design and development of social environments <br /> online, but for now just keep in mind the question &#x201C;how could this interface be <br /> improved if we made it more open?&#x201D; while designing your experiences.
  • Learn from Games <br /> <br /> An application doesn&#x2019;t have to literally be a game or be presented as a game to employ many of the same design techniques <br /> that make games fun to play. <br /> It&#x2019;s no coincidence that Ludicorp&#x2019;s first product was something called Game Neverending <br /> (its second was Flickr, which owes at least some of its success to the almost addictive <br /> game-like quality of its user interfaces). <br /> <br /> Even in the enterprise, interfaces don&#x2019;t have to be dry and tedious. Think about how to <br /> delight your users and encourage them to engage with one another.
  • Respect the Ethical Dimension <br /> <br /> When you are designing experiences for people, or designing frameworks within which <br /> people will create their own experiences, there is always an ethical dimension. <br /> What commitments are you making explicitly or implying when you open your doors for <br /> business? <br /> Are you promising to keep people safe, to keep their information secure, to respect their <br /> privacy? <br /> Are you willing to bend ethical rules to cheat your way through the cold-start problem <br /> and rapidly build your social graph? en statute of limitations.
  • Cargo Cult <br /> 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. <br /> <br /> Zoomr, flickr <br /> e out of name, tagline, source code <br /> AOL homepage - copy Yahoo including source code <br /> <br /> iPhone - Pre, Etc - other phones <br /> <br /> Patterns - used blindly without understanding context and need
  • Don&#x2019;t Break Email <br /> Twitter DMs to email versus Basecamp replies to posts announced via email <br /> <br /> If you&#x2019;re using email as a broadcast medium&#x2014;to send reminders or notifications, for example&#x2014; <br /> and not enabling people to reply to the messages they receive, that&#x2019;s lame. There&#x2019;s no reason why you can&#x2019;t handle replies properly, forwarding them as further notifications <br /> to the correct recipients. This balances your interest in hosting and facilitating communication among members, and between your service and your customers, with your <br /> users&#x2019; interest in being able to respond to email messages using their existing habits and customs.
  • The Password Anti-Pattern <br /> <br /> [clip of monty python & Holy Grail - the What is your Quest scene] [removed because of file size] <br /> Teach a man to be phished <br /> <br /> 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&#x2019;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. <br /> <br /> 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&#x2019;t think twice about giving this information to a new site in exchange for some cool new promise.
  • Ex-Boyfriend Bug <br /> Dodgeball - group connections <br /> <br /> 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&#x2019;s network about where the user is or announces an event to her whole network, regardless of whether the user wanted that to happen. <br /> <br /> 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 &#x201C;the ex-girlfriend bug,&#x201D; and created a feature called &#x201C;manage friends&#x201D; 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 &#x201C;unfriend&#x201D; them. <br /> <br /> 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 <br /> Users may want separate areas for discussing separate topics, and site creators may have <br /> an elaborate vision of a complex arrangement of topic and groups, but instead of creating <br /> a complicated empty scaffolding in hopes of enticing community to take root (the &#x201C;if <br /> you build it, they will come&#x201D; fallacy), start small and compact, and then prepare to grow <br /> organically. <br /> Create one main topic, a pinned (permanently on top) welcome topic, and perhaps a <br /> separate help topic, and nothing else. Resist the urge to anticipate the contours of the conversations <br /> and groups. Wait until people are begging for a subtopic, then fork the original <br /> group. Repeat. <br /> This way, any pioneer community members will all interact in a single shared space, <br /> with no dilution of numbers. By the time they want to start sequestering topics from one <br /> another you&#x2019;ll have already reached critical mass.

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

  • Designing Social Interfaces 5 steps 5 principles 5 anti-patterns christian crumlish & erin malone
  • Setting the stage
  • 5 Steps
  • Give people a way to be identi ed
  • Give people a way to be identi ed & to identify themselves
  • Make sure there is a “there” there. What’s your social object?
  • Give people something to do
  • Enable a bridge to real life events
  • Let the community elevate people & content they value Gently moderate
  • 5 Principles
  • Pave the cowpaths
  • Talk like a person
  • Be open. Play well with others.
  • Learn from games
  • Respect the ethical dimension
  • 5 Anti-Patterns
  • Cargo Cult
  • Don’t break email
  • The Password Anti-Pattern
  • Ex-Boyfriend Bug
  • Potemkin Village
  • Play the Game
  • Thanks Christian Erin @mediajunkie @emalone xian@pobox.com erin@emdezine.com buy the book http://www.designingsocialinterfaces.com