Select menus are terrible, but hard to replace

I read an article today discussing how select menus affect user abandonment of forms. I completely agree with their hypothesis, but its not always easy to replace select menus.

In a past experience, we had a sign up flow that had two steps. The first step captured the user’s email address and password. The second step captured their profile information. We required the user to fill out the second step to use the application. This consisted of first name, last name, phone number, company name, and industry. Each of the fields was a text input, except industry, which was a select menu.

Industry was a necessity for our business development team. They needed accurate data to project the average lifetime value of the user. Industry was also used to determine what order to follow up with users once they had completed accounts. It was imperative that this data be accurate and within our preset terminology.

This resulted in two major issues though.

1. Most people selected the first option out of pure laziness.
2. Most people didn’t know how to define themselves.

Both of these issues would arise in the solutions provided in the article. If we had made all the options (there were about 15) radio buttons users would not read them all. This would have the same result. If we had given the user a text box with autocomplete it is very likely they would not know what to type. We could give suggestions, but there would be no way to know if these were valuable to the individual user. Also, a text input with autocomplete does not solve for misspellings.

My conclusion is there is little we could have done. Giving our user too much freedom would have lead to more abandonment. But giving them less freedom led to poor selection.

One interesting note, one of our options was “Other”. These users were the most profitable and stayed with our application the longest.

Making this site fast

One of the simplest ways to impress your users it to make your site fast. It’s incredibly important to the user experience. There’s a lot of data to support this.

I have been slowly redesigning the site over the last couple of weeks and I took it upon myself to make the site as fast as I possibly could. I did the same at CallFire, hacking Drupal to follow a few best practices. So here’s few things that I did:

• Set a performance budget of 200kb (I’m at 204 and hating myself right now)
• Limited requests, there’s no JS and 1 tiny CSS file (I recently removed modernizer because it was load blocking, not really sure if that was the best move)
• Installed WP Super Cache (its no secret I’m using WordPress
• Added rel=”preload” to the link tag and loadCSS as a polyfill
• Removed anything that WordPress tried to load automatically

I’m sure there’s a bunch that I’m missing. But the fact is that I was hovering around 2 seconds with my initial template before all of this, and as of tonight (thanks to loadCSS) I am rocking a 700-850 speed index on webpagetest.org.

Super Bowl Commercial Bingo

After missing the last 2 Super Bowl due to travel/living aboard, I’m excited to host my very own Super Bowl party again. The best part is it coincides (well closely coincides) with my birthday. To make things a little more fun, Kate and I made our own Bingo game with this year’s commercials.

We did a decent amount of research and came up with 50 different themes/logos and are splitting them between two 5 x 5 Bingo cards. First person to get 5 in a row/column/diagonal wins. We decided not to make columns or rows themed and just randomized everything. Any tie breakers will be solved via rock, paper, scissors.

Here are the files in PSD and JPG formats. The logos file has 50 logos that you can split between 2 boards. Feel free to customize to your liking.

Enjoy the game!

Translating drop shadow to box-shadow

One of my biggest frustrations with CSS3 is that it doesn’t directly mirror many of the options that designers have in creating elements, making it more difficult than it should be to recreate them in CSS. The box-shadow property is a really good example of this.

In Photoshop, when a designer adds a drop shadow, they add the blending options and adjust to their liking the distance, angle and depth of the shadow. They also choose a color. These are all fairly easy to reproduce in box-shadow. Angle and depth of the shadow are covered by the first two digits of the shorthand property. Distance is covered by the last pixel value. Color is the last property, seems pretty easy to set right? Wrong.

The major issue here is that the default “Blend Mode” setting for drop shadow in Photoshop is “Multiply”. This is a light filtering setting that physically changes how the shadow interacts with the colors that are below it. Box shadow does not work like this, its not as sophisticated.

What can we do?

One way to give yourself a better translation is to change the “Blend Mode” to “Normal” and adjust your color to whatever you want. Then copy that value and plug it into your style sheet. This will give you the closest approximation to the color you want.

But what if I’m not the designer?

This is the issue I run into the most: I am just translating a design in HTML/CSS. So how do I find the correct value?

1. Go to Photoshop, open up the Blending options and change some of the settings in the drop shadow
2. Set the size of the drop shadow to 1 and the distance to 10
3. Now there should be a solid version of the box to sample color from
4. On a Mac, open DigitalColor Meter and sample the hex value
5. Plug that hex value into your rule and you should be good to go