Works at Flickr. Ten things that have been learnt from Flickr than can be applied to other web apps. Ways to move from a web site to an app. Not very geeky. Not going to talk about MySQL and nerd stuff.

Flickr

Is awesome. Photo sharing app. Has tags. Has an API. All these Web 2.0 buzzwords. Obviously there’s been the Web 2.0 conference for a couple of years. Has taken off as a term. Lots of people will be talking about what web 2.0 means whether they say it or not, and trying to explain some of those principles. It’s nothing really, just a name for a tech that’s been around for a while.

Flickr is going to be 2 on Friday. Big party in San Francisco with cake. All welcome to go.

Flickr has 2m users, who are very passionate. Passionate users are important to Flickr, but the developers who built it who are also passionate. People don’t start a business to make money. you do it because you care about what you’re doing. BNy having passionate developers you get passionate users.

have to start from a pov where you care about what you’re building.

With Flickr, there’s a difference between what users want and what they need. People didn’t necessarily want the things that Flickr built, but maybe they needed it. We thought about feature that people needed first and foremost. You don’t listen to what your users say because they will tell you what they think they want. You have to watch what users do and look at their behaviour to understand what they need not what they say they want. If you give them what they need you’ll make them passionate.

Collaboration

First of the ten things is collaboration. At the beginning of Flickr, before Flickr, there was Game Neverending, which was a realtime MMP game, based around a realtime engine. Flickr was built on the same tech – massively multiplayer photosharing.

Very much like a game – social network, friends list, etc. Already a load of photo site, not a new tech. That’s not a big deal. What is a big deal is sharing your photos with your friend. Very bottom up, is social network.

Create network effect, by create incentive to add people to the network, so people add value by encouraging others to sign up.

Collaborative metadata also core. Tags, notes, great, but if i can add tags to others, then that’s collaborative metadata. More uses than just pointing out things you missed.

Aggregation

A lot of web apps where you upload your own data would all be siloed into users, a ghettoised space. So huge collection by data, but instead of showing by user, show by other ways, e.g. latest photos. Loads of interesting slices of the data. So think about the whole bunch of photos as one big blob, can slice by tag, by geolocation, relation to other tags, interestingness etc.

Open APIs

Many apps have open API, but what’s the point? We needed it for our own development, for building in throttling and abuse protection etc., so why not let other people use it? Had a bit impact early on with it.

Whole tonne of value in just pushing out read data, without exposing your system.

Started build sites, then web apps, now web services. We can allow other peopel to build our interfaces, and allows othe rpeople to do really interesting things, stuff we hadn’t thought of, wouldn’t have had time fork, or which sounded insane.

Something really cool is that people built a game called Fastr, multiplayer game with a series of photos and you have to figure out as fast as poss which take the photos came from. It’s really cool, but there’s no reason for usto have built it.

If you don’t provide an API, people will just scrape data, so it makes it easier for you and them.

Clean URLs

Getting very popular in Web 2.0. Core reason is that you don’t need to expose the core workings of your system in your URL. Use mod_rewrite under Apache. So the URL doesn’t have to point to a file name, so just translate from file name to URL using mod_rewrite. Core to Flickr URL.

The URLs don’t reflect the folder structure at all, so none of the URLs map to physical part of the disk. But that’s good because they are human readable and they are guessable. If you can guess the URL to a page, then people can get around fast.

Sometimes we’ll find we’ve removed a link from the nav, though, and never realise because the developers always type in the URL.

URLs can’t change. If they point to one resource now, they have to point to that resource forever. When we started Flickr we picked some really bad URLs, but we can’t change them because people have used those URLs and you can’t break those links.

This was a problem when scaling. When the URL scheme was changed, have to support the old URLs forever, because you can’t have them break for people.

AJAX, been around for a while. Worst name ever. Asynchronous Javascript And XML. Not always about XML or Javascript, because you could write an AJAX-like script in VB if you wanted. But the Asynchronous bit is important.

After you’ve loaded a Flickr page and you want to add a tag, the box appears without the page reloading, and when you submit it the page doesn’t need to reload either.

Need strong API so that it can be accessed via AJAX. It’s used primarily to streamline interactions that you already have. E.g. keeping the tags on the same page instead of having to go to a new page to add them in. AJAX saves a bit of bandwidth, stops page reloading, don’t lose context etc.

Also use it for creating new experiences. Not seeing this so much on the web yet, but we build self-contained apps in AJAX which have no way to address in to them.

Unicode

Internationalisation comes first, and localisation later. Important thing to consider is whether you want basic international support from the beginning. E.g. do you store all your data in unicode?

Usual use is to store, present and receive data in UTF-8. Some apps use UTF-16.

Desktop integration

Or platform integration, because your platform isn’t necessarily a desktop. Need to move interactions out of the browser. Most of this is grounded in APIs.

Bunch of desktop apps which work with Flickr, e.g. the upload app. Some tasks are crappy on the web, especially uploading photos, and especially more than one photo. Desktop app allows people to perform tasks that would be difficult, suck or just be stupid, in a browser.

