Inventing Interactive

Form+Code

David — Mon, 06 Sep 2010 21:37:55 +0000

Just released is Form+Code, by Casey Reas, Chandler McWilliams, and LUST. It’s a great book — a beautiful examination of the role of programming in making design. It organizes a surprisingly wide range of examples into five categories: repeat, transform, parametrize, visualize, and simulate.

What I especially like is its historical, and cross-disciplinary, approach. It reminds us that there’s an incredibly rich history of programming’s role in creating design and art. It’s very inspirational.

The book’s website has downloadable code samples for each category. They’re simple snippets of Processing code, encouraging you to tinker and explore – to create something yourself.

I went to the book’s launch party this past Saturday at the Telic Arts Exchange in LA. It was nice to finally meet Casey and Chandler. Plus it was a pleasure to run into Jennifer (who I hadn’t seen in ages) and Elise, and to hang out with Keith.

Book launch event -- as things were winding down.

Digg & Twitter Redesign

David — Fri, 03 Sep 2010 19:54:22 +0000

Twitter for iPad

This week, both Twitter and Digg released new versions of their services. Digg launched a redesigned version of their website, Twitter released a new iPad app. But the difference in how the two releases have been received by users is remarkable. People are pretty unhappy about the new Digg. People love the new Twitter app.

What’s initially surprising is that Digg has a solid history of beautifully innovative UIs. labs.digg.com has showcased a wide variety of alternate ways to view Digg content. But the work there is pretty separate from the main digg.com. Digg’s blog writes about the new design, with more emphasis on speed, personalization, and social features. But users aren’t very happy. Besides a buggy launch, and usability issues, many users are upset about the change of making social networking a core part of the site — feeling that the site has changed it focus for the worse. Amid all this turmoil, reports the NYTimes, Digg has also hired a new CEO.

Twitter may have less of a history of internally creating innovative UIs, but a variety of companies have used the open api to develop all sorts of unique (and sometimes crazy) apps. And, when Twitter likes them, they may buy them. Twitter’s iPad app is the result of their purchase of the iPhone app Tweetie. Tweetie introduced the idea of slide-to-refresh and, as described by Engadget, “blends functionality, performance, and usability together with a dash of playful quirkiness.”

The new Twitter iPad app is really remarkable. Twitter’s blog describes the new UI features: panes, media, gestures, and no need to login to get started. The result, they write, is an app that’s “really fast and a fun way to read real-time content.” And it’s true — it really is a pleasure to use. The NYTimes has an interesting report on the app. And Engadget gave it a glowing review that concludes: “Twitter’s sliding panels UI is definitely one of the most unique and usable iPad interface concepts we’ve ever seen, and we’re pretty sure it’ll be aped by all sort of other apps in the near future.” It’s a hit.

So why the big difference in responses? The apparent, and sudden, change in Digg’s core values could be a factor. To many users, Digg appears to be “selling out” while Twitter remains more idiosyncratic. But another reason could be the difference between iPad and web users, and the developer communities for each… The web is a relatively established and stable environment. Users there don’t expect big changes. The iPad, on the other hand, is a environment thriving with UI innovation. iPad owners are eagerly looking for new ways to experience digital content. And Twitter’s success is, in part, thanks to the understanding of that audience.

(Speaking of Twitter: if you’re a user, consider following Inventing Interactive: @i_interactive.)

Twitter for iPad

Arcade Fire

David — Thu, 02 Sep 2010 18:32:53 +0000

The Wilderness Downtown

This week Arcade Fire launched the interactive video The Wilderness Downtown, based on their track We Used To Wait. Enter a street address (they suggest the address where you grew up), and a set of windows, with content synchronized to the song, delivers a mix of video, interactive pieces, and footage of your street address — animated and augmented. It’s pretty amazing — both technically and creatively.

What’s even more remarkable is that it’s a Chrome Experiment — done entirely in HTML5 — without any Flash. Google’s page on the project details the specific technologies and techniques used. Creative Review posts a great deal of background information.

What I found most interesting was how the concept developed. It was Aaron Koblin who first had the idea of an interactive film to showcase Google Chrome, rather than the band or their label instigating it. (If you’re not familiar with Aaron, you should absolutely check out his work on his website and sandbox. Most relevant to the Arcade Fire project was his involvement on Radiohead’s open source House of Cards project, for which he was the director of technology.)

