Social Network Portability

Transcription sponsored by Opera.

…You’ve heard a lot today about good design. I really enjoyed Daniel’s presentation, a lot of beautiful explanations and metaphors and pictures. So I am going to give you a little code today, some of that boring tech stuff, right?

The first thing that I would like you all to know is the entire text of this presentation is released to the public domain, so you are welcome to use it, reuse it, re-purpose it, however you wish. The images that are included are all creative comments licensed by their respective owners.

Just a really quick, sort of show of hands. How many of you have an idea of what you think are micro formats? OK, it seemed like, at least, half the people. How many of you have never used micro formats? A few folks. Just real quick here, folks.

I asked Jim McCloud what he thinks microformats are, and that’s what he drew. So, that’s one idea, little dots on a card. He is this great cartoonist if you’ve seen him. He is quite witty.

The best thing to do is just to see what do micro formats do. If we could connect to the Internet, we could see, but we’re going to skip that because we can’t. Here you go. One of the simplest examples is contact information, and I’ll just briefly outline what happens here.

It’s that you go to a site; you go to a doctor’s site and say you want to copy the contact information; their phone number, their location, their address, maybe their URL. Each one of those gestures takes a user action. A copy, a contact switch onto a different application, a page; back and forth, back and forth. A dozen little user actions and all of those are marked up in a page as contact information.

If you actually mark them up with this micro format called hCard, it enables the user to simply add that contact information to their address book with one quick click.

As anyone here who is in business for themselves or a small start-up or looking at a consultancy, how many of you work in a small business or web design firm that always looking to get more business? Or more consultancy? Quick a few folks. And you probably have a contact page, right? How to contact us — maybe, a form; maybe, an email address; maybe, a URL.

By adding hCard to your contact page, you can easily make it so that people can pick that up and add to that address book and, hopefully, lower the barrier to entry to actually getting in contact with you, give you direct economic benefit.

We’re not going to dive into the micro format demo. You can check the presentation out online and check out these demos later. The one thing I will leave you with: How many of you run Firefox here? OK, most folks; at least, some of the time. How many of you have downloaded and installed the operator plug-in for Firefox? Wow, that’s quite a few.

I would say that if you install one piece of software today, just search for operator and it will be one of the first few results in Google or whatever and install that on Firefox. You will see a whole different web.

When you do a Google search, do a Google map search for, like, coffee near Brighton, England. You’ll find that the results come up. The businesses are listed, and all of those actually are marked up in hCard and you can add to your address book with one click, not just one business but all the businesses on the page. Sync that to your phone and then you can walk around and find those businesses. It’s a very different experience then in today’s web.

We are going to talk about social network portability, and that’s a lot of multi syllable words, but what is the basic problem here we’re talking about? Daniel showed us Digg, and he showed us Pownce. We’ve seen other sites during the day, and we are going to see even more.

Every one of these new social sites, and I think we’re getting a little better at this, but most all of them make you re-enter your personal info, re-add all your friends, re-turn off notifications.

How many of you sign up for a site and then all of a sudden get email every day from that site? How many of you find this annoying? OK. Every new site that you sign up for you’ve got to turn that on. We don’t have some way of saying, "I’ve turned it off for this site I signed up for. Can you just port that across for me?" Or, maybe, some things I want to keep private; maybe, an actual physical address. Maybe, I’m OK putting my city public but not my specific street address. That’s something that I want to keep private, and that has to be re-entered every time as well.

There are lots of things, and, maybe, you’ve got stalkers. Of course, this is the Internet. There is no such thing as stalkers or trolls or people that make your life unpleasant, especially on some of those popular sites, like Digg. This never happens. The system is in place.

Flickr has done a really good job of having a block list. The question though is every time your site comes out you have to re-go to that site, re-find the people or wait for them to find you that harass you, if you have this problem, and re-block them. And so, it’s like this repeated little bit of a pain impulse every time, an electric shock kind of thing, every time you have to join this social network site.

What if there was some way instead that we could say, "Hey, just take my block list from Flickr. It’s there. I’ll let you log in using the Flickr authorization; go get it and reuse that. Wouldn’t that be excellent? The basic point is every time you do this there is this incredible amount of information you have to add, and Brian Oberkirk coined this the social network fatigue problem which is really obvious to anyone here who has added themselves and signed up for, at least, a few networks.

