15 Jul

The Design Epiphany

Every time I design something, there’s a defining moment; a moment where the design finally comes together, where it switches from being something bad to something good. I think of this moment as the “design epiphany.”

It usually happens very late in the design process, much later than you’d expect. And it’s always preceded by a period of agonizing uncertainty, where I know something’s wrong but lack a clear path to fixing it.

A lot has been written about design, but I’ve never seen anyone describe this particular moment. So I’m going to do that now, by telling the story of designing my own app, Review for iPad.

The Prototype

1 Prototype

Review is an app without precedent, so I first built a prototype to make sure it was something I’d use. For the most common Review use cases: adding new reminders and addressing the reminders scheduled for today, the prototype was functionally complete. It just looked bad. This illuminates the nature of the design epiphany; it’s rarely a revelation in functionality. Functionality is refined in a separate, but parallel, part of the process.

The Draft

2 Draft

After using the prototype for a while, I set to work on the real design. In a few days I had this, the last draft before the design epiphany. All the user-interface elements from the prototype are still there, and the functionality is unchanged.

Even now, when I look at it, it’s hard to say exactly what’s wrong with this draft. The design epiphany usually solves something that is ephemeral, difficult to describe. It has to do with feel, form rather than function.

The design epiphany is usually preceded by a lot of design work that’s seemingly unproductive. Often I know deep-down the design isn’t working, yet I continue to improve each user-interface element, like I did here. I keep improving it until there is nothing obvious left to improve. Doing this helps draw out what’s really wrong with the design. After ruling out the obvious, there’s nothing left to re-evaluate but the fundamentals, the inherent structure of the design. I am ready for the design epiphany.

Soon after this draft, the design epiphany for Review happened.

The Design Epiphany

3 Epiphany

Arranging the reminders into a stack was the design epiphany for Review. The apps purpose is clearer, in sharper focus. This is a stack of reminders to work-through and address, not a “gallery” of reminders like the previous draft looks like in comparison.

The change in functionality is minimal. The only real difference is the disappearance of the navigator at the bottom. And even that had less to do with the design epiphany—the navigator could have remained at the bottom in the new design—and more to do with running the prototype. When I was using the prototype, I found I never used the navigator.

The Final Design

4 Final

Now, when I describe Review to people, I say, “You open the app and see a stack of index cards to review with a message to yourself on each one. You address each reminder by pressing a button saying when you want to see it again: ‘tomorrow,’ ‘next week,’ or ‘next month.’”

A “stack of index cards to review,” the defining design element came very late in the process; that’s the design epiphany.

11 Jul

Reeder Reeder
NetNewsWire Reeder
Keyboard Shortcuts Gestures
Standard UI Custom UI
White Texture
Instant Animated
AppleScript Huh?
Pro Amateur
Following Apple’s Lead Leading Apple
Past Future

For the record, I’m firmly in the NetNewsWire camp—you can pry my NetNewsWire from my cold, dead hands—but the people have spoken. Hopefully Black Pixel can turn this around.

Sound Software

How engineers create artificial sounds to fool us:

"What manufacturers realised is when you go to see a car in a showroom you don’t hear the engine first," says Prof Cox. "What you hear is the sound of the door opening and the sound of the door closing.

"It’s a really important first impression sound."

But when manufacturers had to put extra bars in their side doors to comply with new safety standards the sounds of their doors started to change.

"They thought ‘How can we go about re-engineering the sound so it sounds more expensive and more high quality?’," explained Prof Cox. To compensate for the added weight they had to make other parts of the car lighter and took weight from the catches and door mechanisms.

As a result, doors no longer made a satisfying clunk but had a tinny sound. Manufacturers then started experimenting with different sound effects.

Dampeners were introduced into the door cavity to muffle the tinny effect and engineers altered the locking mechanism to make just the right sort of click.

Sound is a relatively unexplored area of software design that I predict will get more attention in the future. It goes particularly well with the type of skeuomorphic design found in iOS.

Software Sounds I’ve Found Memorable

  1. The Hit List has a rewarding sound when you check off a completed task.

  2. Every time I use Dribbblr for iPad, I find myself absentmindedly tapping “shots” to hear the click sound they make.

  3. I believe a large part of Tweetbot's appeal is that it's filled with nice custom sounds.

