This became an inside joke I at the Online Marketing Summit, one of my clients. I was doing the drinking thang (networking, talking with attendees), and I always have one gimmick that I go with at an event as an icebreaker.

The joke was, “so how do you increase conversion?”

“Red Buttons.”

I’m sure Red Buttons the comedian didn’t know he was going to be the punchline for a user experience jokes. “I’m here on Tuesdays, tip your waitress, next up They Might Be Giants…”

But…

That’s not always the case, as stated in this great tool that’s been around for a year, Which Test Won.

Which Test Won is a great little site that does what we all want: publish the results of A/B tests for ideas of better site conversion.

In the red button/grey button test, Verizon tried two versions of a home page, one with red buttons everywhere, and one with a single red button. The main call to action was a gray button.

Can you guess which one won? Go to the site to see.

Google guesses who your friends are, including your mistress that your wife doesn’t know about (and then shows everyone this).

This is such an inexact science, because anyone can figure out your email address. We receive so much spam and other garbage through email account (is a shopping site really my friend?) and there are conversations you want private. Those connections are now public by default, as Gizmodo points out:

• A girl you slept with in college sends you a message on Gchat, to tell you she has five beautiful children now, and that she doesn’t ever think about you, ever. Ok!
• You exchange some messages and a couple emails to be polite. You defuse the situation. You don’t mention it to your current girlfriend, because that would be weird.
• Coincidentally, you enable Google Buzz, which adds both your current girlfriend and this lady who you politely deflected.
• Your girlfriend checks out your Google profile, sees your friends list, and asks you who that lady is.
• You clumsily try to explain, “Oh, it just adds people you talk to automatically,” which only makes things worse.
• Fight!
• You break up, which was probably a good thing anyway, because your relationship sounded really unhealthy. But you get the point, right?

The situation is so bad, some sites (like Lifehacker) are showing ways to turn off the contact list. Think about it — do you want every telemarketer to be your friend? Facebook has one important filter: you can deny friend requests.

It’s never, ever a good idea to create a social graph the way Google did. That’s why most of the IM clients do the double opt-in approach (and the follower model is killing Twutter).

Google Buzz reinforces the power law online, which means you’ll get to see 100 photos of Jason Calacanis’ dog, or promoting how he pays more than some services, but less than About.com for content

The people you want to talk to automatically become long tail, yet the people who are endlessly self promoting always bubble to the top because they have 11,000 followers, and someone’s always going to make a comment.

Social Customer points out buzz does two things that will simply make it unusable.

1. It shows threaded conversations and strongly highlights the initiator of those conversations, and makes the comments subservient to the initial post.
2. It takes posts that have “new” comments and immediately bumps those posts to the topmost position of the viewing window.

This interface will greatly reinforce the existing power law relationships online, and have the effect of greatly reducing the serendipity and interestingness in things like the current Twitter and Facebook interfaces.

Not that many people use Gmail, and most who do are the digirati.

From twittercism:

This is also the first time I’ve noticed how few of my friends actually use Gmail. I loveGmail, and recommend it to everybody, but people are often quite set in their ways, and prefer to stay with Hotmail or Yahoo, irrespective of the lack of features. Looking at my address book, I’m guessing probably less than 20% of my friends have a Gmail address, or even a Google account, for that matter.

Yeah, it’s mad, but it also means Buzz is already limiting my network.

Social networking is an all or nothing game, and if you only have 20 percent of your friends, do you really think the other 50 percent or so are going to create a Gmail account to see Google Buzz?

I think not.

What’s the take away? Not ready for primetime.

I agree with twittercism:

My gut feeling? Unless they make some major changes and improvements to Buzz, and soon, and that includes addressing those privacy issues, it’s never going to be a threat to Twitter or Facebook. It’s just another aggregator. And a bad one, at that.

Everyone sees Facebook as the center of their social graph. They also see Google as the place that wants your information, which is why people won’t trust them with their social graph.

