Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Designing Social Interfaces: Overview and Practical Techniques

The standard approach to interface design is to craft a channel that allows you to easily and efficiently control hardware or software; it’s all about the interaction between people and computers. But today, the two entities on each side of the user interface are changing: it’s no longer about people interacting with computers, but rather about people interacting with people through computers. [Content Care Dec/12/2016]

This is the nature of the social Web. Social news websites, message boards, social networks, online stores and blogs all have some sort of user interaction going on, whether it’s comments on a blog post or social games on Facebook. The critical issue here is that people are not interacting directly with other people; rather the interaction occurs through a user interface. The computer acts as a mediator.

You may want to take a look at the following related posts:

In essence, we control the flow of user interaction on our websites. By crafting an interface to facilitate certain behaviors, we can influence the direction in which our community goes.

“Small software implementation details result in big differences in the way the community develops, behaves and feels.”
— Joel Spolsky, More Joel on Software

In this article, we’ll demonstrate the power of social interface design and what it can do for you, using several practical examples.

Social Interface Design Techniques Link

User points and Badges Link

Achievement, and more importantly, the feeling of achievement, can play a big part in social websites and games. You may be familiar with the massive multi-player games that have a system whereby players progress through levels as they play the game. Each level brings more prestige to the player and so keeps them playing more — with the next level always just a little bit out of reach.

The same idea can be used on social websites by recognizing your users’ contributions. For example, for a social news website, you could award points to users for submitting stories. You could also give users special badges when they perform a certain number of tasks. In a social environment, these badges would lift the recipient’s ego, and so people would be motivated to compete for badges.

These kinds of things enable us to influence the direction in which our community moves. For example, to increase user participation, such as the number of comments people leave, you could give users a badge after they’ve made a certain number of comments. The same could be applied to any other user driven-content: submitting stories, answering questions, asking questions, writing reviews and so on.

The Envato marketplace awards badges to its sellers and buyers.

Of course, the flaw to this method is that while getting quantity may be easy, controlling quality may not be. You want users to leave a lot of comments or reviews on your website, but you want these contributions to add value. There is no exact science or formula for how to do this, so the best advice is simply to keep this factor in mind when designing a social mechanism of this type. Will the technique you’re considering add more volume or value?

Social news websites tend to give their users points from the submissions that people have liked. This drives people to find better and more interesting stories to submit. Websites such as Envato5 marketplaces and Stack Overflow6 give people badges when they perform certain actions or do something a set number of times.

Stack Overflow’s achievement badges.

Unlockable Features as Rewards Link

Points and badges are superficial prizes: they’re all about ego. You can go a step further and offer tangible benefits to your biggest contributors, such as by unlocking new features for your website or application. Unlocking new features differs from things like badges and points because the user isn’t interested here in building their ego; they’re interested in getting more value out of your website or application.

You may be familiar with the “Skinner Box,” the famous psychological experiment developed by B. F. Skinner that saw a rat placed in a box with a button and a food dispenser. If the rat stepped on the button, it would receive some food. The food here was the reward for pushing the button, and it worked. The rat kept pushing the button to get more food.

The same principles apply to social interface design. By giving your users little rewards for accomplishing certain things, you can steer the direction of your community. The trick is to make the rewards beneficial enough for people to want to achieve them.


Hacker News unlocks comment down-voting when you accumulate a certain number of points (highlighted).

Hacker News7, a social news website for developers and entrepreneurs, unlocks things like comment down-voting as you earn points from your submissions and comments. While you cannot lose points for your submissions (there is no down-voting for submitted stories), you can lose points for your comments. Coupled with the fact that you could potentially gain or lose certain functionality on the website depending on the quality of your comments, this makes users more careful about what comments they leave, and they have more incentive to add real value to what another user says.

Reply Notifications Link

A popular feature on blogs and message boards is email-based notification of new replies to your messages. The feature works like this: you submit a new post to a social website, and when somebody replies, you are notified by email. This allows you to keep track of new replies without having to visit the website.

The reply notification checkbox on the Webdesigner Depot comments form.

While this feature makes sense from the user’s perspective, it might not make sense for the website owner. Email notifications move your audience from direct on-site browsing to off-site email. If users can be notified of new replies, why would they check the website manually?

But they do have a reason to come back. When users come back to your website they not only check for replies to their messages, they also read other messages and browse other new content. This keeps the website alive and visitor loyalty high. So while providing such notification systems may not seem logical at first, think about the long-term effects of such features.

Dealing With Troublemakers Link

However much we want our community members to all get along, there will inevitably be one or two people who seem to want to cause nothing but trouble. Unfortunately, one rotten apple can spoil the barrel, so you’ll want to deal with these troublemakers quickly and efficiently.

The traditional method of dealing with such people is to remove their access to the website, to ban them. This is the inclination of most people because that’s how things work in the real world. If someone causes trouble in your home, shop or bar, you ask them to leave. In more extreme cases, you might ask security personnel to escort them out. But you just want to get them out by any means.