In fact, I should ask you. How many of you signed up for, at least, three or more networks? Pretty much everyone. Five or more networks? Keep your hands up. Ten or more networks? Yeah. Twenty? I know some of you have. Admit it. After you signed up for that fifth or that tenthe .NETwork, you’re kind of like, "I’m tired already. I don’t want to sign up for another one".

What are the alternatives there? Well, we could all decide to go play in some walled garden where we say, "Hey, this is our one network that we are just going to use and make everyone use that one", whether that network was called Friendster in the old days or, maybe, Orchid or MySpace or, maybe today, Facebook, the one popular network of today’s world. I think Facebook just advanced past MySpace in terms of total number of profiles.

The fact that that’s changed over time should tell you something. There is no one sort of golden network that controls them all. They are going to turn over, whether because of fashion trends or whether because of generational changes whatever. We don’t know that’s the reasons. We leave that up to the anthropology researchers, but the reality is that it will turn over. There will come a day when Facebook is not popular. Of course, they’re not going to want to believe that or admit that, but neither did MySpace, neither did Orchid or neither did Friendster or SixDegrees.com.

How many of you had an account on SixDegrees.com? This was like the social network site before any of these were invented back in the first integration of the web. They kind of experimented with a lot of this stuff.

It’s not just a sign-up problem. How many sites or profiles do you have, and what happens when you, say, you get promoted in your job? You change your title, or you change companies. You move or maybe you change your icon. Maybe, you decide to change your icon to some goofy animate character. I’m sure none of you have done this in the last couple of weeks, right? [laughter] Right. How many sites do you have to update?

If you are one of those people who raised your hand that you signed for 20 sites and you decide to change your icon to some animate character, you are just carrying this huge social network burden, this whole social network tax almost, this update tax.

Ah, I’ve changed. I’m moving. I have to update 20 different networks. I forgot all of the different places I have to update. I’m sure there are places that still say that I work at Technorati even though I left over a year ago. I haven’t had the time to re-find all the places that I haven’t even bothered to log into for whatever reason. So, this is not just a sign up problem, but it’s also an update maintenance problem for your profile.

It’s actually worse than that. It’s not just about you. Why are you in all these social networks? It’s also about your friends. The problem there is you meet someone at a conference. How any of you met someone here today? Maybe, hopefully? If you don’t know the person to your left or right, maybe at the break, say hello, introduce yourself.

What’s your Twitter, right? Sort of today’s greeting. But then, maybe you find you have a bunch of things in common. You decide to talk. Or maybe you introduce yourself to someone and you find them highly offensive, and you’re like, "I don’t want to deal with this person ever again. I’m going to go block them on some networks."

How many friends’ lists do you have to update? I’ve found this happens. Like almost every time you meet someone, there’s this little social network dance that you do. You’re like, "Well, I’ll add you on Twitter. OK, well I’ll add you on Pownce. OK, well I’ll add you on Digg. OK, well I’ll add you on Last.fm. I’ll add you on…" You know. And this sort of continues.

And maybe there is a good quality, because it’s sort of like the social dance aspect going back and forth, back and forth. But after a few times of doing that, you get kind of tired of doing it. And maybe you just want to say, Look. This person’s great. I’ll even give them my whole Doppler travel profile access. Let them know exactly where I am. Or maybe my full Fire Eagle profile that gives exact ICBM geo coordinates.

So this is another aspect of the sort of social network update maintenance problem. If you’ve got 20 sites that you’re doing, you’ve got 20 sites that you need to add people, if you really want to add them.

This problem is not going to end. It’s not like tomorrow there’s going to be no more social network sites that come out. Are people going to go build applications that only run inside one of these walled gardens? Some people are picking that path, but most people aren’t.

So, what we’re really talking about here, though, is the reason that users have to do this manually every single time is they don’t have really good control of the data in each one of these sites. So the goal here really is not just portability, but really it’s much more about user control. Putting the user in charge, empowering the user to do what they want with their information as easily as possible.

So you want to move or syndicate, like I said, your profile information from one site to another. Your friends list of relationships. Perhaps even the fact that you have several sites that are all yours and you want to communicate that information to more than one site.

So, Pownce has this feature that Daniel showed you, and we’ll go to that one more time, about other profiles, where you can list all these other sites that you’re on. Digg also has that feature, where you can list other sites that you’re on. But right now, today, I have to reenter that information.

If I log into Pownce, I enter it. If I log into Digg, I have to enter it again. And this is by folks that have actually worked on both pieces. Wouldn’t it be nice if I could simply go to one site, maybe I enter it all on Pownce and go to Digg and say, "OK. You know what? My Pownce profile already says what my other profiles are. Just go get them."

