Barcamp: this is a placeholder

A few weeks ago I promised Kevin from TechYizu that I'd do a talk at Shanghai Barcamp. "What will the talk be about?" he asked me. "Just put a placeholder in the list of talks for me", I replied.

I got distracted doing other things and the placeholder talk sat there in my calendar, reminding me about the event on September 8th. So in the end, I decided I'd prepare a talk... on placeholders!

I'm going to try to persuade you that placeholders - those little pieces of text that hint to you what the real content will look like - are worth your attention. There are four reasons why...


Here's a great example from web monitoring service Pingdom. It's a form for checking your website's response time. Just a simple textbox: but the placeholder www.example.com provides a great deal of information! It tells the user that they probably need to enter a domain name, and it also hints that it's OK to leave off the http://. A simple placeholder reduces the number of instructions you need to provide.

As a developer, any time you show an error message to your user as a result of their input, you have failed. The user doesn't know exactly what format to enter their data. Placeholders provide a first step to showing them what to do. If your app shouts at a user like this:

... naturally the user will feel angry! "What do you mean my own name is invalid? Should I change my name just to make this website happy?".

And placeholders are incredibly easy to implement for forms. In HTML5, add a single attribute. Add a jQuery plugin for supporting older browsers, and you're done.

What's the next step up from placeholders for forms? Placeholders can provide complete sample content. Basecamp is an online project management system known for it's excellent user experience.

 

In their Basecamp Classic system, there are a lot of features like todos, messages and calendars. When you first create an account, you don't have any of those items, so your home page (dashboard) would be empty and unhelpful. Instead they provide a big placeholder which shows how your dashboard will look when populated. It's a great way of showing a user how a complex feature will work.

And placeholders can do much more...

At ReignDesign we make lots of cool apps and games: here's the App Store page for our recent iPad puzzle game Flockwork. Now we know from eye-tracking studies, and our own experience, that when the average user looks at a page like this:

 

What they actually see is more like this:

The only things that really grab a user's attention are your app icon, and screenshots. The screenshots in particular therefore provide a vital chance for you to present your app - and placeholder content - in its best light.

A company which understands this well is Remember the Milk. It's a funny name, but it's a great app for todo lists.

Go to the Remember the Milk website and you'll see a screenshot of their iPhone app. What they didn't do is just randomly take a screenshot of their app using test data. The items are actually cleverly thought through: notice how the first item, "Pick up the milk" echoes their brand name.

If you fail to think about your placeholder content, you can end up with something like this, a screenshot from an early Windows Mobile phone. The events on my calendar sounds really dull: I have a full 2 hours of "stats analysis", and at 7pm I'm still not done with work, I need to "edit review". Yawn.

 

A company which understands this very well is Apple. Take iPhoto, their digital photo management software. Go to the iPhoto website and you'll find some screenshots of the app in action, like this. This selection of albums has been planned in detail. Of course, all the images are vibrant and colorful...

But you can also start to notice certain trends in the choice of albums, trends that Apple wants us to associate with being consumers of their products.

Photo Stream is another cool Apple feature. It automatically uploads each photo you take with your iPhone to the cloud, and you can view them on any device. Here's the screenshot:

This person is amazing at photography! All the photos are pin-sharp, and apparently they never try taking the same photo more than once. Now, real people's photo streams look a bit more like this:

 

Use any of Apple's products, like Mail or Contacts, and you'll often see a familiar name appearing in ads and examples. This is John Appleseed, Apple's standard placeholder person. Oddly he seems to look different in each application...

So, who is John Appleseed? Once you start looking out for him, he's everywhere! Ever used TextEdit, the standard text editor on a Mac? Try zooming in to the icon...

 

There he is again!

John Appleseed was a 18th century American pioneer known for his kind-spirited work including introducing apple trees to several US states. The name was adopted as a pen-name by Mike Markkula, one of Apple's early investors and software writers, and the placeholder name soon took on a life of its own.

And finally...

Have you ever wondered why Barcamp is called Barcamp? It doesn't really have anything to do with bars!

If you're a programmer you'll probably recognise these, the meta-syntactic variables foo, bar and baz.

 

You can think of these like a convenient shorthand for programmers when they communicate syntax. So if I say, in a particular language, a variable is defined like this, and setting the value of that variable is done like this, a fellow programmer will quickly understand my meaning, and be able to extrapolate to any variable.

The placeholder provides a shortcut. I don't have to explicitly define the rule for the setter, by saying "write the word 'set', followed immediately by a capitalized version of the variable name" - the placeholder makes this instantly clear.

O'Reilly Media run a hacker camp called Foo Camp. When some of the attendees wanted to run a public unconference with an similar informal structure, there was only one name a hacker could really choose: and so FooCamp led to Barcamp!

 

If you enjoyed this review of placeholders, you might also enjoy my previous Barcamp presentations, including Sh*t iPhone Developers never say, HTML5's missing tag: <sarcasm> or Love Hotels and Unicode. And if you love developing cool mobile apps as much as I do, we're hiring!

 

Matt Mayer

Matt Mayer is a founder at ReignDesign. Matt is from the UK and was based in Shanghai for ten years. He is now living in Bangkok, Thailand.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this post