Social Network Design: Examples and Best Practices


Published on

Artigo da autoria de By Cameron Chapman, July 13th, 2009

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Social Network Design: Examples and Best Practices

  1. 1. Social Network Design: Examples and Best PracticesURL: Cameron Chapman July 13th, 2009 Design 59 Comments Publishing PolicyAccording 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 bythree times the overall growth rate of the internet. Social networks are now visited more often thanpersonal email is read. Some social networks have grown to such enormous proportions that they rival entirecountries in terms of population—if Facebook, for example, was a country, it would be the fifth-most-populatedin 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 professionalapproach (like LinkedIn) while others have a more organic, free-form look (like MySpace). Most sites fallsomewhere in between, mixing professionalism with personalization (like Facebook). But what’s the best way todesign a social network? What are the elements that make a social network more user-friendly and moreattractive to users? Read on to find out.Also consider our previous articles: 9 Common Usability Mistakes In Web Design which details how to prevent common usability blunders. 20 (Alternate) Ways to Focus on Users shows ways to get more information about your users’ experience on your site. 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. Clear And Effective Communication In Web Design tells how to make sure you web site communicating efficiently with your users.1. Engage QuicklyEngagement is crucial for the success of any website. You need to make sure that visitors are immediately drawninto your site, either through great content, a compelling call to action, or some other means.What’s It For?Users need to know what your site is all about within seconds of reaching your home page. Most people don’thave time (or inclination) to try to figure out what a website is for if it’s not immediately apparent to them. Asimple tag line, the use of graphics, your site’s title, or any number of other elements on your home page canserve to provide new visitors with some indication of what your site’s purpose is.
  2. 2. Facebook does an excellent job of quickly informing new visitors of their purpose right on their home page.Give Visitors Something To DoYour home page should present visitors, both new and returning, with something to do. Logging in or signing upis the most obvious thing for visitors to do, but think about other options. Give them the opportunity to explorewhat the site is all about before they sign up. Let them search for people they already know on the site. Givethem a chance to see why they should sign up before forcing them to. It builds a sense of trust between your siteand its users right from the start.Xing presents users with multiple actions right on their home page, including signing up, taking a tour, orexploring content.Promote Interesting Content From FriendsShow your users what their friends are doing. From the moment someone logs in, they should be able to seewhat their friends have been doing, posting, and otherwise promoting. Most sites approach this with a news feedor similar listing of all the activities your friends are up to.Library Thing shows books recently added by friends.Make It Easy To Find FriendsThere’s nothing sadder than a social network account with few or no friends. Make it easy for your users to findfriends, both new and old. Letting users search by email, school, company, name, and other identifying factorsmakes it more likely they’ll engage with a lot of other users, improving everyone’s user experience. The morefriends a user has, the more active their profile and news feeds will be, meaning they’re more likely to come backoften.
  3. 3. Facebook’s “Invite Friends” page uses a format similar to sending an email.2. Let Users Express ThemselvesSelf-expression is one of the hallmarks of social media. Some sites approach this by giving users almost fullcontrol over the way their profile page looks (MySpace). Others restrict the design options but let users addcontent to suit their own preferences (Facebook). The degree to which your social network allows users tocusotmize and personalize their profiles is up to you; just make sure there’s some functionality in that area.Profile Pages Should Promote Personal ExpressionWhether you allow full control over user profiles or only limited access to changing their appearances, usersshould at least have some ability to make their profile reflect their personality. This can be done throughchanging color schemes and backgrounds or adding content.DeviantART allows artists to customize their profiles by adding different kinds of content modules.Promoting Individuality In ApplicationsLetting users show their individuality within applications is also a good idea in social networking design. You cando 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 variousgifting, flair, and survey applications. One of the best examples of an application that lets users express who theyare 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 DynamicDynamic content is the lifeblood of Web 2.0 sites. Social networks are no different. Content should changeconstantly, with the newest, most popular, and most valuable information continually pushed to the forefront forusers.
  4. 4. Have Regularly-Changing ContentBecause of the nature of social networking sites, there’s new content constantly available from users. Takeadvantage 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 theyvisit.Experience Project includes featured content on their home page.Update Content in Real-TimeUtilizing 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 I’ve seen. It shows you when there are updates, but stillrequires a click to actually view them (and is often buggy when displaying them). The ideal would be an ajax orsimilar news feed that updated every minute or so without requiring any user input.Living Social has a real-time news feed of activity happening across their network.4. Allow Friends To Be GroupedAs friend numbers grow, the ability to group them becomes more important. When you only have thirty or fortyfriends, 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 keepyour work friends, college friends, casual acquaintances, close friends, and family all in separate groups, both tofilter whose updates you see and how much others see of your updates and other information.Let Users Define Groups
  5. 5. User-defined groups make the most sense when it comes to organizing friends. Some users may only want toorganize 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 theirfriends to more than one group at a time.Create Automatic GroupsAutomatically grouping friends makes sense, too. Grouping friends by which applications they’re using seems tobe the most popular of this kind. Other options might include friends who are also members of the same groupsor who share common friends.The Brooklyn Art Project social network groups their members by the type of art they work with.5. Use OpenSocialOpenSocial, Google’s application platform for social networks, opens up a range of possibilities for your socialnetworking site. The primary function of OpenSocial is to allow developers to create applications that can beused across a wide range of social networks. But OpenSocial has other benefits, too, like letting your users taketheir profile information across the range of sites using OpenSocial.Provide More Applications To UsersApplications have become one of the most important and most-used features of social networks. Everythingfrom 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 toworry about the program closing down anytime soon.
  6. 6. Ning is only one of a host of social networks that supports the OpenSocial API.Let Users Take Their Profiles AnywhereAllowing your users to take their profile information to other sites implementing OpenSocial is another bigadvantage. This, of course, means they can also bring their profile information over to your network, which canincrease the number of new registrations you get.6. Make It Easy To CommunicateThe entire point of a social network is to foster communication. If you make it difficult for users to converse witheach other, your site most definitely will not last for very long. Make sure when you’re planning and developingyour site that you keep communication at the forefront of every decision you make. If it does anything to hinderyour users from talking to each other, drop it.Provide Multiple Means Of CommunicationMost 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 ofthese, at a bare minimum your site should provide some way to send public messages and a way to send privatemessages.
  7. 7. Facebook’s private messaging system is only one way they foster communication among members.Foster ConversationsMake 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 pulladditional people into the conversation, too, to make your site even more dynamic.7. Show Only Relevant InformationSocial networks are generally teeming with information. Between friend updates, users’ own activities, andnotices from groups they’re associated with, there’s a constant stream of data coming at your users. Don’tcompound 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 bitof information or an option to be included on a given page? If the answer is no, then don’t include it there. Onlygive your users the minimum necessary information to perform the tasks you want them to perform. Just makesure 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 UsersThe volume of information on a social network can quickly become overwhelming. Don’t contribute to thisproblem by then offering them a dozen different options for each action they might take on your site. Simplifythe 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 constantlysending out updates and news announcements, it can quickly overwhelm users. Only send out notifications whenabsolutely necessary. Set up a blog or news page (with an RSS feed) for posting non-essential information. Thisway users can see what’s happening on their own terms.Give Users The Ability To Filter
  8. 8. 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 informationthey 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 ActionEvery social network has certain actions they want users to take. Whether it’s to join more groups, invite morefriends, click on ads or sponsored links, or post more updates, there’s likely a laundry list of desired activitiesevery site would like to have all of their users perform. The key to getting users to actually take these actions isto make it both easy and appealing to do so.Emphasize The Desired ResponseMake it obvious which response or action you want users to make. This can be as simple as using larger buttonsfor the preferred response and a small text link for the less desirable one, or using different colors or languagefor 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 ThingsIf you want users to perform certain actions, make it easy for them to find those actions. The most obviousexample is in inviting new friends. Make it straightforward and easy for users to find the form to invite theirfriends who might not be members of your network. Organize available actions in a semantic manner so userscan logically find the options they’re looking for.
  9. 9. 9. Show Avatar PhotosVirtually every social network out there allows users to upload a profile photo. Display this image near anyactivity a user performs. This could be next to their updates in a news stream, in lists of friends, or in thegeneral site directories.People Like Seeing Other PeopleSocial network users like to see other social network users. And seeing your friend’s picture next to a particularapplication or other element of the site makes it more likely you’ll click on whatever they’re promoting. It buildsa 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 ConnectWhen social networks first started, most people only friended other people they knew in real life. But as socialnetworks have grown, they’ve become a way to meet new people. Empower your users to find each other basedon common interests. Provide tools to let people who don’t know each other, and who possibly aren’t evenfriends on the network, to communicate and get to know each other.Include User GroupsMany social networks now allow users to create and join groups based on common interests. Sometimes thesegroups are serious (such as professional groups) while other times they’re just for fun. What they all share incommon, though, is that they allow users to find other users who are interested in the same things they are.
  10. 10. Eons showcases user groups right on their home page.Provide A Member DirectoryMember directories are another good way to allow your users to find each other. These are particularly useful forsmall, niche social networks, as they allow every member to see every other member. In a large social networkthey quickly become less valuable unless you also include ways for members to filter the directory (such as byage or location). In large social networks it’s also a good idea to let members opt out of being included in thedirectory (kind of like having an unlisted phone number).Further ResourcesArea 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. A Collection of Social Networking Stats for 2009 Gives great stats on how social networks are being used worldwide. Social Design Best Practices From the OpenSocial wiki. Social Network Websites: Best Practices from Leading Services A slideshow covering the practices of a number of leading social networks.
  11. 11. Cameron Chapman 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 Internet Famous: A Practical Guide to Becoming an Online Celebrity. Homepage Twitter PageTags: networking, social 59 Comments Best Comments 1 July 13th, 2009 12:36 am james first!! nice post too! -3 Tim July 13th, 2009 12:46 am Interesting post…. nice and indepth… cheers 2 +2 3 July 13th, 2009 12:47 am Helen 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! :) +1 Vasu March 2nd, 2010 6:46 pm Its good 4 -1 Gerd Wippich July 13th, 2009 12:55 am Very interesting – and timely – article. Thank you, Cameron. 5 -1 dapas July 13th, 2009 1:02 am Yes, it must can be simple and practise… 6 -1 7 July 13th, 2009 1:04 am Ricardo Machado :) 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.
  12. 12. Another example is the ʻHi5′ that became too spammed… I receive, in average, 10messages per day saying that ʻXPTO wants you in his/her crewʼ … Iʼve changed my originalthougth from “Hey Social Networks are cool!” to “Hey… Social Networks are starting to annoyme :S”.But every ʻtwo thousand yearsʼ appears one social network with a reasonable utility (in thebeginning) like Twitter, that can be used to promote ourselves, or LinkedIn forProfessional/Business Social activities :) -1Cy July 13th, 2009 1:15 amGood article! I think another way that facebook got around so fast was the word of mouth 8and indirect advertising. Its like since my friend is got facebook i am going to also getfacebook, 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 stayedwith 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, andsince i got friends all over its so easy to communicate with friends and families. However itbreaks IE sometimes cause of the javascripts, but that is cause of the new versions of IE andyes its gay!!Sweet article!Cheers,Cy 0 9 July 13th, 2009 2:31 amRadekHyves, a Dutch sn-site, checks for notifications nonstop. It uses AJAX everywhere.Good post! 0 10 July 13th, 2009 2:33 amDaxfootnote: Unlike other social network art sites like Artician, only subscribers are able tocustomize 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. 0 11 July 13th, 2009 2:36 amHarishAgain a good post…………….. 0 12 July 13th, 2009 3:03 amuygargood job again. thanks! 0 13 July 13th, 2009 3:36 amjarrodHow does one even start a social network service? 0
  13. 13. 14 July 13th, 2009 3:57 amTejendra Shandilyagr8 0Stoyan Delev July 13th, 2009 4:16 amNice post 15 0 16 July 13th, 2009 4:30 amHastimal Shahits was a great article.Thanks :) 0Dave July 13th, 2009 5:05 amDamn, thatʼs a lot to digest. Good article. 17 0Vijay Rayapati July 13th, 2009 5:45 amExcellent read for people involved in building social media related applications.While we are 18already using some of these best practices, we will surely incorporate more best practicesfrom this list in our platform – an online identity management platform. 0 19 July 13th, 2009 6:57 amCosmiGreat article. Thank you SM! 0Craig Hooper July 13th, 2009 7:36 amThis is retarded—the most obvious information possible. Why not post an article titled “web 20design 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. -1 21 July 13th, 2009 8:08 amiFewvery nice practices 0 22 July 13th, 2009 8:22 amChris RobinsonNice list 0Julianne July 13th, 2009 9:23 am 23
  14. 14. Excellent. Chock full of information!!! I will be tweeting this one for sure! 23 0 24 July 13th, 2009 9:52 amDavinThis 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 thepost has value. 0 25 July 13th, 2009 10:24 amBenDesignNice article. 0 26 July 13th, 2009 11:14 amJustinGreat advice…But the obvious question to follow these pieces of advice is: how? 0 27 July 13th, 2009 12:17 pmDavid FerreiraGreat help!And for Mr. Craig Hooper, if you didnʼt noticied yet, this kind of articles is for people whoneed advices and resources, people who need to learn something. Assuming that you are aGENIUS and you already knew everything in this article, why do you waste your time here? 0Chris Wren July 13th, 2009 7:17 pmJustin: OpenSocial is a set of standards and a body of open source code to which Google 28contributes. You, or anyone, can pick up that code and start running with it. Google FriendConnect is built on OpenSocial and allows you to quickly copy and paste your way to asocial network with a lot of the features on this list. I hope that helps! 0 29 July 13th, 2009 7:24 pmGomiI canʼt help but notice that Friendster just fails on most of the pointers :) 0 30 July 13th, 2009 7:36 pmDebashish PaulGreat Post there!!! 0 31 July 13th, 2009 8:02 pmrodIn other words, copy Facebook 0 32 July 14th, 2009 5:22 amTarek LaarifYouʼre forgetting! 0
  15. 15. 0 33 July 14th, 2009 5:51 amBas de GrootNice article! I will use it by my next community project!Maybe an extra option:- Support. A good faq and maybe live support. 0 34 July 14th, 2009 12:12 pmBlogger UserThese are not just great tips for designing networks but simply the best tips on working withevery kind of sites, blogs and social customizable accounts. 0azizbaba July 15th, 2009 12:46 amFantastic work. Thenks very much for that article. 35 0 36 July 15th, 2009 12:50 amAlexanderGreat article and informative, however, I know for a fact that with Deviant Art, granted that itis a free site, you have to be a paid subscriber in order to use most of those features. ;) 0Jeremy Swinfen Green July 15th, 2009 1:19 amThank you for this excellent and very clear article with its great examples. As well as 37providing a helpful introduction to people who are unfamiliar with social networking, I think itwill also be very useful for people who are knowledgeable about the subject but havenʼt hadtime to sit down and structure their knowledge. 0Aaron Smith July 15th, 2009 2:03 amGreat informative post guys.. 38 0 39 July 15th, 2009 3:22 amDave HaleSocial networking is a key “ingredient” to a business. Although it just recently becomepopular from the past 5 years or so, it has definitely changed the way business run thingsnow.Keep the good info coming. 0AV4TAr July 15th, 2009 4:42 amcool well done 40 0Shaweet July 15th, 2009 5:36 amGood post and all valid points. Someday, someone is going to build the perfect social 41networking tool.. Some people may think Facebook is there but personally, I think it falls
  16. 16. 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 havedifferent walls for those groups. Itʼs the biggest reason I donʼt use Facebook because I donʼtwant my work colleagues seeing stuff my family writes of read about what I did back inUniversity. Facebook is the first place I goto when Iʼm hiring someone and Iʼve screened outpeople because of racial comments, pictures of them smoking up and other dumb stuff. Ifyou arenʼt smart enough to keep it off facebook, then you arenʼt smart enough to work in thejob Iʼm hiring you for.2) You should not have to do 57 different steps to shutdown and remove the content fromyour profile should you want to leave a social network. Also, giving full publishing rights ofwhat is in your profile (pictures, comments, personal information) is not something that shouldsit well with people. You donʼt give your government this kind of freedom with your personalinfo/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 groupstogether, allowing old friends to reconnect (and old flames) and brought grandma/grandpainto the information age. 0Alice July 15th, 2009 6:08 amlol I watch that deviant user… /o/ 42I want a css journal also, but I donʼt have money…. July 16th, 2009 1:05 amsocial networking website has changed the traffic of user generated content…. it is a 43challenging to make user interface for those kind of services… 0 44 July 16th, 2009 1:41 pmJoeSeems kind of obvious & pointless for an article. If anything it should be titled differently,these are characteristics of a social network, not “best practices” 0Sunara July 20th, 2009 7:52 amfantastic post! thanks a lot cz i was looking around for something like this as my next 45assignment topic is on social networking:)n personally out of all these facebook is the only one i actually stuck through theyears..everything else eventually made me weary.anyway the way i see it is if u have enoughbrain 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 ourwall..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! 0Seth July 20th, 2009 9:41 pmNice post, thanks. 46 0
  17. 17. Fred July 21st, 2009 3:28 amVery interesting post Cameron, thanks very much. 47I found allowing grouping of friends together and hover states very interesting and somethingthat makes a lot of sense.Cheers again. 0Kevin Johansen July 24th, 2009 12:42 amSadly, this article does not cover the biggest issue with social networks: they dont properly 48support human interaction. They are emotionally dead. Facebook is after all, nothing morethan a directory with the possibility of being a planning tool and a advertising space for oneself or ones company.How do I have a good time truly WITH others? How can I collaborate with others with thesense of being together (which has a very large impact on a work process)? No socialnetwork or CSCW application has yet provided functionality to truly copy same-space same-time interaction. 0 49 August 8th, 2009 11:48 pmianjuvenice article. thanks to share it.. 0sandy October 19th, 2009 9:44 amgreat information. do you have a directly of examples that we can submit? 0Giles Van Gruisen December 2nd, 2009 6:58 amMore awesome articles like this, please! Really useful! 51 0 52 January 17th, 2010 3:39 amNikunj BhattA very nice article. It a good resource to consider when building and choosing a socialnetworking site (SNS).From the above comments, Shaweetʼs comment about the privacy of posting messages to aspecific group of people should also be considered when building/choosing an SNS. It meansan SNS should have features of both professional network (LinkedIn, XING etc.) andentertainment network (Orkut, Hi5, Facebook, Tweeter, MySpace etc.) but messages of theseGROUPs should be availble to their group members only or it should be customizable. 0 53 April 5th, 2010 1:53 amViswanathHi thats a great postI came across this website which is an business networking websitethe design is real good for business purposes I think but its only for business owners Iwaiting for that website to launch in india too
  18. 18. 0 54 June 20th, 2010 8:02 pm Abhishek Dilliwal Great!!!! this is really helpful Thanks :) 0 phil July 27th, 2010 7:57 am this is a really great article. i think the next step is having the right tools to bring your SN to 55 life. Do you have any pointers?? Again very informative and compact. Cheers!! 0 56 September 1st, 2010 11:55 am Andrea The English Webmistress Killer article. Great for a project Iʼm working on. Thanks! 0 57 January 28th, 2011 3:21 pm Michelle Poteet Great info! Relevant and helpful! 0 jhoan February 3rd, 2011 1:04 am hmmm… dai ko lamang masabutan…. da! 58 0 nameman April 11th, 2011 9:42 pm the sudden change of tack 59 0Smashing Media GmbH. Created by Sven Lennartz & Vitaly Friedman Design by Function, Team23 Webdesign