The web is taking a step back from the utter futurism it was immersed in. After so many shiny, glossy gradients and plastic-looking icons, there's a definite turn to warmer textures; Fabric, wood, denim to name a few. Warmer colors are being used. Instagram and all its clones take back several decades of improvement in photography and film development to give us underexposed, grainy and scratched vignetted pictures.

This is an homage to low technology presence in the web of the 21st century: a split-flap display, created with HTML, CSS3 and JavaScript.

Creating a split-flap display

I've always liked split-flap displays, or Solari boards as they are also called. Its ingenious design is of mechanical simplicity yet of amazing versatility. We've seen them on every busy train station and airport until flat screens have become inexpensive and durable. There's a bit more of information in the Wikipedia entry for split-flap display:

From a nerdier point of view, a split-flap display resounds emotionally as primitive mechanical array of pixels, almost like the next best thing to a real kinotrope. They are tangible programmable little visual blocks.

Since our world is three-dimensional, we are used to our interacting with it being three-dimensional too. Everyone understands and naturally tries actions like pushing, pulling, turning, lifting, etc. That's the part that is missing from the interaction with computers, regardless of them being workstations, laptops or hand-held devices: all the UI metaphors exist in 2D, and some try to mimic a behaviour in the missing dimension.

This is not as much about creating a new UI control but about exploring how to port the physical world into a web page, and the implications of it. Of course a slow, mechanical clanky display is not by any means better than a simple caption with text. I think it's more interesting to consider the emotional resonance of a display like that. Does it evoke a different feeling? Does it make a "clack" sound in the user's head?

Comments