What do you think?

I’ve met Dana Oshiro, and she’s a great writer. I’m glad to see she’s written something about UX, especially in an area we give so little attention to.

Over the weekend we had a chance to highlight Graphic.ly – a company that opted to release early (and imperfectly) in exchange for valuable user feedback. As companies look to their peers and audiences to help define product features, there’s a greater need for scalable testing platforms. Here’s a summary of 8 useful services that will help put you on the path to product greatness.

Read on…

Sometimes we forget about this, but white space is a very important component in design and user experience. Inspired Magazine has a great post about the usage of white space in design, even if it is print.

I was on a mailing list today, and this came across:

“Use red asterisks — they’re the standard for showing required fields.”

Standards are wonderful, but if I asked my mom with is the international symbol for a required field, she would look at me like I was on drugs (not much different than today, but still).

This was something even the great Jared Spool mentioned at an event as gospel, and showed an example in his PowerPoint (which I still haven’t received, but that’s another blog post). He was explaining how another client had used asterisks to show optional fields.

Here’s a few truths about form design that I’ve discovered in my time by testing actual users.

Most forms are hard to read.

Does anyone find it interesting the note for required fields is after the fields?

There have been a few books and web posts, but for the most part, web form design hasn’t changed that much since 1996. Form fields are left on a white background with a grey line around them (some sites, like this WordPress blog software I’m using, has a lighter grey line around the form fields for design purposes).

On some sites, form fields are in columns so they’re next to each other so the user really has to work at it.

Given eight form fields, users will fill out all eight.

I’ve run countless tests, and the result in most of them is users will try to fill out every single form field. This includes  the second address field we all know so well even if they don’t have a second address.

Form fields are one of those things that users expect to fill out every single field, because they don’t want to have to figure out error messages when they are wrong. Because they have been trained that most web forms are ineffective, they do as much work as possible (bad solution number 1) or walk away (worse solution number 2), leaving either a frustrated user, a lost sale, or both.

The red asterisk, and even the explanation text that reads “Required fields are marked as (*)? No one’s going to read it.

It’s usually at the top of the form, in line, and all users skip it right to dig in. Users rarely read instruction text, and because most form design is so poorly thought out, users rush through it to make it as painless as possible. Users need visual cues next to the field or at the field they are working on, not 300 pixels (at least) away.

Additionally, the Required Field line is usually small and hard to read (read: Designers License), so in the grand scheme of watching users browse the site, they skip right over it.

A solutions to the required field paradox

Disney Shopping

This was a solution we used at Disney Shopping: the word Optional was placed to the right of the field, and required fields were colored yellow so users could spot them.

I’m using this particular design pattern on other sites because at Disney Shopping and a few other sites I’ve worked on, this is the design pattern I’ve enforced. It’s simple, doesn’t interfere with the form because error messages are usually below the form field, and it’s easy to scan for it.

Why am I enforcing it?

Because changing it from the asterisk to this example, form completions are up, across the board. We’ve tested it, and it works.

Any questions?

One of the way cool, nifty things that you get by working for an online marketing education company is access to great tools that are just a bit beta. That’s just the sort of thing we needed over at Online Marketing Summit as we do usability testing and other analysis work.

Enter Attention Wizard. Attention Wizard is a tool that shows possible eye tracking without the human part. The smart folks over at Site Tuners (Thanks Tim, for the invite) have written an algorithm that produces an “attention heatmap”, a way of saying here’s some possible areas that the users are paying attention to based on color and Gestalt theory. All you have to do is upload a screen shot, and in five minutes, it gives you results of what it could look like.

I did it with Online Marketing Summit (click on the thumbnail) to show you what one of their results are.

Their sales points

• Can be used with actual screenshots or page design mock-ups
• Instant results – no eye-movement or mouse-tracking data collection needed
• Tells you what people are paying attention to, and what they ignore
• Easily identify landing page problems & increase your conversion rates

