Journal tags: gaming

Ten years ago I gave a talk at An Event Apart all about interaction design. It was called Paranormal Interactivity. You can watch the video, listen to the audio or read the transcript if you like.

I think it holds up pretty well. There’s one interaction pattern in particular that I think has stood the test of time. In the talk, I introduce this pattern as something you can see in action on Huffduffer:

I was thinking about how to tell the user that something’s happened without distracting them from their task, and I thought beyond the web. I thought about places that provide feedback mechanisms on screens, and I thought of video games.

So we all know Super Mario, right? And if you think about when you’re collecting coins in Super Mario, it doesn’t stop the game and pop up an alert dialogue and say, “You have just collected ten points, OK, Cancel”, right? It just does it. It does it in the background, but it does provide you with a feedback mechanism.

The feedback you get in Super Mario is about the number of points you’ve just gained. When you collect an item that gives you more points, the number of points you’ve gained appears where the item was …and then drifts upwards as it disappears. It’s unobtrusive enough that it won’t distract you from the gameplay you’re concentrating on but it gives you the reassurance that, yes, you have just gained points.

I think this a neat little feedback mechanism that we can borrow for subtle Ajax interactions on the web. These are actions that don’t change much of the content. The user needs to be able to potentially do lots of these actions on a single page without waiting for feedback every time.

On Huffduffer, for example, you might be looking at a listing of people that you can choose to follow or unfollow. The mechanism for doing that is a button per person. You might potentially be clicking lots of those buttons in quick succession. You want to know that each action has taken effect but you don’t want to be interrupted from your following/unfollowing spree.

You get some feedback in any case: the button changes. Maybe the text updates from “follow” to “unfollow” accompanied by a change in colour (this is what you’ll see on Twitter). The Super Mario style feedback is in addition to that, rather than instead of.

I’ve made a Codepen so you can see a reduced test case of the Super Mario feedback in action.

See the Pen Unobtrusive feedback by Jeremy Keith (@adactio) on CodePen.

Here’s the code available as a gist.

It’s a function that takes two arguments: the element that the feedback originates from (pass in a DOM node reference for this), and the contents of the feedback (this can be a string of text or it can be HTML …or SVG). When you call the function with those two arguments, this is what happens:

1. The JavaScript generates a span element and puts the feedback contents inside it.
2. Then it positions that element right over the element that the feedback originates from.
3. Then there’s a CSS transform. The feedback gets a translateY applied so it drifts upward. At the same time it gets its opacity reduced from 1 to 0 so it’s fading away.
4. Finally there’s a transitionend event that fires when the animation is over. Once that event fires, the generated span is destroyed.

When I first used this pattern on Huffduffer, I’m pretty sure I was using jQuery. A few years later I rewrote it in vanilla JavaScript. That was four years ago so I wonder if the code could be improved. Have a go if you fancy it.

Still, even if the code could benefit from an update, I’m pleased that the underlying pattern still holds true. I used it recently on The Session and it’s working a treat for a new Ajax interaction there (bookmarking or unbookbarking an item).

If you end up using this unobtrusive feedback pattern anyway, please let me know—I’d love to see more examples of it in the wild.

Fourteen years ago, I gave a talk at the Reboot conference in Copenhagen. It was called In Praise of the Hyperlink. For the most part, it was a gushing love letter to hypertext, but it also included this observation:

For a conspiracy theorist, there can be no better tool than a piece of technology that allows you to arbitrarily connect information. That tool now exists. It’s called the World Wide Web and it was invented by Sir Tim Berners-Lee.

You know those “crazy walls” that are such a common trope in TV shows and movies? The detectives enter the lair of the unhinged villain and discover an overwhelming wall that’s like looking at the inside of that person’s head. It’s not the stuff itself that’s unnerving; it’s the red thread that connects the stuff.

Red thread. Blue hyperlinks.

When I spoke about the World Wide Web, hypertext, apophenia, and conspiracy theorists back in 2006, conspiracy theories could still be considered mostly harmless. It was the domain of Dan Brown potboilers and UFO enthusiasts with posters on their walls declaring “I Want To Believe”. But even back then, 911 truthers were demonstrating a darker side to the fun and games.

There’s always been a gamification angle to conspiracy theories. Players are rewarded with the same dopamine hits for “doing the research” and connecting unrelated topics. Now that’s been weaponised into QAnon.

In his newsletter, Dan Hon wrote QAnon looks like an alternate reality game. You remember ARGs? The kind of designed experience where people had to cooperate in order to solve the puzzle.

Being a part of QAnon involves doing a lot of independent research. You can imagine the onboarding experience in terms of being exposed to some new phrases, Googling those phrases (which are specifically coded enough to lead to certain websites, and certain information). Finding something out, doing that independent research will give you a dopamine hit. You’ve discovered something, all by yourself. You’ve achieved something. You get to tell your friends about what you’ve discovered because now you know a secret that other people don’t. You’ve done something smart.

