Don’t Force Your Preferences on Your Users

Thursday, October 08 2009 - user-experience

I recently started using Instapaper because the RSS reader I have on my phone lets me save articles to it for reading later, either on my phone or on my computer.  The first time that I go to use it on my computer, I was greeted with this:

Yes, I primarily use Internet Explorer; I’m not afraid to admit that.  Why do I use it?  Because of the major browsers (IE, FireFox and Chrome – no Safari is NOT a major browser), it provides the best overall combination of speed, reliability and yes, standards compliance (at least IE 8).  Chrome’s standards compliance is horrible right now, and FireFox is so incredibly slow to open the first time that I often give up and go to one of the other browsers and am halfway done with whatever I am trying to do by the time it opens.  I only ever open up FireFox when I absolutely need to use one of it’s plugins (which, admittedly make it worth keeping around). 

But anyways, that’s not really the point here.  The point is the message that Instapaper has decided to throw at IE users.  When I saw that, I was rather irritated.  And then, I was curious: how is this fairly basic app “severely degraded” in IE vs. FireFox.  I tried out Instapaper in both FireFox and Chrome, and I can tell you, there are differences.  I’ll show them to you right now:

Can you see the differences?  First, there’s no ugly yellow box telling me that I need to “upgrade” to something that to me is not an upgrade in any way.  Second, the action buttons on the right now have rounded corners and are next to each other instead of stacked.  That’s it.  Functionality-wise, all three browsers function exactly the same.  They all use Ajax (or not) for the same interactions in the same way.  I am really curious as to how these two formatting changes “severely degrade” the experience of using this web app.

Beyond the fact that the two differences here don’t matter in any way, there’s a couple of other great things about them.  First, the rounded corners only work because they are using non-standards compliant CSS - “-webkit-border-radius” and “-moz-border-radius”.  These are browser-specific implementations of a proposed CSS3 standard.  If these browsers were truly trying to be compliant, why wouldn’t they use the real CSS name for these properties?  As for the placement of the buttons, the only reason that they are stacked in IE is because Instapaper has decided to embed specific CSS into the page when the user is using IE, which forces it to display this way.  I saved the source from IE as HTML and loaded it in FireFox and Chrome, and this is what it looks like:

 

And likewise, I saved the HTML from FireFox and loaded in IE and this is what I got:

 

This shows me that the only real difference between the two browsers for this entire application is rounded corners, using browser-specific CSS.  What does this mean?  To me, this means that the folks at Instapaper have a bias against IE and are using their application as a soapbox to shout out against it, nothing more.  It also means that this is a company that will never see any of my money, while their competitor, Read It Later, who overall have a better product, even if it doesn’t integrate with the RSS reader I’m using, will definitely be getting my money.  I would have gladly paid Instapaper for additional functionality as well as just to support them, had they not insulted my personal choices on the first screen I came to once logging in.  I have a feeling that others feel the same way.

So, the question now is, what do you do if you truly do have functionality that requires one browser over another (at least when referring to the top two or three browsers)?  The best answer is to change your functionality so it works for all browsers equally.  I’m going to bet that most of the time, you will be able to come up with user experience nearly as good as what you initially had that will be better overall because it works for all users.  If you absolutely can’t do that for whatever reason, then all you really need to do is a little browser detection and make sure your solution degrades gracefully.  As long as your users can still do what they came to your site to do, it really isn’t going to matter if the bells and whistles aren’t identical in each browser.  Unless your users are like me, regularly using multiple different browsers in a given session, they will never know the difference.  And if they are like me, your users will probably understand that there are pluses and minuses to each browser, and your functionality may have to differ because of that.  Guess what?  Those proprietary rounded corners degrade just fine into square corners in IE.

The most important thing here is, there is absolutely no reason to tell your users that they need to change browsers, or even that there is a difference in what is presented on each browser.  If Instapaper hadn’t chosen to force that ugly yellow box on me, I would have never noticed the difference unless for some reason I decided to open the app in a different browser, I’d probably be very happy with them right now, and they’d also probably have my money.  Is your personal (or your company’s) bias really worth potential lost users and even worse, lost sales?