That’s exactly how most people deal with troublemakers online: they simply ban them using one of several methods. These methods include deleting their messages, de-activating their account and blocking their IP address. In many cases, this works just fine. The user is booted from your website and order is restored. However, things don’t always go smoothly. Some people enjoy the attention they get and may create new accounts to continue making a disturbance.

A social interface technique can come in handy here. Instead of banning these individuals, we could let them stay and use the website as they like, but we would hide all of their messages and content from everyone… everyone, that is, but them. So the troublemaker would still see all of their messages and wouldn’t suspect that anything is up, but no one else would see them, so they would cause no disturbance. Yes, the troublemaker may eventually find out that something is going on, but then again, they may assume that everyone is just ignoring them, which is not an unlikely scenario. Whether they leave or stay wouldn’t matter anyway if they’re invisible.

Reply Threading Link

Threading, or branching, is a way to organize comments and posts on message boards and blogs. A thread, or branch, is a collection of comments that stem from one particular post, and so they focus the discussion on whatever that parent post is about. Threads organize different topics on the same page, usually by indenting the child comments under the parent. This technique may not work in all circumstances.

Threading comments under blog posts or message board posts may result in parallel discussions taking place. If you don’t want this — if you don’t want people to talk about different topics but instead focus on the original post — then it may be best to keep the comments and replies in a flat, linear structure.

On the other hand, threading can be effective in different contexts. For example, on social news websites such as Slashdot8, which feature heavy threading of comments on posts, it effectively turns the comment area into a platform for related discussions, each wrapped in a separate thread. This means that if someone had an interesting angle to explore related to the entry, they could pursue it, and subsequent comments would follow that tangent.

Slashdot features deep comment threading on stories, with each comment following its own tangent.

Threading can be useful on blogs because it allows you to effectively reply to individual commenters. One of the best ways to generate healthy discussion is to take the time to reply to as many comments as possible. This sends a clear message: you care. When someone leaves a comment and gets a reply from the blog’s author, they know that their comment is being read and that the author is interested in what they have to say. This makes them much more likely to add more comments in future because they know their input will be read and considered and that they won’t be wasting their time. Threading better organizes comments when there are a lot of such targeted replies.

Wrapping Up… Link

So, how do you go about designing an interface with social elements in mind? Focus on your goals. Before you can come up with an effective interface, you need to know exactly what your goals are. What do you want to happen? Do you want people to leave many comments on your blog? Do you want to encourage people to post answers to questions, or to submit them? Do you want people to submit files or leave ratings? Form a clear picture in your mind of what you want the interface to promote. Before you set off, you need to know your destination.

Only when you have defined your objectives can you begin to develop a strategy to meet them. Social interface design is a new field. Much has been written about usability and interactive design, but still not a lot on social interface design. It is an intersection of various fields: interface design, sociology and psychology, and as such it requires more than just an understanding of usability and design; it requires an understanding of human behavior and interaction. Using concepts from these other fields help you make interfaces that aren’t just easy to use, but that steer your community in the intended direction.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