Not just desktop apps. Also possible to do browser apps, such as bookmarklets.

More complex platform integration, e.g. toolbars or dialogues into the browsers.

Also integrating the app with email. Everyone has email, and email is integral to the way people interact online, but we don’t often think about building it in to a web app, e.g. to send email to our system as well as receive it. Difficult to get a photo off a mobile phone, but most can email, so as soon as Flickr could accept photos via email then that’s an uploader for every phone.

Also, simple notification emails to draw people back to the system.

Mobile

Will become the most important platform. Heard this for the last five years. You probably remember WAP and how influential that was… but there are some standards so you can build stuff, and so some people will use them. But they usually all support XHTML Mobile, quite a sensible standard.

Build small apps for mobile devices using XHTML Mobile will work on most phones.

People used to think that it was about creating a smaller logo, but that just doesn’t work. Can’t have more than a couple of lines of text and expect anyone to interact with it. It’s not just a case of re-presenting the same content using a different format. Need to think about what you’re presenting. Needs to be snappy. Think about stuff you wouldn’t want to do on the website, maybe. But not all data is suitable for mobile devices. Need to think in small chunks.

Open data

Import and export of data from systems we build. Export through RSS feeds, but can only get 10, 15 or 20 most recent photos. But doesn’t give a mechanism to get a few hundred out of Flickr. Provide a method to get all their data out, or to import everything in from another app.

If you give people the feeling that they can leave at any time, they are more likely to stay.

It’s not just primary data that’s important. People may already have a photo back up because they upload it from somewhere. But they don’t have the metadata, so what’s important are the notes, tags, comments etc. and getting some sort of local back up. That’s done through the API.

There are 3rd party services that back up your photos to a DVD and then sell you the DVD. Makes people feel safer.

Open Content

Previous to Flickr, a lot of web apps that stored data, once you uploaded your data, they own it. Still the case with Google Video, and other photos sites – they can sell it, use it, do whatever with it because they own it. Flickr does not own their user’s data. Allow users to use Creative Commons licences if they wish.

Through the open APIs, open data, open content, and allowing people to reuse and remix and use the data for interesting purposes. There’s a video someone did with CC licensed photos, blog.flickr.com, and wrote a song about it.

All photos used in presentation were CC’d, and attributed in presentation, which is online at http://iamcal.com/talks

Browsers

Always people who some weird browser. CSS will drive you nuts. Header issues. Firefox extensions. Every broken interaction will hit your database and slow it down. It’ll drive you nuts. Need to get your browser shit fixed up straight off.

Scaling

Don’t do it. Whatever you think you’re doing to need to deal with is not going to be the problem. Read Cal Henderson and Brad Fitzpatricks’ presentations on how to make things go faster. These things talk about, not scaling but how to deal with databases. How to deal with SQL not being great. Think about splitting data over multiple machines. Things like one webserver talking to 8 dbs will blow up in your face. Test every single SQL query.

Set up a monitoring system because you’ll get paged at 2 am. No good being asleep if your db goes down because it’ll stay down til you wake up.

Understand your db. Lots of apps have tags, but that doesn’t map to SQL at all, so understand tricks and tips. Have different tables so you don’t have partial indexing.

Cache.

Understand where latency is ok. Figure out where you can be sloppy, and be sloppy, e.g. RSS feeds don’t need to be instant.

Idiots will break stuff in ways you can’t yet imagine. You can’t predict how what they will do.

Apache

Do stuff with Apache. Images off a different server, RSS. Throttle.

APIs

Were created early on in Del.icio.us. Helps the ‘priesthood’ get a measure of comfort in your system. They want to take their data and go home if you go offline. Make the API easier to get into and out of, the more it will be used. Make it simple. Del.icio.us is just XML.

Identifiers

Unique IDs in your db is a mistake for scaling. But do not expose that ID to the outside world, because some idiot is going to use that to try to scrape your database. That’s a hint that people want the data, but they aren’t going to wait for you to give it to them, so they will hammer your systems to get it.

Features

Significantly influence behaviours. Also, which ones do you leave out? If no tags, Del.icio.us wouldn’t have worked. Try not to add features that exist elsewhere. No need to come up with a new way to do things that are already being done, so don’t use messaging, because we have email already.

When people ask for stuff, that’s important info. Try to understand why they are asking for that. Extract the use case. E.g. people want boolean search on the tags, but hardly anyone searches on more than one tag at at time.

RSS

Important in Del.icio.us. It’s another set of tools to get in and out of the system. Everything that could have a feed should have a feed. This was more important a year or two ago, when RSS was the big thing. Now it’s not quite so exciting, and maybe there’s another feature that will cause people to show up.

Need to understand the headers, caching, etc. If you can stash the timestamp then this can save an enormous amount of effort.

URLs

Primary vehicle for people to to find your stuff. Don’t do session keys. Leave underlying framework out. It doesn’t help the user.

Also allows you to expose some functionality to the priesthood who care.

