Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Designing the Obvious Clinic: Going Social with Ning

Last updated Oct 17, 2003.

By Robert Hoekman, Jr.

About Designing the Obvious Clinics

The goal of each Designing the Obvious clinic is to see how a particular web application measures up to the principles discussed in my book, Designing the Obvious: A Common Sense Approach to Web Application Design. To learn more about Designing the Obvious, visit my Web site.

Holy Ning, Batman!

Ning (http://www.ning.com) made its first appearance very recently, and offers anyone with an email address the ability to create his or her own social networks. Simply register, choose which social networking functionality you'd like included (blog, forums, photos, video, etc), launch the page, and start inviting people to chat about your favorite subject, whatever it may be.

Designing the Obvious Clinic articles are intended as critiques of particular applications based on the principles of web application design discussed in the book, but every so often, something really good comes along, and we should take the opportunity to learn from it. Today, we get to see an application that does almost everything right.

Figure 1

Figure 1. Ning gets people talking about a wide variety of topics by enabling users to build social networks around anything they like.

Specifically, we'll look at what Ning does to support the activity of social networking and turn beginning users into intermediates.

Supporting The Activity

Being social used to mean showing up someplace in person and talking face-to-face, but with the rise of the magical, mystical Web 2.0, it has come to mean logging on, finding some friends through a web application, and writing ... a lot.

Being social now means authoring a blog, contributing to forums, posting photos and videos on a vanity page your friends can visit anytime they want, and inviting friends to connect through a myriad focused and unfocused communities.

Regardless, communities are still communities, and community thrives when people gather for any reason. Through Ning, you can gather to talk about Macintosh computers, baseball, politics, or even your favorite television show.

To support this activity, Ning includes the ability to add a blog to your new network (or automatically update the page with posts from an RSS feed), forum, collection of photos and other images, or videos, plus it lets you create your own member page as well as invite other people to view and contribute to content. In other words, Ning delivers the tools you need to get people talking to each other. Just add water and watch it grow.

Figure 2

Figure 2: Just add the tools you want to use to your homepage and Ning does the rest.

During the setup process, you decide which features you'd like to use, choose a theme (color scheme), decide where each module should display on your homepage, what to call your new network, and what kinds of questions you'd like to ask new members.

The only potential flaw in this process is that Ning asks new users to make a lot of decisions up front, without showing them what they'll get after making the initial time investment. From the homepage, several other social networks are only a click away, so users can certainly explore a few to get an idea of what Ning is all about, but ideally, this same workflow would apply to the setup of new networks.

Users can change the page layout, theme, and feature set of their networks at any time by accessing the Manage tab, so instead of asking a bunch of questions in the beginning, Ning could simply drop users into their new homepages using a default set of modules, asking only for a network name and URL, and then prompt users to either start adding content into the empty modules or remove them from the page.

Figure 3

Figure 3: Giving users a default homepage and letting them decide from there what to change would eliminate the delayed gratification that comes from asking a bunch of questions up front.

In other words, Ning could show users what they're getting into first, and ask questions later.

Turning Beginners Into Intermediates, Immediately

The one area of web application design where I can almost always find flaws is that of instructive design. Many web applications do extremely little to help familiarize users with workflows. They often simply assume users will understand what to do and leave them to their own devices. So when I dived into Ning, I immediately began looking for such weaknesses. Much to my delight, I did not find them.

Ning actually does a terrific job of getting users up to speed. When a new network is first created, the homepage is full of modules that do not yet contain any content. But these modules are not "blank slates." Instead, they are filled with instructive text, such as, "This box won't show up for other people until there are discussions to show. Why not start one?" This is followed by a link that prompts the user to add the first discussion.

Figure 4

Figure 4: Ning has no blank slates. All of the empty modules a user sees when first creating a new network are filled with instructive text that helps get users started.

There are two areas, however, where Ning doesn't do as good of a job as it could.

First, when adding features to your new social network, Ning offers a drag-and-drop interface in which you drag modules (blog, RSS, etc) to a panel that contains a preview of the homepage. The idea is that you can decide which modules go in the sidebar, which modules go into the main content area of the page, and in what order to display the modules. This is a nice idea because it's more visual than simply offering a series of checkboxes to turn modules on or off and it offers an easy way to rearrange their order, but it has one flaw that initially threw me off a bit.

The homepage preview box displays two modules by default, presumably to help users gain some context for the usage of the interaction, but both default modules appear in the sidebar. As a result, it's difficult to tell that you can drag a module into the main content area. When I created my first network, I dragged everything I wanted into the sidebar and then, upon launching the network, wondered why the center column of my new homepage was completely empty.

Figure 5

Figure 5: Without an indication that you can add modules to the main content area of the homepage preview, it's easy to think they can only be added to the sidebar.

Fixing this is a simple matter of instructive design. Adding the words "Drag here" to both the sidebar and the main content area of the preview would tell users exactly what can be done, preventing this potential mistake for most users.

Second, under the Advanced tab of the Manage page, the text explains that you can add your own CSS to customize the appearance of your network. This is a great feature for the more advanced users, as well any MySpace user who has borrowed some code from other places to customize his or her MySpace page. A small link is offered to users wondering about CSS and how to use it, labeled "What is CSS?" And, this is a good idea. However, upon clicking the link, three CSS styles are added to the text area control below. No helpful article appears, no handy Help balloon is displayed. Nothing is done to tell users what CSS really is and how to use it to enhance the appearance of the network pages. It only shows a chunk of CSS, apparently assuming that simply showing a user some code will clear up any questions.

Figure 6

Figure 6: Showing CSS to someone who doesn't already know about it is not going to help them understand. A short Help article would go a long way in this case.

If I didn't know anything about CSS or HTML, this little code snippet would scare the heck out of me. At worst, I might believe the page has broken somehow and abandon the process completely.

This is one area where a small Help article would be quite useful.

Wrapping Up

Originally designed by premier user experience consultancy Adaptive Path, Ning does a fantastic job of getting new users through the setup process and into the world of social networking. A couple of simple tweaks would solve the minor issues, and once that's done, Ning may very well become one of the most well-designed applications on the web.

Kudos to Adaptive Path and Ning for a great effort. Now, off I go to form a hugely popular network around Designing the Obvious!

To join in the fun, check out http://designingtheobvious.ning.com.