The Timeless Way of Designing for Play

Buga Playground, Munich

“The more living patterns there are in a place—a room, a building, or a town—the more it comes to life as an entirety, the more it glows, the more it has that self-maintaining fire which is the quality without a name.

“This quality in buildings and in towns cannot be made, but only generated, indirectly, by the ordinary actions of the people, just as a flower cannot be made, but only generated by the seed.”

(The Timeless Way of Building, 1979)

Because websites are places, lots of website makers find inspiration in the work of architects like Christopher Alexander.

But the websites we’re building are less akin to houses and parking lots than playgrounds. We want people to stick around, have fun, socialize, create, and find new and novel uses for the structures we’ve put in place.

When people are spending a lot of time on your site connecting with one another, essentially engaged in play, your site can begin to attain that “quality without a name” Alexander wrote about. It starts to feel alive.

So I’ve been spending more time reading about playground design. Not just Isamu Noguchi’s playground work, which is a life’s study in itself (and a great drama, Noguchi v. Robert Moses), but contemporary playground design theory which appears to have been flourishing in continental Europe for some time.

Great playgrounds and great web apps are rich with opportunities for play and inspire creative approaches. They’re open-ended enough for you to make them your own and reveal new possibilities as you become more engaged with them. And they’re accessible: a beautiful playground or website that no one uses doesn’t cut it. Kids are discriminating about where they play, and people don’t use websites just because they’re there.

Villiers High School, London

In Play England’s Design for Play: A Guide to Creating Successful Play Spaces, a set of design principles for playgrounds are enumerated which could as easily be applied to web apps. Successful play spaces provide a range of play opportunities, meet community needs by engaging everyone in its design, build in opportunities for risk and challenge, and allow for change and evolution based on usage.

Maritime Youth House, Copenhagen

It’s important to leave the door open to new usage, similar to the way classic skateboarding spots like the Southbank Centre Undercroft in London (and hopefully someday the Brooklyn Banks) have embraced their designation as places to skate.

In the United States, we happen to be living in a golden age of poured-concrete skatepark construction. A half-dozen have opened in New York City within the last year. And after a period of sticking to various conventions and tropes, skatepark designers are pushing themselves to create public spaces packed with possibilities. See: Skateable Art and this park by Jeff Paprocki in Middlefield, CT.

Fundamental to great skateparks and play spaces are non-prescriptive features. Design for Play highlights Trefusis Playing Field in Kerrier, England, which contains elements with no defined function such as this curved concrete structure. It can be used for skateboarding, seating or for children to run along, or something else we haven’t thought of.

Trefusis Playing Field, Kerrier

Facebook the lobster trap and Twitter the blue-ball machine both contain non-prescriptive features put to creative use daily. Twitter occasionally builds in support for some of these uses, like retweeting.

Playscapes is a playground blog I encourage spending time on (most of the playground pics here are from there), and Susan Solomon’s American Playgrounds: Revitalizing Community Space is a playground book I encourage owning.

In A Pattern Language, Alexander recommends adventure playgrounds for children: “a place with raw materials of all kinds—nets, boxes, barrels, trees, ropes, simple tools, frames, grass and water—where children can create and recreate playgrounds of their own.”

I like to think of the internet as one big adventure playground where we’re creating our own playgrounds.

Transit Map Matters

Jake Berman makes better transit maps. I found this beautiful late-night subway service map of his on the New York City Subway Wikipedia article.

New York City Subway late-night service

It reminded me of the famous 1972 Massimo Vignelli map which hangs in my kitchen, but turns out it’s primarily influenced by the relatively obscure 1966 system map. That map is notable for the way its line curves match the street grid.

1966 New York City Subway map

This reminded me of the KickMap by Kick Design, which takes a similar hybrid approach in its attempt to display the entire subway system and its relation to the city as cleanly as possible. The KickMap is stylized for clarity but its stations are location-accurate and a comprehensive street grid is used.

KickMap subway map

The KickMap is I think the most successful current map of the amazingly complex New York City subway system (the MTA thought otherwise), and you can put it on your iPhone.

Berman also uploaded this 1939 map of the never-built IND Second System, which would have put a subway stop within a half-mile of anyone’s home in New York City. They’re just getting around to construction of the Second Avenue line proposed then.

But much of Berman’s efforts lately seem to be focused on creating maps of entire city transit systems, particularly in areas served by different transit agencies that ignore one another. Here’s a map combining the regional commuter rail lines of Greater New York:

