New ideas have the same effect on me as heroin does to an addict.  The initial spike is euphoric, but the comedown is downright debilitating.  As the effects wear off and the harsh realities of actually executing and iterating kick in, I move on to the next idea to get my fix.

Unless I radically change my habits, 2012 will produce another collection of corpses to throw in the idea cemetery.  I really don’t want that to happen.  I can’t let that happen.  I turn 30 in four months which, to me, is really fucking scary.  I read stuff like “it’s rare that you see an artist in his 30s or 40s able to really contribute something amazing” from Steve Jobs, and it has the uncomfortable effect of simultaneously depressing me and jolting me with a sense of panic.  I’m turning 30 and I’ve produced no amazing art.  Shit.

I’ve read that people overestimate what they can achieve in a year, and underestimate what they can achieve in a decade.  Maybe I need to internalize that better so that next year I’m not in a constant despair/panic cycle, while channeling that manic urgency into a laser beam instead of a wank into the wind.  Instead of thinking “what will I achieve when I’m 30?” maybe I should be thinking, “what will I achieve in my 30s?”  Maybe.  But that won’t help me today.

Today I need to get serious.  No, drastic.  Like a heroin addict going to rehab.  This is my intervention. No more new ideas, no more domain names, no more client work, no more hypotheticals, no more I’ll do it tomorrow, no more wasted time.  ”By the way, what have you ever done that’s so great?”  I’ll have to get back to you.

The Gutenberg Diagram is a concept popularized by newspaper designer Edmund C. Arnold in which a display divided into four equal areas can help designers ensure that they are taking full advantage of a user’s reading gravity, the natural path that most peoples’ eyes will follow when being presented with information.  In Western cultures we are conditioned from a young age to read content starting at the top left corner, scanning right and then left again, until getting to the bottom right corner.

UX Movement posted about how web designers can use the Gutenberg Diagram to improve homepage conversions by optimizing the placement of certain elements to conform to this concept.  Positioning the primary call to action in the terminal area, for example, should help boost your CTR since this is where most users’ eyes will end up.

I’ve put together a semitransparent Gutenberg PSD layer to use with your homepage and landing page designs.  Simply drop in your design behind it in Photoshop and see how closely it follows the pattern.  You can download the PSD here.

Examples:

 

I’ve always loved this shirt.  Not only the fit, but the fact that it signals something about who I am and what I do.  Your t-shirt is a statement of identity, preference and taste, just like the car you drive.  It says something about you before you say a word.  In the case of my shirt, it tells other drummers that I play the drums.  To most everyone else, it’s simply an interesting design.  In Boulder Colorado, a stranger approached me on Pearl Street to ask what the “Arabic” writing on my shirt said (Zildjian is actually Armenian for “son of cymbal maker”, but the trademark stamp design is in Ottoman Turkish).

Other drummers will often notice the logo and nod with an insider’s smile.  A few weeks ago I wore it to the gym and got the official nod from another guy there.  20 minutes later he approached me and asked, “Do you play?”  I said yes, and he continued, “I’m sponsored by Zildjian, and DW too.”  To a drummer, this is the equivalent of meeting a racecar driver sponsored by Red Bull and Ferrari.  Instrument manufacturers don’t just hand out sponsorships to anybody; they’re reserved for a rarified strata of musicians.

Now I was studying his face closely, but drawing a blank.  After apologizing that I didn’t recognize him, he introduced himself as Roy McCurdy.  Jazz drummers like Roy are generally regarded as being among the most technically skilled.  Indeed, many of the most insanely awesome rock and metal drummers mastered jazz before becoming famous for other genres.  Jimmy Chamberlin of Smashing Pumpkins and Danny Carey of Tool are good examples.  Jazz drumming is hard, and requires a ton of discipline.  The fact that Roy built an entire career out of drumming alone is impressive, but even more so that he did it in the jazz world (it turns out he’s also a professor of Jazz studies at USC).

