Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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 Barcelona, dedicated to smart front-end techniques and design patterns.

Social Network Design: Examples and Best Practices

According to Nielsen Online, social networks and blogs are now the 4th most popular kinds of online activities. 67% of the world online population are now visiting them and the time they’re spending on them is growing by three times the overall growth rate of the internet. Social networks are now visited more often than personal email is read. Some social networks have grown to such enormous proportions that they rival entire countries in terms of population—if Facebook, for example, was a country, it would be the fifth-most-populated in the world (right between Indonesia and Brazil).

There’s a lot of variety out there in the realm of social network design. Some sites keep a very professional approach (like LinkedIn1) while others have a more organic, free-form look (like MySpace112). Most sites fall somewhere in between, mixing professionalism with personalization (like Facebook15123). But what’s the best way to design a social network? What are the elements that make a social network more user-friendly and more attractive to users? Read on to find out.

Also consider our previous articles:

1. Engage Quickly Link

Engagement is crucial for the success of any website. You need to make sure that visitors are immediately drawn into your site, either through great content, a compelling call to action, or some other means.

What’s It For? Link

Users need to know what your site is all about within seconds of reaching your home page. Most people don’t have time (or inclination) to try to figure out what a website is for if it’s not immediately apparent to them. A simple tag line, the use of graphics, your site’s title, or any number of other elements on your home page can serve to provide new visitors with some indication of what your site’s purpose is.

Screenshot-Social Network Site Purpose7
Facebook does an excellent job of quickly informing new visitors of their purpose right on their home page.

Give Visitors Something To Do Link

Your home page should present visitors, both new and returning, with something to do. Logging in or signing up is the most obvious thing for visitors to do, but think about other options. Give them the opportunity to explore what the site is all about before they sign up. Let them search for people they already know on the site. Give them a chance to see why they should sign up before forcing them to. It builds a sense of trust between your site and its users right from the start.

Screenshot-Give Visitors Something To Do8
Xing presents users with multiple actions right on their home page, including signing up, taking a tour, or exploring content.

Promote Interesting Content From Friends Link

Show your users what their friends are doing. From the moment someone logs in, they should be able to see what their friends have been doing, posting, and otherwise promoting. Most sites approach this with a news feed or similar listing of all the activities your friends are up to.

Screenshot-Friend Activity9
Library Thing shows books recently added by friends.

Make It Easy To Find Friends Link

There’s nothing sadder than a social network account with few or no friends. Make it easy for your users to find friends, both new and old. Letting users search by email, school, company, name, and other identifying factors makes it more likely they’ll engage with a lot of other users, improving everyone’s user experience. The more friends a user has, the more active their profile and news feeds will be, meaning they’re more likely to come back often.

Screenshot-Invite Friends10
Facebook’s “Invite Friends” page uses a format similar to sending an email.

2. Let Users Express Themselves Link

Self-expression is one of the hallmarks of social media. Some sites approach this by giving users almost full control over the way their profile page looks (MySpace112). Others restrict the design options but let users add content to suit their own preferences (Facebook15123). The degree to which your social network allows users to cusotmize and personalize their profiles is up to you; just make sure there’s some functionality in that area.

Profile Pages Should Promote Personal Expression Link

Whether you allow full control over user profiles or only limited access to changing their appearances, users should at least have some ability to make their profile reflect their personality. This can be done through changing color schemes and backgrounds or adding content.

Screenshot-Profile Pages13
DeviantART allows artists to customize their profiles by adding different kinds of content modules.

Promoting Individuality In Applications Link

Letting users show their individuality within applications is also a good idea in social networking design. You can do this by allowing users to comment on their activities within applications (as Facebook does) or in other ways. Some applications can be used directly to express a user’s personality. Applications like this include the various gifting, flair, and survey applications. One of the best examples of an application that lets users express who they are is the Living Social application (which is kind of a social network within itself), which allows users to create “top 5” lists about almost anything.

3. Be Dynamic Link

Dynamic content is the lifeblood of Web 2.0 sites. Social networks are no different. Content should change constantly, with the newest, most popular, and most valuable information continually pushed to the forefront for users.

Have Regularly-Changing Content Link

Because of the nature of social networking sites, there’s new content constantly available from users. Take advantage of this by including content, both on the home page and on individual users’ profiles or main pages, comprised of these updates. Updated content keeps users coming back, as there’s more to see each time they visit.

Screenshot-Featured Content14
Experience Project includes featured content on their home page.

Update Content in Real-Time Link