Greater New York Regional Rail

And here’s San Francisco’s complete rail system (BART, CalTrain and SF Muni united! Downloading this now because this always baffles me when I visit):

Bay Area Rail Map

He’s also got some ideas on bicycle infrastructure for the suburbs.

The Sun Rises in the East

Etsy’s Treasury is something I’ve long been fascinated by. It’s an ever-changing, member-curated shopping gallery with some unique constraints. Treasury lists only live for 48 hours. Each list has a limit of 42 comments. You can only create a list if the total number of lists falls below 333 (shorthand for <333, meaning 'MUCH LOVE', according to Wikipedia). And you can only have one list living at a time. These constraints create scarcity, which makes the opportunity to create a Treasury list more desirable. The constraints also help to give the Treasury a “live” feel—what you’re seeing in the Treasury and sharing with other visitors is ephemeral, and will soon go away. As we used to say, “Embrace the decay!” Plus there are some real-time aspects to the Treasury that are rare on the web: When you’re viewing a list, you can watch other people’s clicks as they happen—the items are highlighted in yellow for other visitors the moment they’re clicked. Each list is a temporary, shared space. You can see this in the Treasury list URLs, which contain a “room_id.” The lists are rooms, and you always know how many other people are in the room with you. In the early days, this was made explicit from the start, and you could watch other visitors fly into rooms from the main Treasury page.

In other words, everything that makes the old Treasury unique is related to the fact that it’s a Flash application: its constraints, and its real-time feel. These things are inseparable from its origins in Flash. But at Etsy an entirely new infrastructure for collections is being created, powered by MongoDB.

So we launched Treasury East as a testing ground for a new unlimited Treasury world, where anyone would be able to create a curated list of items, and that curation activity would be rewarded and harnessed as the important signal it is in a marketplace of one-of-a-kind items made by humans. Etsy is filled with things you never knew existed and never knew you wanted. People welcome guidance and clues from other people in this environment.

And the birth of Treasury East has been remarkable. It feels like the flowering of something new and great, as fascinating items and shops are surfaced by people with a talent for finding things.

Because as any collector knows, it’s fun and satisfying to find things, and can be an outlet for self-expression. Here’s a list I made this morning while on a vintage mid-century modern housewares binge (it happens):

The Modern Home by sean11 on Etsy

Already we’re seeing games emerge organically, some reminiscent of the Etsy Sneak Attack and PIF (Pay It Forward) phenomena, like Treasury East BnR (Buy and Replace), started by Grace of Homespun Handmaiden. BnRs are bemoaned in the old Treasury world but in this new environment they start to feel like a primitive social-commerce life form that might evolve into something more interesting.

OK I’ve started a treasury east that’s a BnR (buy and replace). Basically you can buy any of the items in the treasury and post the transaction link in the comments. I then go to YOUR shop and replace the item you bought with one of your items! It’s a win-win for all involved. This is a great way to promote your shop and support fellow etsians at the same time!

Keeping an eye on the constant stream of Treasury East blog mentions and Twitter mentions for more.


Reading List


Books follow me around and accumulate in stacks: by my desks, bed, coffee table, couch. If I could have the current active lot organized into a single stack based on pages viewed, notes taken and ideas generated, it would look like this:

1.
A Pattern Language by Christopher AlexanderA few months ago I started picking up books on architecture, urban planning and social psychology and reading them with software design in mind. Christopher Alexander‘s ’77 classic A Pattern Language towers above the others in richness and hasn’t left my bedside. If you’re familiar with the use of design patterns in software development and the classic book on them, the format of A Pattern Language will be familiar: it was its inspiration. Jon Udell and Erin Malone have both written recently on the relevance of A Pattern Language to software design.

2.
Neuro Web Design by Susan M. Weinschenk, Ph.D.Also been sifting through books, papers and presentations on neuroscience while thinking about software design. Neuro Web Design distills many of the key lessons from the field into one thin volume. Topics include the power of social validation, building reciprocity and concession, invoking scarcity, using similarity, mass interpersonal persuasion and the power of storytelling.

3.
Life, Inc. by Douglas RushkoffDouglas Rushkoff spoke recently at Etsy on the creation of value and how to exchange it directly with others. His book, Life Inc., has been on my mind since the fall, and helped kickstart a line of inquiry I’m still following regarding the nature of currency. Watch Life Inc. the Movie for an worthy introduction. Stacey Brook also wrote up a recap of the Etsy event.

