I broke my own rule. For awhile.

design | Thursday, February 4th, 2010

A picture of a book
I was breaking my own rule for awhile on this blog.

Every website should explain what it is, right off the bat.

I’ve added a new “Welcome” blurb to the right to amend this oversight.

It is easy to forget this rule, since this information is so obvious to the designer. But it is crucial: if a new visitor doesn’t know what a site is for, and can’t find out quickly, they’ll often just leave.

[image credit]

In Defense of the Man Purse

digression | Thursday, February 4th, 2010

The man purse. The murse. This oft-reviled accessory should, judging by its function, enjoy ubiquity among the possession-conveying public. Incomprehensibly, it is a taboo of sorts. Well, it’s 2010. This year, nothing is sacred. Not even society’s most enduring conventions.

What defines a man purse, anyway? One would think that it would be a purse worn by a man, but oftentimes the stately messenger bag, when perceived to be sufficiently emasculating in style or stature, is considered a man purse as well. This broader category may be the intent of the term “man bag” but I will use the terms interchangeably here. We’re all in this together.

To be entirely clear, here is a picture of myself with my second-favorite manpurse.

A boy and his bag.

A Man

Look at this stately man. Note the splendor. Why, surely nothing is amiss here.

Yet still the eyes of many see the above as analogous to what follows:

Girl Man with Girl Man Purse

Slightly misleading

That’s right. Small bags are for ladies.

Forget it. The sexes are equal now. Men can wear little bags, and women can wear cowboy hats.

A woman with a cowboy hat.

Social progress

Let’s say you appreciate that attire does not define your sexuality. Kudos! But you’re still not convinced of the man purse’s practicality. Let me show you what I have in my bag today.

The surprise inside

Items

Glasses, sunglasses, headphones, book, pen. Sometimes there will be a hat and gloves, outgoing mail, and other such sundries. This is the very image of convenience and efficiency. A backpack, briefcase, or messenger bag would be excessive. The additional bulk would be an uncomfortable addition. On the other hand, simply stuffing the pockets of a coat would be insufficient and, I dare say, unsightly.

Further, there are altruistic reasons to sport the man purse. On a public subway, for example, space is at a premium. As you stuff your body and possessions into a crowded train, behind you there may be a human being whose truancy could have resulted from your selfish use of a bulky bag.

A backpack

Not a human being

I trust this convinces any but the most bigoted of naysayers. And to those who need no converting: Right on. But still, while it might feel like the world is your oyster, every time you take a swig of water from the bottle in your bag you must remember those who sacrificed their dignity to earn you that privilege. They are mankind’s greatest heroes.

OOo Landing Page

design | Wednesday, December 23rd, 2009

I just stopped by OpenOffice.org to download their fine software. I hadn’t seen their site for awhile, and while the current design is pretty nice, they made one tragic error that I can’t help but point out. Here is the current design:

Everything you’d come to the site for, laid with convenient icons. However, for some reason, each of the main links in the body of the page is an entire sentence. If I’m looking for the download link, I just need to see “Download”. The sentences add nothing, but they do make it harder to scan the page, since they distract from the key terms. Further, each line already has an explanation beneath it, if you’re really not sure what the links do. I would have done it more like this:

Much better. If you came here to get help, visually scanning the page will reveal the “Help” link instantly, instead of a couple seconds later. In web design, seconds matter.

The Text Editor Question

programming | Tuesday, December 8th, 2009

800px-Linotype_CRTronic_360Back in college, I had a professor pose an interesting question on an exam. It was worded like this:

“On the back of this paper, write out every keystroke and mouseclick you would take to add five spaces at the beginning of the first 10 lines of a file in a text editor.”

Naturally, some people protested. But he insisted that the literal meaning of the question was to be carried out.

Some students assumed it was a trick question that they didn’t understand, and wrote nothing. Some students write out the entirety of what was necessary to do this in Notepad:

space, space, space, space, space, down, home, space, space, space, space, space, down, home,space, space, space, space, space, down, home,space, space, space, space, space, down, home,space, space, space, space, space, down, home,space, space, space, space, space, down, home,space, space, space, space, space, down, home,space, space, space, space, space, down, home,space, space, space, space, space, down, home,space, space, space, space, space

At the time, I had been learning Vim at the professor’s advice. So, feeling very clever, I wrote this on the back of my paper:

:1,10s/^/     /

In a few days, when the exam was returned, students noticed that the this question had not been graded. The professor answered them:

“Your reward for getting it right is not having to write out an entire page of text to do something trivially simple. If you haven’t followed my advice and learned a good text editor, you waste this much time a hundred times over every time you write a program.”

Invaluable advice for any programmer. Use good tools, and get really good at using them.

[Image Credit]

Previews in Music Stores

design | Friday, December 4th, 2009

