Social design for social media sites

We are currently witnessing a re-architecture of the web, away from pages and destinations, towards completely personalised experiences built on an aggregation of many individual pieces of content. Content being broken down into individual components and re-aggregated is the result of the rise of mobile technologies, billions of screens of all shapes and sizes, and unprecedented access to data from all kinds of sources through APIs and SDKs. This is driving the web away from many pages of content linked together, towards individual pieces of content aggregated together into one experience.

This is no small technical feat: every time someone visits News Feed there are on average 1,5001 potential stories from friends, people they follow and Pages for them to see, and most people don’t have enough time to see them all. These stories include everything from wedding photos posted by a best friend, to an acquaintance checking in to a restaurant.
With so many stories, there is a good chance people would miss something they wanted to see if we displayed a continuous, unranked stream of information. Our ranking isn’t perfect, but in our tests, when we stop ranking and instead show posts in chronological order, the number of stories people read and the likes and comments they make decrease.
So how does News Feed know which of those 1,500 stories to show? By letting people decide who and what to connect with, and by listening to feedback. When a user likes something, that tells News Feed that they want to see more of it; when they hide something, that tells News Feed to display less of that content in the future. This allows us to prioritize an average of 300 stories out of these 1,500 stories to show each day.

An easy to follow design course for hackers who do amazing things.

A few months ago, my fifteen-year-old sister told me that Snapchat was going to be the next Instagram. Many months before that she told me that Instagram was being used by her peers as much as Facebook. Both times I snickered.

Learning from past mistakes, I took some time over the holiday break to ask my sister many, many questions about how she and her friends are using technology. Below I’ve shared some of the more interesting observations about Instragram, Facebook, Instant Messaging, Snapchat, Tumblr, Twitter, and FaceTime. I hope you’ll find them as informative, surprising, and humbling as I did.

Social Media Research

Summary: Reading notes on theories applicable to design of social software and social media. Concepts from psychology, sociology, linguistics, online interaction and performance enrich our theory of user interaction on Web 2.0 sites, social networking sites like Facebook.com, Youtube.com, Myspace.com and more.
Reading Notes

These reading notes were taken while researching source material and conceptual frameworks of potential use to social interaction design, an approach I'm developing for use in the development and design of social software, interaction tools, communication technologies and their applications.

Digg’s new owners can be commended for a couple of things. Having decided to revert to start-up mode again, the entire website has been built on fresh code, rewritten using Agile development methods, and re-launched in record-breaking time – just six weeks to the day that Betaworks snapped up its name and URL for $500,000. There’s also no disputing that the new Digg looks a whole lot cleaner than it did following the previous owner’s Version 4 redesign, which effectively dug the site’s own grave.

But there are two HUGE flaws with the new Digg.

“You’re going to be tempted, but don’t do it. Don’t add all your friends on Path,” writes tech blogger Josh Constine. “Don’t come anywhere near the 150-friend limit. And make the tough decision to reject the friend requests of people you care about. Because the whole point of Path 2 is sharing everything, and you won’t do that if you’re sharing to people that aren’t your best friends. Path’s power comes from the intimacy of your connections, not the quantity. This is difficult to adjust to because we’ve been conditioned by most social applications to connect with everyone we know. Path is different because it’s a micronetwork, not an interest network or general social network. It can but isn’t designed for sharing content that’s relevant to a wide audience, like the articles you publicly tweet, or the major life events you share with hundreds of Facebook friends.”

Shirky: So news.me sits on top of bit.ly, and it also sits on top of your social graph in Twitter and it just forwards you the five most popular stories among everybody you follow, not based on the number of times the link was circulated, but the number of times individual people you follow clicked on that link. It really has become my favorite piece of email of the day. I’ve tried lots of curation services and have really been wrestling with the serendipity problem in one form or another in news since the 1990s, when I did some work with Walter Bender’s group up at MIT. And this is the first thing I’ve seen that’s actually done it.

Both news.me and GitHub exemplify something really kind of profound. Github is offering a really interesting model for collaboration, that I think is going to spread outside of the hacker community and become a place where people are actually using the tool, not just to talk to each other, but to get things done.

