Journal tags: game

11

sparkline

Fonts or food?

At the end of every Thursday afternoon at Clearleft, we wrap up the working week with an all-hands (video) meeting. Yes, I know that the week finishes on Friday, but Fridays have been declared the no-meetings day at Clearleft: a chance to concentrate on heads-down work without interruption. Besides, some of us don’t work on Fridays. So Thursday really is the new Friday.

At this Thursday afternoon meeting we give and get updates on what’s been happening with project work, new business, events, marketing. We also highlighted any shout-outs that have posted in the #beingsplendid Slack channel during the week. Once that’s all taken care of, the Thursday afternoon meeting often finishes with a fun activity.

The hosting of the Thursday afternoon meeting is decided by fate. Two weeks ago, Rebecca and Chris hosted an excellent end-of-week meeting that finished with an activity around food—everyone had submitted their dream meal and we had to match up the meal to the person. Lorenzo, however, couldn’t help commenting on the typography in the slide deck. “Lorenzo”, I said, “What are you more judgmental about—fonts or food?”

The words were barely out of my mouth when I realised I had the perfect activity for the next Thursday afternoon meeting, which fate had decreed I was to host. I put together a quiz called …fonts or food!

It’s quite straightforward. There are 25 words. All you have to do is say whether it’s the name of a font or the name of a food.

It was good fun! So I thought I’d share it with you if you fancy a go.

Ready?

Here we go…

  1. Arrowroot
  2. Ensete
  3. Tahu
  4. Tako
  5. Lato
  6. Fira
  7. Adzuki
  8. Roselle
  9. Poke
  10. Plantin
  11. Dabberlocks
  12. Estampa
  13. Amaranth
  14. Gentium
  15. Challum
  16. Mayhaw
  17. Pawpaw
  18. Nopal
  19. Raksana
  20. Daylily
  21. Bilanthy
  22. Laver
  23. Orache
  24. Broadley
  25. Cardoon

Total: 0/25

Unobtrusive feedback

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.

Connections

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…

A song of AIs and fire

The televisual adaption of Game of Thrones wrapped up a few weeks ago, so I hope I can safely share some thoughts with spoilering. That said, if you haven’t seen the final season, and you plan to, please read no further!

There has been much wailing and gnashing of teeth about the style of the final series or two. To many people, it felt weirdly …off. Zeynep’s superb article absolutely nails why the storytelling diverged from its previous style:

For Benioff and Weiss, trying to continue what Game of Thrones had set out to do, tell a compelling sociological story, would be like trying to eat melting ice cream with a fork. Hollywood mostly knows how to tell psychological, individualized stories. They do not have the right tools for sociological stories, nor do they even seem to understand the job.

Let’s leave aside the clumsiness of the execution for now and focus on the outcomes.

The story finishes with Bran as the “winner”, in that he now rules the seve— six kingdoms. I have to admit, I quite like the optics of replacing an iron throne with a wheelchair. Swords into ploughshares, and all that.

By this point, Bran is effectively a non-human character. He’s the Dr. Manhattan of the story. As the three-eyed raven, he has taken on the role of being an emotionless database of historical events. He is Big Data personified. Or, if you squint just right, he’s an Artificial Intelligence.

There’s another AI in the world of Game of Thrones. The commonly accepted reading of the Night King is that he represents climate change: an unstoppable force that’s going to dramatically impact human affairs, but everyone is too busy squabbling in their own politics to pay attention to it. I buy that. But there’s another interpretation. The Night King is rogue AI. He’s a paperclip maximiser.

Clearly, a world ruled by an Artificial Intelligence like that would be a nightmare scenario. But we’re also shown that a world ruled purely by human emotion would be just as bad. That would be the tyrannical reign of the mad queen Daenerys. Both extremes are undesirable.

So why is Bran any better? Well, technically, he isn’t ruling alone. He has a board of (very human) advisors. The emotionless logic of a pure AI is kept in check by a council of people. And the extremes of human nature are kept in check by the impartial AI. To put in another way, humanity is augmented by Artificial Intelligence: Man-computer symbiosis.

Whether it’s the game of chess or the game of thrones, a centaur is your best bet.

Expectations

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

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.)

Design systems

Talking about scaling design can get very confusing very quickly. There are a bunch of terms that get thrown around: design systems, pattern libraries, style guides, and components.

