Global Moxie - Full Feed

More UX Meetups in Providence

Josh Clark — Fri, 20 Aug 2010 15:21:06 UT

Three times makes it an institution, right? Tuesday, August 24, marks the third monthly gathering of local user-experience pros here in Providence, RI. The UX Meetup (a.k.a. Designers with Drinks) is a casual gathering of designers and interface nerds—a fun way to mix it up with local talent and share UI triumphs and dilemmas, along with a cocktail or three.

This whole hootenanny doesn't require much infrastructure, but what it does require (community, announcements, event RSVPs) is currently glued together with a Facebook group. Join the Providence UX Meetup group to keep up with the meeting info, and for now, be sure to RSVP your eager attendance at this month's pixel-perfect bacchanal. Here are the coordinates:

Providence User Experience Meetup
Tuesday, August 24, 7pm
Location: The Avery, 18 Luongo Square, Providence, RI

Tags: iphone, meetup, providence, pvdux

Upcoming: Tapworthy Talks in 2010

Josh Clark — Thu, 19 Aug 2010 17:40:02 UT

I'm zigzagging the nation and the interwebs this fall to bring the Tapworthy design gospel to the masses, popping up at conferences hither and yon. I hope you can join me at one of my talks (and if you do, be sure to come up and say howdy!). Here's the rundown of the events where I'm speakings in summer and autumn 2010:

August 25. iPhone iPad Summit
September 9. Free Webcast: Designing Tapworthy iPhone Apps for Delight and Usability
September 20–24. Design for Mobile
September 30 – October 2. IDEA2010
November 7–10. 360|iDev

iPhone iPad Summit

August 25. An all-day online conference about web development for iPhone and iPad. Eight developers and designers dish the skinny, including mobile web luminaries Jonathan Stark, David Kaneda, Jesse MacFadyen, and Suzanne Ginsburg. My talk covers the must-know UX details of designing for iOS, with a focus on what makes mobile touchscreen design so different from the traditional desktop web:

Designing iPhone Apps

Tapworthy apps cope with small screens and fleeting user attention to make every pixel count, every tap rewarding. In this session, learn how to:

Capture the elusive ingredients of irresistible mobile interfaces

Craft comfortable ergonomics for fingers and thumbs

Dodge the usability gotchas of handheld devices

Turn tiny-touchscreen constraints to your advantage

Along the way, you'll get behind-the-scenes glimpses into the design process of popular apps including Facebook, Twitterrific, USA Today, Things, and others.

Free Webcast! Tapworthy: Designing iPhone Apps for Delight and Usability

September 9, 10:00 am Pacific. O'Reilly Media is hosting a free webcast where I'll talk live about the essential elements of tapworthy apps. It's a fun overview of the ideas in my book and, I promise, 60 minutes well spent. Register here.

Design for Mobile (D4M)

September 20–24, Chicago. I'm really excited to be included in a staggeringly bright lineup of speakers at this mobile design confab. Speakers include Nick Finck, Jason Grigsby, Luke Wroblewski, Suzanne Ginsburg, Scott Jenson, and loads more. Me, I’m tackling iPad pain points:

iPad Design Headaches (Take Two Tablets and Call Me in the Morning)

The iPad and its emerging entourage of Android tablets have introduced a new style of computing which confronts designers with unfamiliar challenges. Learn the symptoms (and fixes) for a range of new-to-the-world iPad ailments, including Greedy Pixel Syndrome, the dreaded Frankeninterface, and the “I Can’t Believe It’s Not Butter” bait and switch. This talk explores practical techniques and eye-opening gotchas of tablet interface design, all grounded in the ergonomics, context, psychology, and nascent culture of these new devices.

IDEA2010

September 30 – October 2, Philadelphia. A high-octane, single-track conference for UX professionals. Speakers include Jeffrey Zeldman, Jared Spool, Peter Morville, Andy Budd, Liz Danzico and a who's who list of today's best interaction designers.

I'll tackle a topic that I've been thinking about a lot lately: a cultural take on the fragmentation of mobile platforms. Here's the gist:

Going Native: The Anthropology of Mobile Platforms

Mobile website or native app? iPhone or Android? BlackBerry or Windows Phone 7? Choosing a mobile platform for your app isn't just about tech specs. Culture matters, too, in an era when consumers suddenly perceive mobile apps as richly personal—software as content instead of tool. This talk explores mobile platforms as cultures, offering a new path through the thick jungle of mobile platform decisions. Before you go native, understand each mobile tribe's peculiar rituals, community, and mindset.

