Tako: an alternative to the hamburger menu
The hamburger menu is an acquired taste. Some deride it as confusing and “bad UX” for hiding navigation. Others say it’s so ubiquitous it’s like arguing putting a key in a lock isn’t intuitive.
Since I wrote this article, I’ve removed Tako as the menu. Unfortunately an octopus blinking was a little distracting.
This site’s supposed to be a little less serious than my commercial work. There is a hamburger menu (three vertical dots on the bottom right of the page if you’re on a mobile phone), and it was on the bottom of the page for bigger devices too. I put it there because I figured people coming in off a search engine or social link didn’t want to be bothered with “look how clever I am” mastheads. Let them read, and point them to where to go next down the bottom.
Only it was boring. Three dots. Yawn.
Here in Japan we have something that’s as fun and friendly as the hamburger – Tako. Basically a sausage cut in half and trimmed to look a bit like an octopus, you can find them beaming out of kid’s lunchtime bento.
And rather than stare at you blankly from the site, let’s add a little colour. Let’s make them blink, just to let you know they’re alive.
It’s all done with CSS and a simple animation. The body is an inline SVG, and the eyes are a pair of HTML “divs”. For the Tako menu the eyes run on an 8 second loop.
At the moment the Tako menu isn’t available on phones and small tablets. I’m afraid the three dots remain as I thought it a little too imposing for the smaller screens.