7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
1/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 1 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Social Network Design: Examples and BestPractices
According to Nielsen Online, social networks and blogs are now the 4thmost popular kinds of online activities. 67% of the world onlinepopulation are now visiting them and the time theyre spending onthem 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 proportionsthat they rival entire countries in terms of populationif Facebook, forexample, was a country, it would be the fifth-most-populated in theworld (right between Indonesia and Brazil).
Theres a lot of variety out there in the realm of social network design. Some sites keep a very
professional approach (like LinkedIn ) while others have a more organic, free-form look (like MySpace ).
Most sites fall somewhere in between, mixing professionalism with personalization (like Facebook ). But
whats 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:
By Cameron Chapman
Published on July 13th, 2009 inAvatars, Networking, Personalization with 71 Comments
1 2
3
9 Common Usability Mistakes In Web Design which details how to prevent
common usability blunders.
4
http://www.smashingmagazine.com/author/cameron-chapman/?rel=authorhttp://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/http://www.smashingmagazine.com/http://www.smashingmagazine.com/http://www.smashingmagazine.com/http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/#commentshttp://www.smashingmagazine.com/tag/personalization/http://www.smashingmagazine.com/tag/networking/http://www.smashingmagazine.com/tag/avatars/http://www.smashingmagazine.com/author/cameron-chapman/?rel=authorhttp://facebook.com/http://myspace.com/http://linkedin.com/http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
2/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 2 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
1. Engage Quickly
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.
WHATS IT FOR?
Users need to know what your site is all about within seconds of reaching your home page. Most people
dont have time (or inclination) to try to figure out what a website is for if its not immediately apparent to
them. A simple tag line, the use of graphics, your sites title, or any number of other elements on your
home page can serve to provide new visitors with some indication of what your sites purpose is.
Facebook does an excellent job of quickly informing new visitors of their purpose right on their home page.
GIVE VISITORS SOMETHING TO DO
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
20 (Alternate) Ways to Focus on Users shows ways to get more information
about your users experience on your site.
5
More Web Design Trends For 2009 offers information on some important design
trends for this year, many of which can be applied to social network design.
6
Clear And Effective Communication In Web Design tells how to make sure youweb site communicating efficiently with your users.
7
http://www.smashingmagazine.com/2009/02/03/clear-and-effective-communication-in-web-design/http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/http://www.smashingmagazine.com/2007/09/10/20-alternate-ways-to-focus-on-users/http://facebook.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
3/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 3 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
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.
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
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.
Library Thing shows books recently added by friends.
http://www.librarything.com/http://www.xing.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
4/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 4 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
MAKE IT EASY TO FIND FRIENDS
Theres 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 theyll engage with a lot of other users, improving everyones user
experience. The more friends a user has, the more active their profile and news feeds will be, meaning
theyre more likely to come back often.
Facebooks Invite Friends page uses a format similar to sending an email.
2. Let Users Express Themselves
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 (MySpace ). Others restrict the design options but let
users add content to suit their own preferences (Facebook ). The degree to which your social network
allows users to cusotmize and personalize their profiles is up to you; just make sure theres some
functionality in that area.
PROFILE PAGES SHOULD PROMOTE PERSONAL EXPRESSION
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.
8
9
http://facebook.com/http://myspace.com/http://www.facebook.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
5/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 5 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
DeviantART allows artists to customize their profiles by adding different kinds of content modules.
PROMOTING INDIVIDUALITY IN APPLICATIONS
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 users 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
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 tothe forefront for users.
HAVE REGULARLY-CHANGING CO NTENT
Because of the nature of social networking sites, theres 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 theres more to
see each time they visit.
10
http://movies.livingsocial.com/http://jyoujo.deviantart.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
6/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 6 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Experience Project includes featured content on their home page.
UPDATE CONTENT IN REAL-TIME
Utilizing a real-time news feed for your users is a huge convenience. At this point, very few sites are
doing this. Facebook has the closest thing to a real-time news feed Ive 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 anyuser input.
11
http://www.livingsocial.com/http://facebook.com/http://www.experienceproject.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
7/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 7 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Living Social has a real-time news feed of activity happening across their network.
4. Allow Friends To Be Grouped
As friend numbers grow, the ability to group them becomes more important. When you only have thirty or
forty friends, its 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
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 GR OUPS
Automatically grouping friends makes sense, too. Grouping friends by which applications theyre 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.
7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
8/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 8 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
The Brooklyn Art Project social network groups their members by the type of art they work with.
5. Use OpenSocial
OpenSocial, Googles 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
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 dont need to worry about the program closing down anytime soon.
http://www.brooklynartproject.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
9/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 9 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Ning is only one of a host of social networks that supports the OpenSocial API.
LET USERS TAKE THEIR PROFILES ANYWHERE
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.
http://www.opensocial.org/http://developer.ning.com/opensocial/application/list/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
10/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 10 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
6. Make It Easy To Communicate
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 youre
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.
PROVID E MULTIPLE MEANS OF COMMUNICATION
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 its 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.
Facebooks private messaging system is only one way they foster communication among members.
FOSTER CONVERSATIONS
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
http://facebook.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
11/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 11 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Social networks are generally teeming with information. Between friend updates, users own activities,
and notices from groups theyre associated with, theres a constant stream of data coming at your users.
Dont compound the problem by sending them even more information that they dont necessarily need.
WHAT REALLY NEEDS TO BE HERE?
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 dont
include it there. Only give your users the minimum necessary information to perform the tasks you want
them to perform. Just make sure if theres 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.
DONT OVERWHELM YOUR USERS
The volume of information on a social network can quickly become overwhelming. Dont 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 whats happening on their own terms.
GIVE USERS THE ABILITY TO FILTER
Allowing users to filter out information from some users or groups is another way to improve a users
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.
http://www.dailychallenge.org/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
12/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 12 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Facebook allows users to filter their news feed based on content or user-defined groups.
8. Make It Easy To Take Action
Every social network has certain actions they want users to take. Whether its to join more groups, invite
more friends, click on ads or sponsored links, or post more updates, theres 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
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.
http://facebook.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
13/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 13 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
WriterFace makes it very obvious what actions they want users to take.
MAKE IT EASY TO FIND THINGS
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 theyre looking for.
http://www.writerface.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
14/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 14 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
9. Show Avatar Photos
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
Social network users like to see other social network users. And seeing your friends picture next to a
particular application or other element of the site makes it more likely youll click on whatever theyre
promoting. It builds a sense of trust to see a face you recognize, even if youve never actually met that
person in real life.
http://www.eons.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
15/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 15 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
10. Include Ways For Members To Connect
When social networks first started, most people only friended other people they knew in real life. But as
social networks have grown, theyve become a way to meet new people. Empower your users to find
each other based on common interests. Provide tools to let people who dont know each other, and whopossibly arent even friends on the network, to communicate and get to know each other.
INCLUDE USER GROUPS
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 theyre 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.
http://www.brooklynartproject.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
16/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 16 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Eons showcases user groups right on their home page.
PROVIDE A MEMBER DIRECTORY
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 its also a good idea to let
members opt out of being included in the directory (kind of like having an unlisted phone number).
http://www.eons.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
17/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 17 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Further Resources
Area for further articles and related resources.
Applications of Usability Principles on a Social Network
Offers useful information on making your social network more user-friendly.
12
A Collection of Social Networking Stats for 2009
Gives great stats on how social networks are being used worldwide.
13
Social Design Best Practices
From the OpenSocial wiki.
14
Social Network Websites: Best Practices from Leading Services
A slideshow covering the practices of a number of leading social networks.
15
FOOTNOTES:
LinkedIn - http://linkedin.com1
MySpace - http://myspace.com2
http://www.slideshare.net/faberNovel/social-network-websites-best-practices-from-leading-serviceshttp://wiki.opensocial.org/index.php?title=Social_Design_Best_Practiceshttp://www.web-strategist.com/blog/2009/01/11/a-collection-of-soical-network-stats-for-2009/http://creativebriefing.com/applications-of-usability-principles-on-a-social-network/http://www.brooklynartproject.com/7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
18/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 18 de 19http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Facebook - http://facebook.com3
9 Common Usability Mistakes In Web Design -
http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
4
20 (Alternate) Ways to Focus on Users - http://www.smashingmagazine.com/2007/09/10/20-
alternate-ways-to-focus-on-users/
5
More Web Design Trends For 2009 - http://www.smashingmagazine.com/2009/01/21/current-
web-design-trends-for-2009/
6
Clear And Effective Communication In Web Design -
http://www.smashingmagazine.com/2009/02/03/clear-and-effective-communication-in-web-
design/
7
MySpace - http://myspace.com8
Facebook - http://facebook.com9
Living Social application - http://movies.livingsocial.com10
Facebook - http://facebook.com11
Applications of Usability Principles on a Social Network -
http://creativebriefing.com/applications-of-usability-principles-on-a-social-network/
12
A Collection of Social Networking Stats for 2009 - http://www.web-
strategist.com/blog/2009/01/11/a-collection-of-soical-network-stats-for-2009/
13
Social Design Best Practices - http://wiki.opensocial.org/index.php?
title=Social_Design_Best_Practices
14
Social Network Websites: Best Practices from Leading Services -
http://www.slideshare.net/faberNovel/social-network-websites-best-practices-from-leading-
services
15
Avatars - http://www.smashingmagazine.com/tag/avatars/16
Networking - http://www.smashingmagazine.com/tag/networking/17
Personalization - http://www.smashingmagazine.com/tag/personalization/18
Social - http://www.smashingmagazine.com/tag/social/19
Web Design - http://www.smashingmagazine.com/tag/web-design/20
7/29/2019 Social Network Design: Examples and Best Practices | Smashing Magazine
19/19
29/05/13 09:57Social Network Design: Examples and Best Practices | Smashing Magazine
Pgina 19 de 19http://www smashingmagazine com/2009/07/13/social network design examples and best practices/
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. Shes also the author of The
Smashing Idea Book: From Inspiration to Application.
Every other Tuesday we send out our lovely email newsletter with useful tips and
techniques, recent articles and upcoming events. 143,000 readers have signed up
already. Why don't you sign up, too?
Sign Up!
154,212Subscribers
With a commitment to quality content for the design community.
Made in Germany. 2006-2013. http://www.smashingmagazine.com
http://www.mailchimp.com/monkey-rewards/?utm_source=freemium_newsletter&utm_medium=email&utm_campaign=monkey_rewards&aid=16b832d9ad4b28edf261f34df&afl=1http://www.amazon.com/dp/1119977428http://cameronchapman.com/Recommended