We saw this in the games we designed. Players love to be the first person to do something. They love even more to tell everyone else about it. It’s like Crossfit. 

Dan’s brother Adrian also wrote about this connection: What ARGs Can Teach Us About QAnon:

There is a vast amount of information online, and sometimes it is possible to solve “mysteries”, which makes it hard to criticise people for trying, especially when it comes to stopping perceived injustices. But it’s the sheer volume of information online that makes it so easy and so tempting and so fun to draw spurious connections.

This is something that Molly Sauter has been studying for years now, like in her essay The Apophenic Machine:

Humans are storytellers, pattern-spotters, metaphor-makers. When these instincts run away with us, when we impose patterns or relationships on otherwise unrelated things, we call it apophenia. When we create these connections online, we call it the internet, the web circling back to itself again and again. The internet is an apophenic machine.

I remember interviewing Lauren Beukes back in 2012 about her forthcoming book about a time-travelling serial killer:

Me: And you’ve written a time-travel book that’s set entirely in the past.

Lauren: Yes. The book ends in 1993 and that’s because I did not want to have to deal with Kirby the heroine getting some access to CCTV cameras and uploading the footage to 4chan and having them solve the mystery in four minutes flat.

By the way, I noticed something interesting about the methodology behind conspiracy theories—particularly the open-ended never-ending miasma of something like QAnon. It’s no surprise that the methodology is basically an inversion of the scientific method. It’s the Texas sharpshooter fallacy writ large. Well, you know the way that I’m always going on about design principles and they way that good design principles should be reversible? Conspiracy theories take universal principles and invert them. Take Occam’s razor:

Do not multiply entities without necessity.

That’s what they want you to think! Wake up, sheeple! The success of something like QAnon—or a well-designed ARG—depends on a mindset that rigorously inverts Occam’s razor:

Multiply entities without necessity!

That’s always been the logic of conspiracy theories from faked moon landings to crop circles. I remember well when the circlemakers came clean and showed exactly how they had been making their beautiful art. Conspiracy theorists—just like cultists—don’t pack up and go home in the face of evidence. They double down. There was something almost pitiable about the way the crop circle UFO crowd were bending over backwards to reject proof and instead apply the inversion of Occam’s razor to come up with even more outlandish explanations to encompass the circlemakers’ confession.

Anyway, I recommend reading what Dan and Adrian have written about the shared psychology of QAnon and Alternate Reality Games, not least because they also suggest some potential course corrections.

I think the best way to fight QAnon, at its roots, is with a robust social safety net program. This not-a-game is being played out of fear, out of a lack of safety, and it’s meeting peoples’ needs in a collectively, societally destructive way.

I want to add one more red thread to this crazy wall. There’s a book about conspiracy theories that has become more and more relevant over time. It’s also wonderfully entertaining. Here’s my recommendation from that Reboot presentation in 2006:

For a real hot-tub of conspiracy theory pleasure, nothing beats Foucault’s Pendulum by Umberto Eco.

…luck rewarded us, because, wanting connections, we found connections — always, everywhere, and between everything. The world exploded into a whirling network of kinships, where everything pointed to everything else, everything explained everything else…

I noticed something interesting recently about how I browse the web.

It used to be that I would notice if a site were responsive. Or, before responsive web design was a thing, I would notice if a site was built with a fluid layout. It was worthy of remark, because it was exceptional—the default was fixed-width layouts.

But now, that has flipped completely around. Now I notice if a site isn’t responsive. It feels …broken. It’s like coming across an embedded map that isn’t a slippy map. My expectations have reversed.

That’s kind of amazing. If you had told me ten years ago that liquid layouts and media queries would become standard practice on the web, I would’ve found it very hard to believe. I spent the first decade of this century ranting in the wilderness about how the web was a flexible medium, but I felt like the laughable guy on the street corner with an apocalyptic sandwich board. Well, who’s laughing now‽

Anyway, I think it’s worth stepping back every now and then and taking stock of how far we’ve come. Mind you, in terms of web performance, the trend has unfortunately been in the wrong direction—big, bloated websites have become the norm. We need to change that.

Now, maybe it’s because I’ve been somewhat obsessed with service workers lately, but I’ve started to notice my expectations around offline behaviour changing recently too. It’s not that I’m surprised when I can’t revisit an article without an internet connection, but I do feel disappointed—like an opportunity has been missed.

I really notice it when I come across little self-contained browser-based games like

• Constellations,
• Cub’n’Pup, and
• Battleship Solitaire.

Those games are great! I particularly love Battleship Solitaire—it has a zen-like addictive quality to it. If I load it up in a browser tab, I can then safely go offline because the whole game is delivered in the initial download. But if I try to navigate to the game while I’m offline, I’m out of luck. That’s a shame. This snack-sized casual games feel like the perfect use-case for working offline (or, even if there is an internet connection, they could still be speedily served up from a cache).

