The rectangle behind you

Secret keyboard shortcuts

One of the beautiful things about making your own presentation in HTML is that you can add all sorts of secret things just for you to play with as you’re talking.

Sure, you can put buttons on the screen, and click them with your mouse. Most often, however, that breaks the illusion and is quite distracting — imagine controlling your slide deck by clicking on the Next slide and Previous slide buttons always visible on the screen.

Instead, you can use the user interface that’s there right below your screen — a keyboard.

Here are some things I tried:

Highlighting something on the screen

You can point to things on your slide with a laser pointer or your mouse cursor to highlight something on the screen. But that’s kind of lame. Laser pointer is douchey and mouse pointer just as messy, although could be cool if you make it bigger via accessibility:

Another way would be to use a keyboard shortcut or slide build to highlight something, so you don’t have to fumble an awkward device with your shaky hands.

State toggles

Any time I want to modify something on the screen — show a different version, toggle something… I prefer a hidden keyboard shortcut rather than visible buttons on the slides, distracting people and adding clutter.

One example is a few toggles I built into Pac-Man to show different things happening on the screen (keyboard shortcuts: [1], [2], [3], [4]).

Or, a keyboard shortcut for having a little fun — adding a fake chrome from IE6 or Chrome (it was actually Safari):

Running-out-of-time mode

A keyboard shortcut for the presentation to be in the I’m-running-out-of-time mode which means it can start skipping pre-selected, less important slides. [–] to enable, [+] to disable back, when you realize you actually have more time after all.

Showing a console, reconnecting, etc.

Some of my presentations were systems complicated enough — talking to multiple computers, quietly — that I actually added a quick console invoked with [~] that was helpful for me in debugging connectivity.

I also sometimes have keyboard shortcuts like [R] to quietly force to reconnect to another computer/remote, etc.… just in case things went wrong.

Jumping to a specific part of the talk

There’s nothing more annoying than jumping through slides trying to find the right one. If you’re readying for Q&A, you can build keyboard shortcuts jumping to specific slides — or even a “table of contents” slide that serves that purpose.

Also, I usually support Shift as a modifier key so that holding it when jumping through slides skips all the transitions and animations — cool (I hope) the first time around, annoying if they’re in the way later.

Sounds

Need sounds? You can map them to specific key presses.

Volume

And, speaking of sounds, instead of pressing volume up/down keys on your Mac keyboard and displaying system overlay (lame), you can have your own keys that display volume using the same user interface as the rest of your talk… or not at all. (Of course, it’s a challenge to remember to use those key shortcuts instead of the system ones.)

Ramping it up

For a talk describing typography features, I built a pretty powerful invisible UI that used keyboard (it’s complex enough it deserves its own separate page).

Reloading

And, of course, the mother of all shortcuts is… ⌘+R. I design my slide decks to be reloadable when things go wrong — reload preserves the current slide, and the audience might not even notice if I don’t point it out.

General thoughts

If you’re worried about forgetting keyboard shortcuts, you can always print out a cheat sheet for yourself and glue it to your computer where your palm rests are.

If you’re building a custom application that controls your talk, you can add extra buttons on your remote to it that make it easier for you to not forget (and even show them only if necessary, but that requires communication both ways — your presentation telling the remote what’s the slide number).

For secret shortcuts that do not immediately take effect (e.g. running-out-of-time mode), you might want to implement some sort of feedback so that you are sure they just became activated. Unfortunately, HTML doesn’t allow you to do hardware stuff (my first thought: blinking the Caps Lock light), but you can simply quickly blink a little rectangle in the corner of the slide. You will know where it is, and the audience is likely not to ever notice.

The rectangle behind you, a series of articles about interactive presentations.

By Marcin Wichary (@mwichary)