After chatting some more, I was able to get myself into private lessons with Roy.  All thanks to my ratty Zildjian shirt.  Living in L.A. of course greatly increased the odds of such an encounter; musicians, artists and Hollywood folks are plentiful here.  Up in the San Francisco Bay Area, imagine the cool people you might strike up a conversation with when you wear your 2006 RubyConf shirt, or your Bump schwag shirt.  The more “insider” the shirt, the better.  One chance encounter on a BART or Caltrain ride in your ratty shirt could lead to an interesting new path in your life.

My HN karma hit the 666 mark and seems to be stuck there.  Is it a sign?  Doubtful.  But still.  Creepy.

Rule #2: We don’t talk yet about why not.  There will be plenty of time for realities later, so we don’t want them to get in the way of the good ideas now.

Rule #3: Nothing should stifle the flow of ideas.  No buts or can’ts or other “stopping” words.  We want to hear words such as “and”, “or”, and “what if?”

Rule #4: There is no such thing as a bad idea. (We take that one very seriously.)

Excerpted from The Imagineering Field Guide to Disneyland.

A Pre-Launch Page is a way for you to build some interest with your target audience while you slave away in the shadows building your awesome new project.  It also allows you to build an email list of interested potential users, which could absolutely be your most precious asset in the beginning.  There are several paid services that help you do this and more (LaunchRock, Prefinery, KickOffLabs), but in the spirit of staying truly lean I’m going to show you how to roll your own Launching Soon page for free.  This page will:

•  Establish an initial presence
•  Provide teaser information about what you’re working on
•  Capture visitor emails and build a list
•  Encourage social sharing

Live Demo Download the Files

This should take you about 30-60 minutes to complete.

You’ll need to set up free accounts with Campaign Monitor and AddThis.  I also assume that you have a hosting account and a domain name already pointed at it.

Ready?  Okay let’s do this.

Step 1:  Set up Campaign Monitor

After signing up for your free Campaign Monitor account and logging in, you’ll see the dashboard.  Click the link (the business name you signed up with) in the “Clients you’re sending for” sidebar.

addthis:url="http://yourdomain.com"

<div>
<a addthis:url="http://bigasswallet.com" fb:like:layout="button_count"></a>
<a addthis:url="http://bigasswallet.com"></a>
<a addthis:url="http://bigasswallet.com"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e41a714137a9117"></script>

Purple Monkey Dishwasher

This kind of obvious “Dont Make Me Think” usability fail should have been caught quickly with some basic heuristic testing. It’s amazing that nobody on-staff at the NHM noticed this or cared enough to get it fixed in what is likely the most important conversion funnel on the entire site. Wow.

I spy with my little eye...

Once you are finally able to locate the Options menu, you’re presented with a cluttered, confusing collection of items:

Now where's th--OH LOOK! THEMES!!!

(By the way, these themes are just sad.  Not only do they suck on a creative level, they destroy basic usability.  Take a look at the horrifying space robots theme.  It completely obscures your profile and the Sign Out link with clip art diarrhea.)

Camouflaging key links with crappy UFO clip art is generally a bad idea

Anyways, you’re back to trying to set up an Out of Office reply.  Why not just call it that?  I don’t know, but Microsoft chooses to call it “Set Automatic Replies”.  That could be it, but you still have to think about it for a second, which again depletes your user happiness reservoir by several percent.  You click and land on this travesty of a page:

Where's Waldo?

Scanning the first sentence, you can see that this is in fact where you can set up an Out of Office reply, but now you really have to parse the details to figure out how the hell to work this thing.  A separate radio button and checkbox for sending automatic replies and specifying only specific times is Microsoft’s solution to accommodating two user types:  Folks who want to always send automatic replies (or who don’t know when they’ll return), and folks who wants to send  automatic replies only between two fixed dates and times.  The first user type is probably a minority of people using auto-reply; the vast majority using this feature know when they’ll be gone and for how long.  Aside from maybe celebrities and politicians who get tons of email every day, it’s unlikely too many users want to blanket auto-reply everyone who sends them a message.  Microsoft seems to have thought of that by nesting the “Send replies only during this time period” checkbox and settings under the “Send automatic replies” radio button, but it still takes an unnecessary cognitive toll on the user.

