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

Touch

Apple Watch untouched

Here are some observations about the Apple Watch from what we can see to this day : a HIG document, a marketing site, a presentation event with a 12 minutes demo, and the SDK.

Physical size

Although this device is unaccessible for now, and has a screen size we’re not used to, it is still essential to get a rough idea of its real size before committing to a specific design (if you want to build an app ready at launch time).
Based on Apple pictures and the watches cases heights (38mm and 42mm), I’ve approximated the two screens dimensions and drawn outlines of both objects at scale 1:1.
You can download the PDF* and print it out to see for yourself. You also can use it to build a fake watch helping you in your information architecture work.

I’ve also resized some of the watches gorgeous pictures so that they’re at scale 1:1 when displayed full screen on an iPhone (5, 6 and 6+). They come very handy if you use a certain mirroring tool to work on your designs - which I couldn’t recommend enough.

You should also watch carefully the presentation keynote from September, screenshot the hell out of it, take notes and learn from what Apple has decided was appropriate in their own apps: number of elements per screen, their respective size, the space left between them, the font sizes, use of color and animations, etc.

While the screen is tiny and the interactions very limited, the graphic details play a major part of the app personality and quality. This work should not be overlooked. Have a look at the way the arrow are animated in the Activity app for example.

Also worth keeping in mind: because of the way it’s held, the reading distance on the watch will be shorter than on a smartphone.

Ellipsis galore.

Ken, Stacey, Jane, Evans Hankey, Ben, Alex, Luke, Dana, Jon Dascola, Dan Keen, Lance Wilson, Jamie, Eliza, Chance Graham.
These people have 2 points in common: they all have very short names, and they’re all present on the watch marketing pages. Coincidence? Maybe not.

Nomenclature.

Glances are the watch’s notification center, and notifications are the push notifications we already know, only much smarter. Although these features are very similar in their nature, using this new terminology isn’t all marketing. It’s helping thinking and communication when designing, avoiding mixups between what an app does on the phone and what it does on the watch. Use them early on.

Emotion and personality.

In the footnotes you’ll find very raw notes taken from the september event video. Personal is was a very very important word throughout the presentation, as much as the focus on emotions. Not only in the new communicating options (tap, sketch and heartbeat) the watch proposes, but also in the UI itself: it might be a device where you want to be pleased, indulged even, by what you see as much as you want it to be a great tool. Emotions have always been part of Apple products, but it seems this one is moving the cursor way up. I wouldn’t be surprised with motion design taking a much bigger role on the watch than it does on the phone, because it’ll bring much more emotional value.

The personal relation we have with this object is also why Apple chose to communicate about it through vectors of fashion and taste. For one thing, watches have always been present in fashion magazines, so it makes sense. But it’s also a way to place the Watch in a broadcasting arena where all the other competitors have absolutely no ear to be heard from. Vanity fair and watches intersect pretty well. Vanity Fair and LG or Samsung, not so much. This type of media has a reach tech publications can't dream of, so it’s a way for Apple to shut their competitors off from the debate “should you have a smart watch or not, and if so, which one”.

Pitch dark.

In much of the animations like the fitness app badges, it’s as if the watch is a little dark room where the light only comes from the window to our world that is its screen. Floating objects coming up to you, out of darkness. There is a distinction between what lives on the surface of the screen, and what lives beneath it.

Taptics

It seems we’re about to see the revival of morse code communication. Joke aside, I wouldn’t be surprised to see messaging apps allowing you to draw emojis from tap sequences and force touch.

Personally very happy to see the “taptic engine” feature happen. 10 years ago I did a connected watch personal project and had this idea of a “hey, you, tap tap tap” signal from the watch when receiving a call or a text message, so it’s a good feeling to see it existing at last (and in a much more elegant incarnation too).




As a final comment, I wanted to add it’s fascinating to see Apple unveil their new project little by little. The team building and design effort we know of, the industrial scale involved, the communication strategy playing out: every facet of this project is a case study worth our builders’ attention.

Notes

* My thanks to Craig Hockenberry for hosting the file.

September event
59:00 [Cook]
Personal, precise, personal style and taste, because you wear it, what we didn’t do is take the iPhone and shrink the user interface and strap it on your wrist, meant to be worn, as much personal tech as it is style and taste.

64:35 [Ive]
So personal, completely singular product, intimate level, inspire desire, navigation is fluid and vital, fluidly, nimble, precise adjustments, lightweight interactions, quickly, efficiently, connect intimately with others, personal, subtle ways, accurate, all day everyday, preference and self expression, personalisation appearance, to be truly personal.

Posted in

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.