Archive for April, 2009

3 Movies Every Cyclist Needs to See

Posted on: April 27th, 2009 by Zach

I’m pretty sure everyone is into bikes as much as I am, with that in mind I’m recommending movies you are sure to love.

Breaking away

Breaking Away

Okay, 2 racing teams, the poor townie kids (cutters), and the richie filthy rich college frat boys. Protagonist gets a bike, trains a bunch, races a semi truck on the highway, showdown with frat boys…

Coolest part is that the Greeks vs. Cutters race is real, and the cutters finally won the race in 2005. The movie’s Won an Oscar, is the #8th most inspiring movie of all time, and is indisputably rad.

 

 

Quicksilver

Quicksilver

A hotshot wall street whiz-kid Kevin Bacon quits his high roller day job to become a bike messenger. Includes several scenes with Kev performing bike-ballet on a 1-1 geared fixie with the drops flipped up for bar spins. He basically invents hipster in this movie.

 

 

American Flyers

american_flyer

Kevin Costner is pretty cool too. In this one he’s riding The Hell of the West. Either him or his brother may or may not have a terminal disease, but they’re not really sure. I don’t recall either. This one’s a tear jerker in a good way.

 

 

Others That I mostly Haven’t Seen

Loads more here, although many are literally impossible to find. Also it’s hosted on GeoCities, soo the site’s likely to be gone soon. http://uk.geocities.com/mikstar123/films.html

Asbury Earns Webby Nomination, PRPL Garners Gallery Buzz

Posted on: April 27th, 2009 by Aaron Martin

Fresh off a Gold Addy in Interactive Media, the Asbury Park Boardwalk has now earned a Webby nomination. So please, visit the People’s Voice and vote for the website!

In other exciting news, our new website is quickly garnering buzz with features in some of the web’s top design galleries – Website Design Awards, CSS Mania, Web Creme, CSS Remix, Most Inspired, Abduzeedo and The Design Inspiration – amongst the throngs of household names like Umbro, VW, Comcast, LG and Ikea.

I Can Has Laundry Fail

Posted on: April 26th, 2009 by Rob Zienert

This weekend was great, I love great weekends. There was one miserable failure that made me miss the mark on a perfect weekend: My cat decided to explode a carton of Tide Clean Breeze all over my apartment.

Now. A little about my cat. She was born under my bed back in Michigan like 4 or 5 years ago, is all black and my parents gave her to me as a Christmas present this past year to keep me company. A new state, a new identity: Parker wanted to name her Backslash, after one of our named Foosball shots, but Zelda ended up winning out as proposed by Zach because its a girl’s name. Anyway, Zelda keeps my apartment messier than I’d prefer and this weekend she took it to an another frustrating level.

I went to the gym with Shayne and Zach only to return to Zelda under my couch (read: futon) like she knew she did something terrible. At first I was curious why it smelled like I was swimming in an air freshener, but then after seeing the ceiling of my kitchen glistening in blue — I knew it. Sure enough, she managed to jump onto my washer and knock off everything including a brand spankin’ new bottle of detergent.

Good news: Linoleum flooring makes clean up a Clean Breeze or so I thought. It took me like an hour to figure out how to clean it up and then another 6 (not straight) to actually execute the task. See, the trick was… I couldn’t use water and I wasn’t about to waste money using paper towels: The blue stuff happily stretched for a 10×10 foot radius… not to mention whatever splotches she-devil trampled around the apartment.

Solution: I ended up tying Zelda to a broomstick and using her delicate fur to clean up everything. Just kidding, I didn’t do that. I used beach towels. A lot of them. And then magically got rid of the evidence of disaster by putting them one-by-one in the washer. Turns out each one required two washes to get the soap out of them. It was magical.

I opened the windows hours ago and the fetor of Clean Breeze is still lingering ever so potently. Anyway… yay weekends!

Recipe of the Week – Fried Rice

Posted on: April 26th, 2009 by Chris

Ok, so fried rice…why make it when you can buy it from the local Chinese Restaurant? Well, I know I won’t convince all of you to try this, but sometimes you just have a craving for quick chinese and the restaurant down the street is closed. I personally like to do it because it is such a versatile dish. If you add some protein to it, suddenly you have the making of a full meal. Honestly, I was looking to experiment and whipped this up tonight for dinner. I always thought there was some secret to it. However, I went to Kobe Steakhouse one night for dinner and watched the teppan chef make fried rice in a matter of minutes for the whole table and realized just how easy of a dish it could be.