So we need to basically acknowledge the fact that data that users put into our system is not ours. It’s theirs. Or another way to look at it is, maybe you sort of do a dividing line. Say, OK, give the user full control of their data, but let them keep a public section. Let them draw the line of what’s public and what’s private. I think that’s a very important design decision to make.

And one of the things that, I think, Digg did that I want to call out as being really sort of groundbreaking, is they said, "OK. Anything you upload to the site, comments whatever, that’s public, you’re releasing to the public domain." And this is just brilliant.

This means that any site can remake use of mash up built applications on top of Digg using the public data on Digg without having to ask anyone for permission. And this is just brilliant, right? So, on Digg people don’t think much about it. They enter a few comments, maybe they enter a URL.

But like why not do this with something like Twitter? Where you’re also entering one about 140 characters, which is probably about… The average Digg comment, I’m sure Daniel could probably tell you, is probably about that, too.

So why not make that public as well? Everything you can make public more public domain, it becomes more portable. There’s less of a hassle. You don’t have to deal with the old folks. No offense to old folks.

So, what we’re really talking about here is user experience. We’re really talking about making things easier for the users. That’s the most important thing that… Each one of us building our sites, we know that if we make things easy for users, we make them feel empowered, make them feel happy. So that they’re clicking that smiley face icon on GetSatisfaction when they’re commenting on some other thread.

Then you know you’ve got loyal users. So let’s stop making it hard for them. New social networks, if you’re building a new one, ideally you should let users import and subscribe your profile information from some other site.

You all raised your hands when I ask if you have three or more social network sites. Well I’m willing to bet that almost anyone you meet today is going to have at least a profile on some site somewhere, whether it’s Facebook or MySpace or Flickr or Twitter or wherever. So there’s always someplace where they can say, hey. Just start me off from here. Including their friends list and relationships.

The interesting thing is that once you allow this sort of import/export with profiles that are portable, you actually allow the next step, which is interesting, which is syndication and thus subscription and making your profile’s updates live.

So that when you update your icon on one site, you don’t actually have to go to 20 other sites and click an update or import button. Which is actually one step better than having to re-upload an image 20 times. But if they were subscribed to your profile, say to your Flickr profile with your Flickr icon, then they would just pick that up automatically.

That’s the direction we really need to head with this stuff is, stop everyone trying to reinvent the users’ data store for their information. It’s actually a lot of work. Why not just let them tell you, hey. I’m already here. Just subscribe from there. Maybe cache it for liability reasons.

And once you do that, and once you actually let them import their networks and represent their networks publicly as well, and connect them all up, you actually get a network of social networks, which we can call a social inter-network.

Now, this is all fine and great. This is sort of like what Daniel was talking about, un-attaining them. If I could only make things trivial for the users [indecipherable] that made it frictionless for the users to sign up on various sites, it would be awesome. Right?

But we all have work to do. We all have jobs to do. We all have design considerations. We all have clients that are saying, "Oh. Make the logo bigger." Right? I’m sure that never happens.

The key here though is to make sure that whatever techniques we use to do this are actually easy for sites to adopt as well. And this is one of the core principles of microformats is to make things easy and accessible to web designers and web authors and not just developers. So that anyone that knows HTML can pick up and learn and use microformats.

How many of you have hand-authored some HTML at some point? OK. There’s pretty much everyone raising your hand. And if you haven’t, I’m willing to bet that you could sit down in about five minutes, learn to not just write a little bit of HTML, but to write a little bit of microformats. In fact, you could even just copy and paste what you’re going to see in the presentation.

So a lot of what modern web designers are already doing these modern practices of using semantic class names, using plain old semantic HTML. Which we’ve termed, or abbreviated to this term posh, which I’ve taken to understand has a bit of a cultural zing when it comes to the UK. But hey, no matter what word you pick, you’re going to end up upsetting someone, right?

Another aspect is something that Daniel talked about for users, which is that if they put in a little bit of work, they should get at least some benefit out. And that helps encourage them to do more work.

Well that’s true for us, too. If we can do a little bit of implementation and get some benefit immediately on our sites for our users, it’s very encouraging. Rather than having to do a big chunk of code, and do some massive implementation of some massive API before you get to see anything.

And that’s another important aspect of microformats. That by keeping all these building blocks modular, by having little pieces you can implement one at a time and get benefits one at a time, it makes it easier for you to say, "Oh, I’ve got an extra half day or I’ve got an extra hour. Let me implement this one piece and see what happens." So I think that’s really important.

