What if your next notebook was interactive?


Steve Jobs just presented to the world the first iphone and I couldn't help but to mock up a product and an interface leveraging this notion of a touch interface. But I wanted to explore another metaphor: the notebook. Two screens connected by a flexible hinge and a simple UI where you could flip pages and interact with fluid paper...

No, Material Design didn't exist yet. We still talked about skeuomorphism. But Microsoft had started to communicate around its early stage Metro design language. Flat was in the air!


When the first iPhone was revealed in 2007, as a product designer, it was tempting to imagine a tactile device with different form factors and new UI metaphors. Obviously, for a mobile phone provider like SFR (a french telecommunications company), this whole new paradigm of "surfin' on the web while walking down the streets (and bumpin' your head with other commuters)" was a mind blowing revelation (whaaat?, a whole new market??). So they had a simple question: "what would a MID look like and how would we interact with it?"...Yup, you heard right: M-I-D. Nope, nothing to do with some men in black super secret government experimentation. MID stands for... wait for it... Mobile, Internet, Device. BOOM 😱. There you go. That's how they called them devices before the iPad was on the market. No slates, no tablets. You can blame INTEL for it.

the right metaphore

Anyway, SFR's advanced research team wanted to explore a bit what could these things look like in the future and what could be some area of focus on interface design and so on. So first thing's first, I started by looking for a metaphor. I wanted to find some kind of historical continuity in the form. Something that would work both for the device and its interface. The idea was to say "if I had to replace one thing that people are already carrying around, what would it be?". So first, I asked a bunch of people to show me what's in their bag (yeah, sometimes people carry around some serious weird things, but hey, who am I to judge?). Result was pretty clear: I had to go with the notebook. As long as people had a bag, men or women, whatever there age, the notebook was something they often carried around.

This peeping tom exploration defined my starting point for the device and its interactions: it should remind of a notebook, with a cover, signatures and pages.

the hinge

I was heading for a device with 2 panels each one supporting a tactile screen and my focus point was the hinge. I wanted to make it feel "organic" and not mechanical. After having tested several possibilities, I opted for a silicon molded hinge which served both as an attach and an electrical connector between both screens. This center piece can be easily replaced by the user and comes in different colors to offer some slight personalization to the device (we all secretely have a favorite color right ?)

The resulting effect is something much smoother, reminding the more natural feeling we have when we open up a book. Also, this actually makes it possible to implement a gestural interface with the device itself, bringing some "flipping page" type of interactions (as you'll see in the video shown below).

flipping throught the UI

The theme of the exploration was simple: how can we interact with a device split in two screens? I had an existing reference which was the a visual metaphor for the interface based on pages we would swipe, a gestural interaction leveraging the gyro on both sides

the signatures

The last focus area was the design of the junction between the hinge and each screens. Here again, the idea was to use some visual reminiscence of notebooks (yeah I know, sometimes I can get really obsessed 😎). I looked closely how books were crafted with paper folded multiple times to form what we call "signatures" which are then sewed or glued together. I couldn't really reproduce the assemblage, but I wanted this particular zone of the device to remind us of this aspect.

Each panel is designed and assembled together like signatures, to form together NOTABENE, the connected notebook 📓.