frog Design Mind

If It Feels Good: Skateboarding toward the future of digital user interfaces



by Jared Ficklin

When I'm not busy creating user-interface prototypes, I'm co-director of the local Public Skatepark Action Committee. The two gigs aren’t as dissimilar as you might think; a skatepark, after all, is just a user interface for skateboarders, and one with a lot of design challenges. But instead of dealing with code, I have to think in terms of steel and concrete. On one side you have a myriad of choices from prefab to design-built concrete and steel. On the other side you have vocal “consumers” that will let you know when you get their UI wrong—leaving you with an empty park marked up with free, um, “market research reports” in spray paint.

Anyone using, designing or selling a product with a digital user interface can identify with this scenario. Not that someone will walk into Best Buy and tag “This MP3 Player UI Sucks”—at least not anyone who wants to stay out of jail. But just as new trends in construction have changed skatepark design, so, too, has technological progress enabled us to build better UIs. This is helping us design products—whether it be skateparks or game controllers– that don’t just look good, but feel good, too.

Devices are getting more powerful, and buzzing technologies (like AJAX and many other acronyms I won’t make your eyes glaze over by listing here) are allowing designers to create new possibilities from better-looking designs to rich animation.

These technologies are demand driven, sparked by the trend away from modular solutions–easily configured, pre-produced pieces (whether they be pieces of code or pieces of a ramp)–into more engaging and full experiences. Skateboarders are already onto this trend. There are nearly as many devoted to fighting modular skateparks as there are building them.

frog Design Mind

These new technologies focus on the ability to create custom UI experiences, and with good reason. Both iTunes and Google’s photo application Picasa quickly attracted fans by breaking from the standard controls and interface you find on most Windows-based applications. This is not merely another skinning trend; both applications also employ unique control behaviors and animation. As technology enthusiasts we have all experienced the attraction and perils of animation (“skip intro,” anyone?). Animation allows sexiness and innovative ways of navigating around a screen, but also runs the risk of simply adding unnecessary, time-consuming clutter to our devices.

The skatepark gives us a tangible reference. Think in terms of “feel.” As the skateboard wheel rolls across a park, surfacing, smoothness, transition radius and other factors are not processed consciously by the skater, but are reduced to a single subconscious impression of user satisfaction; an overall impression of how the park “feels.” In the case of browsing menus on a set-top box like TiVo, the equation for “feel” will include things like timing, transitions, and even inertia and elasticity.

frog Design Mind

In terms of timing, anyone who has skated a bowl with too much flat bottom (or used a Sony Ericsson T300) knows that slow responsiveness is a design flaw that can totally kill the user experience. The same can be said for animation in UI. Transitions should never block the experience or the information a user is seeking. A common complaint among cell phone users, for example, is animations that harm the UI. A quick search of “slow UI” in Google yields many such gripes, including an entry from mobile-review.com that simple states: “LG U8180 very slow UI.”

Effective use of animation in UI is not arbitrary. For instance, the menu transition from the right to left on a TiVO or an iPod helpfully implies that navigation to the left will take me backwards. Gadgets that use an animated transition just because their hardware can finally support it run the risk of annoyance once the novelty wears off. Better still is UI that incorporates simulated physics. Take the Picasa Scroller. The further you pull down, the quicker it snaps back into place. This elasticity naturally communicates its relationship to moving you through the library; the “harder” you pull, the faster you scroll photos.

In the not-too-distant future, that elasticity will be more than simulation. Haptic technologies–those dealing with the sense of touch, like force feedback mice and attenuated asymmetrical offset direct current motors– will actually give the UI “feel.” There are a lot of haptic devices available now for gamers, from steering wheels to the Xbox 360 controllers. But the technology is becoming more than vibrating motors. Soon you’ll know you are committing an important change to a document not because a dialog prompts, but because the cancel button is physically harder to push and has a longer throw, like the main power switch on your house. Cell phones will have jog dials that will be paired with animation, and will let you know with a moment of resistance as you pass each item in your address book; it will then stiffen and stop as you approach the end of a list. We won’t just look at the user interface, we’ll feel it—the same way a skateboarder feels a concrete transition.

As gadgets gain more animation and the feel of haptic technologies, designers will need to start thinking like the builder of a skatepark. Incorporating flow, feel, transition and speed, not just look and layout, will bring consumers enhanced usability and build an emotional connection between users and their gizmos.

Jared Ficklin is a Senior Design Technologist in frog’s Austin, Texas studio.

The frog Design Mind column appears every Monday on Gizmodo. Read more frog Design Mind.