IFTTT’s Animated Onboarding

IFTTT released their first iPhone app today, and it comes with an extremely elegant onboarding sequence, a series of four screens that walk new users through the core “if this, then that” concept that is the foundation of the service. A bit of parallax animation reveals itself to the user as she swipes from screen to screen, and the effect is delightful.

Of course, this kind of micro-interaction is not particularly novel if you think about how popular parallax scrolling has become on the desktop Web, but it’s also surprisingly rare in the native app environment, which is theoretically even more conducive to clever animations. IFTTT’s onboarding is well done, but to me it’s a kind of baseline — there should be lots more animations that are even more inventive than this. That doesn’t necessarily mean heavier, more complex work, either; a little bit can go a long way.

You can see an animated GIF of these screens here, but personally I think it’s better when you can see a real user interact with the screens, so I shot this ad hoc video too.

+

Bob Mankoff Explains New Yorker Cartoons

In this TED video, the cartoon editor for The New Yorker takes apart what makes their so-called “idea drawings” work. Mankoff is a cartoonist himself (he claims to have been rejected countless times by the magazine he now works for before eventually breaking into the business) and understands humor at an anatomical level. He’s also a pretty funny presenter. Watch it here.

Addendum: In conjunction with this talk, Mankoff also selected his eleven favorite New Yorker cartoons ever.

+

Vesper and DB5

I’ve been remiss in not mentioning John Gruber, Brent Simmons and Dave Wiskus’s little gem of a notetaker, Vesper before now. It’s a smart, crystal clear piece of software that defines a very specific problem — quick, frictionless capture of ideas — and polishes the heck out of it. Maybe even more interesting is the way that the product was shaped: developer Brent Simmons created a CSS-like method of manipulating the display variables — color, spacing, fonts — that his colleagues could edit independent of the main code. This is the next step for native app development; abstracting the display layer so that designers can have direct access. Simmons calls his system “DB5” and you can read more about it here. You can also learn more about Vesper.

+

New Google Maps Tour

The redesigned Google Maps comes with a handy virtual tour to acquaint users with what’s changed. That’s hardly revolutionary, but in a very nice bit of user experience engineering, the tour has some extra smarts built in. If, like me, upon first getting access to this new version you immediately start poking around and trying out various searches and only click on the tour option later, the tour’s messaging will cleverly acknowledge that state:

Google Maps Tour

Messing about with a new product unguided is a completely natural first use case for just about any product, and my guess is almost everybody does this. So creating a corresponding behavior for this tour makes perfect sense. Instead of assuming that the tour will commence with the product in its virgin state, this opening message says “It looks like you’ve already started exploring the new Google Maps!” and guides the user from there.

This took a little bit of extra design and engineering, and the end result does not make or break the product. But to me, it’s significant in that it clearly signals how much thought and care the product team has invested into the app. That’s worth loads.

If you don’t already have access to the new version, you can request access at the preview site, or read Google’s announcement from last month.

+

Michael Heilemann Takes Apart iOS 7

Heilemann, interface director at Squarespace, takes the new design to task in a few short, punchy and very incisive posts. The first one calls Apple on the fact that iOS 7’s lock screen is not just a usability faux pas, but a huge problem in that it is the gateway to the world’s most popular mobile computing experience. The second article cites an example of the OS’s poor attention to detail. And the third talks about the difficulty of understanding whether the OS is signalling a button or a state. Well worth reading.

Update: Wait, there’s a fourth article too. Also well worth reading.

+

PortKit

Brisbane, Australia Web design company Kintek put together this fantastic resource for designers and developers working cross-platform between iOS and Android. PortKit presents side-by-side visual illustrations and nomenclature for each Cocoa UI element in iOS 6, iOS 7 and its Android 4 equivalent. Where appropriate, they’ve also provided links directly to the relevant developer documentation. Incredibly handy, and incredibly helpful of Kintek.

+

The Tech Industry and the World Around It

George Packer’s article “Change the World” in the 27 May issue of The New Yorker is a thoughtful and damning survey of the tech industry’s political inclinations. It’s a must-read for anyone in startup land, but unfortunately the magazine’s publisher has shrouded it behind subscriber-only access, ensuring that its influence will be limited. (Condé Nast’s approach to digital access to its content still sets the industry standard for being inaccessible and user-unfriendly.)

Packer turns a cold eye on the tech industry at large, and on Silicon Valley and its environs specifically, questioning the true motivations behind and implications of countless companies’ collective desire to “change the world.” The Internet Age has made great breakthroughs and great wealth possible for virtually anyone who has the means to enter the fray of the technorati, but Packer argues that it has done scant little to truly improve the world around it. Tech companies create billions of dollars in real and virtual wealth, but the economy at large remains frustratingly sluggish, with incomes stagnant and employment barely growing. San Francisco, in particular, “is becoming a city without a middle class,” and private school enrollment soars in the Bay Area while public schools whither everywhere. Packer argues that the industry has come to believe that it can better the world by looking after itself first and last, effectively shirking any broader civic obligations, and that it generally regards government as a ruinous wasteland to be avoided and routed around, rather than as a means for social good.

I recommend you get your hands on this article in some form if you haven’t yet, but in the meantime you can get a taste for Packer’s sober and insightful reasoning in this follow-up blog post he wrote, which Condé has graciously made available to all comers. Packer’s original article appeared just before Yahoo acquired Tumblr and Tim Cook appeared before Congress to answer questions about Apple’s labyrinthine tax avoidance strategies, and he addresses both of those events in this blog post.

+

Magazine

French publication Magazine has an interesting concept for its covers: their masthead takes the form of a removable and re-positionable sticker, leaving the cover image itself beautifully unadorned.

Magazine

See spreads Magazine at their Web site. I found this, by the way, over at the fantastic and frequently updated Cover Junkie, a showcase for current publication design. Totally worth adding to your regular rotation.

+