4.
Designing Social Interfaces by Christian Crumlish and Erin MaloneIf you’re familiar with the Yahoo Design Pattern Library you’ll be familiar with much of this book: Christian Crumlish is the curator of both. I crack it open regularly, though in some ways I prefer Joshua Porter’s older Designing for the Social Web. See 5 Steps to Building Social Experiences from co-author Erin Malone and the Social Patterns wiki for more.

5.
Deep Economy by Bill McKibbenBill McKibben’s Deep Economy: The Wealth of Communities and the Durable Future is an Etsy Book Club selection. It’s a lucid book articulating the need to explore new economic ideas and create more localized economies. The big idea is that localization is the only way to achieve economic resilience, and Bill makes the case obvious.

6.
Games magazineBeen reading up on games and game mechanics for a while like a lot of people (see Amy Jo Kim and my favorite category on Wikipedia), and teaching myself Go, but was unaware of how great Games magazine was (is?) until I came across some early issues circa 1977 and ’78 at an antiques market. In between scholarly articles on ancient African games there are pages of logic puzzles, unusual crossword variants and ads for ’70s classics like Mastermind and Othello—plus the magazine itself is a game, with hidden contests in every issue. NYT crossword puzzle editor Will Shortz was an early contributor.

7.
The Language Change by Kevin HooymanThis was a birthday gift from a few years ago, but there’s so much in it it’s still speaking. An extended abstract philosophical discussion among forest animals against a backdrop illustrated with obsessive detail, Kevin Hooyman’s The Language Change is one of the books that doesn’t leave the active stack because I’m still getting my head around it. In “Chapter One: The Animals Speak Amongst Themselves,” a bird asks, “Are numbers real?” A bearded dog answers, “They are useful but they are not real.” &c.

8.
My Piece of the Pie by Donald Brown. This is my grandfather’s autobiography, which I’ve been editing and designing. Family review copies have been circulating and I’m now trying to track down his patents to include them as an appendix. It will be available on Amazon eventually via Lulu.

9.
Beautiful Data by Toby Segaran and Jeff HammerbacherBeautiful Data is a collection of the stories behind elegant data solutions. Almost a book version of the kinds of things I was thinking about when I started working on Datamob, with many of the same players discussing different approaches to tackling the challenges of working with data. Michal Migurski of Stamen Design, whose 2009 Flea Market Mapping presentation still gets me excited, comes through with a detailed chapter on the process of freeing and beautifying urban data. There’s also a fine chapter from Jeff Hammerbacher tracing the history of Facebook’s data team and the evolution of the tools used for information processing at that scale.

10.
Evergreen ReviewI spotted a pile of back issues of Evergreen Review circa 1970 and ’71 at the Beat Museum in San Francisco and found them irresistible. I had seen issues from the ’60s but in the ’70s things apparently got a lot sexier. Writing from counterculture greats, beautiful photography plus fascinating ads for underground book clubs and defunct concerns like Truth and Soul Fashions.

A new stack is forming now with The Pragmatic Programmer, Stewart Brand’s How Buildings Learn, Carl Jung’s Red Book, Coders at Work, and whatever I can manage to score from the Library of Radiant Optimism for Let’s Re-Make the World.

The Providence Curse

The European Street Team, an Etsy Team, asked for a photo tour of a favorite place. You’ll never guess which place I chose.

Providence

Consciousness, Pleasure and Website Addiction

From Thorpe and Fabre-Thorpe, 2001

I was first alerted to the work of Irving Biederman, professor of neuroscience at USC, via this WSJ article on the nature of addictive websites. I’ve been a fan since. His experiments are fascinating, probing everything from the neural basis of shape recognition—with members of remote African tribes with no exposure to uniform, manufactured objects as test subjects—to whether or not people are able to recognize faces in the form of pigmented “3D blobs” that look like teeth. But his work on the evolutionary factors behind scene preference is of special interest to web people.

Biederman found test subjects preferred scenes like this,

Over scenes like this:

And more than that, preferred scenes were accompanied by high levels of neural activity in the association areas of the brain. Greater neural activity increases production of opioid neurotransmitters; the greater the rate of opioid release, the more pleasurable the experience. The association areas of the brain have a high density of opioid receptors—neural activity there is pleasurable, and addictive.