This could be especially important for Twitter’s more casual users. CEO Dick Costolo has said in the past that 40 percent of the service’s users don’t tweet, and he argues that’s a good thing, because it’s a sign that Twitter isn’t just for power users, but is also attracting a mainstream audience. That audience is probably going to be interested in following celebrities, but it might not have the patience to decipher their’ conversations with other users — they just want to see the updates meant for the general public.

Insights From Convore

That insight led to the creation of Convore, which splits the difference between real-time chat and forums. It allows users to create topic-based forums, but replies are posted in real time. It works like chat if you're present, but it logs conversations like a forum. Culver says the Convore team thought its open-ended appeal would be an advantage, but it ended up making it difficult to identify a clear use case.

Several different use cases emerged: liveblogging, conference chat and internal team chat for businesses. The team chat was the part that piqued Culver's interest. She decided to create a new solution for that using everyone's old favorite chat protocol, IRC, but taking the effort out of it by hosting the service, offering a Web client, and providing all the logging, archiving and search. That's Grove. It launches today, and it's free.

One of the tenents of building an online community, whether it’s on a site or a blog, is to reward the type of behavior you want to encourage. Plurk users are given a Karma score when they sign-up, which starts at 0.00. As they use Plurk more, their karma score rises, and when they reach certain point totals, additionally functionality is unlocked. I believe most/all of the functionality revolved around additional emoticons (dancin’ nanner FTW!). The point is, Plurk did a great job of rewarding users for engaging in the exact type of behavior they were trying to encourage.

But the problem is, just as your karma score rises on Plurk as you use the site, it falls back down if you stop using the site. By the fall of 2008, Twitter had become much more stable, and a lot of us that were trying out Plurk over the summer started spending more time on Twitter. Which meant we were spending less time on Plurk. In my case, I didn’t spend a lot of time on Plurk in the early fall, and the few times I did visit Plurk, I noticed that each time my karma had dropped a dozen or more points. And so had my access to certain emoticons and what not.

So just as Plurk had encouraged me to use the site more by giving me additional functionality in the early summer, by the fall as my karma score fell, they were taking that functionality back away from me. And as you might have guessed, they were also taking away my desire to use the site anymore.

So Plurk did one thing really well: It rewarded the type of behavior it wanted to encourage via the Karma score. The problem was, it also PUNISHED you if you did NOT engage in the type of behavior it wanted to encourage. Which would lead to some users changing their behavior, and it would lead to some users leaving the site.

The Instagram Square All images posted to Instagram must be a squared crop before they can be uploaded. I personally think this was a brilliant move. I don’t know if those things were considered beforehand or if it was a side-effect of some other reasoning, but I do know that I’m glad Instagram only supports squared images. It’s one of the reasons I keep coming back.

Gmail's redesign may come with a bunch of spiffy new themes that look great in screenshots, but the actual usability of Gmail is in steep decline. For business users, Gmail is going downhill fast. It looks like Gmail is trying too hard to be a "social" application, and not hard enough to be an application for reading and responding to email quickly and effectively.

I've been using Gmail now almost since its release to the public. Its clean interface, keyboard shortcuts and relatively responsive Web interface have made Gmail my go-to mail client for years. While I've had some gripes with Gmail for years (not being able to sort by subject or sender in my inbox, for instance) the latest redesign has me considering going back to Thunderbird. Considering Thunderbird has improved very little in the last five years, that's a sad reflection on the state of Gmail.

Vimeo is a respectful community of creative people who are passionate about sharing the videos they make. Use Vimeo if you want the best tools and highest quality video in the universe.

Built with the latest in web technology (AJAX, HTML5 and CSS3), Dynamic Views is a unique browsing experience that will inspire your readers to explore your blog in new ways. The interactive layouts make it easier for readers to enjoy and discover your posts, loading 40 percent faster than traditional templates and bringing older entries to the surface so they seem fresh again.

Dynamic Views is much more than just new templates. With just a couple clicks, you’ll get infinite scrolling (say goodbye to the “Older posts” link), images that load as you browse, integrated search, sorting by date, label and author, lightbox-style posts for easy viewing, keyboard shortcuts for quickly flipping through posts, and one-click sharing to Google+ and other social sites on every post.