Ok, so fried rice…why make it when you can buy it from the local Chinese Restaurant? Well, I know I won’t convince all of you to try this, but sometimes you just have a craving for quick chinese and the restaurant down the street is closed. I personally like to do it because it is such a versatile dish. If you add some protein to it, suddenly you have the making of a full meal. Honestly, I was looking to experiment and whipped this up tonight for dinner. I always thought there was some secret to it. However, I went to Kobe Steakhouse one night for dinner and watched the teppan chef make fried rice in a matter of minutes for the whole table and realized just how easy of a dish it could be.

Ingredients

  • 1 C jasmine rice (steamed) – Yields about 3 cups total
  • 1/2 C cubed fresh or thawed carrots
  • 2/3 C frozen peas (keep frozen)
  • 2 large eggs
  • 3-4 tbsp olive oil or sesame oil
  • 1 shallot minced
  • 2 cloves garlic minced
  • 1 green onion sliced up thinly
  • 1/2 tsp. Gourmet Garden ginger spice blend
  • 1/2 tsp. Gourmet Garden lemon grass herb blend
  • 1/4 C low sodium soy sauce
  • Fresh ground pepper to taste

Ok, so there really is no secret to fried rice. Lets get right in to our steps.

  1. As it says in the ingredients, prepare 1 cup of Jasmine rice. For those folks who have trouble, rice is quite simple. Boil ~1.5 cups of water to a FULL boil in a 2 Qt sauce pan, add 1 cup of jasmine rice. Stir, cover, and lower temperature to low (about 1.5 on a 10 level stove). Set a timer for about 10 minutes and DO NOT UNCOVER THE RICE! Simply let it steam for 10 minutes…about this time, the condensation on the lid should be minimal. Take the cover off and stir with a spatula. Throw the cover back on and steam another few minutes. This will make a nice dry rice and it won’t all stick together. When done…place in a bowl and set aside.
  2. Add 1 – 2 tablespoons of olive oil or other vegetable oil to a 9″ (preferably 12″) skillet. Add frozen peas, thawed or fresh carrots, shallot, garlic, green onion, lemon grass and ginger to a pan on medium high heat and saute for 3-5 minutes. One thing about asian cooking, is that faster sometimes is better and hotter is sometimes better. I rarely recommend cooking fast, as it leads to mistakes, but it will actually make it taste more authentic. Once your veggies are golden brown, set aside in a bowl and add more oil to your pan.
  3. By the way…you may have noticed I recommended a brand for ginger and lemon grass spice blends. This is not a hard requirement…you are welcome to use fresh ginger if you prefer…but for the amount of flavor we are trying to add to the dish, don’t go out of your way to find lemon grass if you can’t. Ginger is readily available usually near the peppers in the produce section. You will usually find the spice / herb blends in the same section and they come in squeeze tubes. If you can’t find them, buy a little fresh ginger and mince it up. It will taste just about the same.
  4. Move your pan off to a cold burner and add two eggs. As your eggs are most likely cold, not doing this over medium-high heat will prevent splattering of hot oil all over the place. Start scrambling your eggs and get them back on medium heat until cooked through. Make sure you break up the egg into small pieces and add these to the bowl when they are cooked through.
  5. Now take your prepared rice and add to the skillet over medium heat. Use a spatula to spread out the rice and constantly chop through the rice with the sharp side of the spatula to keep all the grains separate and fry slowly for 5 minutes. This will mostly dry the rice and you do not want the rice to brown that much. The soy sauce is what makes fried rice brown…not the frying :) .
  6. After 5 minutes of frying, add the egg and vegetables back into the pan and turn up the heat a little to about 6. Mix the egg / vegetable mixture so it is evenly distributed through your rice and then season the rice with fresh ground black or white pepper.
  7. Add soy sauce and continue to fold the rice in on itself until all of the rice is brown.
  8. Cook an additional minute or so to make sure that the vegetables are heated through and then plate and serve.

As you can see, fried rice is quite simple. You can take this basic recipe and cook up some beef, pork or chicken to take your rice from a side dish to a quick and easy meal. Give it a whirl…once you make your own, you really won’t want the chinese restaurant’s dried out rice again!

Myth Busting CSS Reset Speeds