The big pile of bricks above is what Biederman calls an “uninterpretable input.” It’s a random-appearing mass. “Novel inputs” like the garden scene above result in extensive interpretation and association and release a pleasurable flood of opioid hits. Repetition of novel inputs though result in rapidly diminishing opioid returns.

What makes a scene richly interpretable from an evolutionary perspective? Well: mystery (“How likely is it that something new might happen or that you would obtain different information from changes in your vantage point?”), vista (“How extensive is the view? Good reconnaissance?”), refuge (“Is there a position in the scene where you can achieve a good vantage point without being seen?”) and whether the scene is natural or urban (“Does it afford food or water?”).

To illustrate that pleasure is generated in that moment of novel interpretation, Biederman turns to Droodles. Droodles are doodle-riddles.

Have a look at this droodle:


Then have a look at it again *with a caption*:

Looking at a giraffe through a second story window.

Better, right? Biederman opted not to use lolcats in his study.

We’re forever seeking new and richly interpretable information. It’s how you got here. Addictive web apps offer a constant stream of new information ripe for interpretation and association. Nowadays, with our needs for survival met, we spend much of our waking lives attempting to satisfy this drive. Some of us have learned that the internet is a great place to try and do this, over and over again.

In the evolutionary old days, new and richly interpretable information was relatively scarce. Now we’re swimming in it, and getting it on our phones to alleviate the opioid deprivation of waiting in line. But we still act like it’s scarce, and seek out that next hit, because we can’t help ourselves; it’s how we’re built. Scarcity is a powerful motivator. Biederman calls us infovores.

I had read about this study from secondhand sources but seeing actual presentation materials from Biederman is 100x more fun. You can download the slides from his Central European University lectures here. You can also download the images used in the Scene Preference Study there. Flipping through them is sort of like a real-life version of The Parallax View montage.

Opening Search

SHAPES and COLORS by Nate Duval on Etsy

A few weeks ago we had a “handmade code” hack day at Etsy, wherein many interesting features were born, large and small. One of the small hacks I crossed off on my to-do list that day because it didn’t exist yet was this Etsy search add-on for Firefox, for searching Etsy from within your web browser. Using the OpenSearch format, these things are criminally easy to bring to life. Here’s how.

The add-on was approved by Mozilla for public status and distribution today, just in time for a significant improvement to Etsy search: the ability to filter search results by category. Within a few hours of this update, I had hit a personal record in Etsy spending and paused to think about the larger economic implications to come when we really start unleashing discovery.

Playing Favorites

By pleasebestill on Etsy

There are many strategies people use to make discoveries on Etsy. This is my favorite.

Find a shop you like? Check out the shop owner’s favorites. Find an item in their favorites that you like? Check out that shop owner’s favorites. Repeat until you realize three hours have gone by and you have 26 browser tabs open to Etsy pages.

I never stop at the shop level on Etsy. If I find an item of interest, I go past the shop to the shop owner’s favorites, and enter an affinity feedback loop. Below are some favoriters I’ve been digging lately, and here’s a Yahoo Pipes-generated meta-feed consolidating all their favoriting activity which you can subscribe to if they strike your fancy.

Protip: If you find yourself past page 3 of someone’s favorites, subscribe to their favorites feed add them to your Etsy circle.

corduroy's favoritescorduroy‘s items populate most of my favorite sellers’ favorites, so being pulled into her favorites was inevitable. She’s led me down some fruitful paths.

groundwork's favoritesEtsy all-star hearter TeenAngster hipped me to the favorites of groundwork (among many others), who happens to be corduroy‘s sister. Their mother, pogoshop, is also an active hearter. They share a great eye.

siiso's favoritesJust now after following a thread from groundwork’s favorites I was led to siiso (hearted this painting of hers). Her favorites led to half-dozen other eye-openers so she joins this list as well.

Icebear's favoritesIcebear, aka Sofia Arnold, is in India right now but she left behind lots of quality favorites leads. I was taken with this free bird and French hermit crab.

Domestikate's favoritesDomestikate favors the witty. She likes “color, humor, good design, wood and skies of blue.” She also finds and sells parrot staplers.

yaelfran's favoritesyaelfran is one of Etsy’s heavy hearters, with a massive number of favorites. They’re a bottomless source of unusual illustrations and prints.

Virginia Kraljevic's favoritesI’m a fan of Virginia Kraljevic‘s intricate line drawings and her favorites have led me to some interesting places, like Hillarie Tasche’s graffiti train drawings and Betsy Walton’s world.

More found daily.