bureau

It means “desk” or “work table” in french : how metaphoric for a blog discussing what my work's about. Get the RSS feed.

i

I'm Thibaut Sailly, an independant interface designer based in Paris. Say hello on twitter or by email at bonjour ✉ tsailly ◦ net.

Topics

Archives

© 2010-2014 Thibaut Sailly · Powered by Movable Type · RSS

September 2010

What is a book ?

– The future of the book could involve lots of cool interactions you know ?
– How's that ?
– Well, look.
– And what do you do for a living ?
– I'm an interaction designer.
– Ah, I see. Hmmm.

IDEO just released a video illustrating the results so far of their research about the future of the book. If you haven't seen it, please take a few moments to watch and listen.

To sum things up, these results are disappointing. The three possible "visions" displayed have nothing to do with an immersive and satisfying reading experience, and are nothing new or forward thinking. At best, it's a nicely packaged video with analog references to appease the fears of the book industry executives it seems to be aimed at.

First, Nelson: "giving readers what they need to form their own opinions on important topics of our times".
Read this sentence again and instead of Nelson, and picture "online press". Yes, good match.

Second, Coupland (I feel bad for Douglas C. on this one): "keeping you up to date with what's going on in your field".
T. W. I. T. T. E. R.

Third, Alice: "an interactive and playful reading experience that invites exploration well beyond just turning the page".
Multi-media game !

This is what I think reading a book is, and I hope you'll share this with me: you sit somewhere you see fit, you get to a page, start reading, and a few seconds later you're not here anymore, you get places, you're time traveling. You're somewhere in a misty cloud that just formed around your head, immersed in a story, in a debate or in an explanation of some facts you're discovering. This immersion is a requisite for you to get value out of your reading, wether it's emotions or knowledge. If you're disturbed and taken out of this cloud, you loose the thread, you can't connect the dots and walk the shoes of the author anymore.

Laying out text is all about this: making the text legible and understandable with as few graphic hints as can be, so the reader doesn't get distracted or constrained, and stays with the ideas. Writing is all about this too: choosing the right words and arranging them in a manner making the sentences flow and the reader captured by the story. I got caught in the service tunnel at the end of the subway line once because of Jim Harrison, and I'm sure I stayed there a good minute, silence and all, not noticing a thing. Because I was in a book.

Every event that gets you out of this state of mind ruins the efforts of the writer and diminishes the benefit you'll get from the time you spend reading. Even a cup of tea can achieve that if it's too hot. So what the fax, IDEO ? You want books to send me text messages !?
"Quizz: how long do you think you can stay in that room ? Your pal, Blaise Pascal".

Nelson, you're right, we need to get "a grasp at the complexity of the world". But don't propose us links to other content that will link to other contents and call it book innovation, because that's what the web is and has always been.
Douglas, as mentioned by others, you should visit this online bookstore, Amazon, it's fantastic.
Alice, you're nice but you're too distracted, you need to focus. Go see Bilbo, he'll tell you.

Information delivery needs innovation, learning needs innovation, playing needs innovation. But books... The IDEO trio is a bad answer to a wrong question. Book reading is a good experience, it's been optimized for centuries now by quite a few very smart people. The humongous amount of written data we have access to and what we do with it, that's what is problematic today. Information overload, choice, priority or relevance are problems today. How we access to which books, and how we set the exclusive time to read them are the issues, not the book itself.
Very surprising coming from IDEO guys, who are usually inspiring in their insights.

And: enough with the xylo. I'm not thanking Apple for this trend of cheesy soundtracks, it's coming to a point where it's at elevator music level.

Links:
http://magazine.designersinteractifs.org/actualite/ideo-recycle-le-web-et-le-jeu-video-dans-son-livre-du-futur (in french)
http://www.fastcodesign.com/1662356/ideo-reimagines-books-for-the-the-digital-age
http://beta.wnyc.org/shows/bl/2010/sep/21/future-books/

Multweetasking on iPad

By accident, a nice feature of the iPad Twitter app popped up on my screen: it has multitouch gestures for actions on your timeline:

— a two fingers drag down on a tweet from a conversation will unveil the said conversation below (just one tweet in this example):

Screen shot of Twitter for iPad with conversation overlay in the timeline

— a spread on a tweet will display informations and actions relative to the tweet's author:

Screen shot of Twitter for iPad with author's profile overlay above the timeline

Unlike the right panel which isn't a modal view – as noted by Gruber in the Talk Show Ep. #8 (52:55) – these displays are modal. Combining both is a clever way to allow access to more interactions for the user: you can access information on the author of a tweet and choose to follow her for example, while having a video she linked to loading in the web view.

Screen shot of Twitter for iPad with author's profile overlay above the timeline and webview with video loading

You can even load the video in the webview, compose a reply to her, and check informations about her while the compose tweet panel is up. If the web view was modal, as it is today on the iPhone version, you'd have to leave the webview and access the author's profile, and then eventually reload the webpage to load the video again.

As some other new interactions on touch devices, these gestures aren't obvious when you don't know them, but feel natural once you do. Kind of like keyboard shortcuts. These two moves are in fact "gesture shortcuts" as you can access the content they call by taping the tweet for the first example above, and by tapping the icon of the author on the right panel in the second one.

So, two interesting things here : one, gesture shortcuts, and two, "multweetasking". Also, it's the first time I've encountered multitouch actions on text content, and I'm curious to see if it's going to stick to the wall and be used in other text based touch apps.

Now the quest for the gesture combo allowing to bloody deselect a tweet from the time line is on. It MUST be somewhere.

Update: to unselect a tweet, tap the timeline icon in the left column. Thanks to @tullio and @derPlau for the information.

Posted in

Champagne

Pedaling in the dust of rocket designers such as Ethan Marcotte or Andy Clark, I made this website's layout react to your browser window's width. If you play with the resize handle, you'll figure out what that means it if you haven't already. If nothing happens, download and use a modern browser. Blondes will smile at you in the street. It's very heartwarming, you'll see.

Through the use of the mighty CSS3 Media Queries, three different layouts are at your disposal on the desktop (design choices will be detailed in a coming post). If you use an iPhone or an iPad, lucky you : there's a layout for each orientation of these two devices. I'm aware this looks Apple centric and not really opened to other existing terminals, but if I had some other mobile devices at my disposal I would have worked to ensure a compatibility towards them. If somebody in Paris is reading this and owns an Android device, I'd be happy to have some feedback and/or borrow some minutes with the device. Same goes for the "Retina Display" optimizations : they won't be there until I get a hand on one. My birthday is coming though, there's hope.

Anyway, every layout was optimized for your reading comfort. In the case of the iPad, I made sure that there was a sufficient margin on both sides of the text for comfortable thumb swiping, in either orientation.

It still needs polish, but I needed to publish. Improvements will happen, iteratively.

sketches

Here are some useful links I found while putting this all together :

For any comments, please use the Twitter, thank you.

Posted in

Guide de style du journal, revu en septembre 2014

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Un beau rouleau de calque

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Le texte sélectionné a lui aussi un style

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0
Icône de l'application xScope, Iconfactory

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem quote dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div>
  <h1>Markup block</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <em>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em>
</div>

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. A list apart : responsive web design – the article that started it all, with one excellent illustration
  2. Safari reference for web content – essential if you want to understand how web pages are rendered on the iPhone/iPad, and what you can control it.
  3. Fonts for iPad and iPhone – nice and handy list of fonts available for both platforms. I was going to go for Palatino bold on the headings, but does the antialiasing sucks on the iPad for this one.

Lorem interview dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem note dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.