Our take aways

• People’s eyes go right to the schedule tab, which is a good thing.
• We have this photo image in the first paragraph of text that does nothing. It’s providing no value to the user while attracting a lot of attention.
• The testimonials are getting a lot of attention.
• I think Attention Wizard is giving too much weight to the photo.
• Overall, the eye is scanning the page well.

We’re going to make more changes, but the goal is to get results quickly and increase conversion rate on the site, and that’s what we got with Attention Wizard.

My honest opinion about Attention Wizard?

I wouldn’t take this as gospel science (is eye tracking that now, anyways?), but it’s a good first cut at “well, let’s see what we have.” They claim a 75 percent rate of matching eye and mouse tracking, and that’s good enough for me. It’s much better to do several tests with this tool (which would be great as a subscription model site) than spending $5,000 for an eye tracking system that no one’s going use because, well, it’s hard to use.

It’s a great tool that’s only going to get better once they work out the kinks.

One of my favorite topics is typography and even though there’s a somewhat limited set of options in CSS, typography can still vary tremendously using pure CSS syntax.

Smashing Magazine conducted a detailed survey of 50 popular websites to see answer questions like Serif or sans-serif? Large or small font? Light or dark background? and more.

Though the findings aren’t scientific, the study shows a clear set of common practices and guidelines for setting type in Web design. Granted, these points should serve only as rough guidelines (not hard and fast rules):

1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
2. Common choices for headlines are Georgia, Arial and Helvetica.
3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
4. The most popular font size for headings is a range between 18 and 29 pixels.
5. The most popular font size for body copy is a range between 12 and 14 pixels.
6. Header font size ÷ Body copy font size = 1.96.
7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
8. Line length (pixels) ÷ line height (pixels) = 27.8.
9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

Of course, every website is unique, and few people want their sites to look like everyone else’s sites. But it’s always great to keep in mind that following these guidelines could make your website feel more familiar to your readers. (If you are a data and spreadsheet nerd like I am, check out the spreadsheet of the study and export its data for further analysis.)

Are your written materials easy to read? Sometimes people get so caught up in creating a certain image – or squeezing a lot of words into a limited space – that they completely lose sight of readability. Unless yours is a completely visual message, it’s important that people be able to read your words. Make sure your finished piece is formatted for maximum readability.

Make it Easy to Scan

People don’t want to wade through what appears to be a short novel. If the mere site of your written piece overwhelms the reader, you can bet he or she will quickly move on to something else.

• Recommendation: Put your headings and subheads in bold type, use bullet points, left justify your text (don’t center everything) and break things down into short, easy-to-manage paragraphs.

Avoid Giving Readers a Headache

Have you noticed that an increasing number of websites are composed of tiny little white letters set against a black background? Ugh! Instant eyestrain.

• Recommendation: For maximum readability of any written piece (not just websites) stick with dark type on a light background, and don’t use anything smaller than a 10-point font.

Think about Your Font Formats

Sometimes it works to use special formatting to call attention to particular words, but if you’re not careful you’ll end up making those important words difficult to read.

• Recommendation: Go easy on your use of ALL CAPS, italics, underlines, Initial Caps, and other special formats. These all work well on headlines and brief items, but should generally be avoided on longer passages.

Remember, if your letter, website, brochure, or other written piece isn’t formatted for maximum readability, there’s a good chance it won’t get read at all.

From Lateral Action:

What a wonderful little diagram.

I’ve been wanting to do this for a while (because I’m sick of trying to view the blog on my iPhone), and it took a while to plan what I wanted to do with it.

Launched this weekend was the mobile version of UsabilityCounts.com. The home page viewable at mobile.usabilitycounts.com, and i’m working on enabling the whole site at that URL. Most mobile devices should automatically detected and show the right version.

Twitter users that view the site on the iPhone, cheers, and enjoy.