I know that my expectations about offline behaviour aren’t shared by most people. The idea of visiting a site even when there’s no internet connection doesn’t feel normal …yet.

But perhaps that expectation will change. It’s happened before.

(And if you want to be ready when those expectations change, I’ve written a Going Offline for you.)

Today was a very lazy day. I suppose that’s okay—it is a Sunday after all. But I do feel guilty. I had planned to get some writing done. At the very least I could have made the most of the beautiful weather and gone for an invigorating constitutional perambulation. Instead I stayed in, playing the occasional tune on the bouzouki, but mostly playing a computer game: Portal 2. I know it’s ancient in the dog years of gaming, but as the most casual of casual gamers, I get to reap the rewards of good games long after their prime.

One of the fun fringe events at Build in Belfast was The Standardistas’ Open Book Exam:

Unlike the typical quiz, the Open Book Exam demands the use of iPhones, iPads, Androids—even Zunes—to avail of the internet’s wealth of knowledge, required to answer many of the formidable questions.

Team Clearleft came joint third. Initially it was joint fourth but an obstreperous Andy Budd challenged the scoring.

Now one of the principles of this unusual pub quiz was that cheating was encouraged. Hence the encouragement to use internet-enabled devices to get to Google and Wikipedia as quickly as the network would allow. In that spirit, Andy suggested a strategy of “running interference.”

So while others on the team were taking information from the web, I created a Wikipedia account to add misinformation to the web.

Again, let me stress, this was entirely Andy’s idea.

The town of Clover, South Carolina ceased being twinned Larne and became twinned with Belfast instead.

The world’s largest roller coaster become 465 feet tall instead of its previous 456 feet (requiring a corresponding change to a list page).

But the moment I changed the entry for Keyboard Cat to alter its real name from “Fatso” to “Freddy” …BAM! Instant revert.

You can mess with geography. You can mess with measurements. But you do. Not. Mess. With. Keyboard Cat.

For some good clean Wikipedia fun, you can always try wiki racing:

To Wikirace, first select a page off the top of your head. Using “Random page” works well, as well as the featured article of the day. This will be your beginning page. Next choose a destination page. Generally, this destination page is something very unrelated to the beginning page. For example, going from apple to orange would not be challenging, as you would simply start at the apple page, click a wikilink to fruit and then proceed to orange. A race from Jesus Christ to Subway (restaurant) would be more of a challenge, however. For a true test of skill, attempt Roman Colosseum to Orthographic projection.

Then there’s the simple pleasure of getting to Philosophy:

Some Wikipedia readers have observed that clicking on the first link in the main text of a Wikipedia article, and then repeating the process for subsequent articles, usually eventually gets you to the Philosophy article.

Seriously. Try it.

Much as I enjoyed myself in Tennessee, it was shame to miss some of the Brighton Digital Festival events that were going on at the same time. I missed Barcamp and Flash On The Beach. But since getting back I’ve been making up for lost time, soaking up the geek comedy at The Caroline of Brunswick last Wednesday with Robin Ince and Helen Keen.

I also went along to the Improving Reality conference on Friday, which turned out to be an excellent event.

The title was deliberately contentious, inviting a Slavin-shaped spectre to loom over the proceedings after he closed dConstruct with his excellent talk, Reality is Plenty wherein he placed his boot on the head of Augmented Reality, carefully pointed his rhetorical gun at its temple and repeatedly pulled the trigger.

But AR was just one of the items on the menu at Improving Reality. The day was split into three parts, each of them expertly curated: Digital Art, Cinema and Gaming. In spite of this clear delineation of topics there were a number of overlapping themes.

I’m somewhat biased but I couldn’t help but notice the influence of science fiction in all the different strands. I suppose I shouldn’t be surprised. Science fiction sets expectations for technology and culture …and I don’t just mean flying cars and jetpacks.

Mind you, this is something that cinema has always done. Matt Adams from Blast Theory asked:

How many romantic kisses had you seen before you had your first romantic kiss?

Or, on a more pedestrian level, everyone in the UK knows what an American yellow school bus is, even though they’ll probably never see one. It’s part of a pre-established world that needs no explanation. In the same way, science fiction is pre-establishing a strange world that we already inhabit.

José Luis de Vicente took us on a tour of some of this world’s stranger corners. He pointed us to the deserted Mongolian city of Ordos, a perfectly Ballardian location.

We also heard about the Tower of David in Venezuela. Intended as a high-rise centre of commerce but bankrupted before completion, it is now the world’s tallest favela.

It reminds me of William Gibson’s bridge.

It isn’t hard to draw parallels between Gibson’s Spook Country and the locative art presented at Improving Reality like Julian Oliver’s mischievous creation The Artvertiser.

He describes his work as “jamming with reality”—much like Mark Shepard’s Sentient Cities

But Julian Oliver is at pains to point out that that it’s not just about messing with people’s heads. He’s attempting to point out the points of control that might otherwise go unquestioned. There’s also an important third step to his process:

1. Identify the points of control in the infrastructure.
2. Hack it.
3. Show how it was done.

This stands in stark contrast to the kind of future that Aral outlined in his energetic presentation. He is striving for a world where technology is smooth and seamless, where an infrastructure of control is acceptable as long as the user experience is excellent. It’s Apple’s App Store today; it’s the starship in Wall·E tomorrow (or possibly the Starship Opryland)—a future where convenience triumphs over inquisitiveness.

As Marshall McLuhan put it “there is no augmentation without an amputation.” In Charles Stross’s Accelerando that is literally true: when the main character—exactly the kind of superhuman cyborg that Aral envisions—has his augmentation stolen, he is effectively mentally and socially retarded.

Julian Oliver’s battle against a convenient but complacent future is clearly shown with Newstweek where William Gibson, Umberto Eco and Philip K. Dick collide in a project that skirts around the edges of morality and legality, hijacking wifi connections and altering news headlines for the lulz.

Then there’s Blast Theory’s current work on the streets of Brighton, A Machine To See With. It’s ostensibly another locative art piece but it may have more in common with a cinematic work like David Fincher’s The Game.

It’s all part of a long tradition of attempting to break down the barrier between the audience and the performance, a tradition that continues with the immersive theatre of Punchdrunk. This reminds me of the ractives in Neal Stephenson’s The Diamond Age, a form of entertainment so immersive that when a troupe attempt to perform a traditional theatrical piece, they run into problems:

The hard part was indoctrinating the audience; unless they were theatre buffs, they always wanted to run up on stage and interact, which upset the whole thing.

It’s a complete inversion of the infamous premier by the Lumière brothers of Arrival of a Train at La Ciotat where, so the myth goes, the audience ran from the theatre in terror.

It’s probably a completely apocryphal story. But as the representative from Time’s Up said at Improving Reality: “Don’t let the truth get in the way of a good story.”

Stories were at the heart of the gaming section of Improving reality. Stored In A Bank Vault, which is currently running in Brighton, was presented as part of PARN: Physical and Alternate Reality Narratives. These are stories where the player is empowered to become the narrator.

Incidentally, it was refreshing to hear how much contempt the game designers like Tassos Stevens held for the exploitationware of “gamification”—a dehumanising topic that was explored in Stross’s superbly damning Glasshouse.

There were plenty of good stories in the middle section of Improving Reality too, which began with a look at the past, present and future of cinema from Matt Hanson. Matt’s own remarkable work A Swarm Of Angels bears a striking similarity to “the footage” in Gibson’s Pattern Recognition—both are infused with a spirit of fushigi.

The subject of film funding is currently a hot topic and it’s unsurprising to see that much of the experimentation in this area can be found in sci-fi endeavours such as Iron Sky and The Cosmonaut.

Micropatronage can be very impowering. Where once we were defined (and perhaps judged) by the films we chose to watch and the books we chose to read, now we can define ourselves by the films and books we choose to fund. Instead of judging me by my what’s on my bookshelf or my Last.fm profile, judge me by my Kickstarter profile. Kickstarter is one of those genuinely disruptive uses of the network that’s enabling real creativity and originality to come to the surface in projects like Adrian Hon’s A History Of The Future In 100 Objects.

This change in how we think about funding feels like the second part of a revolution. The first part was changing how we think about distribution.

Jamie King, director of Steal This Film, hammered home just how powerful Moore’s Law has been for film, music and anything else that can be digitised. Extrapolating the trend, he pointed to the year 2028 as the media singularity, when it will cost $5 to store every film ever made on a device that fits in your pocket. He evocatively described this as the moment when “the cloud settles at street level.”

It’s here, at the point where anything can be copied, where the old and new worlds clash head on in the battle for the artificial construct that has been so inaccurately labeled “intellectual property”.

Once again we were shown two potential futures; one of chaos and one of control:

1. There’s the peer-to-peer future precipitated by Bit Torrent and Pirate Bay where anyone is free to share their hopes and dreams with the entire world …but where no distinction is drawn between a creative work of art and a hate-filled racist polemic.

2. Then there’s the centralised future of the iPad, a future where people will gladly pay money to climb into a beautifully designed jail cell. You can have whatever you want …as long as it has been pre-approved. So you won’t, for example, ever be able to play Phone Story.

This second future—where your general-purpose computing device is broken—promises to put the genie back in the bottle and reverse the disruptive revolution in distribution and funding.

Thinking about it, it’s no surprise that payment systems are undergoing the same upheavals as distribution systems. After all, money is just another form of information that can be reduced to bits.

The much tougher problem is with atoms.

Until recently this was entirely the domain of science fiction—the post-singularity futures of replicators and cornucopia machines. But even here, with the rise of 3D printing, our science fictional future is becoming more evenly distributed in the present.

Improving Reality closed with a talk from Alice Taylor wherein she demoed the work being done at Makie Lab:

We’re making a new kind of toy: customisable, 3D-printed, locally made, and internet-enabled.

A year ago, this was a work of fiction by Alice’s husband. Now it’s becoming reality.

Just as Makie Lab envision a game that’s an infinite loop between the network and the physical world, I think we’ll continue to see an infinite loop between science fiction and reality.

It’s been a starwarsy few days.

I made the most of my brief time in Seattle with a visit the Star Wars exhibit at the Pacific Science Center. I took many photos. Needless to say, I loved it, particularly the robot show’n’tell that intermixed fictional droids like C3PO with automata from our own timeline like Kismet. The premise of the exhibition was to essentially treat Star Wars as a work of design fiction.

From Seattle, Jessica and I took the train down to Portland. No, it didn’t go under the ocean like the Eurostar, and having WiFi on board a train wasn’t quite as thrilling as having WiFi on a plane, but it was still a lovely journey through some beautiful scenery. Do not pass Go. Do not get groped by the TSA.

Portland turns out to be delightful, just as reports suggested. There are food carts a-plenty. There’s a ma-HOO-sive book shop. There’s excellent coffee. And then there’s the beer. From Wikipedia:

With 46 microbrew outlets, Portland has more breweries and brewpubs per capita than any other city in the United States.

After consuming a few beers in the company of Portland’s finest geeks, we relocated to a true Portland institution: Ground Kontrol. It’s an arcade. But it’s a bar. But it’s an arcade! But it’s a bar!

Amongst the many, many machines packed into the place was the original Star Wars arcade game. Just seeing it brought back a Proustian rush of memories. I had to play it. I remembered a not-so-secret tactic that results in a nice big bonus…

When you get to the trench level on the Death Star, don’t fire; instead dodge and weave to avoid the incoming fire. After about thirty seconds, the music stops. You are now using the Force. If you fire just one single shot into the exhaust port at the end of the trench, you will be rewarded with many, many bonus points.

You’re welcome.

When I added collectives to Huffduffer, I wanted to keep the new feature fairly discrete. I knew I would have to add an add/remove device to profiles but I also wanted that device to be unobtrusive. That’s why I settled on using a small +/- button.

The action of adding someone to, or removing someone from a collective was a clear candidate for Hijax. Once I had the adding and removing working without JavaScript, I went back and sprinkled in some Ajax pixie-dust to do the adding and removing asynchronously without refreshing the whole page.

That was the easy part. The challenge lies in providing some meaningful and reassuring feedback to the user that the action has been carried out. There are quite a few familiar devices for doing this; the yellow fade technique is probably the most common. Personally, I like the Humanized Messages as devised by Aza Raskin and ported to jQuery by Michael Heilemann.

I knew that, depending on the page, the user could be carrying out multiple additions or removals. Whatever feedback mechanism I provided, it shouldn’t get in the way of the user carrying out another addition or removal. That’s when I thought of a feedback mechanism from a different discipline: video games.

Quite a few arcade games provide a discrete but clear feedback mechanism when points are scored. When the player successfully “catches” a prize, not only does the overall score in the corner of the screen update, but the amount scored appears in situ, floating briefly upwards. It doesn’t get in the way of immediately grabbing another prize but it does provide a nice tangible bit of feedback (the player usually gets some audio feedback too, which would be nice to do on the web if it weren’t to likely to get very annoying very quickly).

It wasn’t too tricky to imitate this behaviour with jQuery.

This game-inspired feedback mechanism feels surprisingly familiar to me. Sign up or log in to Huffduffer to try it for yourself.

Here’s an interview with the makers of the game Geometry Wars, a game I find utterly fascinating for the way its very simple rule base quickly results in complex hallucinatory visions of beauty that are simultaneously mesmerising and baffling to watch.

After reading the interview, I moved on to the next tab I had open in my browser courtesy of Tom’s always excellent links. This was a post by Simon Wistow describing the iPhone version of the game rRootage. There I came across the word 弾幕 or danmaku meaning bullet hell:

…a sub-genre of shoot ‘em up video games in which the entire screen is often almost completely filled with enemy bullets.

Next time I’m trying to describe Geometry Wars I think I’ll just say It’s kind of danmaku.

Andy has become the gaming world’s equivalent of Howard Carter uncovering the Tutankhamun’s tomb of a hard drive from Infocom containing details of the never-released sequel to The Hitchhiker’s Guide To The Galaxy game. In his post, he picks out the salient points from the Lost in La Mancha-like story. In the comments, much hand-wringing ensues about what is and isn’t journalism (answer: who cares?).

I missed the Hitchhiker’s game when I was growing up. I cut my teeth on 8-bit computers; first a ZX-81 and then an Amstrad 464. While I didn’t have the chance to play Douglas Adams’ meisterwerk, there were plenty of other text-only adventure games that sucked me in. I recall some quality stuff coming from the Level 9 studio.