The generally-accepted definition of a design system is that it’s the outer circle—it encompasses pattern libraries, style guides, and any other artefacts. But there’s something more. Just because you have a collection of design patterns doesn’t mean you have a design system. A system is a framework. It’s a rulebook. It’s what tells you how those patterns work together.

This is something that Cennydd mentioned recently:

Here’s my thing with the modularisation trend in design: where’s the gestalt?

In my mind, the design system is the gestalt. But Cennydd is absolutely right to express concern—I think a lot of people are collecting patterns and calling the resulting collection a design system. No. That’s a pattern library. You still need to have a framework for how to use those patterns.

I understand the urge to fixate on patterns. They’re small enough to be manageable, and they’re tangible—here’s a carousel; here’s a date-picker. But a design system is big and intangible.

Games are great examples of design systems. They’re frameworks. A game is a collection of rules and constraints. You can document those rules and constraints, but you can’t point to something and say, “That is football” or “That is chess” or “That is poker.”

Even though they consist entirely of rules and constraints, football, chess, and poker still produce an almost infinite possibility space. That’s quite overwhelming. So it’s easier for us to grasp instances of football, chess, and poker. We can point to a particular occurrence and say, “That is a game of football”, or “That is a chess match.”

But if you tried to figure out the rules of football, chess, or poker just from watching one particular instance of the game, you’d have your work cut for you. It’s not impossible, but it is challenging.

Likewise, it’s not very useful to create a library of patterns without providing any framework for using those patterns.

I would go so far as to say that the actual code for the patterns is the least important part of a design system (or, certainly, it’s the part that should be most malleable and open to change). It’s more important that the patterns have been identified, named, described, and crucially, accompanied by some kind of guidance on usage.

I could easily imagine using a tool like Fractal to create a library of text snippets with no actual code. Those pieces of text—which provide information on where and when to use a pattern—could be more valuable than providing a snippet of code without any context.

One of the very first large-scale pattern libraries I can remember seeing on the web was Yahoo’s Design Pattern Library. Each pattern outlined

  1. the problem being solved;
  2. when to use this pattern;
  3. when not to use this pattern.

Only then, almost incidentally, did they link off to the code for that pattern. But it was entirely possible to use the system of patterns without ever using that code. The code was just one instance of the pattern. The important part was the framework that helped you understand when and where it was appropriate to use that pattern.

I think we lose sight of the real value of a design system when we focus too much on the components. The components are the trees. The design system is the forest. As Paul asked:

What methodologies might we uncover if we were to focus more on the relationships between components, rather than the components themselves?

Star Wars memories

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 . 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.

Collective action

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.

Super Mario Bros. Frustration Speed Run in 3:07

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.

Collective action

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

Danmaku

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 meaning :

…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.

Adventure

Andy has become the gaming world’s equivalent of 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 and then an . 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 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 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.

Beautiful hackery

While I had Matthew in my clutches, I made him show me around the API for They Work For You. Who knew that so much could fun be derived from data about MPs?

First off, there’s Matthew’s game of MP Top Trumps, ‘though he had to call it MP Fab Farts to avoid getting a cease and desist letter.

Then there’s a text adventure built on the API. This is so good! Enter your postcode and you find yourself playing the part of your parliamentary representative with zero experience points and one hundred hit points. You must work your way across the country, doing battle with rival MPs, as you make your way towards Sedgefield, the lair of Blair.

You can play a Web version but for some real old-school fun, try the telnet version. This reminded me of how much I used to love text adventures back in the days of 8-bit computers. I even remember trying to write my own in BASIC.

For what it’s worth, Celia Barlow, MP for Hove, has excellent pesteredness points. I made it all the way up to Sedgefield and defeated Tony Blair in battle. My prize was the source code of the adventure game in Python.

Ah, what larks!

There’s another project that Matthew works on that I find extremely useful. He has created accessible UK train timetables using the data from the National Rail site, a scrAPI if you will. This is where I go whenever I need to plan a train journey.

The latest feature is something that warms the cockles of my heart: beautiful, hackable URLs. If I want a list of trains going from Brighton to London, I can just type:

http://traintimes.org.uk/brighton/london

It handles spaces (or pluses or underscores) too:

http://traintimes.org.uk/brighton/london victoria

The URL can also be extended with a departure time:

http://traintimes.org.uk/brighton/london victoria/14:00

My address bar is my command line. This is the kind of design that makes URL fetishists like Tom very happy.