No two blogs are the same, so you can choose from seven different views that display text and photos differently. For example, if you have lots of photos on your blog, you may prefer Flipcard or Snapshot. If your blog is more text-heavy, then Classic, Sidebar (what you’re seeing now on Blogger Buzz) or Timeslide may be preferable. Here’s a quick description of each of the new views, along with links to some of our favorite blogs where you can check each of them out in action.

- Classic (Gmail): A modern twist on a traditional template, with infinite scrolling and images that load as you go
- Flipcard (M loves M) - Your photos are tiled across the page and flip to reveal the post title
- Magazine (Advanced Style) - A clean, elegant editorial style layout
- Mosaic (Crosby’s Kitchen) - A mosaic mix of different sized images and text
- Sidebar (Blogger Buzz Blog) - An email inbox-like view with a reading page for quick scrolling and browsing
- Snapshot (Canelle et Vanille) - An interactive pinboard of your posts
- Timeslide (The Bleary-Eyed Father) - A horizontal view of your posts by time period

Bill Scott shares six design patterns that are critical for creating effective web interfaces, focusing specifically on interaction design on the web. This presentation is a distillation of principles, patterns, and best practices for creating a rich experience unique to the web.

Social networks fight back by looking at sending patterns, number of followers, etc. Spammers fight back by creating accounts that do nothing but follow people to accrue followers and then follow spam accounts to make them look more real. (If you auto-follow everyone who follows you, you're making it harder for Google to find spammers.) Google could take a look at photos and see if they appear to be stock, but it wouldn't take long for the spammers to adapt. Fighting spam isn't a battle that you can win, any more than the War on Terrorism will ever end. Other than attempts to limit signups by using SMS messages and the like, Google will almost always be fighting spam reactively, based on our reporting it to them. Welcome to your new job.

This paper explores how the technological design of Facebook homogenizes identity and limits personal representation. I look at how that homogenization transforms individuals into instruments of capital, and enforces digital gates that segregate users along racial boundaries. Using a software studies methodology that considers the design of the underlying software system, I examine how the use of finite lists and links for personal details limits self-description. In what ways the system controls one’s visual presentation of self identity is analyzed in terms of its relation to the new digital economy. I also explore the creative ways that users resist the limitations Facebook imposes, as well as theorize how technological changes to the system could relax its homogenizing and limiting effects.

a social design firm

Social interaction design group blog on social media user experience design theory and practice

Most clients these days want to be able to manage their own content, so most designers will find that some, if not all, of their designs end up as templates in some kind of CMS. By considering the CMS as you design, you can maintain far more control over the final output. If your designs will be implemented and integrated into the CMS by a developer, then taking control at the design phase will help you to keep control over the design as opposed to leaving decisions to the developer or the content editors.

Here’s the presentation I gave at Pittsburgh Web Design Day (http://www.webdesignday.com) based on my article on Mashable (http://mashable.com/2009/01/09/user-experience-design/)

The Brighter Planet website was the first project I worked on after going independent in which I was able to use my full-blown user experience process: Stakeholder interviews -> User interviews -> Personas -> Scenarios -> Features -> Schematics -> Wireframes. I believe that the outcome shows the value of the process.

More than a year ago I very proudly announced that Boxee, the much-loved social media center software company, had hired me as the user experience designer for their beta. In the five months that I worked with them, I conducted user interviews and usability testing to identify people’s needs, behaviors and frustrations, and redesigned the app’s navigation and key screens.

At Digg it's our job to try new things, analyze the usage data, iterate, and evolve. While not everyone is happy w/the new design, as of right now the usage looks extremely good (ie. more people registering (43,000+ new users yesterday), digging, consuming, clicking, following, etc.). Our top priority is to stabilize the site, then we'll look at the data/feedback and make decisions on what to change going forward.

Rose seemingly brushed this issue away, making a reference to the popular Old Spice advertisements. "Look at v3, now back again, the arrows are now diamonds," he writes. Nope, they're still arrows. Personally I could care less if they're arrows or thumbs, but the community at large seems to care a great deal, so it seems like a no-brainer.

A lot of thought went into the Quora product design and even at this early stage many details have been revisited multiple times. So, I thought I'd share a few of the decisions and principles that went into the first major version of the beta product.

The grandfather of online photo-sharing sites is rolling out a revamped design. Photo pages on Flickr have been redone to feature larger images, maps, and a much cleaner, more intuitive interface.

From her days with GNE and at Flickr, Fake had learned how to seed a social Web site with game elements that encourage users to contribute. So she put the same strategy to work throughout Hunch. Users would get points tallied in “banjos” for showing up and participating; they could follow one another and compare how many banjos they’d earned.

Presentation from the 2010 Bessemer Cloud Conference introducing design concepts for executives, simple tactics to impro

From December 2006 to February 2007 we were in touch with the product manager of facebook. The prospective: Redesigning facebook. Eventually. Since the contract was never signed, we kept our designs in the drawer. Until now...

There are three kinds of relationship ties: 1.Strong ties: People we care deeply about. 2. Weak ties: People we are loosely connected to, like friends of friends. 3. Temporary ties: People we don’t know, and interact with temporarily.Let’s look at each type of tie, and how we might design for them.

Welcome to your overview of the new video page design! Wonder what's changed or where your favorite features are now located? Here’s a quick guided tour of the video page’s new layout.

This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. This results in unsatisfied customers, frustrated users and failed projects. So, we will cover the basics of user interface design for business Web applications. While one could apply many approaches, techniques and principles to UI design in general, our focus here will be on business Web applications.

Approaching sociality as object-centered is to suggest that when it becomes easy to create digital instances of the object, the online services for networking on, through, and around that object will emerge too. Social network theory fails to recognise such real-world dynamics because its notion of sociality is limited to just people.

I believe the most compelling experiences on the Internet do one thing and do it very well and then open themselves up to other services via an API. Buzz is trying to do way too much in my opinion and while that may work for many people, it does't work that well for me.

I think mobile presents some amazing opportunities for Google and Buzz. You can already see Buzzes near you on Google Maps on Android (via a layer in the map). I think that's a very interesting place and way to receive Buzzes. And when you search for and select a specific place on Google Maps on Android, you can "buzz about that place." I did that the other day using my Google phone in my office. That's like a Foursquare checkin and you know that I think mobile checkins are a fantastic way to create social utility.

Between Twitter, Facebook, and Google's new social networking tool, Buzz, it's hard to turn a corner without running into another social network. But how do you know which networking tool fits you best? We're here—with big charts and all—to help.

"What does is design. UI/UX design. Social design. Business model design as well (Groupon and Gilt Groupe, the two tremendous e-commerce success of the past two years, are in Chicago and New York respectively). To be sure, technology is and always will be very important. I don’t want to go back to the startup where the MBA bosses around engineers. And some of the best designers will be engineers (like David Karp, or Mark Zuckerberg). But you can’t just engineer anymore. You have to design."

"I promise you that when you start watching them in detail it will must boost your creative logo design ideas professionally and motivate you to design your new website in a way that people will never forget that you have made it. This is a list of 16 Popular Website Redesigns Of 2009 For Your Inspiration and Information."

As you know, retweeting is a very cool thing that emerged organically from Twitter users as a way of passing on interesting bits of information. Third party developers who make Twitter clients embraced it and added retweet functionality to their apps without us at Twitter doing anything at all with the feature. This isn't the first time this has happened, and this kind of emergent behavior is one of the best things about our ecosystem of users and developers.

One great way to figure out how to design the testimonials on your own projects is to look at how others are doing it. There are five predominant trends in testimonial design: speech bubbles, quotation marks, images or icons, minimalism, and video. Read on for information about and examples of each, and some bonus best practices at the end.

The difference between good and great webdesign is relatively small. The average person may not be able to explain the tangible differences that make up great design, but they can usually spot a design they like. By examining some awesome sites, I’ll attempt to put my finger on some of the small details that make up the difference.

This article goes over crucial features of the user interfaces of social media and social networking sites. It discusses important features, techniques and concepts behind these designs and explains why they are important, with examples from top sites. These easy and general usability strategies can be applied almost anywhere and to almost any type of user interface.