I remember learning BASIC specifically so that I could try create my own adventure games complete with mapped-out locations and a simple verb/noun parser. Adventure games seemed like the natural extension to the choose your own adventure books but far more open to exploration (even if that openness was just a cleverly-crafted illusion). Hypertext—a term used these days almost exclusively to refer to Web-based documents—seems an entirely appropriate way to describe this kind of interactive fiction.

Later this year, I and my fellow adventure game geeks will be able to wallow in nostalgia when the documentary Get Lamp is released. The film will feature interviews with some of the Infocom movers and shakers featured in Andy’s archeological treasure trove.

Thanks to Tom’s always excellent linkage, I came across an excellent in-depth article by Brenda Brathwaite called The Myth of the Media Myth, all about the perception of videogames by non-gamers. The research was prompted by a dinner conversation that highlighted the typical reactions:

It happens the same way every time: People listen and then they say what they’ve been feeling. Videogames are not good for you. Videogames are a waste of time. They isolate children. Kids never go outside to play. They just sit there and stare at the TV all day.

The tone of the opinions reminded me of the Daily Mail attitude to social networking sites. The resonances were so strong that I decided to conduct a quick experiment using my hacky little text substitution script. Here are the terms I swapped:

Original	Substitution
videogame	social networking site
gaming	social networking
game designer	web designer
game	website
play	surf
GTA	Facebook

Because the original article is paginated, I ran the print version through the transmogrifier. Please excuse any annoying print dialogue boxes. Here’s the final result.

The results are amusing, even accurate.The original article begins:

There are six of us around the table, and the conversation turns to what I do for a living, also known as “my field of study” in academia. “I’m a game designer and a professor,” I say. The dinner had been arranged by a third party in order to connect academics from various institutions for networking purposes.

“You mean videogames?” one of the teachers asks. It’s said with the same professional and courteous tone that one might reserve for asking, “Did you pass gas?”

“Videogames, yes,” I answer. “I’ve been doing it over 20 years now.” Really without any effort at all, I launch into a little love manifesto of sorts, talking about how much I enjoy being a game designer, how wonderful it is to make games, all kinds of games.

After substiitution:

There are six of us around the table, and the conversation turns to what I do for a living, also known as “my field of study” in academia. “I’m a web designer and a professor,” I say. The dinner had been arranged by a third party in order to connect academics from various institutions for networking purposes.

“You mean social networking sites?” one of the teachers asks. It’s said with the same professional and courteous tone that one might reserve for asking, “Did you pass gas?”

“social networking sites, yes,” I answer. “I’ve been doing it over 20 years now.” Really without any effort at all, I launch into a little love manifesto of sorts, talking about how much I enjoy being a web designer, how wonderful it is to make websites, all kinds of websites.

The comments from interviewees also hold up. Before:

One friend complained about GTA, admitted she’d never played the game and then offered this: “If you really are interested in deep psychoanalysis… the truth of my disdain for games is from a negative relationship — [a former boyfriend] would play for hours, upon hours, upon hours. Maybe I felt neglected, ignored and disrespected.”

After:

One friend complained about Facebook, admitted she’d never surfed the website and then offered this: “If you really are interested in deep psychoanalysis… the truth of my disdain for websites is from a negative relationship — [a former boyfriend] would surf for hours, upon hours, upon hours. Maybe I felt neglected, ignored and disrespected.”

Even the analysis of the language offers parallels. Original:

“I haven’t found this kind of attitude about games per se. But in my version of your dinner party anecdote, I start with ‘I make games,’ not ‘I make videogames,’ and I’ve never had a response like the one you describe. This leads me to wonder if the very term ‘videogames’ is the problem meme.”

Substitution:

“I haven’t found this kind of attitude about websites per se. But in my version of your dinner party anecdote, I start with ‘I make websites,’ not ‘I make social networking sites,’ and I’ve never had a response like the one you describe. This leads me to wonder if the very term ‘social networking sites’ is the problem meme.”

But most telling of all are the quotes in the closing passages that haven’t been changed one jot from the original:

“If I had a choice, I would want to include these distrustful folks in finding solutions. I would prefer it if they understood. I would prefer it if they could see the long sequence of events that is going to address their fears and create the medium they will inevitably love and participate in, whether they expect to or not. What’s sad is that their ideological, ignorant, hostile, one-dimensional attitudes oversimplify one of the most beautiful problems in human history.”

Ninety seconds. That’s how long each team at Hackday had to present the fruits of their labours. That’s a pretty good timeframe to demonstrate the core functionality of an app but it’s nowhere near long enough to explain the background story behind Hackfight.

I was the third presenter (out of a total of 73). I knew I had to try to make every one of those ninety seconds count. At the moment that Chad Dickerson introduced me and the spotlight was cast upon my frame, I went into Simon Willison mode and began to stream out as much information as the bandwidth of the human voice allows.

