Design Guidelines

July 19th, 2010

I’ve been working on TypePad’s Developer Resources and my main contribution so far (other than a slight reorganization of the homepage) is the design guidelines. Although they’re meant for the TypePad platform specifically, the guidelines should be general enough to be adapted and applied almost anywhere.

The first of the entries is about favoriting and the different states a favorite button might need. The guidelines are an ongoing project and I’m hoping to add another entry soon.

The guidelines focus on common user interface and usage patterns, such as displaying most recent blog posts or leaving a comment.

When I first saw this on LinkedIn I thought the “Like” link was Facebook’s. It didn’t help that the comment section was a Facebook clone as well.

It’s important to remember that Facebook is not a self-contained site, it’s a platform. As mentioned in the previous post, it’s also a standard by virtue of its popularity. Users expect the “Like” link to behave a certain way now. You can’t add your own implementation of “Like” to your site and not expect users to be confused.

Or maybe that was the strategy?

Facebook as a Standard

May 24th, 2010

Facebook has grown to a point where its user interface decisions are not only impacting sites within its vast ecosystem, but also sites on the periphery with overlapping characteristics.

Like it or not, Facebook is setting the standard for social networking design.

Standard: 80% or more of websites use the same design approach. Users strongly expect standard elements to work a certain way when they visit a new site because that’s how things always work.
– Jakob Nielsen

If you have a feature on your site that requires a technical explanation of why it doesn’t work the way your users expect it to…

FIX. IT.

Luke Wroblewski has compiled the Touch Gesture Reference Guide, a “unique set of resources for software designers and developers working on touch-based user interfaces.”

The visual guide is available as a PDF, EPS and OmniGraffle Stencil for wireframing. But perhaps even more useful is the list of gestures available on a variety of platforms, including the iPhone, Windows 7 and Android.

Side note: It occurs to me that we’re witnessing no less than the slow death of our current intermediary devices — the keyboards, the mice, the trackballs.

Since I frowned upon Gmail a bit in the last post, I thought I’d post something I like about Google: Google Doodles.

I rarely see Google’s special logos when they first appear, since I prefer to use the browser search box. But sometimes I’ll follow a random link to the doodles page and end up looking at the latest ones.

I recently found this series of logos in honor of Hans Christian Andersen’s 205th birthday.

I think they’re wonderful. I smiled as I followed Thumbellina’s story and remembered my childhood books. And just like that, Google gained precious goodwill points (which it will need whenever it goofs up next).

Considering how much I appreciate glimpses of playfulness on an otherwise straightforward/serious site, I rarely get to plan this aspect as part of the user experience. This is partly because I’m often so busy implementing the priority requirements that I don’t have time to think about or make the case for “non-essential” features.

But if the basics are what set the good apart from the bad, the details are what set the great apart from the good. Giving your users the opportunity stumble upon something unexpected yet welcomed may be what takes the experience of your product from good to great.

I’ll have to remember that.

The Usability of Icons

May 10th, 2010

Google tends to use icons sparingly. Here are five instances on the sidebar of Gmail, though there are only four distinct icons. The icon with the two small boxes (one with an arrow inside) is used twice.

Here’s the list again with the meaning of each icon spelled out:

[New window] New Window
[Print] Print
[New window] Create a document
[Expand all] Expand all
[Forward all] Forward all

The icons are merely repeating what the text is saying, except in the case of “Create a document.” That icon is adding value by letting us know how the document is going to be created.

The print icon works because it’s pretty much a standard and instantly recognizable. But the icon next to “New Window” is superfluous, except as a primer of what the icon means. The “Expand all” and “Forward” icons are too similar and vague to be helpful. Without the text, they are just tiny boxes with arrows in them.

Icons are pretty and colorful and fill up space. It’s easy to forget that even well-designed icons usually have a learning curve. I’ve certainly seen enough icons that serve no function, add no meaning or, worse, decrease usability.

google icons

These icons can be found on the left side of an email thread in Gmail.

A Matter of Trust

May 8th, 2010

From what I’ve seen, many processes fail due to a lack of trust. It’s the underlying reason for shoddy communication, insufficient delegation and, ultimately, poor team cohesion. It’s also a vicious circle.

“I don’t trust you to get the job done.”

“I can’t get the job done because you don’t trust me.”

From a manager’s perspective, if you trust your team members, the instinctive and logical thing to do is to include them in the decision-making process. If you don’t trust them, you’ll try to do everything yourself. This obviously won’t work in the long run. You have to break the circle.

Discuss the parameters and constraints of the project up front. Let your team come up with solutions (and hacks, if necessary). This isn’t to say you should build a democracy, which is another recipe for failure. The goal is to instill a sense of ownership. Make a final decision that your team can accept — convincing is better than ordering. Everyone should be able to articulate the goals and success metrics.

You may have to force yourself at first. But it’s a positive feedback loop. The trust will come.

Few things help an individual more than to place responsibility upon him, and to let him know that you trust him.
– Booker T. Washington

Zappos and Amazon Headers

April 28th, 2010
The user interfaces of online shopping sites are fascinating to consider, especially given how closely the elements are tied to revenue.

1. “Powered by Service” isn’t just something they say.
2. An interesting choice to display keyword examples.
3. More search terms. I wonder if this is the result of a usability test — maybe users did not think to search for “wide shoes.”
4. An interesting visual design choice to place the search button within the field.
5. One reason why Zappos is different and great. They’re letting you know right away.
6. Another reason why Zappos is different and great. (Though other sites are now doing this as well.)
7. I had an item in my shopping cart, yet the button did not change state. See Amazon’s header for a more useful button.

1. This area feels cluttered. “Recommendations” goes to the same page as “Jean’s Amazon.com.”
2. I was on a Mac — which does not have IE8 — when this promo appeared.
3. The shopping cart button indicates the number of items within the cart, thereby increasing utility.

Violating Flatness

April 23rd, 2010
Compared to the iPhone, most of the WP7S organizing screens have lower content resolution, which violates flatness and leads to hierarchical stacking and temporal sequencing of screens.

I love that quote because it’s so very Tuftian.

I would have written, “Information isn’t packed as well so it takes more effort to get to the stuff you’re looking for.” Or something along those lines.

Tufte’s analysis of Windows Phone 7 Series is worth a read.