It’s also really important to not ask sites to do a lot of new things. Almost every site that has users already has a profile URL for that user. We should not ask them to make another profile, "My Portable Profile URL" as a separate URL. That’s ridiculous. We should be able to use the existing URLs that they have.

We shouldn’t ask them to learn a new format. We should be able to work with the current content that sites publish. When you looked at the Digg profile that Daniel was showing, or the Pownce profile, any of those, each one of those profiles shows slightly different information, or a Last.fm profile.

Those are all based on design considerations. And I’m here to tell you that that’s the right consideration to use when you pick what content to show and publish. Not because you want to make it portable, but because you already know what the user wants to see, what they’re comfortable publishing. And that is much more important than some abstract notions of portability or programmer convenience. So we want to work with the current content that’s published.

How many of you know about the dry principle? OK, a few folks. So dry stands for don’t repeat yourself. And this is a really important principle we try to emphasis in microformats. What it basically means is that if you have a piece of information, the more times you duplicate it in the content that you publish, the greater the chance that its going to become out of sync.

Now this gets really bad when one or more places that you publish that information is actually invisible – is not visible to the user. Whether it’s in the comments in your HTML code or it’s in metadata, invisible metadata, Meta tags or maybe even some random XML file. OK. Chances are that data is going to become out of date as compared to what’s visible on the users profile page.

We actually de-emphasis doing that. We say "Don’t bother putting stuff that’s invisible data in invisible places, because it will become out of date." I mean you think "Well, we are all just getting it from a database" right. Doesn’t matter. Everything that requires updating. Everything requires a little piece of code to generate.

Probabilistically, we will break at some point in time, right. Code breaks. They are bugs. That’s just the way this thing works. And so, when push comes to shove and you have ship a new version of the site, what do you check? You check what the site looks like, OK. If you have to make some tweak the last minute – you may actually break the stuff that’s invisible because you are not checking it.

When you do a user test, are the users looking at the invisible data? No, they are looking at the visible data. So that’s the part you are caring about, the manipulating, and the users see and tell you about. If there’s a problem on your profile page, they are going tell you and get satisfaction because it’s visible. Not because it’s invisible.

OK. So here’s an example of a simple profile that might exist on some site. This is my friend Chris Messina. He’s worked on various different open standards. So here you’ve got a bunch of information. You’ve got his name, his photo, notes, blog hyperlink – and this is what makes an hCard. Which is essentially the vCard standard. Which every one of you has at least one device that it supports, probably two devices, translated into HTML – into semantic HTML.

So there are several examples here. I am not going to bother clicking on them. But if you clicked on those in the presentation, you could see that depending on the site you go there are actually all marked up. And in fact even the speakers for this conference and last years conference are all marked up with H-cards, and you could add them to your address book if you choose to.

The key here’s to recognize that you’ve got a name, an image, some notes and then a link to his blog. These are the most common elements of profiles. Another common thing you see, and this is what the Pownce interface of other profiles illustrates is that users hyperlink their identities. Almost every social network site today has a field – enter your URL, enter your home page, enter your blog, right.

And a lot them, in fact perhaps even most of them now, are actually marking that up. They are marking it up with a standard called XFN rel="me". And they are pointing to their blogs. They are pointing to their social network profiles. They are pointing to their Pownce. Maybe they are pointing to their OpenIDs, OK.

And they are either doing that maybe on a site like Pownce that says "Here’s an interface to do it." Or they are doing it on their own blog. WordPress is a nice link manager that lets you add links to your blog and say "This is me." Or maybe they are just coding it themselves.

However they do it, they are basically forming a structure like you see there. So the next building block is list of friends that you have. And it looks like just a bunch of icons, but actually, these are all hyperlinks to their profiles, right. The friend icons have images there, and their names are actually in the image alt tag [sic] as well.

So there’s quite a bit of semantic information there that you can actually mark up with hCard for the link icon name and use XFN for relationship. Even just marking up as rel=[?]content. If all you have is a friend system that adds friends yes or no, even that helps make that visible.

OK, so what are the steps to actually make this work? So there’s two basic steps. You want to publish microformats in your social network profiles as much as you can, and the friends list. And then you also subscribe to them. Let people bring their stuff in and take their stuff with them. So help them form a flow of their information. Help them import information through your system.