Utilizing a real-time news feed for your users is a huge convenience. At this point, very few sites are doing this. Facebook15123 has the closest thing to a real-time news feed I’ve seen. It shows you when there are updates, but still requires a click to actually view them (and is often buggy when displaying them). The ideal would be an ajax or similar news feed that updated every minute or so without requiring any user input.

Screenshot-Real Time Updates16
Living Social has a real-time news feed of activity happening across their network.

4. Allow Friends To Be Grouped Link

As friend numbers grow, the ability to group them becomes more important. When you only have thirty or forty friends, it’s often not a big deal to just lump them all together. But when your friend numbers grow to 100, 200, 500 or higher, being able to group them together almost becomes a necessity. After all, you might want to keep your work friends, college friends, casual acquaintances, close friends, and family all in separate groups, both to filter whose updates you see and how much others see of your updates and other information.

Let Users Define Groups Link

User-defined groups make the most sense when it comes to organizing friends. Some users may only want to organize their friends into a couple of different groups (such as business and personal or family and friends). Others might want to set up dozens of groups for their friends. In either case, make sure users can add their friends to more than one group at a time.

Create Automatic Groups Link

Automatically grouping friends makes sense, too. Grouping friends by which applications they’re using seems to be the most popular of this kind. Other options might include friends who are also members of the same groups or who share common friends.

The Brooklyn Art Project social network groups their members by the type of art they work with.

5. Use OpenSocial Link

OpenSocial, Google’s application platform for social networks, opens up a range of possibilities for your social networking site. The primary function of OpenSocial is to allow developers to create applications that can be used across a wide range of social networks. But OpenSocial has other benefits, too, like letting your users take their profile information across the range of sites using OpenSocial.

Provide More Applications To Users Link

Applications have become one of the most important and most-used features of social networks. Everything from productivity apps to games to gifting apps to apps for expressing yourself are available through OpenSocial. And developers are adding new applications on a daily basis. Because Google runs it, you also don’t need to worry about the program closing down anytime soon.

Screenshot-Open Social Applications
Ning is only one of a host of social networks that supports the OpenSocial API.

Let Users Take Their Profiles Anywhere Link

Allowing your users to take their profile information to other sites implementing OpenSocial is another big advantage. This, of course, means they can also bring their profile information over to your network, which can increase the number of new registrations you get.

Screenshot-Open Social18

6. Make It Easy To Communicate Link

The entire point of a social network is to foster communication. If you make it difficult for users to converse with each other, your site most definitely will not last for very long. Make sure when you’re planning and developing your site that you keep communication at the forefront of every decision you make. If it does anything to hinder your users from talking to each other, drop it.

Provide Multiple Means Of Communication Link

Most social networks provide multiple means of communication for their users. The basics are private messages, public wall messages or comments, and live chat or instant messaging. While it’s best to include all three of these, at a bare minimum your site should provide some way to send public messages and a way to send private messages.

Screenshot-Private Messaging19
Facebook’s private messaging system is only one way they foster communication among members.

Foster Conversations Link

Make it easy for users to have conversations with each other. Whether this is done through threaded messages, commenting, or some other method, you want your users to have effective conversations. Make it easy to pull additional people into the conversation, too, to make your site even more dynamic.

7. Show Only Relevant Information Link

Social networks are generally teeming with information. Between friend updates, users’ own activities, and notices from groups they’re associated with, there’s a constant stream of data coming at your users. Don’t compound the problem by sending them even more information that they dont’ necessarily need.

What Really Needs To Be Here? Link

When designing your user interface, ask yourself this question repeatedly. Is it really necessary for a certain bit of information or an option to be included on a given page? If the answer is no, then don’t include it there. Only give your users the minimum necessary information to perform the tasks you want them to perform. Just make sure if there’s additional information some users might want that you make it easy enough for them to find it.

Daily Challenge hides some information until users hover, which leaves their interface decluttered and clean-looking.

Don’t Overwhelm Your Users Link

The volume of information on a social network can quickly become overwhelming. Don’t contribute to this problem by then offering them a dozen different options for each action they might take on your site. Simplify the information and choices you give them to make their user experience better.

The same principal applies to the volume of information the site itself provides to users. If your site is constantly sending out updates and news announcements, it can quickly overwhelm users. Only send out notifications when absolutely necessary. Set up a blog or news page (with an RSS feed) for posting non-essential information. This way users can see what’s happening on their own terms.

Give Users The Ability To Filter Link

Allowing users to filter out information from some users or groups is another way to improve a user’s experience. Letting users filter out updates from certain users or applications makes it easier for them to see the information they want to see without getting overloaded.

Facebook allows users to filter their news feed based on content or user-defined groups.

