The Right Glue
March 2011

Interactive whitespace

By Dean

I don't know when and where this started, but it needs to stop. We have had alternatives to the mouse for a long time; we can no longer rely on the ability to use a cursor to indicate if a region of the screen will do something when clicked. In fact, we never should have relied on this ability.

Regions of the screen that are interactive should be visually distinct from those parts of the screen that are not interactive. If a user can't make this determination quickly and easily then it's possible that he will click something he thought was inactive and have it unexpectedly respond to his input (or vice versa). When this happens the user is going to become angry and irate and will transform into a very large dinosaur and will go back in time and devour the other, smaller dinosaurs which will completely disrupt the timeline.

Who knows what will happen if your users do this? It's a risk we just can't afford to take. So let's save history now, with this blog post. No more will we live in fear of the time-traveling saurian user. All we need to do is follow a very simple guideline: if it does something, make it distinct from its surroundings.

Let's start with examples of what I mean. Let's say you're looking at a website that has funny pictures on it. (That's roughly 45% of the Internet - the remainder is websites for other types of pictures.) The site shows some thumbnails which can be clicked to show the full-sized version of one of those most hilarious images you love so much (images of cats, statistically speaking).

Now imagine that you're using a touch screen monitor instead of a mouse when looking at these pictures. You mash your still-mammalian finger against some whitespace next to an image in order to make sure the browser window is in focus before moving your finger across the screen rapidly in the scrolling gesture. But wait — instead of activating the browser window you're instead shown the large version of an image near where you clicked. This image isn't all that funny; you didn't want to see this picture in its two million pixels of bland sedatedness! You become a dinosaur of rage. A rage-asaurus.