In the next year, designers and developers will face at least 10 major mobile operating systems. Every one of them has a unique personality, design sensibility, set of social norms, even government—all of which determine how well your individual app (and its audience) will thrive, with a direct impact on design considerations. How does the paternal culture of iPhone's philosopher-king model fit your app versus the frontier-maker culture of Android? And where does the web fit in? Discover the cultural and practical considerations of choosing the right platform(s) for your app and audience, and of crafting a design that works for all.

360|iDev

November 7–10. Austin, TX. I'm slinging design advice to a big, big audience of iPhone developers. 360iDev is a nitty-gritty conference for iOS developers to get down and dirty with practical techniques and go deep on technical topics. Meanwhile, I'm bringing the human element to all this tech talk with two (two!) talks on iOS experience design:

Designing for Touch: Mobile Design Is Industrial Design

Designing for touch means you're doing more than just slinging pixels: you're designing a physical interface to be explored by human hands. Just as surely as if you were soldering circuit boards, molding plastic, or shuffling die-cast buttons, your design defines the physical experience of the device, with honest-to-god ergonomic issues. Explore how industrial-design principles apply to mobile app design, and learn the rules of thumb (and fingers) that describe the best app designs.

iPad Design Headaches: Take Two Tablets, Call Me in the Morning

The iPad introduced a new style of computing, confronting designers with unfamiliar aches and pains. Learn the symptoms (and fixes) for a range of new-to-the-world iPad interface ailments, including Greedy Pixel Syndrome, the dreaded Frankeninterface, and the "I Can't Believe It's Not Butter" bait and switch. Explore practical techniques and eye-opening gotchas of iPad interface design, all grounded in the ergonomics, context, psychology, and nascent culture of these new devices (both iOS and Android). The presentation inoculates you against common problems with close-up looks at successful iPad apps from early sketches to final design.

Tags: conference, ipad, iphone, josh, mobile, tapworthy

For Your Consideration: Tapworthy iPad Apps at SXSW

Josh Clark — Thu, 12 Aug 2010 14:28:37 UT

So I'd like to speak at SXSW again, and I need your help.

Specifically, I need just two minutes of your time to vote for my talk. If you're not already familiar with SXSW Interactive, it's a fabulous brain-bending shindig in Austin, TX, about technology, media, and culture. I was incredibly flattered by how well my SXSW talk about tapworthy iPhone apps was received this year. For next year, I hope to give the tapworthy treatment to the iPad, with a talk on the many design considerations and dilemmas presented by this new platform. If you liked my talk last year, or if you're interested in designing for the iPad and other tablets, I think you'll dig this, too.

I need your vote. Over 2300 talks have been proposed for something like 300 slots, and a big part of the selection process is in the hands of the public. So, friends, please take a second to check out my proposal and give it a thumbs-up if you find it interesting. You don’t have to attend SXSW to vote, and voting takes only a moment: You do have to create a PanelPicker account if you haven't voted in previous years, but registration is quick and painless. Voting continues through August 27, 2010.

Vote here, and while you’re at it, please do feel free to add a comment in support of the talk.

About the talk

The talk is iPad Design Headaches: Take Two Tablets and Call Me in the Morning. Here's the pitch: The iPad and its emerging entourage of Android tablets have introduced a new style of computing, confronting designers with unfamiliar aches and pains. Learn the symptoms (and fixes) for a range of new-to-the-world iPad interface ailments, including Greedy Pixel Syndrome, the dreaded Frankeninterface, and the "I Can't Believe It's Not Butter" bait and switch. Explore practical techniques and eye-opening gotchas of tablet interface design, all grounded in the ergonomics, context, psychology, and nascent culture of these new devices (both iOS and Android). The presentation inoculates you against common problems with close-up looks at successful iPad apps from early sketches to final design. Topics covered will include:

How and why does the iPad demand a new kind of app?
What are the emerging principles for intuitive iPad design and user experience?
What is the proper role for "realism" in iPad design, and why is it so important to get right?
How should considerations of ergonomics influence iPad app design?
How does the use of gestures change for tablets vs smaller touchscreen devices?

Thanks!

Many thanks for taking your time to help my little campaign to speak at SXSW. And hey, please do consider coming to Austin for the show in March 2011. If you've never been, there's something pretty awesome waiting for you. I'd love to see you there.

Tags: conference, ipad, josh, mobile, sxsw, tapworthy, technology, usability

The Twitter Uncertainty Principle: How Tweeting Changes Us

Josh Clark — Sun, 01 Aug 2010 17:23:57 UT

I Tweet Therefore I Am is a lovely and thoughtful essay by Peggy Orenstein about the effects Twitter has on the way she experiences the moments of her day:

On a recent lazy Saturday morning, my daughter and I lolled on a blanket in our front yard, snacking on apricots, listening to a download of E. B. White reading “The Trumpet of the Swan.” Her legs sprawled across mine; the grass tickled our ankles. It was the quintessential summer moment, and a year ago, I would have been fully present for it. But instead, a part of my consciousness had split off and was observing the scene from the outside: this was, I realized excitedly, the perfect opportunity for a tweet.

…

Was it my joy at being a mother? Nostalgia for my own childhood summers? The pleasures of listening to the author’s quirky, underinflected voice? Each put a different spin on the occasion, of who I was within it. Yet the final decision (“Listening to E.B. White’s ‘Trumpet of the Swan’ with Daisy. Slow and sweet.”) was not really about my own impressions: it was about how I imagined — and wanted — others to react to them. That gave me pause. How much, I began to wonder, was I shaping my Twitter feed, and how much was Twitter shaping me?

Call it the Heisenberg Uncertainty Principle of the creative act. In physics, this is the conundrum where the very act of observing atomic particles disturbs them; something changes when you look at them closely. The same goes for our personal experiences the moment we decide we’re going to relay them to others, especially to the general public. Narrating the events of our lives changes our own perception of them.

We’re all natural storytellers. When we spin our yarns, we tailor them to our audiences. We embellish and embroider. We do this whether we’re chatting over dinner, writing a novel, or spraying 140-character snippets into the interwebs. Experiences change in the retelling, including the story we tell ourselves. The difference, of course, is that we’re retelling so much more now, because a communication channel is always open to us if we care to use it. The mobile computers in our pockets put us onstage anytime we like.

I experience a day differently when I’m carrying a camera, or an event when I plan to share it on this blog. I look for the narrative rather than simply living in the moment. There are good and bad things about this. In the pro column, I’m more engaged in my surroundings, processing them with an intentness that I might bring to a museum gallery or a film screening. I see the world with more clarity and attention. Things slow down, and the world sharpens into a higher resolution.

In the con column, this means I lose a measure of flow and fluidity. I’m no longer strictly a participant, I’m an observer. A gauzy filter intercedes: I process events and evaluate them for their interest to others. The moments are still mine certainly, but I now share them with an anonymous audience. This phantom company changes my experience.

An examined life is, on balance, a richer life. I find that writing about the moments of my day, even in tiny tweets, makes me think more about what’s happening around me, ponder my reactions to them, recognize connections both personal and professional. And I appreciate (and recognize that I’m addicted to) the same reflections by others. Yet there’s no question that the process also distances myself from the very moment I’m examining. Before I even write a word, I’m already onstage in my head. The guy I present to you here is not the same guy you would discover over dinner and certainly not in my personal journal.

This is neither good nor bad, but it’s certainly different from what came before. There’s much gnashing of teeth recently about Twitter and the other short-form communications of our day. The cultural history of technology, particularly communication technology, tends to follow a path from awe to ambivalence to cynicism to indifference. As we hurtle from cynicism toward indifference, gradually accepting the new order into our lives, we also lose a measure of humility. This is a trajectory marked in Awe and the Machine, a wonderful essay by Christine Rosen:

Today, we no longer approach our many machines with awe; in fact, the more personalized and individualized our machines have become, the less humility we feel in using them. … The awe experienced by earlier generations was part of a different worldview, one that demonstrated greater humility about many things, not least of which concerned their own human limits and frailties. Today we believe our machines allow us to know a lot more, and in many ways they do. What we don’t want to admit - but should - is that they also ensure that we directly experience less.

We lose as we gain, and “progress” isn’t always linear or uniformly better. So it goes, but I think it’s hard to deny that we’ve won more than we’ve lost. We live in an extraordinary moment where nearly everyone on the planet has the tools and opportunity to share their lives and ideas. Any one of us has an audience for whom we can write and perform, and this has generated a creative explosion unlike any other time in human history.

This is messy and unfamiliar, and we’re still learning to manage it, both as writers and readers. The first step is to recognize that the simple act of sharing an experience changes that experience. Some moments will be better and richer if kept to ourselves.

Tags: life, socialmedia, twitter, writing

How Big Is Big Enough?

Josh Clark — Fri, 23 Jul 2010 16:54:27 UT

The crew at O’Reilly Answers recently posted an excerpt from Tapworthy about the ideal size of iPhone tap targets. Forty-four is the magic number:

Just how big is big enough when it comes to iPhone tap targets? Well, what’s the size of a fingertip? Apple pegs it precisely at 44 pixels and this measure appears reliably throughout the standard iPhone controls. In portrait orientation, 44 pixels is the height of buttons in the Calculator app, of the keys of the iPhone’s virtual keyboard, of items in a standard list display, of the screen-topping navigation bar, and the list goes on. (With the iPhone’s 163 ppi screen resolution, 44 pixels is about 7mm, or just a hair over ¼ inch.)