So hCard on user profile pages, XFN rel="me" are hyperlinks to the blogs and home pages. hCard and XFN friend list…now if you have a separate friends page besides their profile page, you need to rel="me" to that page as well. And if you multiple friends pages, say, because they have like, you know, 5000 friends or something. Maybe they are Robert Scoble. All right you are not going to save 5000 friends on one page. Then you actually have to use a combination of the HTML 4, rel=next and previous values with the rel="me" value. And the rel attribute since it’s a space separate set of values. You can do that, no problem.

So the second piece, right. Let the user subscribe to their information and bring it in. You want to let them subscribe to their profiles. Bring in their icons. Bring in all that stuff. Subscribe to their friends lists and the names of friends. So that if they add someone on Twitter, they should automatically get the option to add them on Pownce. If they add someone on Flickr, they should automatically get the option to add them on Digg or Doppler.

So there’s a lot more to describe detailing these steps. It’s all described on the microformats wiki. Well I am going to show you just a tad bit of code. Again using the same example. I am hoping that most of you can read that. How about the folks in the back? OK, yes. All right. So what we’ve got here, we are saying "OK, this whole thing you can mark as up as a DIV.

And we use the class vCard which comes from the vCard standard or RFC 2426. We mark up as a name with FN, which stands for formatted name. Mark up the image, that’s with photo with classicals photo. Mark up the note with classicals note. And finally the link to his blog, we mark it with a classical URL which is part of the hCard standard, saying this is a URL for Chris.

We are also marking with rel="me" which is part of XFN to indicate "Hey this blog of his over here is also part of his identity, that is same as his profile." Its part of the same person. OK, that’s it, that’s literary all you have – that’s the mark up you have to add. You probably have some mark up like the green. You have a few class values and rel value and that’s all the work you have to do to mark up a profile.

Now we talked about Pownces other profiles feature. Well here’s the mark up behind that. Literary all that they had to do was add rel="me" to each one of those links. That’s it. It’s not that difficult to do and probably takes you less than a minute to add to your template, and all of a sudden you are supporting it.

The key thing here is that for this to actually work properly there has to be some symmetry. So they link out from their Pownce profiles to all these different places, to their Flickr to their Technorati et cetera. From those locations the users will link back to their Pownce profile or their blog, whatever they consider their central hub of identity. And most users pick one spot that’s like "Hey this is me. This is who I am on the web". And I would link out from here and link back into here.

Most people use their blog for that, but you can also use your Pownce profile or your Digg profile, or any number of profiles that now support this other profiles feature which is getting much more popular.

Finally, the friends list. OK. Very similar to the profile you got a classical vCard for each person. You got classicals URL on the URL to them, and now rel=contact because you are linking to someone else, not another page that represents yourself. You are saying, "This profile over here is a contact for me" right.

This next thing going on is kind of interesting with the image element. Since we’ve got the photo and their name on the same element, we can actually use FN for the formatted name and the photo on the same element, and that works great.

And again, same thing, you just add a few class names and a rel value and you have made your friends lists portable. All right, save a separate friends page, like that ‘view all’ link over there, OK. Add rel=me meets that, because that’s part of your larger profile. Anytime you have a profile page that has various information about the user [indecipherable] and you start separating it down to one or more pages, for design consideration, space considerations, performance considerations, maybe even mobile considerations, right.

You want to keep your pages small enough to load quickly and efficiently on a mobile device. Just link to rel="me". And of course, you want to be sure you link back from the friends page to the profile page with rel="me" as well, so that, that link relationship of identity is confirmed. And then if you paginate with previous and next links, you simply add rel="me"to both of those.

And you might as well go ahead and add the semantic HTML "next" and "prev" as well. So that you know when you’re navigating through the entire list… A crawler can come by and say, "Oh yeah, this is all part of the same set of things, " and it can know when it’s done.

So, who supports this? Lots of companies now. It’s been a little bit over a year since I first put up a lot of these recipes for what you should do to support social network portability and tons of companies are supporting this now. So check the Microformats wiki for the latest, but you’ll find that there are easily… I think we’re above the 100-million mark at this point as far as social network profiles that support hCard. And the number of XFN- and hCard-supporting friends lists is huge.

So publishing is one thing, but what about the signup process? This is an area that I think is something that definitely could use a lot of innovation. If you look at what Daniel was showing you with Digg—they’re going to make it easier for you to sign up with Facebook Connect or with your OpenID—I want to actually emphasize that the first thing you should support is to import from the open social web, from the social web.