trackitdown playerSong previews in music stores have always fascinated me. I remember when I first downloaded iTunes I wondered: how is the location of the preview in the song selected? Why 30 seconds? Most importantly, why can’t the previews be better?

Thankfully, a lot of music sites I use are better, and are only improving. Trackitdown recently upgraded their player (shown to the left) so you can play the entire song. Strangely, the song stops automatically after the normal preview length of a couple minutes. If you seek to a different part of the song, the preview window shortens to 30 seconds. But if you patiently click where you left off each time it stops, you can hear the whole song.

I don’t think this is poor interface design. I think this is the result of compromise. Stores want to offer as much preview as they can (because consumers want it) but content providers (musicians, music labels, etc.) are afraid of giving away too much for free. Many iterations of “Well, what if we did this?” met with “Well… only if you limit it this way” must have led to the behaviors consumers are now familiar with.

The good news is that the music stores are making progress. Song previews have been gradually getting longer, higher quality, and more interactive with time. The Trackitdown player is a good example. Here are a couple other ones.

beatport player

Above is the Beatport player. The best (relatively recent) feature of this player is the queue on the right. As with Trackitdown, everywhere in the store where a song is shown, you can either play it immediately or add it to the preview queue. It is a great experience to shop by building up a queue, then sitting back and listening to long, high quality previews while doing something else for awhile, opening up Beatport when you like the current song. All previews are a couple minutes long, but the quality varies: I wonder if different content providers have different preview fidelity restrictions.

soundcloud player

This one is the Soundcloud player. This site isn’t really a store: it lets people pay to have high quality hosting for music in order to promote it. This site demonstrates the waveform display that is showing up in many music stores. At first it might just seem like eye-candy, but waveforms have been in DJ tools for a long time because they’re genuinely useful. If you’re previewing a song, and it breaks down to a quiet bit, you may just want to visually identify the busy part get to the point. It’s a great way to quickly triage songs if you don’t want to listen to full 2 minute previews for everything.

I expect full-song previews to show up someday, with sound quality being the only incentive to pay up. This works well for selling stock images: some sites use watermarks, but others simply provide a lower-resolution version of the image as the preview. Let’s hope the current trend continues at least: the more I know about a song, the more likely I am to feel confident enough to pay for it.

Brews and Such

the web | Tuesday, December 1st, 2009

Here is a new personal project of mine.

Brews and Such

It is still in the works, but I’ve been posting to it as I work on it. It uses a couple interesting WordPress plugins to do the detailed classification: specifically, the fields and tag clouds for flavors, breweries, and beer styles.

The design is not mine, but my policy is to get the site running before spending a lot of time on that part. It’ll be a great site to do a design for when I want some new portfolio material.

October Link Dump

link dump | Wednesday, October 28th, 2009

Concept Artninite

Christian Hecker. Glorious sci-fi and landscapes at wallpaper-worthy resolutions.

Mike McCain. More spaceships? Yes.

Guild Wars 2. I’ve loved their box art since the first one.

Useful Apps

Ninite lets you check off the apps you want to make one custom installer for everything you need on a new computer.

Support Details. Much easier than explaining to grandma how to check her screen resolution.

Web Design Resources

Visual Event. The fact that this is a bookmarklet rather than a plug-in makes it that much cooler.

Optimize your site for the iPhone. Not rushing to do this on this site with the number of iPhone visits I get, though.

Vintage Fonts. Can never get enough fonts, right?

dustFun

Top 50 iPhone games from Edge. It is still hard to find good iPhone game recommendations, so this compilation was timely and well done.

Secret Menus. Everyone knows about the In-N-Out Burger secret menu, but there are some other delicious possibilities out there.

Red Dust. Hard to believe these are actual photographs of a dust storm.

Interesting

Businesses that sound appealing to get into but are overrated. Traffic-driven web sites is an important one to note.

Irrational fears even rational people have. It is great that Cracked can be as insightful as they are hilarious.

Design in the Wild

Tortured Orchard. “A spirited rebellion of flavors.” Someone in marketing figured out that off-center web designers really like to marinade things.

The Party Pitcher. Come on, that’s what it’s for.

Strange

Smell like Neil Gaiman, or Cthulu, or something.

Mustaches, drum solos, and rights of passage.

Regarding Block Style

programming | Friday, September 18th, 2009

374961356_4ea13e95e1I went to a great talk by Douglas Crockford today. If you’re a JavaScript programmer and haven’t read any of his articles, head over to his site and get started. It’s more important than reading this blog.  Seriously.

Alright. I want to show an example he used that doesn’t seem to be included in any of his articles online. This may not be exactly the same, but is close to how I remember it.

Everyone argues about where to put the starting curly-brace of a block.  Usually they don’t have any substantial cause to pick one over the other, but everyone agrees one technique should be used consistently in a given program.  There is a reason to choose one style over the other in JavaScript. Check out this example:

function test1() {
    return {
        foo: "bar"
    };
}