The 44-pixel block is, in many ways, the basic unit of measurement for the iPhone interface, establishing the visual rhythm of many iPhone apps. That metric is significant as the recommended minimum size to make a tap target (like a button or list item) easily and reliably tappable. Put another way, it’s the spread of a fingertip pressed to the screen. By building its standard controls in proportion to that measure, Apple created a device that’s not only built for the hand, but of the hand—measured out in finger-sized units.

(As I noted in my post about designing for high-resolution screens, you should squint a little as you read the above, so that you read all mentions of “pixels” as “points.”)

For more, check out the full excerpt, or read up on Chapter 3 in Tapworthy: Designing Great iPhone Apps.

Tags: accessibility, design, iphone, mobile, tapworthy, usability

Develop iPhone Apps with Staying Power

Josh Clark — Wed, 21 Jul 2010 19:42:32 UT

This week at Mashable, I shared some ideas for extending the (alarmingly brief) lifespan of mobile apps. Here’s the dilemma app developers face:

An app’s shelf life lasts exactly as long as it can hold users’ attention. iPhone owners chew through apps, gulping down their content, then tossing them out and moving on. Studies show that the average user never launches an app more than 20 times before abandoning it. Less than 15% of downloaded apps get so much as a glance over the course of a week, and two months after purchase, only one-thirdof downloaded apps ever get used again.

This may not matter to you if your goal is to build one-off novelty apps; in that case, you might even expect people to launch your app only a few times. Laugh delivered, mission accomplished. If you’re trying to grow a following for your app, however, this is uncomfortable news. According to one survey, nearly half of all apps are downloaded based on a friend’s recommendation. Loyal users spread the word, but few apps ever manage to create a huge fan base. If you’re trying to create a long-term relationship with your audience, your app has to keep giving.

How to extend your app’s heartbeat? It’s all about keeping the content flowing. I suggest replenishing apps by offering content trophies, competition, community, and bolt-on tools. Check out the full article for the details. (Or check out Chapter 2 of Tapworthy for even more thoughts on this topic.)

Alas, somewhere in the Mashable editing process, the point of my travel-app examples kinda got lost. The reason I brought up Lonely Planet and OffMaps is that in a travel context, fresh content is a marker of achievement, just as much as completing a level of a game. A growing collection of destination guides memorializes your globe-trotting meanderings as readily as stamps in your passport. The app becomes a point of pride, not just a point of information.

Beyond just providing utility, in other words, the best apps often deliver emotional satisfaction, too. Welcome to the era of oh-so-personal computing.

Tags: community, design, iphone, mashable, mobile, socialmedia

Providence UX Meetup: July 20

Josh Clark — Sun, 18 Jul 2010 20:22:34 UT

Photo by Bildbunt

Hey Providence peeps, on Tuesday July 20, grab a wireframe, a color palette, and a cocktail glass to mix it up with local user-experience pros. A few folks are staging a casual meetup of designers and UX nerds. If you dig liquids, interaction design, info architecture, and usability, come join us!

This is the second outing for this fandango; a few interaction designers kinda spontaneously got together for a social meetup a few weeks ago, and we decided we'd try to do it monthly.

This time around we're adding some casual content, too. The program is... me! I've volunteered to be the guinea pig for a brief, informal presentation about mobile app design. I'll talk up a few of the ideas from Tapworthy. Pull up a banquette and let's talk iPhone. Here are the coordinates:

Providence User Experience Meetup
Tuesday, July 20, 7pm
Location: The Avery, 18 Luongo Square, Providence, RI

Tags: iphone, meetup, providence, pvdux, tapworthy

Designing for iPhone 4's Retina Display

Josh Clark — Wed, 30 Jun 2010 18:31:27 UT

So, um, maybe you heard: there’s a new iPhone out. For my money (and I shelled out plenty for it), the phone’s best feature is the new “Retina display,” the eye-popping high-resolution screen. Everything they say about it is true: at 320 ppi, the pixels are just plain invisible. The crisp bright screen really looks as good as print, absolutely gorgeous.

But what soothes the eye also adds headaches for designers. For three years, the iPhone came in just one flavor of screen resolution: the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels. Suddenly, we’re all designing for two different screens. Fold in the iPad, and you’ve got three iOS screens to juggle. (Hey, it’s better than designing for Android phones, which will have around 60 different devices and form factors by year end, but still... device fragmentation has arrived in its own small way in iOS land.)

Apple’s done some nice work under the hood in iOS 4 to make this transition as easy as possible, but designers still have to take on some extra legwork. Here’s the gist.