From the fact that there’s more profiles that support hCard than there are—across all these different sites—than there are Facebook profiles. Than there are MySpace, or… Any other specific site has now been exceeded by the total set of open profiles that are out there.

Something that Get Satisfaction has done is they actually create an interface here where you can just click a link and say, "Oh yeah, I know my Flickr, I can type that in." I don’t think it’ll load, but let’s see what happens… And it tries to get your profile.

As the network’s going to be slow for us, right?

It tries to get your profile but then when it finds it, it fills in all the fields for you and gives you a checkbox that lets you subscribe to the profile as well. And that’s particularly powerful. This is implemented today on Get Satisfaction. So if you create a new Satisfaction account, you don’t need to upload a new icon. You don’t need to update it when you update it on your other profiles.

So it’s the most widely-supported profiling format, like I was telling you. There are more hCard users than any one site. And the question is, can we actually take steps toward making the signup process as simple as possible? Can we actually achieve this goal of having maybe a single field where you just enter your URL and name and sign up?

And from that, you can import the user’s hCard, you can get their profile, you can get their nickname, which they can use as a login name, right? You can get, perhaps even their OpenID. All this information can be published with a single place.

And maybe even their email address. You don’t actually need to add a whole bunch of new fields and get them to sign up. Maybe you want to send them a default password. Or maybe you don’t even need a password because you just use their OpenID to let them sign in.

It is possible, and I think this is not one of those unobtainable things, this is one of those points we’re going to approach and we’ll see—like, within the next year—we’ll see sites that let you sign up with a single field.

Now, I mentioned OpenID. This is an area where there’s been a lot of work, and a lot of work with InfoCard and a bunch of other different identity systems, and what I want to say is: there is a word of caution here to keep in mind. Full disclosure.

Be a little bit aware of third-party authentication, you guys, because when a user comes to your site, it’s your trust that you’re trying to imbue the user with. You’re trying to get the user to trust and hopefully be faithful to your site.

So assume that the user gives your site some trust—maybe a friend told them about it, maybe they got highly recommended—you don’t want to lose that. And a lot of these authentication systems require you to go to some other site, log in, or do something, and then come back to your site.

The challenge with that is that there actually are some phishing issues with that kind of a back-and-forth interface. Now, we’re all fairly advanced users here that understand what we’re doing, so it’s not that much of a big deal for us.

But if you show an average person how to log in on some of these sites with their OpenID or whatever, they get really confused. "Why am I on this other site now? Why is it bouncing me back and forth?" There have been some advancements to that interface, so I’d say definitely take a look at what that works.

There’s even some problems with just signing up, what we call man-in-the-middle attacks. I’m not going to go into much detail with these because you can click on it. These are lengthy studies. There’s even a CHI 2006 paper, "Why Phishing Works" that goes into a lot of these scenarios of how phishers actually take advantage of the fact that, if you see something that looks like a login page, you’ll most likely enter it in and trust it.

So I’d say consider implementing OpenID in addition to importing and subscribing to hCards on the web. But insist on not sacrificing the user experience.

If you look at how OpenID logins are implemented on sites today, it varies widely. Lots of different approaches to doing it. Some have icons in various places, some have a separate login page, there’s all kinds of different complexity that folks have introduced with OpenID logins that I think is unnecessary.

It’s not OpenID’s fault. I think the problem is that by looking at it as, "Hey, we need to tout this feature, we need to tout support for this standard" you end up walking down this path of designing something that’s more complicated than it needs to be.

The best standards are the ones that are invisible to the user. Data should be visible, the technologies should be invisible. It should work like magic. You shouldn’t have to know that there’s hCard underneath the covers. You shouldn’t have to know that there’s OpenID underneath the covers.

You should just be able to sign in with your URL, your profile URL. And either it’ll work, because it’s an OpenID URL, or it’ll bring in your profile information because it’s got hCard, or your signup form will say, "Hey, thanks for your URL, now enter the rest of the information we need."

There’s no reason to put the little orange button there that says "RSS" that, back in the old days, would just display gobbledegook to the user. Let’s avoid this sort of techno-jargon pollution of our interfaces and instead focus on keeping the interfaces simple for the user.

All right. So, find friends. This is another common area that, once you’re supporting, publishing all this information, you also want to let the user find their friends on various different sites. Right now, you go to a lot of these sites—like Digg, or Pownce, or even Dopplr—and you have to pick which site to import your friends from.

