There are many articles addressing the question: “who invented the burger menu icon” (that 3 stripes icon we all use to open a side menu in our mobile apps). But not many people know the origins of the side menu concept.
Being an old man, I recently came across a very old blog post I wrote years ago (back in 2008 when my smartphone ran Windows Mobile…) that talks about Mozilla Fennec – Mozilla’s first attempt to create a mobile web browser.
It was designed to run on Windows Mobile and as you can see from the design documents below – it included 2 innovative gestures to bring in and out additional side panels from the left and right sides. Wow.
The design document included the following:
Problem: Add functionality to the reader mode while still maintaining a chromeless, reading focused layout.
Solution: Introduce off screen menus rendered visible with swiping gestures.
And this was in 2008, short after the first iPhone was introduced and just to remind you – the iPhone did have side menus included in the design guidelines.
To my knowledge, this was the first time in the history of mobile software that a side menu was pushed-in and out of the screen to expose additional capabilities beyond the screen real-estate. It was the first side menu ever.
Then came the burger icon and the rest is history; the side menu became a mobile standard and a perfect way for popular apps to create a unified experience across operating systems and device types (even beyond mobile).
Of course, after few years in which all the leading apps used a side menu – there is now a new trend to switch back to traditional tabs replacing the side menu: the best example is facebook that adopted the side menu few years ago and now switched back to iOS style tabs. Apple never included the side menu as a “best practice” for its’ iOS UX guidelines so who knows, maybe we are witnessing the end of the side menu era.