I’m particularly fond of what The Hit List has done; it provides a sensual reward for completing a desirable action. More manipulative software1 could use this to encourage actions desirable to the software designer (as opposed to The Hit List which encourages actions desirable to the user). Want a user to click a button? Have it play a pleasing sound when they do so.

The rise of animations (with touch interfaces) is similar. Skeuomorphism, sound, and animation all increase software’s sensualism. All of this makes me think of my favorite software design quote:

"My favorite designs are the ones that don’t just solve a problem, but also engage you on an emotional level—where you take away more from it than just the end result of its function."

When I talk about us having just seen the tip of the iceberg—that software is on a rise to a new place in the popular consciousness—it’s through the exploration of these new territories that the change will take place.

  1. Everytime I use Facebook’s web interface it feels like I’m being funneled into using it the way Facebook wants, not the way I want. For example, when I click “Friends” in the sidebar, I want to see my list of friends—the expected action based on the context—instead what does it show me? A way to add more friends, “expand Facebook’s empire,” what Facebook wants, not what I want. 1

30 Jun

A Conversation on Twitter About a Consumer Market for Fonts

  • Evan: There isn't a consumer market for fonts because there isn't a consumer need for fonts. Nor, really, should there be.
  • Roben: I agree, but why shouldn't there be? There's something interesting about the nature of fonts in there that I can't put my finger on. A consumer market for fonts would be people styling the content they publish online, on blogs, twitter, etc... It's an easy way to brand content, but people don't look to brand content this way, why not?
  • E: Most people don't "produce content." It's a minority hobby, and only a fraction of that minority cares enough to style with fonts. Only a fraction of that fraction think of "going pro." I think you're making mistakes about market size here.
  • R: Products like MacRabbits' CSSEdit and Tumult's Hype seem to have a similar market size, and they are cheap.
  • E: How much does a typical font cost?
  • R: $500-$1600
  • E: But even before I hear your response, I think the answer is sticky pricing and norms from the magazine and book era.
  • R: Which means it will change, and it kind of is changing with Typekit. But then a new problem arises: the value of a font for branding decreases the more people are using it. The situation reminds me of Stephenson's description in Snow Crash of "custom-made" vs. "off-the-shelf" avatars. Or with websites now, though with websites, people seem to prefer "custom and bad" over "off-the-shelf and good." That won't work with fonts.
  • E: All consumer goods after a certain quality level become positional.
  • R: Care to elaborate? I don't know what you mean by positional.
  • E: http://en.wikipedia.org/wiki/Positional_goods
  • R: Awesome, that'll keep me busy for awhile. Good conversation, I'm going to blog it.

29 Jun

27 Jun

24 Jun

I have this feeling, intuition, that software is about to explode. I don’t know what this means, except that I keep having this thought: why can’t software be more like music? People collect the music that they think represents themselves, that reinforces their identity. Perhaps I’m wrong, but this video is a great example of the evidence of change I keep seeing.

A late night talk show doing a bit about a software release? Has anything like that happened before ever? Something is happening.

22 Jun

18 Jun

iA Writer and Branding

Information Architects’ iA Writer for Mac release kicked up a lot of dust. Most of it’s well-tread territory, about text editors and writing, whether they can help, and whether having less features is a feature. I’m not going to talk about any of those things, and I don’t think any of those things are what make iA Writer an interesting app.

No, there’s something more going on here, and I’ve got a hunch about what it is. About what’s that extra special thing that makes it so interesting. What I think it is, is branding. In particular, how iA Writer encapsulates its maker’s brand in a way that’s never been done before.

Years ago, when I worked for KidRobot, Paul said something that stuck with me. We’d just opened the first brick-and-mortar store, and it had these beautiful, custom-made display cases that presented the large, ~$70 figures in their best possible light. When you entered the store, these expensive, full-size figures were clearly the stars of the show. But we sold far more of the ~$5 mini-figures, and those sales made up a much larger percentage of revenue. Paul described this phenomena: “People come in here, and they love the experience of seeing the large figures, and they want to buy something so that they can walkout with a little piece of that experience.”

Here’s some copy from Information Architects’ about page:

We focus on basic principles of interface design and digital typography. The beauty of our designs is in how they work.

Here’s the same message reflected on iA Writers’ website:

We asked the best type, screen and graphic designers in the industry to work with us on the design—so you don’t need to worry about it.

The design of iA Writer reflects the design of Information Architects’ website, that reflects the design philosophy that they write about on their blog. Information Architects’ aren’t just selling an app, they selling a way to participate with their brand. A way to “walkout with a little piece of” their company1.

This is different from the way most companies promote their apps. Most mimic Apple’s branding, posing an answer to the question: “how would Apple present this app?” Information Architects’ brand is unique and compelling in and of itself—and luckily doesn’t clash with Apple’s branding—and it’s iA’s brand that gives iA Writer its unique feel. It’s this strong representation of their brand, reinforced by their online presence, that makes such a compelling package.

None of this has anything to do with whether iA Writer is a great product. Of course it’s a great product. It’s a thoughtful and painstaking recreation of iA’s design philosophy in app form. I don’t think anyone would argue with that. That doesn’t mean criticizing it is meritless. But it does mean those criticisms have more to do with whether the reviewer considers the same things important as iA. And it means the question for the potential buyer, is whether they consider same things important. If they do, then it’s a great product for them.

The reason this is important to me is it’s a close approximation to what I’m trying to do with my app, my “company,” and this blog. The subtitle of this blog, “Diary of an App Junkie,” is a reflection of my affinity for writers like Burroughs, Hunter S. Thompson, and Bukowski. The boxes-as-horizontal-rule I use above are a riff on the section breaks from Gravity’s Rainbow. And it’s no coincidence that one my core design goals for Review was a way to collect and re-experience prose. What I am trying to do, with my presentation outside of the app, with the design of the app itself, is signal that this stuff is important to me. If these things are important to you too, then maybe you’ll like my app.

  1. One could argue that something as obvious as GQ’s app already does this. But I think this is different. GQ’s app is just a way to experience their already branded content. There is no new idea in branding there. iA Writer is branded by what the app is, by how it works, not just by containing already-branded content. It’s more similar to the way a designer dress can be branded, even without a label, just by having the earmarks of its designer. 1

16 Jun

Statement of Intent

Five years ago I briefly wrote a productivity blog at 1Percenter1. It enjoyed some initial success, and I promptly stopped writing. I hope this time will be different. But I know talk is cheap, and I promise nothing. But lets go back; the reason I’m starting this blog now is because of the reason I stopped writing then.

"Why am I doing this?" The question that unraveled my motivation the first time. I wasn’t interested in a blog-as-my-main-identity, like a Gruber or an (old) Merlin. I wish I could write for the sheer thrill of sharing, but I don’t have that kind of financial security. No, for me writing is slow and draining; it must result in income, somehow.

So I stopped writing. I dabbled. I experimented in other paths I needed to try. Then, triumphantly [sic], I returned to software2.

I started developing for Apple devices seriously about a year ago. I dropped my first project, but I finished my second. I now have an iPad app I’m selling: Review for iPad.

That’s why I’m trying again now. The app is the first step of my plan to make money blogging. I’m looking for a symbiotic relationship between three things I love doing: UI design, programming, and blogging. This piece by Brent Simmons was a big influence:

My theory is that everybody has, or should have, one main thing where they can submerge themselves: everything else needs to be simpler.

I’m hoping, somehow, to make these three things into one thing: making and selling an app. Now, if I write a blog post people like, maybe they’ll buy my app.

This is just a bookend. One goes on each side to hold up the stuff in between. It doesn’t look like a book, it’s a stand type of thing, not like the books in between. Maybe it’s shaped like a gargoyle or something. It’s just a bookend. The important stuff is in between. I promise nothing…

  1. That blog has since been obliterated, destroyed, incinerated. I had to, for a number of reason that can best be summed up by: I wasn’t ready. Detangling the good from the bad would have been too much work. But I’ve saved all the content, and I expect I’ll repost some of it as it become relevant to what I write here. 1

  2. I’ve been a UI designer for years, mainly for web apps. But I’ve always considered my larger identity to be “someone who knows and cares a lot about software. “UI Designer” is just the manifestation of that I use to make money. 2