Posted on: April 25th, 2009 by Zach

I’ve always heard and read that the zeroing of margin and padding on all elements in a page via css slows down browser rendering speeds because of all the extra style rules the engine has to apply to every single element. After a question came up on twitter about it, I couldn’t think of or find any real numbers to validate that theory. So I decided to test it.

The Code

Here’s the declaration I’m talking about:

* {
margin: 0;
padding: 0;
}

To put this in scope, all browsers have slightly different ways of applying default margin and padding to elements, so the idea is that to avoid dealing with these differences you just steamroll them down to nothing, building up from there, this is known as a "reset" and has always been fairly commonly used and accepted. The legendary Eric Meyer was one of the first to speak up about how this just wasn’t acceptable in a number of ways and offered a better solution.

The Test

I used a css rendering benchmark tool created by nontroppo. It tests how long it takes a browser to render 2500 positioned divs. That is a LOT of elements, I would estimate a large sized page having at most a few hundred. Hopefully this will give us a wider degree of variation between the tests.

I ran two tests, one without the aforementioned declaration, one with. In each case I loaded the test, ran it a few times to be sure the rendering engine was warmed up (yes, as silly as it sounds they are affected by "cold starts"), then recorded the next 10 speeds averaging them out to produce the following results.

Results

Test Speed
No styles applied 424.4ms
margin & padding: 0 438.8ms

As you can see, applying the reset was about 14.4 milliseconds slower to rendering the page.

Coincidentally that almost exactly the same amount of time it takes for a honey bee to flap it’s wings 3 times. In more useable terms, it’s in the ballpark of sending about .9kb of data across the internet on a high speed connection. If you’re that concerned with time, there are far better optimization tactics to get those milliseconds back.

Is this test a definitive answer?

Pff, yeah right.

This test would have gotten me a "C-" in a 5th grade science fair. I only tested 10 times, on one browser, on a page with nothing but div elements. There are thousands of variables in the DOM alone that could potentially affect the speed tests, but I would say I generally got the numbers that I expected. Resetting in this fashion is slower, but nothing you would ever notice; even on a gigantic page.

Web Site more intense than Ultimate Warrior

Posted on: April 21st, 2009 by Rob Zienert

In my efforts to find something new on the Internet, I made one of the now rare visits to Digg (not because I don’t like it… just don’t have time really). To my surprise, there was something I never could have seen coming: a web site introduction more intense than the Ultimate Warrior. Observe…

Ultimate Warrior: http://www.youtube.com/watch?v=VkEl_R0dTfY

Unnecessarily Epic Web Site Intro: http://www.iccm-1.org/

Seriously, ICCM? I stayed on the web site after the intro for about 20 seconds until I was overwhelmed by the movie trailer narrator validating their existence in protecting non-profits from the IRS. I think that’s what the site is about: The IRS. I honestly couldn’t handle it so I can’t say for sure.

Point: Engage your users, but don’t be so engaging you drive them away because they think you’re loopy.

Zend Server is totally rad

Posted on: April 21st, 2009 by Rob Zienert

When Zend Server originally got released, all of about two weeks ago — I was pretty stoked at the prospect of having an easy-to-use development environment. I’ve had trouble getting a macports installation of a LAMP setup on my home iMac and my MacBook Pro, so I jumped right on the opportunity of a packaged setup. Admittedly, I was frustrated with the first release being completely packaged into the Applications directory like MAMP is (*puke*), but by-in-large a very successful first release in my mind.

Enter the new OS X Release Candidate. I stumbled across it at like 3am with work in the morning and decided, "Meh. What’s another hour not sleeping?" I was pleasantly surprised when noticing two of my complaints remedied: restructured installation and an integrated MySQL server. A full solution in a simple installation: yes, please. When it came time for me to start preparing the new server environment for ZFComponents, I figured why not try out the Debian package?

I’ll be the first to admit I’m not exactly pro in command line (see: Chris Burdick). I definitely know enough to handle most server administration (except mail) by myself, but it still takes me a little while to setup an environment from scratch. You know — installing all of the packages, configuration and finally deployment of an application. I host all of my stuff on Slicehost, so I pretty much get to do whatever I want within the confines of shared resources; so the installation of Debian Lenny went forward (upgrade from my previous Debian Etch installation). To my delight, the DEB package for Zend Server is supremely easy to get running.