I’ll Give You Two Pixels for That Point

Starting in iOS 4, dimensions are measured in “points” instead of pixels. Conveniently enough, the iPhone screen is 320x480 points on both iPhone 4 and older models. Since that matches the pixel dimensions on older phones, existing apps look and work the same on those phones in iOS 4 as they did in earlier operating systems. There, one pixel is one point, a one-to-one match.

In other words, dimensions for all the various elements of iOS 4 remain the same, but their units have changed: you just substitute points where you used to say pixels. (Ah, the travails of the hard-working tech writer; the new phone was unveiled just two weeks after my new book Tapworthy went to press. Though the 640x960 screen was already a foregone conclusion, it wasn’t yet clear how iOS would handle the new resolution, so I had to treat the matter with benign neglect. Alas, Tapworthy refers to all of its dimensions in pixels. If you have the book, just squint a little and pretend it says “points” instead.)

On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide. So: just specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen. Text and images remain the same physical size on both old and new phones. That goes for bitmap images in legacy apps, too; iOS 4 blows ‘em up, automatically pixel-doubling them to adapt to the new phone’s resolution.

Of course, pixel-doubled images don’t take advantage of the gloriously crisp display on the new phone. That’s where your extra legwork comes in: to add high-resolution images to your app, you have to include a second set of all your graphic files. For every image in your app, add a second version that’s twice the size, adding @2x to the name. For a low-resolution image named image.png, for example, you would add a second file named image@2x.png. The new image will be picked up automatically by iPhone 4. Everywhere your code requests image.png (or even just plain old image), image@2x.png will be used instead.

Really? Yep, Really

I know what you’re thinking: “Do I really have to make two versions of my images? If I make a single high-resolution set, won’t iOS 4 scale them down on older devices?” Sorry, no, not automatically. While iOS 4 goes seamlessly in the other direction (scaling up low-res images for iPhone 4), it doesn’t work the other way. By default, it scales all images so that one pixel equals one point. That’s a great solution for making sure that old apps work correctly on the new phone, but it doesn’t help you go the other way ‘round.

While you could add additional code to downsize each and every high-res image for older devices, that would a) be a hassle, b) reduce performance, and c) create resized images that don’t look as good as the original. It might be extra work to create two sets of images for both old and new devices, but that’s the right way to go.

In practice, that means Photoshop fans should learn to get comfortable with Illustrator or [insert preferred vector application]. By building your app graphics in vector format, you can export them in whatever size you like with limited muss or fuss. This almost certainly won’t be the last time we see a new iPhone screen resolution emerge, and you can be ready for the next time by prepping all your graphics in vector formats. (Some folks, including Sebastiaan de With and Rusty Mitchell saw this coming a long time ago.)

There’s one exception to that: the app icon. Because of the wide variety of sizes and contexts in which your app icon appears, a pixel-perfect bitmap approach makes good sense. That’s particularly true for the tiniest versions, where the fabulous vector detail of your large icon will just scale down to mush. More on icon Photoshoppery in a sec. First, let’s get acquainted with the growing family of app icons that iOS requires for the various devices.

Boy Howdy, That’s a Lot of Icons

It used to be simple. You used to need just three icon sizes: a big 512px icon for the App Store, a 57px icon for the home screen, and a 29px icon for search results. Now, if you’re building a universal app for iPhone, iPhone 4, and iPad, you’ve gotta create 11 — eleven! — separate icons. And can you believe it: the mix even includes both 57x57 and 58x58 versions. Oh, the humanity. Here’s the rundown:

App Store Icon

512x512 (scaled down to 175x175 for display in the store)

Application Icon

114x114 (iPhone 4)
57x57 (older iPhones)
72x72 (iPad)

Spotlight Search Results and Settings Icon

58x58 (iPhone 4)
50x50 (Spotlight results for iPad)
29x29 (settings for iPad and older iPhones)

Document Icon

This is a new icon type in iOS 4. It’s used if your app creates a custom document type. The iPad uses the document icon in two different sizes.

320x320 (iPad)
64x64 (iPad)
44x58 (iPhone 4)
22x29 (older iPhones)

Neven Mrgan to the Rescue

And finally, the promised icon Photoshoppery. The inimitable Neven Mrgan put together a handy Photoshop template to help make quick work of this app-icon assembly line. Highly recommended.

Meanwhile, Back on the Web

If you're designing mobile websites or web apps, you likewise need to do a tiny bit more work to show off your high-resolution prowess on iPhone 4. WaltPad has all the details on how to use CSS3 media queries to give iPhone 4 (and other high-res devices) their own special style sheets. Good stuff.