8. Make It Easy To Take Action Link

Every social network has certain actions they want users to take. Whether it’s to join more groups, invite more friends, click on ads or sponsored links, or post more updates, there’s likely a laundry list of desired activities every site would like to have all of their users perform. The key to getting users to actually take these actions is to make it both easy and appealing to do so.

Emphasize The Desired Response Link

Make it obvious which response or action you want users to make. This can be as simple as using larger buttons for the preferred response and a small text link for the less desirable one, or using different colors or language for different options. In either case, make the desired response appear to be the more desirable one.

WriterFace makes it very obvious what actions they want users to take.

Make It Easy To Find Things Link

If you want users to perform certain actions, make it easy for them to find those actions. The most obvious example is in inviting new friends. Make it straightforward and easy for users to find the form to invite their friends who might not be members of your network. Organize available actions in a semantic manner so users can logically find the options they’re looking for.

Screenshot-Find Friends22

9. Show Avatar Photos Link

Virtually every social network out there allows users to upload a profile photo. Display this image near any activity a user performs. This could be next to their updates in a news stream, in lists of friends, or in the general site directories.

People Like Seeing Other People Link

Social network users like to see other social network users. And seeing your friend’s picture next to a particular application or other element of the site makes it more likely you’ll click on whatever they’re promoting. It builds a sense of trust to see a face you recognize, even if you’ve never actually met that person in real life.


10. Include Ways For Members To Connect Link

When social networks first started, most people only friended other people they knew in real life. But as social networks have grown, they’ve become a way to meet new people. Empower your users to find each other based on common interests. Provide tools to let people who don’t know each other, and who possibly aren’t even friends on the network, to communicate and get to know each other.

Include User Groups Link

Many social networks now allow users to create and join groups based on common interests. Sometimes these groups are serious (such as professional groups) while other times they’re just for fun. What they all share in common, though, is that they allow users to find other users who are interested in the same things they are.

Eons showcases user groups right on their home page.

Provide A Member Directory Link

Member directories are another good way to allow your users to find each other. These are particularly useful for small, niche social networks, as they allow every member to see every other member. In a large social network they quickly become less valuable unless you also include ways for members to filter the directory (such as by age or location). In large social networks it’s also a good idea to let members opt out of being included in the directory (kind of like having an unlisted phone number).


Further Resources Link