Debian already comes setup with Apache2, so I was thinking I’d have to override it, but Zend Server happily slid in, using the existing Apache2 installation so all that was left to me was deployment. A quick checkout from the repository and my server is now online. It was beautiful… kind of like the planets aligning without a looming apocalypse in the distance. Given my experience with OS X installation, I was expecting the ports to be all out of wack so I ended up banging my head against the wall because I couldn’t connect to the server on port 10088… only to read the documentation and find, "Uses port 80." Oh… right… documentation: I forgot.

All-in-all, I’m obviously elated with my experience so far with Zend Server. It’ll probably end up replacing our existing development environments later this year here at Purple, Rock, Scissors when PHP 5.3.0 drops so I don’t have to concern myself with killing an entire day updating people’s machines. If you’re a PHP Developer and haven’t tried it out yet, you probably should go ahead and give it a spin.

Recipe of the Week – Tortilla Espanola

Posted on: April 17th, 2009 by Chris

Hmm, ok…maybe you’ve never heard of this one, but it is certainly worth a try.  This is a Spanish Potato Omelet which I know you’re gonna love.  It goes well with just about anything as it is from the class of spanish cuisine known as "tapas."  While the origin of the term varies, the word literally means "cover."  I like to think of it as meaning that it "covers" your appetite between lunch and dinner.  Tapas come in all shapes and sizes, from a full Paella (Seafood and rice stew – to put it quite simply) to queso de cabra (baked goat cheese served with a mild marinara on french bread) or even just dried meats like Chorizo – a spanish sausage.

2342052637_9511dc2aac

Regardless of what you want to call them, a Tortilla Espanola makes a great breakfast, lunch or even an appetizer.  Now that we know a little bit about them, lets take a look at a basic recipe:

  • 4 cups Extra Virgin Olive Oil
  • 2 1/2 pounds boiling potatoes, peeled and cut into 1/3-inch dice
  • 2 1/2 cups chopped onion
  • 1 tablespoon coarse salt
  • 10 large eggs