Tags: apple, design, graphics, ipad, iphone, mobile, tapworthy

Graffiti Compasses, Welcome Mats, and the Art of the Generous Greeting

Josh Clark — Tue, 29 Jun 2010 14:01:02 UT

Love this. Seems an anonymous do-gooder is making some guerrilla usability improvements to the New York subway, spray-painting compass points outside stations to help emerging passengers get their bearings. NYC the Blog has the details along with photos.

Photo by NYC the Blog.

It’s a simple solution to a common problem, how to ease the blinking confusion of disoriented straphangers arriving at a new station. Web and software designers oughtta have the same consideration for their own audiences. In Tapworthy, I recommend that iPhone designers add a welcome mat for newcomers, a thin layer of extra help to point the way for first-time users.

This is especially important if the first screen of your app would otherwise start out empty. A blank screen is disorienting—it’s just old-fashioned manners to offer instructions for getting started. For example, Wikipedia reader Articles displays nothing at all until you search for your first article. Likewise, CardStar is an app that manages chain-store membership cards, but there’s nothing to see before you add your first card. Both apps add welcome mats to these empty screens with quick notes pointing out what to do first.

The first screens of Articles (left) and CardStar (right) are empty on first launch but add quick tips to help you get started.

An extended version of the welcome-mat technique can take the audience by the hand to lead them through an unfamiliar concept. Backwords is a fun iPhone parlor game that’s tough to explain but simple to play after you run through it just once. Here’s the gist: one player records a secret phrase on the microphone out of earshot of the second player. When the second player returns, the app plays the word backward, a distorted and unidentifiable sound. The second player has to mimic that jumbled sound, growling and chirping into the microphone. (This is generally hilarious.) Finally, Backwords plays that attempt backward and, if the second player did a good job, it sounds somewhat like the first player’s original phrase. Score a point if you can guess the original phrase.

Whew. The Backwords gameplay is a case where showing is better than telling. “We had these Backwords parties every weekend during development, and nobody ever wanted to read the instructions during a party or when it was their turn to play,” says developer Shadi Muklashy. “They just looked around the room: ‘All right, what do I do?’” To help, he added an optional overlay that gave instructions at each step. A big, casual handwritten font keeps the vibe friendly, with the effect of a game show emcee taking you through every stage of the game. Once you’ve got the hang of the game, a setting lets you turn the instructions off.

Backwords includes play-as-you-go instructions for newcomers. When a player is trying to guess the backward word (left), handwritten instructions show where to tap and why (middle and right).

Sure sure, in a perfect world your app is so easy and intuitive that it’s immediately obvious to everyone exactly how the thing works. But even the most well-designed interface can benefit from a few introductory hints, particularly for more complex features or tasks. A welcome mat, like the subway compass, is an easy way to offer reassurance and a generous greeting to new arrivals.

Tags: design, iphone, nyc, subway, tapworthy, usability

Dieter Rams and the Fresh Prince

Josh Clark — Mon, 28 Jun 2010 06:08:41 UT

Photo via Design Dare.

I was chuckling over this Fresh Prince photo at Design Dare the other day. “Now they all look dumb,” wrote Design Dare’s Jon Bell of Will Smith’s fresh eighties entourage. “Oh, fashion.”

Got me thinking about the difficulty of truly timeless design, whether for fashion or objects or software interfaces. Designers and their creations are captive to their times, and notions of “good design” constantly shift under our feet. I tweeted that thought, noting that interactive design trends age as quickly as a fresh Philly wardrobe. Lukas Mathis responded with a bit of reassuring advice: “I think the trick to timeless design is leaving out as much as possible, which coincides with *good* design.”

True enough. Even minimalism has its ebbs and flows, but elegant, keep-it-simple designs have had far more staying power than more elaborate confections. I’m thinking especially of the clean industrial design of Dieter Rams, who was chief of design for Braun from 1961 to 1995. The Dieter Rams photo pool at Flickr (yum) collects a whole slew of Rams-designed objects, their elegantly minimal design almost certainly a direct inspiration for the aesthetic driven by Apple’s lead designer Jony Ive for the past decade or so.

Radio-Phonograph (model SK 4/10) by Dieter Rams and Hans Gugelot (1956). Photo from moma.org.

Pocket Radio (model T3) by Dieter Rams and Ulm Hochschule für Gestaltung (1958). Photo from moma.org.

It’s a design sensibility whose application goes beyond just hardware. Rams once summed up his design credo as “Weniger, aber besser,” or “Less, but better.” That’s the spirit that necessarily drives the design of the best mobile apps. Designing tapworthy apps means designing for an economy of time, attention, and screen space. Great apps might be easy on the eyes, too, but the fundamentals of great design don’t hinge on making things pretty. In app design, beauty derives from function, and every interface element has to be focused on helping your users do what they’re there to do. This takes both careful editing and definition of purpose.

