Social Network Design: Examples and Best Practices | Smashing Magazine

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/


2/19



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/


3/19



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/


4/19



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/


5/19



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/


6/19



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/19



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.


8/19



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/


9/19



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/


10/19



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/


11/19



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/


12/19



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/


13/19



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/


14/19



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/


15/19



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/


16/19



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/


17/19



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/


18/19



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


Living Social application - http://movies.livingsocial.com10


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


19/19


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/

Social Network Design: Examples and Best Practices | Smashing Magazine

Documents

Transcript of Social Network Design: Examples and Best Practices | Smashing Magazine