Idea Book

The Promise

Wed, 08 Feb 2012 01:43:45 -0600

When you find sanity, madness is there to greet you.

I will teach my children great things.

They will see the center of the Earth and not fear.

I have been as pathetic a father as great I will be their teacher.

God witness this promise.

Your uncertainty, my sweet wife, will turn into triumph.

A Matter of Style

Mon, 09 Jan 2012 23:09:06 -0600

Apple Keynote:

“I put up this slide a little earlier this year. It represents what Apple is all about. We’re not just a tech company. Apple is more than that. It’s tech and humanity. It’s the hardware and the software working together. It’s not just a great new camera system, it’s the editing too, it’s not just a front-facing camera, it’s that plus 18 months of work on the software side. It’s the complete solution, so all of us don’t have to be system integrators.”

Microsoft Keynote:

“Tweet choir!”

"We’re generalizing here, but I think you can describe the hipster’s approach to taste as..."

Tue, 15 Nov 2011 21:05:03 -0600

“We’re generalizing here, but I think you can describe the hipster’s approach to taste as a voracious connoisseurship, a kind of competitive curiosity — the desire to know more about more different kinds of music before anyone else.”

- Voracious connoisseurship. Competitive curiosity. Perfect definitions of a hipster. Quoted from Rhapsody.com’s The Mix blog.

For all intensive purposes

Fri, 11 Nov 2011 05:03:59 -0600

For all intensive purposes:

Another example of the oral transformation of language by people who don’t read much. “For all intents and purposes” is an old cliché which won’t thrill anyone, but using the mistaken alternative is likely to elicit guffaws.

By people who don’t read much. Love it.

Trebuchet MS

Fri, 20 Aug 2010 02:23:00 -0500

I’ve been working with the Trebuchet typeface heavily on a project for the last 3 weeks. I hate Trebuchet and don’t think I would use it if the decision to do so wasn’t made long before I entered the project. However, I have figured out how to work with it’s quirkiness, and I think these guidelines apply to similar faces.