OK, so as you can see, the ingredient list is fairly short.  For this recipe, it is all about technique to make it come out just right.

  1. Start with a dutch oven (2 qt) and add the 4 cups of olive oil and get that heating over medium-low heat (about 4 on your oven dials).  If you have one, sit a candy / deep fry thermometer on the side of the pan with the bulb of the thermometer immersed, but not touching the bottom or side of your pan.
  2. Peel and use a mandolin (refer to Food Network if you don’t know what this is), use a slicing blade to get super-thin slices of potato.  After getting all the slices, cut in half and then cut in half the opposite direction.  When you are done, you should have hundreds of thin pizza-slice shaped potato slices.  Dry these and set aside.  Please Note: If you don’t have a mandolin, doing the slicing by hand is ok…it will just take a lot longer.
  3. Slice up an onion into thin slices.  Cut these into four pieces as well.
  4. Check the temperature of your oil.  For this process, we are NOT frying…so 300-350 degrees is not what you want.  We preferably want to boil the potato and onion in a hot oil bath at about 220 – 250 degrees.  If your oil is too hot, keep in mind that the oil will drop by about 10 degrees or more as you add the cold onion and potato.  You may be confused about this process…it kind of defies most of the laws of cooking.  Boiling something in oil?  It sounds weird, but it is not about cooking the potatoes and onions as much as it is about infusing the onion and olive oil flavor into the potatoes, it is subtle…but it separates an authentic tortilla espanola from some of the quicker recipes out there.  As Emeril would say, "This is a food of love thing."  In this case, he would be right.  The boiling process is what takes the bland potatoes and makes them into the
  5. Slowly place handfuls of potato into the pan in a single layer.  Add salt and pepper to the oil.  Then place a thin layer of onion with a little more pepper and salt.  Keep repeating until all of the potato and onion is in the pan and pat with a rubber spatula so that all is submerged in the oil.  Don’t go heavy on the salt, as you will have salt between each of the 3-4 layers of potato and onion.
  6. Check the temperature and make sure you keep the mixture in the 220-250 degree range and boil until the potatoes are still firm, but you can stick a fork through them.  The onions should be completely cooked.  This is a slow process, it could take up to 15 minutes, so go ahead and keep an eye on the boiling process, but go ahead and start preparing the eggs in the next step so that they are ready.
  7. Add all ten eggs to a large bowl and whisk until fluffy.  Add a tiny bit more pepper and a pinch of salt again to this mixture.
  8. Once your potato / onion mixture is done, grab another bowl and place a colander in it.  Carefully pour the onion, potato and oil mixture into the collander and shake to strain.
  9. After removing most of the excess oil, slowly add small amounts of the potato mixture to the egg and stir.  A cup at a time would be preferable, stirring a few times between each cup of the potato.  Do NOT pour the potato mixture all in at once.  As your eggs are room temperature and your potato mixture is still at about 260 degrees, this will fry the egg.  Our purpose in slowly adding the mixture is to "temper" the egg without frying it.
  10. Once all the potato is mixed, let the egg mixture sit for 5-10 minutes to set up while you heat a 8-9" skillet with a tablespoon of oil or so (not too much though…I’ll explain later).  This time you will want the temperature about 5-7 or medium heat.
  11. Once your skillet is heated, slowly spoon the omlett mixture into the skillet and allow to cook slowly for about 7-10 minutes.
  12. Use a spatula to see if the sides of the omlett are starting to brown.  When they do…we are no approaching the hardest part of making this dish.  Since it is a full-sized omlett about 1 to 1.5" thick, you cannot flip it with a spatula…you will have to use a dish to invert the omlett out of the pan.
  13. Start by removing the skillet from the burner and placing a full-sized plate over it.
  14. Next, firmly hold the plate against the pan, with your palm in the center of it.
  15. In one brief motion, flip carefully but quickly so that the pan is now on top of the plate.  The omlett will now be upside down on the plate.  This is the tricky part.  Make sure you do this quickly and if there is a lot of oil in your pan, drain it off first, as the oil could burn you if you do not flip quickly enough.
  16. Place the skillet back on the stove and add a tiny bit more oil to the pan.
  17. Using the spatula, gently slide the half-set omlett back into the pan, so the unset top of the omlett is now face-down in the pan.
  18. Continue to cook for 5 minutes (roughly).
  19. To finish and fully set the omlett, repeat the flip process at least two more times.  Each time gets easier…don’t worry!
  20. When the omlett is brown on both sides, place on a serving platter.
  21. If you are having it for breakfast, serve warm.  If you are serving as an appetizer, cut into cubes and serve cold with a dry white wine.  I would probably serve with your favorite Pinot Grigio.  Avoid anything too fruity on the palate (like reislings) as it may overpower the subtle flavor of this traditional "Tapa".

The great part about this technique for making a full-sized omlett, is that you can make it with just about anything.  Try the potato one at least once though, as it is a remarkably simple, yet enjoyable dish.  If you are using a main ingredient that is less starchy though, make sure you do not boil in Olive Oil. This may sound a little bizarre at first glance, but I love to make mine sweet and spicy.

  • 1 Shallot Minced
  • 1 Medium Tart Apple (1/2 small cube, 1/2 minced or jullienne if you prefer)
  • 1/4 – 1/2 cup of celery
  • salt / pepper to taste
  • 3-4 eggs
  • 1/4 – 1/2 cup of cheddar cheese
  • thin slices of 2 sun-dried tomatoes (olive oil packed)
  • Your favorite (sweeter) hot sauce (to taste)
  1. Add the apple with celery and shallot to a 6-7" skillet over medium-low heat 3-4 with about a tablespoon of olive oil.  Add salt / pepper to taste.
  2. TIP: You may be wondering what variety to use.  I used to work at an apple orchard, so I am a little biased to using traditional cooking varieties like Macoun, Cortland or Ida Red.  However I occasionally mix it up with a slightly sweeter variety like Crispins (or Mutsu as the japanese would call them).  As I live in Florida now, and my choice of "good" apples is pretty limited, I usually use granny smith.
  3. Slowly sweat this mixture (cook slowly without browning anything) until the apples are cooked and the celery / shallot is translucent.  About half-way through the cooking process, add the sundried tomatoes and continue stiring the mixture occasionally for another 2-3 minutes.
  4. Next take a 2 cup glass measuring cup or a small bowl and whisk the 3-4 eggs together with the cheese and an additional pinch of salt and fresh ground pepper.
  5. TIP: Why a two cup glass measuring cup?  Honestly, it is easy to pour and it is just the right size :)
  6. Add hot sauce to the egg mixture (if your prefer).  I personally like Target’s brand "Archer Farms".  They have some gourmet sauces like a Key Lime Habanero hot sauce which goes quite well with this dish.  If you don’t like hot food though, feel free to leave that out…this dish is just as savory and delicious without it.
  7. Add this mixture to the apple, and mix so the ingredients in the pan are fully coated.  Whisk another egg up if you need it.
  8. Cook for 5-7 minutes until the bottom is brown and the omlett is set enough to flip.
  9. Using the technique described above, invert the omlett onto a plate and then slide back into the pan.
  10. Repeat flip twice to fully set and brown the omlett on both sides.
  11. Serve warm with extra hot sauce for a spicy breakfast guaranteed to jump start your day.

