There I was, opening a file in TextWrangler - which had just updated itself - when the window opOMG WHAT IS THAT IN MY WINDOW?!?
I must admit, I get choked up over buttons. Good buttons. Nice buttons. Helpful buttons. I'm not talking about the buttons on the shirt I'm wearing, nor the ones on my coat. I'm of course talking about virtual buttons: buttons on websites and in interfaces.
We're in the midst of redesigning our site at work, and the form standards (which are all-new) were gleaned from lots of research already out there. I did want to take a moment to talk about buttons, though, since I love them so.
Dry and Cold
Most buttons on most websites evoke no emotional response. "Submit" and "Submit Query" are the most common in part because they're the defaults for the submit input element. Lots of new folks are quick to leave these and just never come back to change them, and I think this is a grave mistake.
When someone clicks a button, that button should give evidence as to what it's going to do. Like on the page I'm typing this into right now has a big ol' Save button at the bottom, centered, and called out. That's great: it's an easy target, easy to read, and tells me exactly what it's going to do. Compare this with, say, this random form. "Send". True, but blah. And don't get me started on the "Clear" button. (Don't ever use them, ever. Ever. Ever.)
One fine example comes from Google Checkout. When you're at the very end of the checkout process, the final button, the one that does everything, the one that makes you give up money, is labeled: Place Your Order Now $779.99. Very nice: it tells you what it's going to do, and how much it's going to cost - a big relief to see, even though it's on the page multiple times.
We've taken that and adapted it for our e-commerce transactions. For instance when you're signing up for a class or event on our site, we've changed the old "Register Now" button to the dynamic Register Now - Charge My Card $30.00. For donations, Donate Now - Charge My Card $30.00. It tells you exactly what it's going to do and what will happen.
Obvious
One other issue with a lot of buttons is that they aren't called out very well. They tend to be the default Sleepytime Gray color. Color is important to use correctly, and can be used with buttons to make actions more obvious.
Again, using the Vox compose page as an example the giant Save button (as well as the less important "Edit Date" link) are in an area backed by a Web 2.0 gradient. That's good: it draws your eyes' attention there so you can say (interally), "Oh yeah, that's where I need to go."
We've run with that idea too. Our buttons are now our corporate color (purple), and are set against a lighter purple background color. The standards dictate that only one action button appears on each page under most circumstances (there are always exceptions!) This means that any other actionable thing is styled as a plain link - just like Vox's "Edit Date". It's there, it's still got some importance, but not as much as completing your transaction or continuing on in the process.
Default
The surprising thing in all this is that people have grown accustomed to the dry, robotic "Submit Request" and its friend "Submit". Thus, when we see a great example of an emotional button we might feel even more than we ordinarily would. Vox's Save doesn't move me as much as our Register Now - Charge My Card, but I'm jaded. The simple fact that the Save button is larger-than-average makes up for it a bit, and definitely points people in the right direction.
When we work with websites and computers, the dialog should mimic person-to-person interaction as much as possible. That means paying attention to the little details, right down to the cold "Submit Request". I encourage you to give your default buttons a second look, and think about what they really do. Then, restyle them. Pretty them up, make the text work, and give your visitors an experience.
Mr. Gruber linked to this season's iPod killers. Or, lack thereof.
I don't think the iPod is unstoppable or will be the dominant player forever. I do, however, agree with Gruber that this batch is pretty much a lost cause. I'll give you two big reasons why.
First is clutter. Outside of the Zune, nearly every player pictured on that page has a lot going on. Even the wee Sony, uh, tube player has the Sony logo and the Walkman logo taking up space. But some of these... remind me of the stickers that come on PCs. I mean, does an MP3 player with Bluetooth need a Bluetooth logo right on its fricking face? Do I need a button whose sole function is to repeat a track? Do I need an "X OK" button? (What the hell does that mean, anyway? Cancel and OK?)
Some may argue that these buttons are necessary due to the software UI. In that case, the UI is flawed. Pure and simple.
The Zune is a unique case here: it is almost too decluttered! That's a negative thing, because if you were to look at a Zune you'd have no idea what control does what. Okay, there's a back arrow button and a play/pause button. But how do I get a menu? How do I fast forward? I guess I need to try out that wheel and hope nothing bad happens. (And this may be small but when I rotate the Zune 90 degrees, the buttons don't rotate... so now I've got a down arrow and a sideways play/pause. Petty? I don't think so.) This button/control setup is in stark contrast to the Motley Crew of MP3 Players, with buttons for everything. Both approaches, frankly, stink - but the Zune's stinks for a different reason.
Another problem is these things are horribly named - again, outside of the Zune and the Disney Mix Max (that's actually a great name). But let's get real here. StormBlue A9+ Bluetooth. Sony NW-S706. OSIM iGoGo. Creative Zen V Plus. Maxfield MAX-SIN Touch. Coby PMP4230. Not a single one is compelling. I know Sony has a history of cryptic, oddball names but if you want the tube Walkman instead of the stick Walkman, will you remember the NW-S706 versus the NW-205F? Come on now.
Creative is another close but not quite one here: Creative Zen V Plus is all right, but "V"? Ambiguous. "Plus"? What's in the V that's not in the V Plus? Why am I getting less? Also, Creative Zen Neeon 2. Neeon?
Zune is, in my limited opinion, not compelling. But I give Microsoft some credit here: they obviously looked at the design of the unit and shot for the iPod.
It's unfortunate for people who dislike the iPod - for whatever reason - that the other players out there are frustrating, confusing, and ultimately alienating. They are technology for the sake of technology and that, my friends, almost never wins.
Time Machine looks nice but the Star Trek background is just crazy geeky. I was wondering what UI conventions were in place when this was designed - I mean, it entirely throws the UI out the window. That's fubar. ("Press the Cancel button and launch yourself into... hyperspaaaaaace!") C'mon, where's the "Pro" mode once I start getting tired of those animations? And thanks for getting rid of the dock and menu bar. Sheesh. WTF.
To-do lists in Mail are killer. I already mail myself to-dos at home and at work (usually from one to the other), so a smart client would be nice. (Although, I do have a rule set up in lowly Outlook for them, and it works fine.) It's only a matter of time before there's a bridge between Apple's to-do, Apple iCal, and Basecamp/Backpack. I was annoyed, however, that Mail's lame-ass toolbar icons weren't changed. They're an anamoly. Get rid of them, please.
Finally, I think the iChat upgrade is a very, very wise - but quiet - play for businesses. Yes, you can do video backgrounds and photo backgrounds. (I IMmed Dave that it would be smart to record footage of one's office, and then give everyone the impression that one was always working.) The iPhoto slideshows with video are very slick, great for family, but the Keynote presentations and even the iPhoto shows are awesome for business. If I work remotely and need to show a bunch of slides, for instance, I don't have to do a WebEx or LiveMeeting or any crap like that. That is nice. That's very nice!
And being able to share desktops over iChat is a total play for business. I can't tell you how many times I've done that with Windows, and I can't tell you how many times it's pissed me off. If it's pulled off elegantly - now only a 50/50 shot with Apple given Time Machine - it's going to be a godsend. I mean, if my mother-in-law is having problems with her Mac mini, I can just ask her to let me see the desktop. That's how it should be on any operating system.
All in all, the announcements yesterday were solid but not out-of-the-park, and that's okay. The Mac Pro looks great of course, and the base configuration finally has an acceptable amount of memory (1GB!)... but I'm still hoping for an updated Finder. Aren't we all?
On Friday I attended:
Building Better HTML Emails
Easily the most info-packed session I attended, the focus here wasn't what I thought it would be ("Everyone hates them, don't do it"). Instead Mark covered the topic from marketing and usability angles, ultimately making me feel good about HTML emails. He also outlined the CAN-SPAM Act, whose details I never knew.
Mark spent a solid half of his presentation going over the nuts and bolts for major mail clients, though. For instance, I learned that Yahoo! Mail actually changes your HTML tags - body becomes xbody - and in general, ensuring a consistent message is difficult. It's more difficult to test things. Also, Eudora on the Mac (hello, 7 people who use it) is apparently the worst.
He also stressed the idea of "styling" plain text emails - don't treat those folks like second class citizens.
Mark noted that designers should target the "CSS on, images off" state of mail clients. Make your stuff look good without images, in other words - good advice for emails and the web.
About Interface: Designing for Lifestyle
Definitely not what I expected. This was on the mobile track, though, so the focus was on mobile devices. The big takeway here was to consider the emotional experience in the interface. An interface must be usable, yes, but it should be emotional, useful, meet your needs, and integrate into your life. This was also the 284th speech that referenced how good iPod/iTunes are.
Unleashing CSS: How I Stopped Worrying and Learned to Love WinIE7
The only disappointing session, I left this after 20 minutes. Christopher didn't have his A-game when it came to speaking and had some technical issues (mostly with Virtual PC on the Mac.) I expected a really nice, humor-filled (given the title) look at migrating from supporting IE5/6 to IE7. Instead I got the info I wanted and a lengthy howto on making transparent PNGs work in IE5/6. Sorry, I don't care.
Here's the good info from the speech, though:
That's really all you need to know.
The Naked Interface
Fascinating keynote from Luke Williams of frog design. Came in about 15 minutes or so late, but picked up some great conceptual notions here. Work with what your users/visitors/peeps know from growing up. For instance, if there's a wine bottle and somehow the entire bottle slices at a 45 degree angle with no liquid spilling, a clean break, etc. - that strikes the brain as weird and nonsensical and can't be trusted.
Social Metadata
Mildly interesting session. Takeaway: use the wisdom of crowds to solve IA problems. Work with tools such as moderation to suss out who is "good" and who is "bad" in your community.
Dawning of the Age of Experience
Great, great, great, great. Great. Jared Spool rocked with this keynote, mostly focusing on (duh) experience and what it encompasses. As "experience designers" one has to have a ton of talents from many disciplines, and that's hard.
Technical issues can affect one's experience. One example was his using an airline site to book a flight, and the site referenced totally incorrect airports. This made him stumble. In this case, it was a database issue that was fouling things up - so pay attention to the low-level stuff.
It would be great to mimic the buzz/evangelism around iPod (surprise!) and Netflix. Netflix basically bested Blockbuster and Wal-Mart at a new game, and the latter two never recovered. Netflix did it with a small team and no phone/in-person customer service and obviously no stores. Harnessing that kind of speed/agility and coupling it with great service worked well for them.
Ultimately we need to go beyond just designing interfaces and think about the entire experience, top to bottom. That touches so many departments... but if it's executed well, we'll have customers who are evangelists, too.
Epilogue
These have been brief synopses from my notes and lack of notes, from the conference. Expect some deeper posts on these topics starting next week or so.