Area for further articles and related resources.

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4 /2009/02/18/9-common-usability-blunders/
  5. 5 /2009/01/21/current-web-design-trends-for-2009/
  6. 6 /2009/02/03/clear-and-effective-communication-in-web-design/
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

  1. 1

    first!! nice post too!

  2. 2

    Yes, it must can be simple and practise…

  3. 3

    very nice practices

  4. 4

    Interesting post…. nice and indepth… cheers

    • 5

      Very comprehensive article. Lots of food for thought and ideas I can use immediately.

  5. 6

    Deviantart: … users should at least have some ability to make their profile reflect their personality. This can be done through changing color schemes and backgrounds or adding content.

    … or with dangerous malware in the profile! :)

  6. 8

    Gerd Wippich

    July 13, 2009 12:55 am

    Very interesting – and timely – article. Thank you, Cameron.

  7. 9

    Ricardo Machado

    July 13, 2009 1:04 am

    :) Nice post ;) … Although I believe that social networks became too filled up with ‘useless information’… For example, in the point 1 – “Promote Interesting Content From Friends” – I think that warnings about “XPTO has played Dungeons & Dragons… Why don’t you play too?” aren’t valuable.

    Another example is the ‘Hi5’ that became too spammed… I receive, in average, 10 messages per day saying that ‘XPTO wants you in his/her crew’ … I’ve changed my original thougth from “Hey Social Networks are cool!” to “Hey… Social Networks are starting to annoy me :S”.

    But every ‘two thousand years’ appears one social network with a reasonable utility (in the beginning) like Twitter, that can be used to promote ourselves, or LinkedIn for Professional/Business Social activities :)

  8. 10

    Good article! I think another way that facebook got around so fast was the word of mouth and indirect advertising. Its like since my friend is got facebook i am going to also get facebook, and it spreads around like that. Since i have used many social networks myspace, twitter and facebook. I never liked myspace, i think they have overdone it. The one i stayed with though was FaceBook, i think its more simpler and easy to use and its designed better. Another reason i stayed with it was, everyone i know of well almost everyone has it, and since i got friends all over its so easy to communicate with friends and families. However it breaks IE sometimes cause of the javascripts, but that is cause of the new versions of IE and yes its gay!!
    Sweet article!

  9. 11

    Hyves, a Dutch sn-site, checks for notifications nonstop. It uses AJAX everywhere.

    Good post!

  10. 12

    footnote: Unlike other social network art sites like Artician, only subscribers are able to customize Deviantart CSS styles. As for the modules, only a handful are available to non-subscribers too. For the rest of us there’s not much to play around with.

  11. 13

    Again a good post……………..

  12. 14

    good job again. thanks!

  13. 15

    How does one even start a social network service?

  14. 16

    Tejendra Shandilya

    July 13, 2009 3:57 am


  15. 17

    Stoyan Delev

    July 13, 2009 4:16 am

    Nice post

  16. 18

    Hastimal Shah

    July 13, 2009 4:30 am

    its was a great article.
    Thanks :)

  17. 19

    Damn, that’s a lot to digest. Good article.

  18. 20

    Vijay Rayapati

    July 13, 2009 5:45 am

    Excellent read for people involved in building social media related applications.While we are already using some of these best practices, we will surely incorporate more best practices from this list in our platform – an online identity management platform.

  19. 21

    Great article. Thank you SM!

  20. 22

    Craig Hooper

    July 13, 2009 7:36 am

    This is retarded—the most obvious information possible. Why not post an article titled “web design best practices”, and start w/ this…

    01. Use XHTML/CSS.
    02. Use a web host.
    03. Offer your end-users navigation to move through the product.
    04. Don’t add machine gun sounds.
    05. Don’t save your files w/ a “.exe” extension.
    06. Do place content on the pages.

  21. 23

    Chris Robinson

    July 13, 2009 8:22 am

    Nice list

  22. 24

    Excellent. Chock full of information!!! I will be tweeting this one for sure!

  23. 25

    This is retarded—the most obvious information possible. Then do not read it. Yes, for most, this fairly simple recap of widespread knowledge. As a consolidated source of information the post has value.

  24. 26

    Nice article.

  25. 27

    Great advice…

    But the obvious question to follow these pieces of advice is: how?

  26. 28

    David Ferreira

    July 13, 2009 12:17 pm

    Great help!

    And for Mr. Craig Hooper, if you didn’t noticied yet, this kind of articles is for people who need advices and resources, people who need to learn something. Assuming that you are a GENIUS and you already knew everything in this article, why do you waste your time here?

  27. 29

    Justin: OpenSocial is a set of standards and a body of open source code to which Google contributes. You, or anyone, can pick up that code and start running with it. Google Friend Connect is built on OpenSocial and allows you to quickly copy and paste your way to a social network with a lot of the features on this list. I hope that helps!

  28. 30

    I can’t help but notice that Friendster just fails on most of the pointers :)

  29. 31

    Debashish Paul

    July 13, 2009 7:36 pm

    Great Post there!!!

  30. 32

    In other words, copy Facebook

  31. 33

    Tarek Laarif

    July 14, 2009 5:22 am

    You’re forgetting!

  32. 34

    Bas de Groot

    July 14, 2009 5:51 am

    Nice article! I will use it by my next community project!

    Maybe an extra option:
    – Support. A good faq and maybe live support.

  33. 35

    Blogger User

    July 14, 2009 12:12 pm

    These are not just great tips for designing networks but simply the best tips on working with every kind of sites, blogs and social customizable accounts.

  34. 36

    Social networking is a key “ingredient” to a business. Although it just recently become popular from the past 5 years or so, it has definitely changed the way business run things now.

    Keep the good info coming.

  35. 37

    Good post and all valid points. Someday, someone is going to build the perfect social networking tool.. Some people may think Facebook is there but personally, I think it falls short of “killer app” status due to two key reasons….

    1) It would be nice to segregate your friends into different groups and thus you would have different walls for those groups. It’s the biggest reason I don’t use Facebook because I don’t want my work colleagues seeing stuff my family writes of read about what I did back in University. Facebook is the first place I goto when I’m hiring someone and I’ve screened out people because of racial comments, pictures of them smoking up and other dumb stuff. If you aren’t smart enough to keep it off facebook, then you aren’t smart enough to work in the job I’m hiring you for.

    2) You should not have to do 57 different steps to shutdown and remove the content from your profile should you want to leave a social network. Also, giving full publishing rights of what is in your profile (pictures, comments, personal information) is not something that should sit well with people. You don’t give your government this kind of freedom with your personal info/work, why do you give it to someone who is even less accountable?

    Other than those 2 gripes, Facebook has done a phenomenal job in keeping groups together, allowing old friends to reconnect (and old flames) and brought grandma/grandpa into the information age.

  36. 38

    Fantastic work. Thenks very much for that article.

  37. 39

    Great article and informative, however, I know for a fact that with Deviant Art, granted that it is a free site, you have to be a paid subscriber in order to use most of those features. ;)

  38. 40

    Jeremy Swinfen Green

    July 15, 2009 1:19 am

    Thank you for this excellent and very clear article with its great examples. As well as providing a helpful introduction to people who are unfamiliar with social networking, I think it will also be very useful for people who are knowledgeable about the subject but haven’t had time to sit down and structure their knowledge.

  39. 41

    Aaron Smith

    July 15, 2009 2:03 am

    Great informative post guys..

  40. 42

    cool well done

  41. 43

    lol I watch that deviant user… /o/
    I want a css journal also, but I don’t have money….

  42. 44

    social networking website has changed the traffic of user generated content…. it is a challenging to make user interface for those kind of services…

  43. 45

    Seems kind of obvious & pointless for an article. If anything it should be titled differently, these are characteristics of a social network, not “best practices”

  44. 46

    fantastic post! thanks a lot cz i was looking around for something like this as my next assignment topic is on social networking:)
    n personally out of all these facebook is the only one i actually stuck through the years..everything else eventually made me weary.anyway the way i see it is if u have enough brain and have some sort of control over not accepting every request that’s being made, facebook can certainly make ur life so much more fun.
    the only drawback it has is that we have no control over who sees the content that is on our wall..if there was an option at each post or tag for us to control it(optional kindaff).
    and if only this could be overcome facebook possibly can’t get any better!

  45. 47

    Nice post, thanks.

  46. 48

    Very interesting post Cameron, thanks very much.

    I found allowing grouping of friends together and hover states very interesting and something that makes a lot of sense.

    Cheers again.

  47. 49

    Kevin Johansen

    July 24, 2009 12:42 am

    Sadly, this article does not cover the biggest issue with social networks: they dont properly support human interaction. They are emotionally dead. Facebook is after all, nothing more than a directory with the possibility of being a planning tool and a advertising space for one self or ones company.
    How do I have a good time truly WITH others? How can I collaborate with others with the sense of being together (which has a very large impact on a work process)? No social network or CSCW application has yet provided functionality to truly copy same-space same-time interaction.

  48. 50

    nice article. thanks to share it..

  49. 51

    great information. do you have a directly of examples that we can submit?

  50. 52

    Giles Van Gruisen

    December 2, 2009 6:58 am

    More awesome articles like this, please! Really useful!

  51. 53

    A very nice article. It a good resource to consider when building and choosing a social networking site (SNS).

    From the above comments, Shaweet’s comment about the privacy of posting messages to a specific group of people should also be considered when building/choosing an SNS. It means an SNS should have features of both professional network (LinkedIn, XING etc.) and entertainment network (Orkut, Hi5, Facebook, Tweeter, MySpace etc.) but messages of these GROUPs should be availble to their group members only or it should be customizable.

  52. 54

    Hi thats a great post
    I came across this website which is an business networking website
    the design is real good for business purposes I think but its only for business owners I waiting for that website to launch in india too

  53. 55

    Abhishek Dilliwal

    June 20, 2010 8:02 pm

    Great!!!! this is really helpful
    Thanks :)

  54. 56

    this is a really great article. i think the next step is having the right tools to bring your SN to life. Do you have any pointers?? Again very informative and compact. Cheers!!

  55. 57

    Andrea The English Webmistress

    September 1, 2010 11:55 am

    Killer article. Great for a project I’m working on. Thanks!

  56. 58

    Michelle Poteet

    January 28, 2011 3:21 pm

    Great info! Relevant and helpful!

  57. 59

    hmmm… dai ko lamang masabutan…. da!

  58. 60

    the sudden change of tack

  59. 61

    Hey Cameron,
    great article – would be great to see an update on how you think things have evolved!

    thanks :)

  60. 62


  61. 63

    Premananda Nath

    July 21, 2011 10:17 pm

    Realy very nice post for users.

  62. 64

    Premananda Nath

    July 21, 2011 10:18 pm

    realy very nice article for users.thanks

  63. 65

    August 24, 2011 10:17 am

    Great piece!

  64. 66

    nice work, carry on…!

  65. 67

    nice good work

  66. 68

    This may be your best read around…

  67. 69

    Awesome blog post!!!

  68. 70

    Thank you for the social networking site design do follow list. ;)

    Sandy Rowley

  69. 71

    Sayali Sharma

    March 4, 2013 7:19 am

    nice post..
    I like it very much.


↑ Back to top