The rectangle behind you
The cheapest invisible UI
In my late 2014 talk at Smashing Conference, I wanted to try a different type of UI for a slide that was meant for the audience to have some fun with.
The goal was: go through a list of 21 typographical details (such as smart quotes, em dashes, hyphenation…), but involve the audience by asking for help in pointing the details out.
The slide would look something like this:
I wanted people in the audience to be able to call out specific details… however, I didn’t want any selection UI for me to be visible on the screen. In other words, I wanted to make it feel magical.
One solution would be to build a customized second-screen remote app (a phone, or a table) connected permanently to my presentation and controlling it from afar. I’ve been there. But here, it seemed like overkill.
Another solution: Not mirroring the display. I could have some sort of selection UI on my laptop screen, and different visuals for the audience on the projector. However, that is pretty tricky when you’re presenting from a web browser.
Here’s what I came up with instead, extending the idea of secret keyboard shortcuts for presenters. I assigned a four-letter keyboard shortcut to each feature, for example:
- Q U O T — quotation mark
- L I G A — ligature
- E M D A — em dash
- …and so on
Then I built a function that would quietly listen to keystrokes, and if the last four matched any of the combination above… it would select/highlight the matching typographical feature. Then, the function would remember that feature was shown.
There was also a safety hatch (as a public speaker, you always need a safety hatch): pressing Space would automatically go to the next unused feature. This way I could cut the interactive part short if it was dragging (by quickly going through all the remaining items, without me needing to memorize them all)… or just start with Space and don’t even mention the audience participation.
Here’s a recording of one instance:
Or, check it out yourself:
The rectangle behind you, a series of articles about interactive presentations.
By Marcin Wichary (@mwichary)