Surely no website would do this to our timeline, you might be thinking. Think again! This dystopian world I just described is the default behaviour of Blogger blogs. Some of your favourite blogs such as Cake Wrecks and the "Blog" of "unnecessary" quotation marks both propagate time-terrorizing tyranomen. Indeed, even some of my favourite blogs such as The Old New Thing do it as well (in this case, the whitespace to the right of each post's title is a link).

How this is accomplished using HTML is actually very simple: a link can be defined to have the width of its container, and then an image can be placed within that link. The result is a link that is wider than the image inside it. If the link is invisible, then the only way a user can avoid clicking it is the change in the cursor if the mouse is over it (assuming the cursor property isn't overridden in the page's CSS). Of course that breaks down completely when using a system that has no cursor (such as a touch screen), leaving us with prehistory undone.

For those readers not familiar with HTML or CSS, it is important to note that this is not the default behaviour of links around images. A plain old link around an image will contract to fit snugly around the image like a glove. It takes extra effort to make Blogger-like image links. That means someone, somewhere, has specifically decided that this is how things should be. It's not an accident. It's a purposeful, malicious attempt to destroy time.

Blogger's crusade against chronology isn't even the worst of it: this behaviour violates nearly every speck of usability common sense there is. Why would someone who presumably wants his content to be consumable by everyone — including those of us who have removed the separation between input and output devices — tie his design to a particular input method? The Web was designed to be ignorant of how its content is being displayed (if it's displayed at all) and to be ignorant of how it receives its input. By creating spaces on the page that are visually indistinct from their surroundings but whose behaviours are distinct from their surroundings, Blogger is assuming a particular type of input mechanism is being used and is therefore disregarding the fundamentals of the Web.

Such blatant transgressions have not gone unnoticed. As technology advances we're going to see many different types of interaction and Web frameworks like Blogger that assume specific types of interaction mechanisms will have to change or will no longer be used in whatever comes next. In the mean time, keep an eye out for raptors.

Latest comments:

My adventures at PAX East 2011

By Dean

Last weekend I went to a most amazing thing in a strange and terrifying country known as PAX East. Penny Arcade Expo is a convention created by Jerry and Mike of Penny Arcade for people like my friends and I who like video games too much.

Having never been to any sort of convention before (not even a Star Trek convention (!)) I didn't really know what to expect. I took a look at the panel schedule to get a feel for what kinds of things would be going on. I saw a lot of panels on video game design and panels directed at people who want to pursue careers in the video game industry.

Not having any desire (anymore) to enter the video game industry, of course I thought wow! So many panels about the design of things I love to use. This is going to be a really great place to learn about the psychology of gamers and the universal laws of human-computer interaction design as applied specifically to games. So not only would I be able to see Robert Khoo in person (which, let's face it, is the only reason anyone goes to PAX) but I'd also have the opportunity to learn more about the things I love.

So Nick, qedi, Grace Note and I (and others) set out to make the most of the best gamer convention in Boston. (Best because Robert Khoo was there.)

The first thing I learned is that the lines at PAX are very, very, very, very long. If you don't make it to a line for a panel more than hour before the panel is scheduled to start (which is about 70 minutes before the panel actually starts) then you're probably not going to be able to make it into the theatre. So my hopes of being able to see many panels were quickly squashed and I was forced to re-evaluate which panels were worth waiting an hour and a half in a line to see.

Waiting in long lines isn't so bad. At PAX, everyone is there because they love games. In lines, not only are the people there just like you in their love of video games, but they're even more similar in their specific tastes for the panel you're all lining up to see. The kind of person who would line up that early to see Mike and Jerry talk (for example) is the kind of person that's easy to get along with. (It's also the kind of person who likes My Little Pony apparently.) So I met a whole bunch of people in lines from all over the world and taught them all the game that I invented to pass time in lines: punching Nick.

But enough about that; I want to write about the things that I was able to learn from my time wandering the nerdly masses. Thanks to several panels, I learned more about what makes table-top role-playing games last longer. I also learned that a lot of the stuff I had figured out on my own was pretty good. The panels re-enforced something that I have known but have been reluctant to follow through on, which is that sometimes I need to step back from the stories that I want to tell to allow my players to tell their own stories.

It's that kind of involvement that helps them get into character and makes them proud of the character design they've made. I know that when I am playing a character (as opposed to running the game) I'm having the most fun when my character has the opportunity to rise above a challenge. The problem I've been having with this as a game master is the difficulty in fitting the players' ideas into the story of the game. But now I realize that it's worth the effort and honestly my story shouldn't be so rigid that it can't withstand a few external ideas.

Another thing I learned at PAX is the value of a good name. While Nick and I were waiting in the Portal 2 line (at the end of which we got free t-shirts!) we saw a sign hanging from the ceiling with the words "Shoot many robots" printed on it. We were intrigued by the prospect of being able to shoot many robots and we decided that after our journey through the Portal 2 exhibit we would examine just how many robots are available to shoot.

Shoot many robots is exactly what its name implies: you play a man with a gun who must face off against an unending swarm of robots. I personally enjoyed playing the game (not only because I was able to do better than Nick — nor because my character had fairy wings) because of its assurance of mindless entertainment. These many robots have wronged me and I will shoot them or die trying. I'm not sure if I had fun playing it because of its name and premise or because the gameplay itself was actually worthwhile. The novelty of the title didn't have a chance to wear off in the few minutes I was able to play it, so it's hard to say if the game would have grown on me or not.

Another game that looked interesting that I got to play was Firefall. While it was dangerously close to the contemplative giant Pikachu floating over the Nintendo booth, I managed to pay enough attention to Firefall to enjoy it. It's a game made by the creator of the Tribes series (which I personally never got into) and shares a few gameplay mechanics with its ancestor such as jetpacks and large, open maps.

Red 5 was demonstrating the team deathmatch mode of play. It felt like pretty much any first- or third-person shooter: players can choose classes which each have advantages and disavantages and all of the other usual stuff. Firefall managed to interest me enough in its gameplay once I figured out what I was doing that I was willing to sign up for its beta. Firefall is a very pretty game and though what I played was buggy I hope the final product's gameplay is as polished as its gaphics.

The very last thing that I learned at PAX is that I'm afraid of what Robert Khoo is capable of. I'm much too terrified to go over the details, but let's just say I'm glad he's on our side. Very glad.

This is some kind of footnote. This webpage is awesome and can be viewed in any browser. Even ones that suck ass like Safari and Firefox. Isn't that awesome? This site is best viewed with browsers that aren't maximized on large-resolution displays (> 1024 pixels in width). But then again, if you are running a large resolution and browsing maximized, then you're a terrible person so you don't really deserve to see this site at its finest. Jerk. I mean, seriously. I spend all this time making a nice site and your silly browsing habits ruin its look. That's really cold, man. If you're using IE6, then in order to see the cool avatar effects you need to enable JavaScript. This site conforms 100% with the laws (both known and unknown) governing physical reality. No rights reserved by Dean Whelton (who is awesome) of any of the content, images, design, backend or electrons used in this site. Steal at your convenience. None of it is worth stealing anyway, so there. I have even made an RSS feed for more efficient theft of my intellectual property. Now, don't say I'm not generous. I guess if you want to know more about me, you can visit the about page. I actually made a real about page! It's more like a FAQ, though. You can contact me, too, if you feel like it. Are you really wasting time reading this? Go outside or something.