The history of social interface design can be divided into two periods: Before Flickr and after Flickr. In the first period, any social interface functionality was added as an afterthought to the design—something to layer on top of the core functionality. In the after Flickr period, teams were now considering social components as core to their design's value.
This was most evident in Flickr's home market: photo web sites. Before Flickr, the major players in that market, including Photoworks and Ofoto (which would soon become Kodak's site), were about picture printing and services. Users would upload their digital images to create high quality prints. While these sites had the capability to share photos with friends and family members, the functionality was obviously not part of the designs' core, making it clumsy and frustrating to use.
Flickr Changed Everything
The Flickr team's approach to design put sharing in the center of the design. Every aspect of the design had a social approach baked in.
For example, the site's business model had sharing at its core. Once hooked, users could remove bandwidth limitations, increase their storage, and keep their pictures longer by paying a small monthly fee.
Their central focus on sharing showed in the smallest of details, such as defaulting any uploaded pictures to being public. Of course, users could override this setting, but the default meant it was easy to explore the latest uploads of other users.
Early on, you could designate contacts—people whose images you wanted to follow. Users typing in the www.flickr.com URL immediately saw their contacts' latest contributions, making it easy to track what was happening.
These social features were integral to how Flickr's users experienced the site. Unlike its contemporaries, the features were all baked right in. The integrated social aspect spoke to its users, making Flickr a huge success story.
Incorporating these social features into the design wasn't easy for the Flickr team. They had no models to go by. No other site had created an experience like this, so there was nothing to emulate or reflect on. They were truly making it up as they went along.
Fortunately, the founders had assembled an exceptionally bright and ambitious team. They pushed out frequent design changes, often multiple times per day, trying to hone in on the best methods to solve the big problems.
Today's teams don't need to be pioneers; at least, not when it comes to integrating social interfaces into the design. Flickr's success subsequently inspired many designers, who have riffed and innovated on the original concepts. Now, we have many examples to go by.
Identifying the Patterns
In fact, we have so many examples, both good and bad, that it's hard to keep track of them. That's why we were excited when Christian Crumlish and Erin Malone released their new book, Designing Social Interfaces. Weighing in at more than 400 pages, it's a comprehensive pattern library of all the current trends in social interface design. We think it's a must-have resource for anybody designing an application that has social components, which is to say, any application.
Christian and Erin have tirelessly studied dozens of sites with social components. They carefully organized and categorized each type of component, giving us interesting perspectives on different ways to tackle the same concept. The results are a beautifully described set of patterns, chock-full of interesting examples, along with a nice commentary on many different approaches to solving common problems.
How would a design team use a resource like Designing Social Interfaces? Well, let's pretend we're on a team. We're creating a new system to help our organization's employees take advantage of their health insurance benefits. We want the employees and their family members to have full access to their benefits, recommend their favorite local health providers, and share ideas for staying fit and healthy. (After all, healthy employees reduce insurance costs and keep our organization productive.)
Leveraging the Pattern Library
For this hypothetical project, we could use Designing Social Interfaces to help us explore the social components we might want to have. By perusing the sections of the book, we can generate ideas for our design.
Generate New Ideas
For example, we know we'll need to have accounts, so we'll need to explore the types of data associated with the accounts. We'll want employees to add their family members into the system, so that means we'll need an invitation capability. We want users to contribute and share ideas for local services and events. We'd like to have users rate the various services and events, to help others learn what's popular.