Here’s what I did:

A unique design depending on the device

You can use CSS to handle a different display, but you should do it using server-side technologies, because the whole point of a mobile device is to deliver an experience that has less graphics but is still functional. Delivering a site that is 200k on a limited device with lower than DSL bandwidth doesn’t make sense. To do this, I’ve been slowing ripping apart the TypoXP theme of Wordpress for purposes of simplication (most Wordpress blogs are overcomplicated in their usage of CSS).

When the site loads, it does an initial detection of the User Agent: Blackberry, Android, iPhone and iPod are the currently supported devices, and you can see a  list at Wikipedia. The pages load different content for mobile devices — the web version is heavier, where as the mobile version contains just HTML and a couple of backgrounds and icons for navigation only. Wordpress has a set of function calls that makes it easy to show different content depending on how you want it triggered.

I also added the following HTML tag:

<meta name=”viewport” content=”width=480; initial-scale=0.63; maximum-scale=1; user-scalable=0;” />

The iPhone assumes the screen is 960 pixels wide, so there is the new META tag specified called viewport for mobile devices. The iPhone technically is 320 wide by 280 tall in portrait mode, but I set it to 480 pixels wide and adjusted the initial scale to preserve current content. More on that later in the post.

I used CSS style sheet but did not declare it as a mobile style sheet.  I would I like to think device manufacturers properly identify their devices, but I know better because I’ve been doing this for too long (and don’t even get me started on Netscape 4.72).

Keep It Simple, Stupid

I did research using other content sites, like the NYTimes application for the iPhone, which I think is one of the best applications on the market. I selected a very similar design approach: allowed for the display of 30 articles at a time, and enabled paging of those articles, and designed around a single column of content.

I figured people were getting very used to scrolling on the iPhone, and designed with that in mind. Common use cases I could see someone reading the site would be while using mass transit or eating lunch.

Once a user was within an article, I kept the same format without the Twitter feed links. Below the article the user could see other recent articles, encouraging browsing of the site. In the future, I’m going to be adding pages where users can view lists of articles by tag.

For the CSS, I avoided a lot of the tricks like hover because they seem pointless in a mobile environment. I figured users would be most appreciative of a simple interface without all the bells and whistles that are reserved for web displays.

Adjust appropriately to use existing content

I planned for a 480 pixel wide maximum width of the content originally for the blog (by no mistake). To make it look good on the mobile device, I had to add 10 pixels of padding around the content. This required adjustment of the viewport values to handle the YouTube and other video content I post in the site.

The values I picked are listed below:

<meta name=”viewport” content=”width=480; initial-scale=0.63; maximum-scale=0.63; user-scalable=0;” />

Initial scale was set below two-thirds because I wanted the videos and image content to scale within the window. YouTube supports the iPhone well. When you select one of the videos, the site is automatically launched. The CSS type is set bigger to account for the initial scale, thus I can use all of the existing content without changing it for those using web browsers.

Make targets big

Dan Saffer writes about this in the book Designing Gestural Interfaces, but I’ll explain it in English: Most people have fat fingers, so it’s a good idea to have fat targets.

Dan advocates the target area be at least one centimeter square, so I adjusted the UI appropriately, including larger than normal search boxes, comment boxes, and the links to the articles are quite a big larger than most websites.

Test on the official manufacturer simulators

The good news is that Apple and Blackberry have applications to test the emulators on. The bad news is that you have to sign up for their programs (which you can do for free) to download the simulators. The Apple iPhone Simulator comes part of the xCode package, so it’s quite a download. Once you have installed it, it’s great at simulating the experience of a website on an iPhone.

Most of the “free” simulators aren’t very effective and don’t give a true experience, so I limited it to using the official iPhone application. I also tested the site on my iPhone, and there was no difference.

Once I get the Blackberry simulator installed, I’ll give you the results. I’m still having difficulties.