Give it space. Trebuchet is prickly and unpredictable, so give it nice wide lanes. Leading should be about 160-180% and go as wide as possible with your margins (sometimes it never feels right, but keep at it). Keep it light, too, as this will mask some of it’s quirks. (I don’t hate quirkiness, but it’s not a good effect in long paragraphs of text.
Does not play nicely with others. And by “others” I’m referring to other “Web-safe” fonts. Rounded and condensed faces nearly worked out well for headlines and buttons (Segoe Condensed, Unit Rounded), but eventually I settled on Trebuchet everywhere and just introduced contrast through color and case.
14px or 15px is the ideal size for the web. I’m doing 14px with a 20px line-height, color #444444, and it reads pretty well. Don’t go much smaller, especially if your setting paragraphs of text.
Looks good at a small size when set in uppercase and tracked loosely. With the all-caps, again you’re reducing the quirks and it almost feels like a different face. In fact, you’ll see a lot of small headings and labels around the web set like this because it is quite pretty.

Love this print ad from Verde. (Seen on defgrip.)

Thu, 19 Aug 2010 21:29:00 -0500

Love this print ad from Verde. (Seen on defgrip.)

Select Box vs. Radio Buttons

Mon, 09 Aug 2010 06:14:16 -0500

The first user interface gem I learned was “links go places, buttons do things.” It was the first time I remember understanding how all of the nuanced decisions I made about interface design weren’t just arbitrary.

I ran across a discussion recently about using select boxes versus using radio controls. A UX designer was arguing with one of the “engineers” (fancy thing to call a programmer) about whether or not a certain option should be represented by a dropdown or three radio buttons. They went so far as to run usability testing to find out the winner. Yes, they spent money on the engineer’s ego, but money spent usability testing is never too bad of a thing.

Here are some good rules to follow when faced with a similar problem:

Use a select box when…

…space is limited. If you have 5 or more options and only so much space, a select box is going to be your only way out.
…there is a good default option. The most efficient control is one a user doesn’t have to ever touch. Sure, you could have a radio button checked by default, but at the same time you are showing the user several other options that they don’t need to see. A defaulted select box looks like a pre-filled text box.
…little or no comparison is required with regard to the user’s options. When a user makes a selection, the rest of the options will disappear. If the user wants to mull over the effects of their decision, requiring extra clicks won’t be very welcomed.

Use radio buttons when…

…options require descriptive text. There’s just no way (no pretty way) a select box option can have supporting text. With radio buttons, it’s easier to juxtapose text and imagery to help the user.
…comparison is welcomed or required with regard to the user’s options. For example, if a user is picking between a range of numbers (like prices), it’s helpful to present all their options at the fore so they can compare without needing the aide of their pointing device to reveal the other choices.
…the act of making a decision leads to immediate interface changes. The key here is about reducing clicks and interface movement. With a select box, you have to invoke the display of all the options (click), possibly scroll to an option (more clicks), and finally make your selection with a (click). Plus, with radio buttons, you might be able to preview the result of the choice when the user merely hovers the radio button or label.
…there aren’t too many options. There’s no hard number to go by so you’ll just need to know what feels right.

These are just general rules. Always consider the context of your decisions, and don’t be afraid to do a little usability testing if that’s what it takes to shut the “engineer” up.

URL ABCs. Yep, I'm a bit bored.

Fri, 27 Nov 2009 23:53:00 -0600

Ran across an interesting blog meme whereby you show the results of typing each letter of the alphabet into your browser’s address bar and share the auto-complete results. Here are mine:

Adobe.com
Bankofamerica.com
Cssbeauty.com
Danpatrick.com
Espn.com
Facebook.com
Gq.com
Hexecontahedron (search)
Itunes.com
Judiciary.senate.gov
Kentuckyderby.com
Localhost
Msnbc.com
Netvibes.com
Outlook 2007 (search)
Pyrocms.com
Quikorder.pizzahut.com
Rhapsody.com
Sxc.hu
Twitter.com
Underconsideration.com/brandnew
Verizon.net
Wc.tickspot.com
Xbox.com
Yfrog.com
Zillow.com

Enhanced

Mon, 09 Nov 2009 11:04:59 -0600

Lately I’ve been trying to keep my JavaScript better organized and conventionalized.

It seems like for each new project I started, I named the main .js file something different, like onload.js or theme.js or page.js. Other times I broke it up unnecessarily like gallery.js, navigation.js, fonts.js, buttons.js. That was no fun.

And not only was my /js/ folder looking messy and inconsistent, my code wasn’t too well structured either. I typically just wrapped the whole file in a jQuery ready() function and then started coding things procedurally to my heart’s content. Even though I kept it well structured with comments, docblocks and indentation, it wasn’t practical.

So, here’s my solution as of late: enhance.js and the Enhance object.

For starters, I enjoy the semantic richness of the term “enhance.” Sure, I could have gone with “behavior,” but that’s a little to dry and boring. And behavior is inherent. What we do with JavaScript is enhance behavior, enhance experiences.

So, what is the Enhance object? Essentially it is the factory in which the enhancements take place. My enhance.js file begins with this:

var Enhance = {};

Consider two enhancements I would make to a page: using Cufon to serve prettier fonts and making a login form fancy with validation and/or Ajax. I need to add a few “machines” to my Enhance factory. Machines are functions directly off our Enhance object or embedded deeper within “assembly lines.”

Here’s how the enhance.js file starts to shape up:

var Enhance = {};

// Replace fonts with Cufon
Enhance.replaceFonts = function() {
    Cufon.replace('h1');
}
$(Enhance.replaceFonts);

// Login form enhancements
Enhance.login = {}

// Prepare login form
Enhance.login.prepare = function() {
    $('#login').submit(Enhance.login.process);
}
$(Enhance.login.prepare);

// Process login form submission
Enhance.login.process = function(el) {
    $('button', this).text('Please wait...');
    return true;
}

Notice the $(function); calls right after two of the functions. This just sets up the functions to run immediately once the DOM is ready.

The mere thought of working with my previous methodologies makes me nauseous. I think that’s a good sign I have made progress.

Use the Least Amount of Words Necessary in Communication

Mon, 12 Oct 2009 03:04:00 -0500

In other words: Be concise.

I was caught off guard recently when scrolling to the bottom of a blog post to share a comment. Upon scanning the middle-left portion of the screen for a group of boxes and a button, I was interrupted by a light-yellow shaded box with a healthy chunk of center-aligned copy. Because I had reached the bottom of the page, I intuited that reading the copy would reveal and explanation. It said:

You must be a registered member to add a comment on this article. If you’ve already registered, please log in. If you haven’t registered yet, please register and log in.

And then I forgot not only what I was going to say, but what I was even doing. I almost broke into a sweat. (Not really.)

My mind had preconceived a virtual path whereby I find a group of inputs, type out my ideas and click a button to share them. But the lengthy instruction blind-sided me with its needlessly complex detail of the steps required to continue my task. Pushing me down an unexpected path was bad enough already, but it might as well have told me that I was due to spend an hour in a dentist’s chair with my mother-in-law in the room.

Being concise isn’t just choice ammunition of haughty, narcissistic interaction designers in need of a topic to discuss. It also means getting out of a person’s way as much as possible. The above copy could and should have simply read “Log in or Register to Comment.”

And in this particular example, the best course of action is probably to get out my way entirely. Let me submit my comment, show me my comment in context of the discussion, and then alert me to “claim” my comment by either logging in or registering. But that’s something to explore another day.