One thing to remember as well though, is that it is almost impossible to make a bad omlett!  Experiment and have fun with it…you might just surprise yourself and make something really good :) .

OpenID Critical Issues: User Experience (part one)

Posted on: April 16th, 2009 by Rabbit

The OpenID community has recognized that the User Experience (UX) is not acceptable. People from several points of interest have come together to discuss and share ideas to improve the experience. There is currently growing consensus around certain ideas that I feel is risky and other areas I feel there is a missed opportunity. Before I get to my point of disagreement with the community, I’ll highlight what I think we can all agree on.

Where We Agree …

Current Directed Identity UI implementations do not scale.

Directed Identity lets users specify an OpenID Provider (OP) as their OpenID URI without having to specify their actual OpenID URI upfront (ie: using “myspace.com” instead of “myspace.com/{user}”). This is a really great idea but it has led to a user-friendly yet un-scalable UI trend with provider buttons.

The web has already seen this concept with content sharing through third-party services. There are hundreds of services that users can share content through. The explosion of these sharing-capable services has led to ad-hoc interface “solutions” which ultimately aren’t very usable and don’t necessarily provide the user with tools that are relevant to their needs. Ironically, user-centric identity has the ability to resolve this issue for content sharing services. Unfortunately, the dilemma is shifted from one type of service to another which could further introduce confusion. I have already witnessed a case where a user was told they could login via Facebook Connect and mistakenly clicked on a “Share with Facebook” link because they saw the Facebook icon.

The bad news is there may be no direct solution to this problem. The good news is there may be indirect solutions by educating the user about OpenID, better introductory UX, and bringing identity to the browser (which I will elaborate on in future articles).

The UX needs a consistent look-and-feel and functional flow.

Modern web design philosophy dictates that a unique and memorable experience is highly desirable. Purple, Rock, Scissors employs this philosophy religiously through various look-and-feels. The important concept to grasp here is that the OpenID UX is an abstract idea just as headers, site navigation, and footers are abstract ideas. They may appear different and there may be radically experimental iterations of these ideas, but overall they follow the same principles (header is at the top and should contain the site name, site navigation should be available to every page and accurately depict page hierarchy, footers should contain extraneous information pertinent to the site).

Since OpenID (and other user-centric identity systems) are going to be a brand new concept to most users, innovation in look-and-feel should be kept to a minimum otherwise it will impede upon user acclimation rates. Fortunately, there seems to be a lot of agreement in this space within the community.

There are three areas within this space that need agreement: Login, Action Prompts, and Logout. The login look-and-feel is currently pathetic and wildly inconsistent. Action Prompts are any point the user is paused during the functional flow to make a decision and currently I have yet to see a single provider faithfully communicate to the user exactly what is going on. I’m well versed in user-centric identity and even I felt unsure exactly when I was about to share information from one domain to another (such as the portable contacts flow with Google). Typography and design elements must be bold and clear to ensure the user knows they are about to open their identity information up to a third party. Logout has yet to be a focus of UX discussions but there is disagreement on what “Logout” should mean. Does it mean logout of this site or does it mean logout of all sites? Whatever the answer may be, this information needs to be clearly communicated to the user.

These concepts may seem very basic, and they are, but you would be surprised just how much variable room exists even within these basics. This aspect of OpenID is very, very important and must be consistent across domains!

Where We Disagree …

I believe pop-ups are dangerous and intrusive.

Facebook Connect has provided the OpenID community with a fairly solid model for how to improve the UX. There are many things I absolutely love about the Facebook Connect UX. Unfortunately, the Facebook Connect UX was invented under assumptions that do not apply to OpenID and the community needs to carefully consider what those differences may be.