Once you’re able to get through that step, you get to actually type the message that people will get during your time away.  How many people are compelled to dress this up by customizing the font, font size, style, alignment, color, indentations, highlighting and footnotes?  Probably very few.  And those who are should go take a valium pill immediately and chill out.  A rich text editor has no place here.  Remove it and immediately reduce the visual noise by 10%.

Now you’ve typed your message, are about to look for the “Save” button but notice another checkbox lurking at the edge of the pointless iFrame container.  ”Oh, I can set up a separate one for people who send me email while I’m gone, but who don’t work at Initech.”  And look, you can even customize this message differently than your other auto-reply message!  Purple 30pt Comic Sans, here we come!

Don't forget about "The Others"...

Yet again, you are blasted with settings overload.  This time it’s a checkbox with two nested radio buttons.  Reversies!  After you’ve muddled through those options, the time comes to actually save this damn thing and get on with your life.  Wait, where’s the Save button?

Awww...there's the little guy!

Uhhh, uhhh, OH!  There it is!  Microsoft must have been reading up on game mechanics and decided to make a challenge out of actually saving your auto-reply.  Find the save button, get 5 points!  Well, the save button isn’t really a button.  It’s a tiny blue link in the lower right corner with a checkbox next to it.  Why?  Well a big button with the word “SAVE” on it, positioned in a place the user might expect it to be, would just be too easy wouldn’t it?  If you want that vacation, Microsoft will make sure you earn it by winning a game of hide-and-seek first!

How I would fix it

Now one thing I can’t stand is people who present problems without any sort of solution.  Since I’ve never been a huge fan of self-loathing, I took the liberty of creating a much more usable and simply cleaner UI for this feature.  Anyone in Redmond is welcome to it.  The first screen shows my proposed design in an “active” state, after the user has selected a time and date range and saved their messages:

Ah, much better. I can breathe now!

Just by stripping out unnecessary visual noise such as the rich editor toolbars, I’ve made the UI appear instantly easier to use.  Instructions are generally thrown in as compensation for bad design, so I stripped them all out.  Good User Interfaces strive to be as self-evident as possible.  The state of the feature (on or off) is now immediately clear , being indicated directly in the feature name (Out of Office Reply is on).  The Start and End dates and times have been repositioned into a much more logical layout, with the labels being color-coded red and green to provide better visual cues.  Gone are the confusing radio buttons.  If you’re among the minority who want to send auto-replies in perpetuity or until some undefined date in the future, you can simply check the “No End Date” box (see next screenshot).  If you want to send an auto-reply to people outside your company, you can simply add a separate message, no radio buttons or checkbox options to decipher.  There’s a warm and fuzzy feeling only opinionated software can provide.  And last but not least, I’ve added a big ass “Save Now” button, right smack in the middle where you can’t miss it.

Here’s how it would look for those folks who love Out of Office auto-replies so much they never want to stop:

No end in sight!

I can hear you saying, “But Sean, what about auto-replies set for the future?  How would you communicate that?”  Great question, thanks for asking.  Since we’re indicating the state at the top of the page as being “on” or “off”, we have to clearly message the user about auto-replies scheduled for a date and time range in the future.  Here’s how I handled that:

Back to the future

Since auto-replies aren’t currently running, the feature is “off”, but users can see their scheduled start date and time called out next to the status.

Conclusion

Good User Interface design isn’t always (or even usually) sexy.  It’s almost like acting.  You don’t always appreciate a good actor until you suffer through a performance by a really bad one.  Lucky for us, it’s probably easier and cheaper to implement a better UI than it is to improve bad acting skills.  So come on, Microsoft.  Give us more Johnny Depp and less Keanu Reeves.