Well, on my Dopplr I actually tell it, "Hey, I’m also tantek.com." And from there, it knows my Twitter is twitter.com/t because it’s all linked with rel="me", it’s all linked from my Pownce, etc. But it still asks me, "What’s your Twitter account name?"

There’s actually no reason for it to ask me, it has the information. It knows my URL, my OpenID, tantek.com, that I can log in with. It could simply either crawl that, get the rel="me" links and get the equivalent profiles, and know, "Oh, OK, I know you’re also ‘t’ on Twitter, I’ll use that for you." Or it could call a Google Social Graph API, which I’ll discuss a bit. This is something that Dopplr could improve.

Pownce actually does do this, which is kind of nice. I think Pownce’s implementation of this; they’ve been improving pretty continuously with slight UI tweaks along the way. So if you actually enter in your other profiles on Pownce—just to show off your little badge on your profile page—when it comes time that you decide you want to import your friends, it uses that information, which is one less step for the user. Any time you can improve the user interface by removing a step for the user, you’ve made it that much… You’ve reduced the friction by that much and helped the users use that much more.

The problem is, I’m always adding new folks to Twitter. So, do I have to go back to Pownce all the time and say, "Hey, check my new friends again." This is part of the whole social network tax that I have to pay every time I join a new network. Instead, it should syndicate it.

Pownce should automatically say, "Hey, we’ve noticed that you’ve added a bunch of friends to Twitter, do you want to add them?" Or maybe I trust to add everyone on Twitter to my Pownce and I want a checkbox that says, "Always add everyone that I add" so that I can know that when I add someone on Twitter, it’ll automatically add them on Pownce.

Now, this is something that I think Pownce has fixed, but a lot of services make this assumption that, well, if you have a friends list on one site, with their aliases, they’re probably the same on the current site because people tend to use the same username across different sites. While that tends to be true, it also comes with a bunch of false positives.

Another problem is that all these sites require you to import your Twitter friends, then your Pownce friends, then your Gmail addresses, then your Yahoo addresses, etc., one at a time. You don’t actually have to do that, necessarily. I mean, sure, you can give the user that kind of fine-grained control, but just like that slider image that Daniel showed you, you’re kind of copping out a little bit from a user interface standpoint.

Better instead to find your friends across the web and this is an exceptionally powerful thing that right now is implemented only on a napkin.

OK. There it is right there. So what this diagram is illustrating, this napkin drawing is illustrating – and I think a lot of good designs start as napkins – is say I have an account on Dopplr, and I have linked to my blog or my Pownce. That’s the left-hand side. That’s all my identity, that left-hand oval, right?

Then I also link from my blog and my Pownce to my Flickr. Now my Flickr, let’s say I’m friends with Jeff Feem, which I happen to be – I’m following him on Flickr, following his photos – and his Flickr links to his blog which also links to his Dopplr.

So you can actually follow the realm elinks, determine that my identity on Dopplr includes my blog includes my Flickr, notice the fact that OK well Jeff’s identity… That on Flickr I’m friends with Jeff and that his identity there consolidates with his blog and with his Dopplr. Then determine 100% certainty that hey you can suggest that you know Jeff on this site you should add him on here.

No false positives. This scales across different sites. So you can just call Google Social Graph API – which they launched in February of this year, which indexes all this information – to find out what are the other sites I’m on. You just give it a URL. It gives you a backlist of URLs. Google’s cached all these links already, so they can just tell you. And who are my friends across sites?

These are API calls you can make today to Google to calls information. You don’t need to call each site separately. You can call Google once or twice and get this information for people across the web. That’s where this needs to go. More work done for the user with less effort.

So why are companies supporting this anyway? Well, some folks actually do the right thing it turns out. Do the right thing for the user. Get more users sooner. You reduce friction – this is an obvious one, we all know this – you reduce friction for sign-up, people sign-up more.

A lot of folks are saying, but I don’t want my information to go out. I want to protect all the information in our little silo. The thing is if you actually publish your user’s information that’s public with hCard, with XFN and all that, what you’ve now done is become a high quality publishing location for that user where they can syndicate out their data. They can trust it just like they would trust their blog that syndicates out their feed as RSS or Atom.

So you actually build more loyalty by your users by opening up their data and letting them repurpose it and mash it up with other sites. Because if they update their icon on Flickr and make their satisfaction depend on it, they’re more likely to keep going to their Flickr account.

This last one is one we’ve seen over the last year. Hcards and XFN now dominate in numbers above any other specific social network silo. This is a natural effect of any open standard that the network affects when two sites implement it, there’s more incentive for a third site. There’s more incentive for a fourth site. Metcalfe’s law insures that this is going to continue to happen.