function test2()
{
    return
    {
        foo: "bar"
    };
}

alert(test1() === undefined); // false
alert(test2() === undefined); // true

These two functions appear to only differ in their formatting. Surprised by these results?

The first function does exactly what it looks like it should. In the second, 4 different language design problems cause the program to do something unexpected while providing no errors.

  1. Semi-colon insertion causes the return to be a return;
  2. A line that starts with { starts a block. There is no block-level scope, so in this case the block does nothing. This “feature” is only there because C has it.
  3. The foo: looks like part of an object literal, but we’re in a block, not an object literal. This should be an error, right? No, it’s a label. Even though we’re not in code where a label could do anything, such as a for loop.
  4. The rest of the line after the label is the value “bar”. A value by itself counts as a statement, even though it doesn’t do anything.

Wow. That function does something wildly different than what it appears to do. The point Crockford was making here was that in JavaScript, unlike in most languages, preferring the first type of curly-brace placement helps you avoid mistakes like this one.

He also mentioned that JSLint,  his free JavaScript code quality tool, is able to pick up on this kind of mistake. Try running my example through it!

[Image Credit]

August Link Dump

link dump | Monday, August 31st, 2009

Chrome ShoesFinally it’s super easy to make your own card and board games.  Someone must have realized how many times people have gotten all excited to make a game, then had all their energy go to waste when they realized how hard it is to get such a game published.

I’m really picky about sneakers.  These make a bold statement without being goofy, which is hard to find.

I’ve gotten the feeling that The Sims 3 is only fun when you don’t play it the way it was meant to be played.  If the hilarity issued by this article is any indication, I may be right.

A couple more stock sites that don’t make me want to cry.

It’s hard to find an API that you can get excited about.  Mixpanel (a web analytics service) actually sounds like it’d be enjoyable to integrate.

Shockingly reasonable advice.  Though people seem to disagree on a lot of these, the emphasis here is on emerging norms.

Coda LogoMy current favorite web programming editor.

I love dark web design.  Here is an article that talks about how to do it well.

Nambu is my desktop Twitter client de jour.

This timeline of evolution on Earth, starting at the beginning, is fascinating.

A wonderful tool for designers that determines the font used in an uploaded image.

Exceptional Exceptions

programming | Thursday, August 27th, 2009

wtf coffeeI’ve heard a lot of mantras regarding how to handle exceptions properly in programming languages that support checked exceptions (eg Java).  Sometimes these mantras are regarded a little too highly, even doing harm in some situations.  I’d like to dissect a couple of these.

Never Sometimes catch the top-level “Exception” class.

There are times when it is definitely appropriate.  Imagine some controller code in a web application.  An underlying system has produced an unexpected exception.  Controller code can’t do anything to fix it, but allowing the exception to continue up the call stack would cause a 500 error.  Catching any thrown exception can allow the Controller to do something better, like output a message to the user notifying them of the error and making a suggestion on what to do next.

In short, catch the top-level Exception class if you know for sure that every thrown exception will be handled more poorly by your caller than you can handle it, and you can’t improve the caller’s behavior.

Always When appropriate catch the most  specific exceptions thrown.

Catching the most specific exceptions thrown is meant to create error handling specific to the problem that was raised.  For example, a “DatabaseConnectionLost” exception would be caught, and in the catch block the connection would be repaired.  It seems reasonable to always want to do this, but in practice, some exceptions are thrown in cases where you can’t do anything about it.  Lets say a method throws “DatabaseConnectionLost” and “DatabaseQueryInvalid”, both of which are children of “DatabaseException.”  In a situation where the calling code can’t repair the connection or fix the query, catching the parent is appropriate, rather than handling each specific case without anything specific to do.  If the code can do something like email the DBA, catching DatabaseException seems useful.

In short, you should always catch the most specific exceptions that you can actually do something about.

Never leave a catch block empty (if you can help it)

This is actually one of those rare never-ism that I’m OK with.  But sadly, when interfacing with poorly thought out code, sometimes you are forced to do this.

Lets say you want to create User objects and add them all to a list, and you know their IDs.  You can get users by ID from a piece of library code that you cannot change.  However, you cannot check if a user ID is valid: there is no method for it.  Further, the getUser method throws UserIdInvalidException when you try to get a user by an invalid ID.  For you, an invalid ID is not an exceptional circumstance, but the library code assumes it is.  Sadly you might be forced to write something like this:

for (id : userIds) {
    try {
        users.add(UserLib.getUser(id));
    }
    catch (UserIdInvalidException e) {
        // If ID is invalid don't include it on the list
    }
}

It is very rare that you actually can’t find a better way.  For the most part, consider a catch block like this to be a mistake unless proven otherwise.

Conclusion

Forget all these “always” and “never” rules.  A rule to live by would read more like this:  Exceptions should always be handled as best they can by the code best suited to handle them.

[Image credit]