I find myself wanting to be alone with the Rocket eBook, to slip out the door and click through its pages under the night sky, where the incandescence of its screen would permit me a self-contained communion with the author that a book on paper couldn’t allow. Suddenly, I want a Rocket eBook right away. It’s like an object that has tumbled out of the future.
Steve Silberman, Wired, July 1998
- Designed one of the first ever interfaces for an electronic reading device. Worked with the industrial designers on button placement, designed the screens and icons for the digital display.
- User tested a paper prototype with end-users.
- Wrote a white paper describing the benefits of the NuvoMedia design relative to their competitors.
It’s 1997 and NuvoMedia is cofounded by Martin Eberhard and Mark Tarpenning to create one of the world’s first electronic books. Palo Alto Design Group (later renamed Palo Alto Products International, then bought by Flextronics) was hired to do the industrial design and I was hired to create the user interface.
The Industrial Design
The PADG design team first considered the question of what a digital book should look like. A direct metaphor, wrapping the device in leather, like a fine leatherbound book, was quickly abandoned. But the idea of a paperback, especially one that folds back on itself, held promise. By positioning the battery as the spine, the designers created a natural handhold for the product, like the folded-back swell of the pages of a paperback. The battery placement also centered the weight of the product in the palm. Navigation buttons were kept to a minimum, ensuring less visual clutter for the user. There are only two page-turning buttons and the only additional controls are touch-screen icons used for navigation and a power button recessed in the side of the product.
The User Interface Problem
The device had to be small, ambidextrous, comfortable to hold in all orientations, and easy to use. In short, the design solution had to prevent technology from getting between the reader and the text.
The user interface of a book is completely tactile and very low tech. The electronic book is a new type of electronic device. Unlike the laptop, it has no keyboard and touch screen technology isn’t robust enough for much more than “clicking” an object on the screen with your finger. There is no existing interface from which to draw ideas. How can we create a new interface that embraces the technology and the parts of history that is important?
As the designer, it was my job to think about and understand how best to interact with a hand-held electronic book. (As a designer, there is nothing more satisfying than the opportunity to create a new interface from scratch.)
What We Explored
Because page turning is such a predominant and necessary function, we decided there should be permanent hard buttons for this function – up and down buttons. (Size and placement of these buttons was decided by the industrial design team.)
In order to facilitate the best reading experience, the screen real estate needed to be dedicated to the content. We had room around the edges of the digital screen to put programmable buttons, but where to put them and how many? Their image had to be fixed as it was not part of the digital screen. (Touch screen technology had yet to be invented.) I spent a lot of time thinking about what functions were important enough to warrant their own button and which buttons might contain a menu and what items belonged on the menu.
We decided on 4 buttons, one in each corner of the screen. (More would increase the time to figure out which button did what.) Two buttons were menus – a library menu (how to get to other books or material) and a book menu (book manipulation functions like search, bookmarks, highlighting.) Two buttons were single function buttons – one allowed the user to change the orientation from vertical to horizontal and the other was programmable, allowing the user to choose which of the remaining functions they wanted easy access to.
As this was before the technology was developed to automatically detect device orientation and it would not be obvious to users that it was possible to change orientation, we made this a top-level function.
Also, since the orientation could be changed, the orientation of the icons on the screen (since they were NOT part of the digital screen itself) needed to be oriented in such a way that they were understandable in any orientation.
The Icon Design
There were four top-level icons that would be permanently visible on the edges of the glass (but not part of the digital screen).
- Library – a menu to access other reading material
- Book – a menu to access book functions, such as search, bookmarks, highlighting
- Orientation – change the text orientation from vertical to horizontal and back
- Short Cut – a programmable button the user can set to their favorite library or book function
The Menu Design
The library and book menus allowed the user to access other books and book functions, respectively.
This was a good solution because
The fact that the screen was dedicated to content allowed the user to just read the material and forget about the interface. The easiest and most predominant actions were to page forward and back and these were hard buttons, just under the user’s thumb when held in a paperback vertical position. (They were centered at the bottom of the screen when the book was placed in its docking station and positioned on a desk.)
We kept the screen size as small as possible without compromising reading with too little information. We decided on a black and white screen to increase battery life. Most reading material is sufficient in black and white. As it happened, this turned out to be one of the biggest assets of the Rocket ebook. While the competitors were large, heavy, and had short battery life, the Rocket ebook could be held with one hand and read continuously for up to 22 hours, causing reviewers to claim that while it didn’t have a lot of fancy bells and whistles, it was “the one we want to curl up with at night.” Or on a plane.
Sometimes more sophisticated, clever solutions aren’t better than a simpler, more obvious one.
In researching how best to do page turning, I explored animations that curled the page to the left, perhaps accompanied by a rustling sound. While doing this research, I was also testing the product by reading a novel, which I mostly did at night in bed. The test code was simple, just repainting the screen from top to bottom. I discovered while reading that this approach worked rather like a real book. When my eye finished reading the last word on the screen, I naturally pressed the page turn button and moved my gaze to the top, by which time the page had repainted and I never lost my train of thought. I remained engaged in the book and was not distracted with fancy page turning animations, sounds, or clunky scrolling techniques that display the last two lines of the previous page.
As a designer, I want to be recognized for finding solutions that are innovative and unique. But sometimes, it’s important to realize that the best solution, the one that serves the user well, isn’t the most innovative, sometimes it’s the simplest.