The interface design focused twitterhood of my timeline got really excited a month ago, when Push Pop Press released Al Gore's Our Choice. Teenage groupie girls excited. Statements of the book as we know it being a thing of the Past were made. From people I decided to follow. Good thing there were some beers and a weekend after that.
Before having a closer look at the amazing work Push Pop Press did with this app, here are some comments about this fantasy dead book thing.

The paper book is an object so optimized that it's not going to fade away any time soon. Here's what a book since spinal binding was invented allows us to do, and what any digital incarnation should be able to provide to deserve the name of Book Terminator:

• Displaying at a glance how much there is to read. I haven't read many ebooks, but each time I start one, I haven't got a clue about how much time it will require to be read – it's not a nice feeling.
• Displaying how much more there is to read. That's kind of addressed with the status bar at the bottom, but it's expressed as a proportion of a value you can't really figure out.
• Bookmarks – done.
• Notes – done.
• Easy access in space and time. A book sits on a shelf and will remain there waiting for you to come back to it if you wish to do so. It doesn't matter if it's next week or in twenty years, as long as you don't move house, it'll be there with all the notes and bookmarks. Will the Kindle or iBooks offer the same ease and legacy? Allow me to doubt A LOT.
• Lending. Knowledge is meant to be shared and spread. Profit is a corollary to this, not the other way around.
• Owning a copy signed by the author, or by a friend who made a gift. The emotional bond that tangible artefacts provide between individuals over space and time is cruelly lacking today in the digital sphere.

Because of these lacks in function and emotions, I tend to perceive eBooks as a convenience: you can buy them from your couch, they have no weight, and they don't age. You give away all the sexyness, presence and reliability of a nice paper book for accessibility and zero impact on your bookshelf. As it has already been said, eBooks may replace a certain category of books, the ones you would get rid of when you're packing before moving, but it doesn't look like paper books are going away any time soon.

So what's the deal with "Our Choice"? What has Push Pop Press done differently for it to generate so much passion and unrestrained commentaries?

Meaningful gestures

There is something about the navigation in this book app. As Josh Clark said, buttons are a hack, and the Our Choice app is a living proof: pinching out means "more detail about this", pinching in means "I'm done with these details, get me back to the bigger picture". The interaction model is exactly the same as the iPad Photos app's one, but for mixed media: you're zooming on chapters just as you zoom on your photo albums, you zoom on charts or animations just as you zoom on your photos, and you swipe to the next chunk of text as you would swipe to your next photo. Two simple and self explanatory gestures are used to control all the app, pinch and swipe.
Pretty close to the single flip gesture found in paper books, it's remarkable. They applied to textual content gestural evidence found in one of the iPad's core app, something that was before everybody's eyes but only them (it seems – correct me if I'm wrong) have noticed. Even Apple's own iBooks doesn't use this model, very well played.

But as meaningful as they are, I can't see how they could be useful on a fiction book, or an essay. Paged prose just need a forward/backward gesture, that's it. This interaction model seems to be better suited to content where details other than text provide better understanding to the reader - educational books for example. Charts, audio, maps, updates... Cell biology would be easier to grasp with the help of some interactive 3D models. Learning about the history of Paris would be great with overlaying maps combined with time sliders.

Mixed media

Producing a compelling work in this format is a team effort, it's not for a single person with ideas, a notebook and a pen. Al Gore didn't sit in a library by himself, wrote the text, picked the right iconography, produced the interactive info-graphics and 3D models, shot and edited the videos, recorded and edited the sound, et cetera. It would take a rare breed of author to produce a work worthy to be published with such a scope of media. Does such an individual even exist? People in their twenties today may be more fluent than older generations in these media, real authorship still requires a lot of insight and practice in each of these fields. It doesn't come easy.

Time speaks

With the level of polish we can witness on this app, we get a sense of how important motion design is to our interfaces today. Not only because it helps mimic reality and can get the user to conceive a mental model of how the different parts of the UI might work, but also because they convey meaning and emotions. Depending on its speed and dynamic, a fade in can be dramatic or energetic.
Interface design happens more and more in four dimensions: X, Y, faked Z (for now) and time. Knowledge in film editing should be taught to aspiring interaction designers; not how to use editing software, but how film editors think and work.

Flow

"As a result, Mr. Gore goes much farther in his mission — persuasion — than he could on the printed page alone."
D.Pogue, New York Times.

Allow me to disagree with this – and it may just be that I'm starting to be an old fart – and point out a downside of this particular app. Has anybody who got excited about this book app finished reading it? Or did you get distracted and switched to Twitter to praise the app and opened it twice since then only to read a couple of pages and browse the nice pictures? The app format may be more entertaining, its navigation model more rewarding for interface designers, but did we get the message better? Not sure about this.

If you don't want to listen to something, or if nobody's forcing you to, the message won't get across, pinch/swipe or not. I found the text to be too often interrupted by images or other calls. Every couple of views my attention was required on another level of discourse, sometime three times on a single view. These interruptions are not always in sync with the prose, resulting in a jittery reading experience where the reader's flow isn't respected enough.

The 80's are over

I feel insane when I see how much time I spent discussing about the form of this book, while the message that it holds is so much more important.
It's a bit sick to be discussing about proper pixel arrangements when so much depends on what's said in the book itself. If the interaction model of this app represented 1 point in benefits to human kind, reading and getting Our Choice is probably worth 1 000 points, a scale that Push Pop Press wouldn't probably contest.

By understanding how our actual way of life is suicidal for mankind, we will be more willing to act on it, and quick. Just as knowing about health issues related to smoking helps you quit, Our Choice helps you make decisions that will impact your quality of life and make sure our grand kids will have one. Less pleasure, better future. Fly less, avoid instant buys, look for expensive durable local goods you'll pass on to your kids instead of cheap disposable crap from overseas, and be considerate of your cloud requests. Uncool? Read Our Choice and think again.