Surprises

Watch for interesting behaviour in the system. If people do things you didn’t expect or intend, that’s neat.

Passion

Choose a problem that you yourself have. Had a text file with 20,000 links in it. Couldn’t find stuff anymore. Had a URL, space, then descriptive text, e.g. wifi. That was the first tagging system.

Build a db system which was like Del.icio.us which was single user, for him. Used that for a few years, then built for other users. Del.icio.us came out end 2003.

Don’t look for problems you don’t have, because someone else who is passionate about it will solve it better than you can.

Release

See teasers. Limited betas. All horrible. Every day you don’t have something out in the world you are losing information, feedback, users, reputations. Get it out there, get the release done asap.

Attention

Anything like RSS has some element of attention. This is useful, interesting behaviour. We do the ‘what’s been popular in the last 24 hours’, and people pay attention to that. That works reasonably well when the population is small and all biased in the same direction, so that things the group finds interesting the whole group will find interesting.

As the group gets larger, the bias will drift. But you can aggregate with a given tag and then can compensate for the decrease in bias.

Figure out how to keep things on topic or fragment into different piles of attention.

Spam

Is attention theft. Spag – tag spam. But people will try to get into any aggregation of attention.

We don’t do a top ten, because it’s biased in favour of stuff that’s been around forever. And, as soon as you do, people will try to get to the top of that list.

Understand what you’re’ building as you build it to avoid these things.

Don’t provide feedback when someone spams, and you figure out the fix. Don’t give them an error message because then they know they’re doing it wrong and will try again.

Tagging

Is not really about classification or organisation, it’s user interface. It’s a way to store your working state or context. Useful for recall. Ok for discovery because someone might tag similarly to you. Bad for distribution.

Not all metadata is tags. People ask for automatic metadata, but that’s not the value – the value is attention, that you saw it and decided that it was important enough to tag. Auto-tagging doesn’t help you do what you’re trying to do.

If you make it too easy… because there’s a small transaction cost then that adds value. But don’t make them do too much work.

Beware librarians who want an official list of tags.

Motivation

Why are people there? Have to expect the user to be selfish. But build a system people like and this breeds evangelism.

Effort

Watch what you find your time doing. If you spend a lot of time building a feature that no one uses then that’s a waste. Be careful.

Measurement

Guesswork backed by numbers. If someone is using a feature in week one, do they also use it in week five. Measure the system itself. But also understand that in the data that the system collects, measure behaviour rather than claims. In Del.icio.us there’s no stars, because why would you bookmark something that’s bad? So rely on what people are doing not what they are claiming to the system.

Testing

User acceptance testing. Very important that everyone on the team sees the user testing. Don’t give people a list of To Dos and then watch them do that because they have a vastly different behaviour than what they do in real life. People don’t read, don’t follow instructions… people know this intuitively, but it’s far worse than you realise.

Language

Speak the user’s language. Del.icio.us is about bookmarking. Bookmarking was a Netscape or Firefox thing. In IE it’s favourites. So make sure that you speak your user’s language or they’ll leave.

Registration

Don’t make users register before they get into your site. Give them as much functionality as possible, even give them anonymous access to start with. Logging in is a big barrier. People want a good idea of what they are going to get if they register because it’s a lot of work. People are afraid of giving out email addresses, spyware, etc. They want to know what they are going to get out of it. You can’t tell them, you have to show them. Let them wander round and get a feel for it. That’s the only way to get them into the system.

Present the appropriate gestures and verbs, save, copy, bookmark, etc.

Then when you have to register, make it as short as possible, and take them back to where they were. Don’t dump them on the front page again.

Design Grammar

If you’re doing something different, then understand where you’re breaking away from normal behaviour. Design should be standard – tabs on top, nav, logo top left. What is the structure of the world? Emulate that as far as possible, but be careful of what your design implies, what it makes people expect.

Morals

It’s the user’s data, not your data. You get to use it, but it’s still their data. They have to be able to add, modify, delete their data. Up to and including removing themselves and their account from their system.

When Del.icio.us deletes a bookmark, the data’s purged from the system. Once it’s gone it’s gone.

Infection

Spent nothing on promoting Del.icio.us, ever. To do this, enable evangelism, so people want other in your system, want to tell people. So enable every communication method possible.

Email is tricky because you don’t want to be a spammer. But RSS. Think of every RSS read as a client app. Viral vectors. Desktop apps can eat a lot of data through http, so figure every app out, and see if you can get in there.

Communities

There’s not ‘quite’ a Del.icio.us community, because Del.icio.us is a tool, and the communities are elsewhere. The communities can use the tool, but no need for Del.icio.us to have a community. There are flame wars and all that, interactions that you don’t want people to have.

So I’m at the Future of Web Apps conference today, sat in Kensington Town Hall with 800 real proper geeks, hearing about how to develop, er, well, web apps. I’m sure at some point during the day someone will give a deeply techie presentation which will go right over my head, so notes may be patchy. Note are also going to be up on the wiki, but I’ll live blog too.