“Hackfight is a mashup” I began, “but it’s a mashup of ideas: the ideas of Justin Hall with his talk of browsing as a kind of role-playing game and Gavin Bell with his ideas on provenance—your online history forming a picture of who you are.”

I was standing on stage in Alexandra Palace trying to give an elevator pitch of an idea that had been brewing in my head for quite some time.

Background

Ever since I first started talking about lifestreams I knew I wanted some kind of way of tying together all the disparate strands of my online identity. There’s a connection here with the dream of portable social networks: tying together the walled gardens of myriad social networks. The final piece fell into place when I was listening to the South by Southwest podcast of a panel discussion by Joi Ito, Ben Cerveny and Justin Hall. Justin says:

I’m working on this idea of passively multiplayer online games. Watching you surf the Web and giving you xp for using your computer. You might be as high level as Joi but just by doing what you’re doing… My model for this was looking at a D&D character sheet, which proposes to know a lot about people.

Something clicked. This idea really resonated with me but I wanted to tie it into a person’s long-term publishing history—their provenance, in other words. I started thinking about how this might work. I would definitely need some help. Then Hackday London was announced.

My recruitment drive began well before the day itself. I spoke to people at both @medias. Matt Harris—no stranger to the mechanics of role-playing games—expressed his interest. I noticed that Gareth was in search of a project for Hackday so I baggsied his brain. I even managed to turn my presentation at Reboot into a rallying cry for hackers. Riccardo and Colin were both there and added their names to the list of interested parties. Finally, I wrote a blog post right before Hackday to let everyone know that I was looking for help.

On the day itself—once the excitement of the lightning strike had worn off—I began quizzing my friends to find out who had plans and who didn’t. Ben and Natalie were both amenable to getting stuck in. An unsuspecting Paul Duncan was also roped in. I hopped on stage and put out one final call for help.

Planning

I had plenty of people. Now I needed to make sure they could work in managable teams. I divided the work into front-end and back-end projects, appointing Nat as head of front end and Gareth as delegator for the back end.

Before a line of code was written, we made plenty of use of the available whiteboards. We began brainstorming all the possible APIs we could potentially use. At this stage we were already thinking in terms of characteristics: how social you are, how many photos you take, how much you blog, how much you bookmark.

The long list of APIs was quickly whittled down to a managable number. The terminology was updated to be more game-like. Here’s what we had:

Charisma

Your social networking power based on Twitter. It’s not as simple as just how many contacts you have: your followers must equal or exceed your claimed friends to get a good score.

Perception

Your power of observing the world around you as decided by Flickr. The Flickr API reveals how long you’ve been posting photos and how many you’ve posted in total. From there it’s a short step to establishing an average number of photos per day.

Memory

Your power of cataloguing the world around you as revealed through del.icio.us.

Willpower

How much influence you can exert over others. This is gleaned from Technorati’s ranking algorithm.

Testing

Assuming we could generate a number for each of these characteristics, how should gameplay proceed? Should it be as simple as Top Trumps or as complex as World of Warcraft? It was Jim Purbrick who pointed out that we were closest to having beat-em-up game mechanics.

Now we needed to consider fairness. How would we deal with the uebergeek who has been blogging, Flickring and social networking for years? This was quickly christened “The Tantek Scenario.” Needless to say, I blame Tantek.

By giving each player a pool of points that always adds up to the same total, we could level the playing field. We chose the number 20 for the total points. This could then be split four ways amongst charisma, perception, memory and willpower. So even if you were superb in all four categories, you could only have a total of 5 points in each. Most people will have a high score in one or two categories and a correspondingly low score in others.

Gameplay proceeded like Top Trumps but with a difference: if you are attacked in one category (say, charisma), you can defend with another category (such as memory). But you can only ever use a category once. So one fight is exactly four rounds of attack and defence. At the beginning of each fight each player has 10 health points. If a player successfully attacks, the amount of health points deducted from the other player is the difference in category points. So if I attack with a willpower of 8 and you defend with a memory of 6, you lose 2 health points.

Phew! The game mechanics were starting to get complex. Would people be able to understand the gameplay? There’s only one way to find out: user testing!

I mercilessly pounced on unsuspecting passers-by like Andy and Aral and thrust sticky notes into their hands. We then played a round using these paper prototypes. We tested a slightly more complex version of the gameplay involving the ability to bet high or low but the user-testing revealed that this was probably too complex to be easily grasped.

Building

Alright. Enough planning. Enough user testing. The clock was ticking. It was time for the front-end team to start working on the design and the back-end team to get coding.

As day one drew to a close, our numbers lessened. Riccardo and Paul headed for home (or in Paul’s case, the pub and then home). But I still had two incredible teams of ludicrously dedicated people. These are the people who would build what we were now calling Hackfight.

Back end

• Matt Harris
• Gareth Rushgrove
• Colin Schlueter

Front end

• Natalie Downe
• Ben Darlow