All of this requires extraordinary focus, but never fear, Dieter Rams is here to help. His “ten principles of good design” are as appropriate to mobile apps as they were to the appliances Rams designed half a century ago. A little food for thought from the master:

Loudspeaker Model No. LE 1 by Dieter Rams (1960). Photo from moma.org.

Good design is innovative

Good design makes a product useful

Good design is aesthetic

Good design makes a product understandable

Good design is unobtrusive

Good design is honest

Good design is long-lasting

Good design is thorough down to the last detail

Good design is environmentally friendly

Good design is as little design as possible

And just to be sure the Fresh Prince gets his say, too, we have Will Smith’s design-savvy words from his show’s third season: “Whooooooo, somebody call a cop ‘cause it’s gotta be illegal to look that good.”

Tags: design

Now Available: Tapworthy: Designing Great iPhone Apps

Josh Clark — Mon, 28 Jun 2010 06:07:54 UT

Tapworthy: Designing Great iPhone Apps is available on bookshelves everywhere starting this week. Grab the book at your favorite bookseller, [order it from Amazon], or buy direct from my publisher O’Reilly Media, who also offers ebook versions. You can even save some major coin by buying the book as an iPhone app for just five bucks.

What’s it about? I’ll let the book jacket do the talking:

So you’ve got an idea for an iPhone app -- along with everyone else on the planet. Set your app apart with elegant design, efficient usability, and a healthy dose of personality. This accessible, well-written guide shows you how to design exceptional user experiences for the iPhone and iPod Touch through practical principles and a rich collection of visual examples.

Whether you’re a designer, programmer, manager, or marketer, Tapworthy teaches you to “think iPhone” and helps you ask the right questions -- and get the right answers -- throughout the design process. You’ll explore how considerations of design, psychology, culture, ergonomics, and usability combine to create a tapworthy app. Along the way, you’ll get behind-the-scenes insights from the designers of apps like Facebook, USA Today, Twitterrific, and many others.

Develop your ideas from initial concept to finished design

Build an effortless user experience that rewards every tap

Explore the secrets of designing for touch

Discover how and why people really use iPhone apps

Learn to use iPhone controls the Apple way

Create your own personality-packed visuals

Hope you enjoy the book! (And if you do, please consider adding your review to Tapworthy’s Amazon page).

Tags: books, tapworthy

Tapworthy “Nails a Sea Change” in App Design

Josh Clark — Mon, 28 Jun 2010 05:38:25 UT

Software-startup guru Bob Walsh gave a glowing review of Tapworthy over the weekend. Thanks, Bob!

Yes, this is a book of chapter, verse, example, and tightly-edited interviews with developers behind some of the biggest iPhone apps. But that’s a disguise. It’s really an awesome set of fresh, up-to-date and useful ways to think about how you design iPhone apps, smartphone apps, desktop apps, web apps, you name it. This is not your typical rehash conventional software interface “best practices” book. What Josh nails is a sea change in what people expect of software apps, especially mobile apps.

I’m especially pleased that Bob called out the quality of the paper edition (“As a physical book, it’s what a book should be: full gorgeous color, great content structure, well-written and edited”). I’m all atingle about the book’s layout and design, and while the ebook versions look good, too, they don’t quite capture the glow of the physical book’s design. Glad you liked it, Bob!

Tags: tapworthy

Patching Up Your iPhone Wallpaper

Josh Clark — Tue, 22 Jun 2010 23:07:41 UT

Nnngh, the iOS 4 wallpaper change makes me crazy.

Don’t get me wrong, after 24 hours of casual use with the new iPhone operating system, I love it. It’s fast, edges have been smoothed, and nearly every change is for the better. I have a few niggles, but on the whole, the thing is a terrific evolution, with subtle care and thinking throughout. It’s saying something that my one serious quibble so far is an aesthetic one.

But eesh, it’s an aesthetic issue that seriously hampers usability. The new OS replaces the once-black background of the iPhone home screen with an image background. The black void of yore served a useful purpose, making the app icons pop with a gemlike glow. Now the app icons have to compete with noisy background textures.

I know, I know, I’m an elitist snob, but I shudder to think at the photo and texture atrocities being inflicted on innocent handsets around the globe. Pretty much any background photo makes my melon ache. Apple anticipated this by including some new, relatively dark texture images, but even these have too much contrast.

To stop the madness (or at least prevent my own), I grabbed this dark wood texture and built a simple low-contrast wallpaper:

Feel free to use it yourself:

Dark Wood Wallpaper (189 KB)

Click the link to see the wallpaper image. On iPhone, tap and hold the image until the "Save Image" option appears.

Looking for something a little different? Give these a spin:

Marco Arment whipped up a low-contrast leather wallpaper
The gang at Effektive have wallpapers for wireframe enthusiasts
Poolga offers up a dark, cartoony number
Geordie-Boyo at deviantart has a dark basement pegboard vibe
Jason Kottke has a very, very, very tranquil wallpaper indeed

Tags: apple, design, graphics, ios4, iphone, wallpaper

Tips for iPhone Visual Identity

Josh Clark — Tue, 22 Jun 2010 21:48:22 UT

Over at O'Reilly Answers, I posted a slew of pointers for designing a unique visual identity for iPhone apps. That's the topic of Tapworthy's Chapter 6, which I boiled down to 10 tips for that post. You can find the full details on the Answers page, but here's the quick rundown:

Choose a personality

Favor standard controls

Add a fresh coat of paint

You stay classy

Keep it real

Borrow interface metaphors from the physical world

Don't be afraid to take risks

The app icon is your business card

Use a dull launch image

Be kind to new users

For more info, along with all the pretty screenshots, visit my post at Answers, where you can also vote for your favorite tips, and add your own. (Psst, don't tell anyone, but these tips are pretty universally useful for all flavors of mobile app, not just iPhone).

More: How to Design a Unique Visual Identity for Your iPhone App

Tags: design, iphone, tapworthy

Effortless Ain’t Easy

Josh Clark — Mon, 21 Jun 2010 20:42:35 UT

You know that exciting feeling of possibility when you start a new project? Fresh ideas! World-conquering ambition! Ah, but how quickly that energy gives way to the reality of the long, hard work necessary to make it happen. Ideas, as they say, are cheap; it's the perspiration and execution that matter, and those things never come easy.

The middle of a project, especially a very long project, is without a doubt the toughest — when you're in the thick of it. It's especially true for writing a book, one of the hardest kinds of projects you can tackle.

This is true for every writer I've spoken with: midway through a book, you sometimes wonder how you'll ever find your way to the other end. You spend long hours untangling your logic, rebuilding shattered confidence, finding the thread again. It's grueling, often dark work, which makes the important task of keeping the words bright and lively that much more difficult. You can't let the pain show. If an author does his job right, the sweat and anxiety that went into the book are invisible to the reader. All you see is lively, effortless prose. "Effortless," it turns out, takes a ton of hard work.

But then, as you approach the finish, that original, exciting sense of possibility rushes back. You sit there blinking at the hundreds of pages of original ideas that you painstakingly drew from your own head. When those ideas match or exceed your original expectation, there's nothing quite so exciting or satisfying.

My latest book, Tapworthy: Designing Great iPhone Apps, starts shipping later this week. It's hard to describe just how excited I am about it, how proud of it I am. Tapworthy is an unusual book, neither a code book nor a marketing book. It's very much a design and idea book that explains how to "think iPhone." Tapworthy delves into the ergonomics, culture, and psychology of the device to help you make something awesome: an iPhone app that delights. The book tells stories. Breathtakingly bright designers and developers share their early mockups, missteps, and breakthroughs — the hard work and tough decisions that make their own projects seem so perfectly effortless.

Along the way, real-world artifacts like calculator watches, Choose Your Own Adventure books, the world's craziest Swiss Army knife, and The Greatest American Hero tv series bring the book's concepts to life. It's a fun and (oh god, if I did my job right) effortless read, chock full of thought-provoking ideas about what makes great iPhone apps tick.

The good folks at O'Reilly Media sent out the press release today, and the book should start shipping in the next couple of days. It lands in big bookstores next week. I expect to set eyes on the actual physical book for the first time in just a few hours. The anticipation is just killing me up in here.

You can order the print copy at the book's O'Reilly page or Amazon page. Ebook and PDF versions of the book are available from O'Reilly. If you're a book reviewer in need of a review copy, check out the press release for details.

If you like the book, I hope you'll share your opinion at the book's Amazon page. (Amazon reviews have a truly important impact on a book's success, and a few kinds words are much appreciated. The same goes for reviews on your blog, Facebook page, or Twitter account.)

But it's not about me, it's about you. Most of all, I hope you find Tapworthy useful, interesting, and engaging. I hope the book offers some inspiration, triggering that same exciting feeling of possibility that will launch you into a fabulous new project (and sustain you through the dark middle).

You have the coolest job in the world. You design iPhone apps. Go make something amazing.

Tags: books, creativity, motivation, tapworthy, work