↑ Back to top Tweet itShare on Facebook

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

  1. 1

    Social networking important but design is most crucial

  2. 2

    Good Post. Keep it up!

  3. 3

    Another good post :) Keep up the good work ;)

    • 4

      Really? What is new and awesome in this post? Omg, eternal loop of same stuff, wake up people !

      • 5

        Unless he changed his post since your reply, he never said anything about new or awesome.

        Anyway, I always find SM’s articles to be great resources – and hey, they’re free.

  4. 6

    This post needs more substance.

  5. 7

    This post needs more substance. (2)

  6. 8

    Very good article. However, regarding “Email notifications move your audience from direct on-site browsing to off-site email. If users can be notified of new replies, why would they check the website manually?” I have to disagree.

    I have very frequently posted a question to a forum, ticked the “email me” checkbox, and then moved on with life and forgot about it. Then a month later, here I have an email inviting me back to see that this site has finally delivered an answer for me. And you know what? At that point I am way more likely to use this site again.

    On sites where I do not have a “email me a response”, I have to manually check the page. This quickly gets old if no answers show up. So I promptly forget about my post and this site. And if months later someone answers, well, I will never know– and I may never visit this site again.

    So, to me, an “email me” tickbox is crucial if it is possible.

  7. 9

    Yup. One of the weakest posts I have ever read on this site, was hoping for more, how about we add some more thoughts/ideas in the comments then? Eh?

    I’ll start, er?

    Customisation, allow some simple customisation so your users can hide elements they don’t like ( I don’t mean ‘resize text’ monstrosities).

  8. 10

    This was a great read. Thanks for your research Dmitry.

    I’d be interested in hearing your thoughts on the ways in which poor interface design detracts from a community. Like what to avoid when creating user interfaces…

  9. 11

    Great points Dmitry!

    It’s obvious that too many social interfaces were not designed with a lot of thought to people interacting with people, but rather, interacting with the interface. But, I love this set of examples of how to do it right.

    I would love to see more specific techniques and examples social interfaces utilizing things like customization based on behavior and interest.

  10. 12

    I liked the ideas discussed in this article, maybe a little more could help. For instance, talk about achieving some of this with expression engine? yeahh that would be a great article.

  11. 13

    Rüstem Çetinkaya

    November 17, 2009 12:57 pm

    Social Interface Design will be perfect

  12. 14

    A good intro but soooo much more scope. Could do with going further.

  13. 15

    I like the way to get rid of troublemakers. :)

  14. 16

    Jonathan Meharry

    November 17, 2009 1:39 pm

    Sometimes I’m amazed at how little incentives like an icon can provide such a large amount of motivation for people to contribute.

  15. 17

    Excelentes tips.
    Gracias por compartirlo!

  16. 18

    Great article! Yesterday I stared creating a new social networking site and this might become handy.

  17. 19

    Excellent tip on hiding troublemaker posts from everyone but themselves. I hadn’t heard of that approach until now.

    I wonder about the technical investment that would have to be made to pull this off, though. Maybe there are forums/CMS’s that are already offering this feature?

  18. 20

    For interest, the guys at OkCupid do some very interesting things with keeping the site in contact with you, and the way they write.

    One common trope of social sites I’m surprised wasn’t mentioned was the “% Profile Complete!” where the site shows you completeness of your profile, suggesting “add x new ys to your account to reach 45%!” – it’s similar to the badging award mentioned, but its work is two-fold:

    1. It gets people to round out and “legitimise” their profile, increasing social investment in the site and making it better for others to see stuff about them.

    2. It is often used to introduce features of the site that they may not be aware of – e.g. if there is a “journal / blog” aspect, then they may “award” profile completion points by using this feature, because everyone wants to reach 100%, right? Gotta catch ’em all!

    • 21

      I really dislike the “you’ve completed 90% of your profile” kind of messages. I don’t want to fill in some details but at the same time hate to see I haven’t completed something (probably the achievement-you-know-what gamer inside me). Instead of inviting me to complete it I get pissed off everytime I visit the site in question, like LinkedIn for instance.
      Another thing that irritates me is when you keep getting asked if you’d like to invite contacts from your gmail to the site. No thanks, I don’t want to spam my friends with your bs unless I think you are so awesome, in which case I would have done it myself

  19. 22

    Personally, I can’t stand threaded replies. I much prefer a reply format such as the one on this site – where you can read, in chronological order – replies without having to click links to see them.

  20. 23

    I’m definitely a person who cannot tolerate this mentality. To me, it just feels as if you’re thanking or congratulating someone for doing something that is not noteworthy, or that you’re rewarding them for doing something that doesn’t necessitate recognition.

    To me, this is similar to achievements you find in video games. I think people want a reward for doing small, menial tasks as a method of appreciation, but it’s more like getting up in the morning. We all do it, but I can’t see ever wanting an emblem showcasing that I’ve accomplished such insignificant things.

    But, I admit, there is a rather large sect of online user (especially gamers) who thrive on that kind of thing. I’ll just never understand it.

    • 24

      @ Aaron Martone
      I can’t say that I don’t agree with you. This is indeed all about tiny insignificant tasks in a rational point of view. But I also believe that the whole purpose of social networks is around a “false” need that is getting recognition. A Psychologist might disagree with me, saying that recognition is indeed an important part of living in a society like ours (in a western point of view).

      But my main point would be: how else would you manage your social network and it’s users and make them want to use your services?
      If people like these kind of things, I say this is probably the smartest way to go in our (still) young web 2.0

  21. 25

    Nice post.

  22. 26

    When for the last time this blog published actually something interesting?

  23. 29

    Boring, but I am anti social network person.
    Social network is good for spam and advertising, and for people with surplus of time.
    What else?

  24. 30

    Line of Design

    November 18, 2009 1:47 am

    I liked the post. all you negatives out there: remeber we all have to start some place, and as another person, I’m also just strating a social site up right this moment, and theese tips were a very usefull ressource for me, and started me thinking of possibilities for my site… I would like a follw up article with links to other ressources, that also discuss the topic or offer technical soulutions/tutorials…

    Actually: anyone know of any good plugins for WordPress to get started with some of theese social “rewards” such as badges or something similar???

    Thanks Smashing, for sharing.

  25. 31

    Thanks for a great article!

  26. 32

    michal matuska

    November 18, 2009 6:44 am

    Nice article. I think badges are a good way to give some users more kudos, but i just have not seen a site that would execute this well enough.

    mike. think interactive agency

  27. 33

    Not much here. Common sense?

  28. 34

    I love the idea about trouble makers !

  29. 35

    I have to join the negative comments here. This article doesn’t really say much, it certainly doesn’t, ‘demonstrate the power of social interface design’.

  30. 36

    This is an article, not a tutorial. Why should the author go into details. If you find any of the points helpful, you can do research on your own.

  31. 37

    Giles Van Gruisen

    November 30, 2009 6:53 am

    I’d love more “Designing Social Interfaces” articles. They’re really great! Thanks.

  32. 38

    Although I agree that you have some good points, you’re just scratching the surface…I’d really like to see a follow up and article with more substance.


↑ Back to top