Finally you want to outgrow the competition, right? But before we jump too far into outgrowing the competition, I want to at least mention the anti-patterns. The things that you should avoid doing. So there are a bunch of social portability non-goals and dangers.

This is the most important one. Do not ask for usernames and passwords to other sites. You’re teaching for… Gmail, Yahoo mail, all these sites, these actually have APIs now. You don’t need to ask for users Gmail or Yahoo mail. Because when you do this, you are teaching users to be phished.

A random site comes along and says hey let’s import all your contacts into this thing that keeps track of your favorite books or whatever. Then all of a sudden it turns out that it actually takes over your Gmail, uses your Google Checkout account, takes your money from there or whatever. It’s a bad habit to teach users.

The second one which is highly related to this. Unfortunately a lot of the same sites do this. They get your Gmail, Yahoo mail address and say well we just want to check to see who else is on the site, but they don’t do that. They actually go and email everyone on your address book.

How many of you have received an email invite from a friend from a social network, followed shortly by an email saying, "Oh I’m so sorry." Or a Twitter. Quechup did this last year to great distain, and I think fortunately there was enough feedback mechanism with Twitter and all these other sites that when sites are doing this now, they are getting called out for it sooner and sooner.

In fact we have a little bit of a hall of shame page on our Wiki called social network anti-patterns that you can go see Goodreads – spams your address book – Quechup, Facebook – asks for your password, your Gmail – Nsyght, ShareThis, Twitpic login, etc., all these sites. So I encourage you if you find sites that do this anti-pattern, please go ahead and add them to that Wiki.

OK. The final thing to avoid. Avoid violating user expectations. This one’s important. Users when they sign for a service, when they give their email address, their expectations today is that email address is private. They don’t expect that that email address is going to be shared even implied to be shared.

So if you do something like say consolidate their identities across different sites by looking up their email address, by search – just because you can do something doesn’t mean you should – you will violate the user’s expectations. So obviously don’t publish the user’s email. Most sites don’t do that.

But less obvious, don’t even publish a unique cache of their email because that enables third parties to consolidate their identities across different sites in ways that the users do not expect. They don’t expect that site A will share their email even in sort of a un-equified form with site B or with site C. So when that happens, they’re like, "Oh my gosh. How did you know that? "

This is the creep out factor we talked about. It’s all nice and wonderful to make things seem automatic and easy, but if it seems creepy, you’ll scare the user. They’ll not want to use your site. They’ll be like, "Why do you know this about me. I don’t trust you any more." Then you’ve lost that user. That’s no good. So avoid publishing email and unique email caches.

What next? Implement today based on public data. Keep up with updates on the Microformats Wiki, social networks portability. Add your site to the Wiki as you implement each one of those little pieces. As you implement hCard profile, there’s a page to say we implemented hCard profiles. As you implement [indecipherable] to their blog or home page, there’s a list for that too. Add your site there. As you implement an XFN friends list or an hCard or XFN friends list, add those on.

Finally, this is an area that has just gotten working pretty recently which is OAuth support for incorporating private data. How many of you use Flickr? A lot of folks here. How many of you use some support of Flickr up loader application or something like that? Do you remember the first time you signed up? You had to go to Flickr and say I’m going to give this application permission to upload, right? Vaguely? Then you came back to this application and said you’ve approved this application.

That’s basically what OAuth does but in an open way, open standards way and is now supported by Google for the Gmail contacts API and supported by a lot of other companies.

So if you support this, both as an endpoint and as a consumer – which means that you provide an OAuth interface to allow other sites to access your user’s private data with their permission and while you’re looking to import information from another site you try to access it via OAuth and get their permission – then you can now import not just their public information but their private information. I believe there’s a library being released pretty soon for this. Is Glenn here? Glenn? Has that library been released?

Glenn: Yeah, this morning.

Tantek: This morning? So Glenn Jones of Madgex. This morning there’s been a library released, open source library released to import your contacts via OAuth from any site or publish. Take a look at that link. Look at OAuth support, and you’ll find it there.

So this entire presentation, by the way, it was microformats. The text is Public Domain as I want to reiterate. If you have any questions, join the conversation. The Hash microformats channel on IRC. Irc.freenote.net is the best place to start. If you click that link you’ll find the IRC Wiki page on the microformats Wiki. Thank you.

Transcription by CastingWords, sponsored by Opera.