It’s a great example of new technologies and experimentation driving creativity. And very encouraging to see a band like Arcade Fire regularly supporting such efforts… Digital versions of their songs feature Synchronized Artwork. And they’ve done several sites, including Neon Bible (which is an interesting experiment at getting a viewer to interact throughout a song) and Black Mirror.

The Wilderness Downtown

Neon Bible

Augmented City

David — Thu, 26 Aug 2010 17:31:24 +0000

Get your 3D glasses back out — there’s more red-blue goodness ahead! Keiichi Matsuda, who created Domestic Robocop, has a new project: Augmented City.

The architecture of the contemporary city is no longer simply about the physical space of buildings and landscape, more and more it is about the synthetic spaces created by the digital information that we collect, consume and organize; an immersive interface may become as much part of the world we inhabit as the buildings around us.

It’s a interesting vision — or perhaps a warning — a mix of the real and the virtual. The 3D UIs are crazy, but fun. And I thought the virtual detritus scattered everywhere (are they uncategorized digital junk like left-over geo-tagged twitter posts?) was a great touch.

Actually, the piece made me think of my last post, and the need to put away our digital devices from time to time. A warning of what could happen if we don’t.

Link via BldgBlog.

Slowing Down

David — Thu, 26 Aug 2010 02:51:22 +0000

There’s been a lot of press over the past month or two about the possible dangers of multitasking, and how it can hurt our ability to focus and remember. But it was only last night, driving home from work, and not distracted by all the other web pages fighting for my attention, that I really “got” the story. Listening to this interview with Matt Richtel, the journalist who has been reporting this topic for the NYTimes, I was able to gave some attention to the topic.

Much of the research is still on-going, some of the findings are pretty interesting:

Every time you check your email [on a mobile device?] you experience stress.
Checking our devices reduces the degree to which we’re engaged in the world around us.
It’s important for us to take breaks from our devices in order to be physically healthy.
By being constantly interrupted, or drawn to our devices, we have less time to process the day’s input, let our minds wander, and to think creatively.
Even small things, like hyperlinks in text, reduces our focus on what we’re reading, and decreases comprehension.
And, from much earlier research, people can only really focus on one task at a time. (The specific example he gave was that we can’t listen to more than one conversation at a time, but generalizes to: multitasking is ineffective.)

Individually, most of these aren’t really surprising — we kinda know them already. But the idea that there may be brain-chemistry explanations for them, potentially with long-term mental-health implications, is the big deal. He uses food as an analogy — both food and technology nourish us and are essential, but overindulging can be unhealthy. Some technologies are akin to “brussels sprouts” while others are more like “cookies.”

After hearing the story I started to think about my iPad. Lots has been written about how the iPad, with less emphasis on multitasking and multiple simultaneous windows, encourages greater concentration and focus. It’s much easier to, for example, read a book, or watch a video on an iPad because it’s harder to quickly jump to another app. It may not be the ideal environment for power-users, but the result is a calmer experience.

The story also reminded me of when, in “The September Issue,” Vogue creative director Grace Coddington tells of working with photographer Norman Parkinson. His advice to her: “Always keep your eyes open, keep watching because whatever you see out the window can inspire you.”

So… my immediate resolutions: remove distracting apps from my iPhone (goodbye We Rule), stop checking my phone so frequently for new messages, try, as much as possible, to use my iPad instead of my laptop, and… slow down. We’ll see how it goes.

In the spirit of calming down (and to give this post at least one image) check out Oblique Strategies for the iPhone.

BBVA ATMs

David — Wed, 25 Aug 2010 23:48:02 +0000

Redesigning the ATM experience is a recurring UI design favorite. They’re something we all use, and we all have thoughts about how they can be made better.

A couple years ago, Physical Interface published an in-depth article about Pentagram’s redesign of the Wells Fargo ATM. It was a fascinating view into a very challenging task — revealing a lot of complex, and often conflicting, requirements.

Unfortunately, most ATMs seem to end up as Frankenstein-like solutions as they try to resolve all the design requirements. Khoi Vinh recently posted about how the industrial design of ATMs almost encourages theft. And, in the US, complex ADA rules have a huge impact on design.

This past May, IDEO published a video showing their redesign for Spanish bank BBVA’s ATMs, and it’s pretty interesting. Their approach seems much more user-centered — and the results are a big improvement from typical ATMs. Quoting from the video, the themes that drove their design were: 90° rotation enhances privacy, all-in-one slot forces simplicity, full touch screen supports intuitive interactions, personalization boosts flexibility, virtual to real transitions materialize tangibility, and large screen leaves room for delight.