Watching these people work through the night was a humbling experience. It quickly became clear that my programming skills weren’t nearly up to scratch. I helped out a bit with some Flickr API stuff but I mostly just left the lads to it. I even snatched one or two hours of sleep. Colin and Natalie didn’t sleep at all.

By morning, things were shaping up nicely. On the back end, we had a good database schema, ranking algorithms and classes for combatants and fights. On the front end, we had a colour scheme, a logo and beautifully shiny icons. But could we tie the two ends together and still hit the afternoon deadline?

The result

In the end it was clear that we had bitten off more than we could chew. We had a solid infrastructure and a lovely interface but there just wasn’t enough time to build the interactive elements: signing up, choosing an opponent and having a fight.

We still wanted to demonstrate what was possible with this system. If we cut out the interactive elements for now, we could at least show an example fight by having the computer pitch two people against each other. We began adding some real-world data into the system and built a fight page where the moves were chosen at random.

Here’s the result using real data from Tom and Norm!’s online publishing history. It takes a while to load because the information is being fetched from each service at runtime but… it works!

The final result is more of a proof-of-concept but boy, what a proof-of-concept. Watching this idea come to life in the space of 24 hours was simply magicial. I honestly don’t think words can express how impressed I am with the people who built this. All I did was lay the groundwork. They pulled out all the stops to actually make something.

I had one last task. I had to get up there on stage and present Hackfight.

Ninety seconds.

Standing in the spotlight with Hackfight projected on the screen behind me, I rushed through the game mechanics and showed a sample fight. My mind was racing as face as my mouth. I was frantically trying to think of what I absolutely needed to get across. I quickly explained that Hackfight was a platform rather than a finished hack: something that could be built upon to create all kinds of gaming experiences based on online publishing. Feeling the seconds ticking away to nothing, I closed with the one remark that it was absolutely necessary to make:

The team that put this together was awesome.

And with that, I was done. It was later that I realised I actually still had 19 seconds left on the clock. My one chance to do the team justice and I blew it.

The future

Milling with my peers at the close of Hackday, one question kept coming up: would we continue to work on this? We’ve got a good codebase. We’ve got some solid game mechanics. I think it would be great to see this taken forward. The Hackfight team all seemed pretty interested in hacking on this thing a bit more.

I think there’s a lot of potential in this idea. Forget about the basic idea of a fight confined to a web page: think about all the other possibilities: fighting via Twitter, by SMS, on Jabber, even in Second Life. As long as the ranking algorithms are in place and the game mechanics are set, there’s no limit to where and when Hackfight might exist.

The best outcome would be for Hackfight itself to become an API so that other people could hook into the system and build cool fun stuff. That’s an ambitious goal and I don’t have the resources to see it through but having seen what can be accomplished by a dedicated team of unbelievably smart and talented people, I think anything is possible.

Hackday is almost upon us. Tomorrow, I—along with hundreds of other geeks—will be converging on Alexandra Palace in North London for two days of dev fun.

I’ve got an idea for what I want to do but I think I’ll need lots of help. At XTech, Reboot, @media and other recent geek gatherings I’ve been asking who’s coming and who fancies helping me out. I’ve managed to elicit some interest from some very smart people so I’m hoping that we can hack something fun together.

Here’s the elevator pitch for my idea: online publishing is hacking and slaying.

Inspired by Justin Hall’s idea of Passively Multiplayer Online Games and Gavin Bell’s musings on provenance, I want to treat online publishing as an ongoing way of building up a character. In Dungeons and Dragons or World of Warcraft, you acquire attributes like stamina, strength, dexterity and skill over time. Online, you publish Flickr pictures, del.icio.us links, Twitter updates and blog posts over time. All of this published material contributes to your online character and I think you should be rewarded for this behaviour.

It’s tangentially related to the idea of a lifestream which uses RSS to create a snapshot of your activity. By using APIs, I’m hoping to be able to build up a much more accurate, long-term portrait.

I’m going to need a lot of clever hackers to help me come up with the algorithms to figure out what makes one person a more powerful Flickrer or Twitterer than another. Once the characteristics have been all figured out, we can then think about pitching people against each other. Maybe this will involve a twenty-sided die, maybe it will more like Top Trumps, or maybe it could even happen inside Second Life or some other environment that has persistent presence (the stateless nature of the Web makes it difficult to have battles on a Web site). I have a feel that good designers and information architects would be able to help me figure out some other fun ways of representing and using the accumulated data. Perhaps we can use geo data to initiate battles between warriors in the same geographical area.

Sound like fun? Fancy joining in? Seek me out on the day or get in touch through my backnetwork profile.

Of course, if you want to do something really cool at hackday, you’ll probably be dabbling with arduino kits, blubber bots and other automata. When I was San Francisco a few weeks ago, nosing around the Flickr offices, Cal asked me what I was planning for Hackday. “Well” I said, “it involves using APIs to…” “Pah!” he interrupted, “APIs are passé. Hardware is where it’s at.”