Académique Documents
Professionnel Documents
Culture Documents
29/05/13 09:57
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 theyre 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 populationif Facebook, for example, was a country, it would be the fifth-most-populated in the world (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 LinkedIn1 ) while others have a more organic, free-form look (like MySpace2 ). Most sites fall somewhere in between, mixing professionalism with personalization (like Facebook3 ). 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:
9 Common Usability Mistakes In Web Design4 which details how to prevent common usability blunders.
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 1 de 19
29/05/13 09:57
20 (Alternate) Ways to Focus on Users5 shows ways to get more information about your users experience on your site. More Web Design Trends For 20096 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 Design7 tells how to make sure you web site communicating efficiently with your users.
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.
W H AT S I T FO R ?
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.
G I VE VI S I TO R S S O METH I N G TO D O
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
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/ Pgina 2 de 19
29/05/13 09:57
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.
PR O MO TE I N TER ES TI N G CO N TEN T FR O M FR I EN D S
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.
29/05/13 09:57
MAKE I T EAS Y TO FI N D FR I EN D S
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.
PR O FI LE PAG ES S H O U LD PR O MO TE PER S O N AL EX PR ES S I O N
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.
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 4 de 19
29/05/13 09:57
DeviantART allows artists to customize their profiles by adding different kinds of content modules.
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 to the forefront for users.
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 5 de 19
29/05/13 09:57
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 6 de 19
29/05/13 09:57
Living Social has a real-time news feed of activity happening across their network.
LET U S ER S D EFI N E G R O U PS
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.
CR EATE AU TO MATI C G R O U PS
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.
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 7 de 19
29/05/13 09:57
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.
PR O VI D E MO R E APPLI CATI O N S TO U S ER S
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.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 8 de 19
29/05/13 09:57
Ning is only one of a host of social networks that supports the OpenSocial API.
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 9 de 19
29/05/13 09:57
Facebooks private messaging system is only one way they foster communication among members.
29/05/13 09:57
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.
W H AT R EALLY N EED S TO B E H ER E?
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.
D O N T O VER W H ELM Y O U R U S ER S
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.
G I VE U S ER S TH E AB I LI TY TO FI LTER
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.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 11 de 19
29/05/13 09:57
Facebook allows users to filter their news feed based on content or user-defined groups.
EMPH AS I Z E TH E D ES I R ED R ES PO N S E
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://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 12 de 19
29/05/13 09:57
WriterFace makes it very obvious what actions they want users to take.
MAKE I T EAS Y TO FI N D TH I N G S
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.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 13 de 19
29/05/13 09:57
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 14 de 19
29/05/13 09:57
I N CLUD E US ER G R O UPS
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.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 15 de 19
29/05/13 09:57
PR O VI D E A MEMB ER D I R ECTO R Y
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.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 16 de 19
29/05/13 09:57
Further Resources
Area for further articles and related resources.
Applications of Usability Principles on a Social Network12 Offers useful information on making your social network more user-friendly. A Collection of Social Networking Stats for 200913 Gives great stats on how social networks are being used worldwide. Social Design Best Practices14 From the OpenSocial wiki. Social Network Websites: Best Practices from Leading Services15 A slideshow covering the practices of a number of leading social networks.
FOOTN OTES :
1
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
29/05/13 09:57
Facebook - http://facebook.com
9 Common Usability Mistakes In Web Design http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/ 20 (Alternate) Ways to Focus on Users - http://www.smashingmagazine.com/2007/09/10/20alternate-ways-to-focus-on-users/ More Web Design Trends For 2009 - http://www.smashingmagazine.com/2009/01/21/currentweb-design-trends-for-2009/ Clear And Effective Communication In Web Design http://www.smashingmagazine.com/2009/02/03/clear-and-effective-communication-in-webdesign/ MySpace - http://myspace.com Facebook - http://facebook.com Living Social application - http://movies.livingsocial.com Facebook - http://facebook.com
10
11
12
Applications of Usability Principles on a Social Network http://creativebriefing.com/applications-of-usability-principles-on-a-social-network/ A Collection of Social Networking Stats for 2009 - http://www.webstrategist.com/blog/2009/01/11/a-collection-of-soical-network-stats-for-2009/ Social Design Best Practices - http://wiki.opensocial.org/index.php? title=Social_Design_Best_Practices Social Network Websites: Best Practices from Leading Services http://www.slideshare.net/faberNovel/social-network-websites-best-practices-from-leadingservices Avatars - http://www.smashingmagazine.com/tag/avatars/ Networking - http://www.smashingmagazine.com/tag/networking/ Personalization - http://www.smashingmagazine.com/tag/personalization/ Social - http://www.smashingmagazine.com/tag/social/ Web Design - http://www.smashingmagazine.com/tag/web-design/
13
14
15
16
17
18
19
20
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 18 de 19
29/05/13 09:57
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? email address
154,212
Subscribers
Sign Up!
With a commitment to quality content for the design community. Made in Germany. 2006-2013. http://www.smashingmagazine.com
http://www.smashingmagazine.com/2009/07/13/social-network-design-examples-and-best-practices/
Pgina 19 de 19