The result is an elegant mix of product and UI design, with some quite beautiful moments. I particularly like the animation, during a withdrawal, showing the transition of cash from the virtual to the physical.

It’s unclear, though, if this is just a design vision project. Will installation and regulatory requirements require changes to the design? It’ll be interesting to see what happens as the projects moves into deployment.

3D Everywhere!

David — Tue, 24 Aug 2010 21:55:38 +0000

Barneys Co-op

Yesterday I received a Barneys Co-op catalog in the mail — in which all of the photos were shot in 3D. Because they used the red-blue anaglyph method, they also included a pair of glasses. It may be an old-fashioned technology for 3D, but it’s still pretty fun. (You can also see the 3D catalog on their website.) So, I figured it was a sign for me to post some of the 3D links I’ve been collecting lately.

A couple months ago Robyn released a 3D music video online for her song Don’t Fucking Tell Me What to Do. What’s cool is that the video takes real-time twitter feeds and incorporates the text into the video. It’s a pretty low-touch interactivity, but nicely done. This piece was created by Blip Boutique and Stopp Web, with typography by Jakob Nylund.

Robyn, Killing Me

Insane, and of pretty dubious utility, is this 3D bookmarklet. (By Yusuke Kawasaki.) It turns a regular web page into a 3D version of it. Sorry, no real interactivity here, but it’s crazy enough to be very cool.

Did you know that Google Street View can display in 3D? Just right-click within a view and select “3d mode on.”

Google Street View in 3D

I think my favorite 3D site, so far, is Snowdin. Made by Cole + McVoy as a holiday site in 2008, it’s got all sorts of cute games and surprises. And, the 3D is interactive! So, for example, if you jump in the ski game, the character rises up. Very charming.

Snowdin

Inkling

David — Mon, 23 Aug 2010 22:11:39 +0000

Just released for the iPad, Inkling looks fantastic. It’s designed as an e-textbook reader — and has beautiful layout and typography. It’s also got support for a wide range of multimedia content such as movies, 3D, and quizzes. But I think its real killer-feature is the way it can integrate your social network into the reading experience. You can embed notes within the pages, share them with others, even follow them as streams. It makes books feel social and alive.

My gripe with Inkling is that it’s a closed ecosystem — you can only read books that you purchase through the Inkling store. Wouldn’t it be way-cooler if Inkling was a wrapper that you could use to read e-books purchased from Amazon and the Apple iBookstore, too? That way you could use all the social features in, for example, a cookbook or travel guide.

Inkling is a free app and comes with a demo version of The Elements of Style. Give it a try.

Link via Daring Fireball.

Interesting scroll bar detail.

How Big Really?

David — Wed, 18 Aug 2010 03:49:25 +0000

Apollo 11 baseball comparison

One of my favorite strange-but-fascinating infographics is the overlay of the Apollo 11 moon walks onto a baseball diamond. It presents something that’s so otherworldly and distant (a moon walk) into a super-familiar environment (a baseball diamond) to make the information immediately relevant and understandable. The image, created in 2009 by Thomas Schwagmeier is part of NASA’s Apollo 11 Image Library, where there are loads of other interesting overlays — such as this view of the Apollo 17 traverses over Paris.

Just today the BBC launched Dimensions, at howbigreally.com. The site gives users the ability to overlay a wide range of “important places, events and things” items onto Google maps. Finally, you can see how the moon walks compare to your backyard! Created by BERG, there’s a great description of the project’s development.

It’s a simple and charming idea — both educational and addictive. Take a look…

Small Experiences

David — Mon, 16 Aug 2010 18:45:08 +0000

Creating a rich experience, with as little code as possible, is challenging. But the results can be marvels of creative programming.

Remember, when back in 1996, using just 12k of code, Red Sky created HP Pong — the first interactive banner ad.

HP Pong

There are two contests currently running to find the best small-sized web applications. The first, 10K Apart, is open through August 25. The challenge is to build a web app in less than 10k of code (not including the code libraries that they’ve approved for use).

Take a look through the gallery of entries to see some great examples of designer inginuity. I thought that LED Scroller and Sinuous (by Hakim El Hattab, who has a great page full of similar experiments.) were really cool. And 10K Tennis follows in the tradition of small pong games.

LED Scroller

Sinuous

10K Tennis

For an even more hardcore challenge, visit JS1k. Here, the file size must be under 1k, and cannot use any external libraries. Maybe constraints really are what designers need, because the results are pretty amazing. Entries are due by September 10 — so start coding!

Entry #311

Entry #292

Entry #365