To my surprise (and satisfaction), the design of this blog seems to have got the attention of a lot more people I would have hoped for. This article is for the curious among you as it details the ideas and choices gone into the conception and the process used to get Bureau on its feet, back in september.

First, why this publication? My other blog, Artificial Horizon, despite posting being very sparse lately, is still active. It's a place where design as a process is the main topic, and interface / interaction articles found there way in there. But as interaction design has become my daily concern, I needed a place to talk about it exclusively; this is how the need of Bureau came to be.

Content first

The metaphor I had in mind for what the reader would feel when loading the page was as if I was handing her my last article on a printed white page, as nicely typeset as possible, and very simple. The first and easiest thing I want my reader to have access to is the last ideas I felt were necessary to express.

Only after that should he have the means to find out more via different navigation elements, get to know who writes this, et cætera. This is why I chose to have an illustration acting as the back-to-home button for the site instead of a word: the first thing you read is the title of the last article, not the name of the blog and its tagline. This is also why the navigation is placed down in the footer, while being easily accessible from the top of the page by clicking the info "i" in the right corner. Knowing that I wouldn't post often here, chronology and categories were sufficient enough to find your way through the posts — no need of a real navigation list on top.

Time, yours and mine

Enabling comments means spending time filtering spam, reading them and replying to them, and as a consequence means less time for other nice activities life offers like cooking or learning how to code in Obj-C. Some readers see this as being closed to counter arguments, especially when I get into rants, but it really is because I want to lower the amount of time Bureau is taking from my other interests.

I love discussions, but I also love having a good meal on my table at the end of the day, and a good meal doesn't cook itself. So there. The Twitter is ideal to send a quick feedback that won't consume a lot of your/my time. And if you feel like it's not enough, post a more detailed thought on your blog and send the link in, I'll be happy to read it while stirring this Bourguignon beef. Sorry if this is disappointing, but you have to start somewhere if you want to cut on the info hose.

About your time now : I'd like to respect it as much as possible, so I thought of displaying the reading time for each article. Writer for iPad came around with this feature so I wouldn't have to read aloud and measure the time myself for each article. But then, knowing the time each article takes from your life may not be as useful as it sounds. You can estimate that by scrolling to have an overview of the article's length.

What could be more useful for readers is a sort of a grade announcing how much time on average reading this blog would take them if they decided to become regular readers. It could be expressed in minutes per day or per week, as in "be aware reading this blog will take 8 minutes of your life each day if you subscribe to it". That may be a good feature to have on RSS readers, if only as a sanity check monitor of your subscriptions. None of these two options are in place for now, but I'll be looking into how this ratio could be dynamically calculated in Movable Type when I'll find time to (I'm not a programmer, yet).

Responsive design

Having read the A List Apart article and seen some well executed instances, how can you not be convinced it's the way to go to present your content to different type of screens or devices ?

Media queries help you target a range of screen sizes. The usability way of saying this is: they help you target different usage contexts. It's not only about how to fit such content into that much space, it's also about redefining the content hierarchy for each different context. The informations and interaction handles you need upfront are not the same wether you're visiting from your smartphone during your daily commute, from a tablet on your couch or from your 24 inches desktop at work. We shouldn't be thinking of it as a way to extend or compress a default presentation to larger or smaller screens, but more as way to adapt our voice and interactions to different situations. For this blog, which has little different types of content on its landing page, it's not much of an issue. But for more content heavy sites, viewing the use of media queries from this angle can really help you to shape up rewarding experiences for the user.

In Bureau's case, the design of the large screen layout came to be when realizing that if I wanted to respect text formatting best practices, the article's width, or measure, couldn't get larger as you'd extend the window's width. For reading comfort, a line of text can't be too long: a maximum of 75 characters is recommended. As a consequence, widening the window is only going to add horizontal white space; what to do with it then? The choice of having an illustration as a title lead the way to the answer: bigger. Illustration. Using perspective in this alternative version allows to add depth to the layout.

Body text font size is getting a 2px upgrade in the large screen layout, as when using big screens, we usually sit a little further from them. The background color is also slightly evolving from layout to layout, preventing the page emitting too much light into your already strained eyes. For a page with a white background color, when the browser window widens, its brightness rises accordingly. So I made the background color dimmer and dimmer as the window's width gets larger. It's not scientific at all, and I might need to adjust my color values to fully achieve my goal, but it's a start.

For the iPad version, thumb scrolling is a key interaction to keep in mind for the design : you should use at least one inch left and right margins to prevent your readers from hitting a link in the text body when they only want to scroll. As media queries allow it, orientation can be responded to with an appropriate style sheet. If you're visiting the site from an iPad, you'll see the larger illustration in the landscape mode. What you'll see too is that when you go from portrait to landscape, the page's width doesn't resize automatically to the width of the screen, and you have to pinch to zoom out. I have long thought I was doing something wrong but I came across this tweet from @filamentgroup and learned that it was a bug from iOS, not my code being unsufficient to cover the case.

Building it

The site went from ideas to sketch to html/css mock up to Movable Type in that order, with no other steps in between. Here are some pictures I took from the notebook I used at the time:

The html/css prototype is pretty much like the first article published here, all in its latin glory.

I decided to use Movable Type because I already had it installed on my server to run Artificial Horizon, and knew my way around it. The pages served are static so the server is not doing too much work: I guess it uses less power per page served, so it's kind of green.

Next up is the switch to html5, and getting custom layout features called for each article categories. And some easter eggs might or might not find there way too.