Designing Social Interfaces – Erin Malone & Christian Crumlish #w2e

Designing Social Media Interfaces

Using principles, patterns and anti-patterns to create meaningful social user experiences.
Erin Malone – @emalone

Christian Crumlish – @mediajunkie
 
What does “social” really mean?
Social Network, Graph, Media, Object
People are unpredictable
User = Singular, Social = plural
 
Designing social requires different thinking
Organic vs. static
Emotional vs. data
Relationships vs transactions
Continuum vs. one grand gesture
 
Defining the Foundation
The Ecosystem – Activities, Community, Self
The social object is the reason two people are talking to each other, as opposed to talking to somebody else.
Social Networks form around social objects not the other way around – Hugh MacLeod GapingVoid.com
 
Make sure there is a “there” there. What’s your social object?
 
Context
How will you deliver the content? Mobile, game console, computer, etc
 
Who
You need to understand the audience
 
Fundamental Principles
1. Pave the cowpaths – You don’t have to design everything in advance. You can let the audience help determine direction.
2. Talk like a person – Being authentic not just code speak. Flickr’s tone or Dopplr page error message. Conversational voice, Self-deprecating error messages, ask questions, Your vs. My, No joking around (jokes don’t translate well).
3. Be open. Play well with others. – Embrace open standards, share data outside, accept external data within the sphere of your applications, support two-way interoperability ex: Smart.fm
 
Learn from games
What are game mechanics? The systems and features that make games fun, compelling and addictive.
Collecting – bragging rights, completion
Points – Game, social, drives loyalty, drive behavior, new power access
Feedback – engagement
Exchanges – interactions
Customization
 
Respect the ethical dimension
Tagged.com – lots of complaints, scrape address book to spam users
 
What are patterns?
In UX design it is a solution to a problem in context
Patterns are optimal solutions to common problems in context
5 parts to a design pattern
1. What – What does the user want?
2. Examples – An archetypal example of the solution
3. Use When – When does the pattern get used
4. How – How will this meet the user’s needs
5. Why – Why is this a good solution?
 
Patterns have a slow rate of change
 
Patterns vs. Specs
Patterns – a generalized set of considerations, can be interpreted multiple ways, have a slow rate of change, technology agnostic
Specs – are detailed
 
Patterns are a great place to start, but are not the last word
 
Practices – or the social patterns in context (96 patterns)
High Level Buckets
   Representations of the Self – Self expression, identity, presence
   Activities involving social objects – one-one, one-many, many-many
   Community –
 
Self – Engagement
Welcome people to the party – registration, sign-in, welcome, invitations, beta, authorize, re-engagement, authorize
Usage lifecyle – unaware -> Awareness -> Interested -> Sign-up -> First-time use -> Return Visit -> Regular user -> Emotional Attachment – > Passionate User
by: Joshua Porter
 
Sign In
What – User wants access to their personal information or application that is hosted
When – Use when personal data needs to be
 
Welcome Area
What  – A user registers for a new service and needs to have a sense of what can be done
 
Authorize
What – The user wants to participate on a site by bringing their data and files over from another system
 
Give people a way to be identified
Persona example from MIT Media Lab proved that name alone is not a good mechanism for providing proof of users
Attribution, User Cars, Avatar, Reflectors, Profile, Profile Decorating, Testimonial, Dashboard
 
Attribution
User Cards – like a mini profile
Avatars – Pictures help encourage engagement
Profile – Like FB could be user and/or created on the fly by user activity
Personal Dashboard – Like Flickr that shows lots of related information
 
Is there anybody out there?
Availability, statuscasting
Mood, microblogging
Environment, updates opt-in
Signs of life ex: mybloglog, user gallery
Buddy list ex: IM, who’s here now
Ambient intimacy
 
Reputation – Your reputation is equal to the sum of your past actions within a community. – Bryce Glass
Levels – the more engaged or knowledgeable they increase their authority
Collectible Achievements – Badges like on Gowalla and Foursquare
Points – Causes certain types of behaviour that can be heavily competitive and may not provide quality
Leaderboard – Shows who has the most points and drives competition, could be an anti-pattern
 
Give people something to do
It’s a continuum where somethings are low engagement (read) to high engagement (leading communities) – Ross Mayfield
Collecting – Saving for later Bookmarks, Evernote, Digg either personal or communal
Collecting Tagging – Personal remembering
Feedback – Reviews is an investment in peoples times
Feedback – Ratings allow for quick reviews but works better with reviews. What will you do with it? Like Amazon?
Broadcasting/Publishing – Giving people the mechanism to allow their voice to be heard
Publishing – Licensing is an important consideration
Broadcasting – Lifecycle is when things happened and how relevant it is in a date sensitive context
Sharing – Share this is when people can share across networks
Communicating – Public Conversation is public broadcasting of content like Twitter
Collaboration – Collaborative Editing are like wikis where people can collectively edit content.
Social Media – Recommendations appear in the Netflix and Amazon but can be really powerful
Social Media – Social search is where people can ask questions like Yahoo or Aardvark.
 
Combine activities for a richer experience – YouTube/Twitter U2 concert
Flickr – adds lots of different features
Amazon – collecting, reviews, lists
 
Enable a bridge to real life
Place/Geo location – Face-to-Face things like evite, events in FB Meetup, Plancast
Location – Neighborhood
Location – Mobile Gatherings when people can meet up spontaneously ex: flashmob
Location – Offline but then bring it back online like Upcoming
Community Collaborative filtering allows the community to surface good/relevant content
Community – Norms set the tone and expectations for the community like Flickr
Connections – Find people via invitations or looking through the existing system
Connections – Adding friends and what privacy levels are in place
Connections – Circle of connections where users can manage how content are grouped/shared
 
Let the community elevate people and content they value
Select and choose people they want to conect to & moderation in the community
 
What’s an Anti-Pattern?
There are 2 variants and usually refer to common mistakes
 
Examples of 5 Anti-Patterns
1. Cargo Cult – Copy cats hoping to cash in on the success of others without understanding where they were coming from or rationale for doing it. ex: Flickr dropped a vowel and other followed but didn’t realize the same success
2. Don’t break email – When using existing paradigms don’t force new user behavior. ex: FB used to not allow reply to comments via email but Basecamp does allow. Forces the user to change how they use an existing tool
3. The password anti-pattern – iLike and Plaxo set a bad user precedence by asking for credentials to access address book. Now phishing becomes easier.
4. Ex-Boyfriend Bug – You need to have the ability to control how information is shared when circumstances change. Like when people are dating/friends and the circumstances change information may not be relevant.
5. Potemkin Village – False fronts to your content. Don’t create a bunch of empty areas for and expect people to fill the void. People may see it is empty and bail. Start small and allow the community to develop.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s