Love, Software, and Squeals of Delight

March 23rd, 2009 by comment sarah g

Dock

Software does more than crunch your numbers or take your picture: it can make you angry or bring you joy. And those are the things that we, as developers, have to tune in to if we want to make our products stand out.

Skitch is one of a handful of products I’ve used recently that remind me what makes a product successful. Utility is important, of course, but the love and emotional connection it engenders in its users is where it’s going to live or die.

Let’s start backwards, with the logo, since it’s the first thing you see. Their logo says nothing about their product’s functionality. There’s no initial, no recognizable signifier (thanks for sparing us the paintbrush), or even an abstract swoop. It’s, um, a heart.

And not just any heart, but a hot-pink, shimmering, pumping, overflowing, disco heart.

They’re not saying, “You might like us”. Or even, “As you can see by the ‘S‘, we’re Skitch”. They’re saying, “This is LOVE, baby!”. You and me!!! (How they’re managing to do that without coming across like Mr. Roper, though, is a mystery that is beyond the scope of this post.)

Now, this Love they offer, it’s not too intense. It’s not Valentines Day Red. It’s not a pushy “when are you going to commit” heart, a dreaded “we have to talk” heart, or even an “I’m complicated, but deep” kind of heart. Just hey, hearts, baby, I’m an extrovert, let’s groove on the dance floor and take some snaps!!!

I focus on this because right there in their identity they align themselves not with Software, but with Love and Play — a great gap to bridge. If the product sucked, it would be one thing. But it doesn’t. It makes bold choices and executes them well. They’re going for the whole tamale, not hiding behind industry-speak, and not afraid of a little heart and soul.

So, they have a lot to live up to. Moving beyond the logo, what does Skitch do that works and how can we learn from that?

It’s makes it easy to get started.
I haven’t taken the time to figure out all the features — in fact, I was too ADD to even watch the whole 3 minute video. But I didn’t need to. The critical 2 or 3 features are easy enough to get right away. Once someone commits, they’ll go deeper, but don’t make them wait, fiddle, or read a manual first. Make your learning curve the equivalent of 140 characters or less.

It does the things you’d want it to do.
This may sound simple, but it’s worth repeating. I wanted to take screenshots, write on them in fun fonts with arrows, then upload them to the web. Bingo. No matter how fun an imagined feature is, the trick is matching it to the intuitive use of your product. If people wouldn’t naturally want to do that thing, drop it. It doesn’t matter how slick it is.

It cuts out the middle steps.
In Skitch, you don’t have to select layers, like in Photoshop, to move items that are separate, such as text and arrows. You don’t have to explicitly save the picture on your desktop and then FTP it to the web — the app does it for you in one click. The designers have figured out your starting and ending points, then cut out all the excess steps in between. Spend time here, trimming the middle.

It makes it fun.
It understands that an application is not just about utility: you’re not just tediously trying to upload a picture to a website or share it with a friend — you’re having a moment in your life. Make that moment simple, and when you achieve that, make it fun.

It makes common actions unexpectedly pleasurable to use.
There are tons of patterns we use all the time when interacting with web and desktop applications. For instance, copy and paste. Copy and paste is great and I love doing it, but the folks at Skitch saved me a couple keystrokes by giving me a fun copy button on the image detail page. It wasn’t necessary per se, but it genuinely improved my user experience. So, don’t try to think about new things you could add: find out what the most integral interactions with your product are. Improve those.

Squeals of Delight
That’s what I did when I first used that copy button. That’s what I did when I clicked “webpost”, heard a whoosh, and saw that my screenshot was now on my very own Skitch web page. Go for the squeals: it means, this feels JUST RIGHT. If someone is squealing with delight (for Love or Software!) they are going to come back.

It’s not all paradise and apples of course.

There are confusing and frustrating interactions, just like in any product. These stand out more, ironically, because they raised the bar so high. So Skitchers, as you move forward, solve these problems for me :)

1. How do I get back to my home skitch page from a specific image page? You don’t really mean for me to click on the back button or delete the rest of the URL in the address bar after furrowing my brow looking for the obvious home link, do you?

2. Uploading. From my Skitch app window, I can’t click “webpost” right away because it first shows me “share”. Only after clicking on the “share” is “webpost” exposed. Since clicking “share” triggers a browser window populated with the Share link that steals focus, I have to tab back to Skitch to webpost. Annoying.

Overall, It was great to look at Skitch because it’s so well done. I think it’s worth taking a product apart to see why it works and how we can use those lessons in our own applications.

And finally, Full Disclosure: I have nothing to do with Skitch.

I just heart them.

ˆ Back to top

Don’t go splurging at the widget store

February 15th, 2009 by comment sarah g

It is easy for clients, I have noticed, to mistakenly conflate adding widgets, effects and acronyms — Sliders, Sorters, Expanding-Menus, Oh My! — with implementing an idea. The client talks excitedly, rattling off a Rube Goldberg chain of widget-to-widget interactions, their voices rising, the importance of each and every widget in the chain perceived critical to the achievement of the Internet Holy Grail: Angel Investment. Or at least, a really slick site.

Don’t get me wrong. I think everyone is in favor of a well-placed widget.

They can be so smooth and beautiful that you gasp. They can glow yellow for just the correct duration before fading to white (”where has that beautiful apparition gone?”, you wonder, before drunkenly clicking again. And again. And again.). They can add an item to a list almost magically: never was it so fun to have so many things To Do. They can save you clicks, keep you in one place, slide items into carts with almost illicit ease.

In short, they can make things so simple that a tear comes to your eye, and you rush off, hat in hand, in the quest of The Holy Spinner to deliver your payload.

The Holy Spinner

But stop.

What are you looking for? Forget the elevator pitch, as it can be intoxicating: the sound of your voice, people nodding enthusiastically, the doors shut blocking their escape (especially if you are stuck between floors). Instead, do the quiet room test. You alone. Your idea. Naked. A convergence of souls.

“What do you need, Idea”, you ask, “in order to fully manifest your glorious Idea-ness?”

If your idea is quiet, do not rush to speak for it. If your idea speaks but is simple, do not scoff. Do not dress your idea up in Widget Drag, so it looks like a teenager searching for their identity at the Web 2.0 Store. If your idea does not need a Yellow Fade or slider, that is OK. If you remove the slider and yellow fade and find there is no idea underneath, that’s OK, too. Go for a walk. Another idea will come.

Think about building a UI like listening to the ones that you love. You observe them. You listen to their likes and dislikes so your gifts will please them, not reflect your tastes. It’s not about the shiny present: it’s about the connection, the need anticipated and met, a little bit of the edge taken off. Brush cleared, the path made simpler.

If you’re tempted to drive up to your date in the red corvette of ideas — or wow your user with the accordian navigation ’cause it like, opens and closes! — remember that you might be saying more about yourself than anything else.

And then ask yourself: Do you need that rainbow-colored slider on your site?

ˆ Back to top