Modal dialogs are XHTML+CSS overlays that appear, stylistically, as windows on top of page content. When the user is presented a modal dialog, they are under the correct assumption that they are still dealing with the same site. The OpenID community is intending to recommend both modal dialogs and pop-up windows. This is dangerous behavior! Pop-ups are even suggested to take on a similar size and shape as their modal counterparts which makes things even worse! A little CSS-trickery can duplicate the pop-up window effect. We all know this, it’s already used by spammers to trick users. Why are we considering something even remotely similar to how websites trick users?

The OpenID community puzzles me on this issue. On the one hand, there is extreme pessimism toward the standard users’ ability to comprehend what OpenID is all about. On the other hand, they are suggesting we employ a tactic traditionally used by malicious and fraudulent phishing sites to trick standard users’ into providing credentials when they should not! We can’t have it both ways. Confusion will be our fault if we go forward with this idea. As a side note, I would also like to point out the pop-up approach is usually not very good for mobile devices but I’ll save that conversation when I address identity in the browser in a later post.

My recommendation is to present the user with modal dialogs only. If the user needs to be redirected to their provider for any reason, the user should be informed of this requirement and then either given a link or automatically redirected after a countdown. The link can open a new window if desired (which in my browser would open a new tab, far less intrusive than a pop-up). This will further encourage smart behavior on the users part to never supply credentials unless they are confident they are on their provider site.

I believe OpenID should NOT be hidden from the user.

We have what can be called a good problem. Directed identity for popular brands has been proven to work with impressive click-through rates. This revelation has inspired a lot of people to suggest OpenID should be pushed to the background. Even though I disagree with this, I do want to concede for a moment that all the arguments are very sound and follow good reasoning.

The problem I really have with this is that it is a missed opportunity. Researchers have discovered that displaying a popular brand on a button that says, “Use {brand} to login!” has been very well received by users. I’m not sure why this comes as a surprise. People have built an affinity with popular brands. They naturally gravitate towards what is familiar. We are passing up a perfect opportunity to use popular brands as a means to bootstrap the OpenID brand into familiarity.

The following brands are identity providers and this is how I would say I relate to them:

  • Google means search.
  • Yahoo! means web portal.
  • MySpace means social network.
  • AOL means chat room (sorry, AOL).

None of these brands mean “login” and the closest brand that comes to “identity” is probably MySpace. OpenID, however, can easily mean “login” to users. By always displaying the OpenID brand to users regardless of how they login, they will eventually learn to associate that brand with login mechanisms. Why is this mental association important? Because it means eventually the OpenID brand can stand on its own. Don’t see “Google” up there? No worries, you can type what you don’t see into this box that you’ve come to know as login mechanism.

I do not fault relying parties on this as much as I fault identity providers. In my opinion, it is the identity providers responsibility to let users know they have an OpenID. Create a standardized design like a drivers license looking box with an OpenID logo in it with their URI. Display it prominently on their account page or profile page. They don’t even need to immediately understand what OpenID is. Simply showing them something they feel they own (their URI) alongside the brand (the logo and the term “OpenID”) will start to build an association in their mind. This is important.

Most of the counter arguments to this will, in one form or another, be built upon an embedded pessimism toward users that I do not share. Sometimes talking to technical people leaves me with the impression that standard users probably put corks on their steak knives so they don’t mistakenly jab themselves in the eye when they’re hungry. Let’s give people the benefit of the doubt. E-mail addresses and URL’s are geeky too, remember? Typing “blah dot something dot com slash doodah dot wut” is not a natural human impulse but apparently a lot of us have figured out how to do that.

This is not the part of my post where I go on to explain how I caught my Mom copying and pasting an SQL injection attack on a website because it allowed her to force people to add her as a friend (although it’s a great story and I really, really want to). That’s not the point. This is geeky stuff. I’m just saying, it is possible to make OpenID easy to understand without having to hide it under a rock. Make the UX clean, clear, and include no surprises and people will adopt it.

We Have Germination!

Posted on: April 14th, 2009 by Zach

Today marked a milestone in my farming career, the first sprouts of a new garden! From what I can tell Shayne and I have the largest, most successful vegetable garden on the western side Uptown Apartments. Here’s a few shots:

My half of the garden

My half of the garden

I’m pretty sure these are tomatoes

Tomato sprouts

Either Peppers or Cilantro

Peppers or Cilantro