How to "force" users to upgrade their browser?

Question

I couldn't think of a better title for this question, but please don't jump to conclusions - I don't really want to point a gun at my users heads!

I have a site that works well with the modern browsers like IE9+, FF12+, or Chrome. Due to the lack of HTML5 support (specifically some canvas related issues) the site doesn't work in older browsers, like IE8, for example.

The site is a part of a prepaid service, the users are warned about these constrictions before they pay, and yet there still are users that buy the service while having these old browsers on their computers.

From one side to support those means to fully recreate the site in Flash or Java, for example. That means lots of work for a relatively small (up to 15%) percent of my target audience.

From the other side I don't want to "disappoint" them by bluntly stating "Your browser is too old", I want to give them an interesting feedback, visually and/or verbally, that will make them really want to upgrade. The best idea I come with is to show them the video of the working site, but it seems too heavy and boring.

Any suggestions? Thanks.

UPDATE:

It seems from a short user survey that I did, that users definitely prefer to install a plugin and not to upgrade. Therefore I am going to accept the Chrome Frame answer.

I want to thank you all for a very interesting discussion, I have learned a lot and got a lot of inspiration from it.

Answer 1

Updated Answer - March 2013
Since this answer was posted on November 2012, Google has discontinued this plugin. While it might still work as of today (March, 2014) there is no guarantee of it working in the future. As of January 2014, support for Chrome Frame is discontinued:

http://googlesystem.blogspot.com/2013/06/chrome-frame-discontinued.html

Given these factors we’ve decided to retire Chrome Frame, and will cease support and updates for the product in January 2014. If you are a developer with an app that points users to Chrome Frame, please prompt visitors to upgrade to a modern browser. You can learn more about these changes in our FAQ.

If you’re an IT administrator you can give your employees the full capabilities of a modern browser today, even if you depend on older technology to run certain web apps. Check out Chrome for Business coupled with Legacy Browser Support, which allows employees to switch seamlessly between Chrome and another browser. Chrome is secure, stable and speedy, and runs on all major desktop and mobile OSs. IT admins can also configure 100+ policies to make Chrome fit their needs.

The blog post points to Chrome for Business with support to automatically open specified web-pages in alternate browsers

https://www.google.com/intl/en/chrome/business/browser/lbs.html?utm_source=0613entblogchromeframe&utm_medium=blog

Original Answer
Key point that hasn't been mentioned: Some people CAN'T upgrade.

At work, I'm forced to IE8 (Upgraded from IE6 late last year, early this year).

Do what Basecamp does. Push IE 6/7/8 into Chrome-Frame :

You can't "Force" everyone to upgrade. Some users don't have the option. Give them options to use within their restrictions (Work Restrictions, lack of admin rights, etc.).

Work restrictions prevent upgrading certain applications. This app only works with IE8. That app crashes on Adobe 10+. XPSP3 breaks this. SQL Server patch #12345 breaks that. I heard recently that the main restriction to upgrading isn't convincing people. It's paying the bill to upgrade Foo to work with Shiny-New Bar.

(Granted, at work I have admin so I use Chrome. BUT I CAN tell other users to use IE8 + Chrome Frame, for those who can't/won't stray outside of "supported" boundaries.)

Chrome Frame FAQ

How can I enable Google Chrome Frame for my site?

You make your pages work with Google Chrome Frame by adding a single
tag, like this: <meta http-equiv="X-UA-Compatible" content="chrome=1">

Google Frame Installed + That tag = Chrome Engine used inside IE6-9. They keep IE6. You stop supporting IE6. Win-Win.

Answer 2

You want your users to use your service. Your users want to use the service but they need to invest first (i.e. time to upgrade their browser).

Ideas:

• First of all be nice and show an empathic message, e.g. like Apple does if you run a browser that's not supported by iCloud
• Tell them why it's worth investing the time (list benefits, preview what they can expect)
• Give them a little incentive (a voucher, maybe a few bucks off on their first purchase)

Edit: As mentioned by @Darq and @pMan below it would be better if such a screen would

• provide links to the corresponding browser download pages
• put even more empathy in the copy, along with a clear call to action

Another example:

Answer 3

You might want to briefly try explaining the value of upgrading, while promoting the action with positive language, and demoting the negative action with not exactly negative language, but just less positive.

You also need to provide information for those who are unable to upgrade (for example corporate restrictions may prevent use of anything except IE6), so that no visitors who see this page feel they are stuck at a dead end - always provide an exit route.

Below is a mock up that uses the language carefully to make the upgrade attractive, with the added value of improving the experience on other sites as well as yours. The big button appeals to the emotional impulse to want better, while the smaller button confirms acceptance of the fact that the website is not possible to view.

I'm not saying copy this page verbatim - it's just an example of the use of language, expression, and presentation of choices.

Answer 4

You could do what this GIANT Austrailian company did and charge an extra "tax" for old browsers in compensation for having to support them

Kogan.com

'It appears you or your system administrator has been in a coma for over 5 years and you are still using IE7.' It begins, before going on to break the news about the costs. 'To help make the internet a better place, you will be charged a 6.8% tax on your purchase from Kogan.com.'

Answer 5

How are you warning your users before the point of sale?
Some text along the lines of "Your current browser is not fully compatible for use with this site. To get the maximum productivity/effectiveness, one of these browsers is recommended" is the easiest/most common tactic, sounds like what you're doing.

There are a number of javascript-based overlays that will do this (for detecting older browsers, usually IE) and visually suggesting upgrading or using an alternative browser.
These can easily be customized to show a visual indication could also incorporate a video (as you suggested) or screenshots of how the "fully enabled" site would look in a more modern browser.
Personally I always look for screenshots before signing up for anything.

As long as they're warned before making a purchase (which you are doing), unfortunately there's a limit to how much warning you can give (assuming they'll read it), the more visual and "pretty" the more effective it's likely to be.
Perhaps even a checkbox that they understand said restrictions before purchase (only if they're using an unsupported browser)?
At the other extreme you could even prevent a purchase being made through an unsupported browser.

Answer 6

Redirect them to the scaled-up mobile-version of the website and display a heading on top, saying they can use the full-version when they decide to upgrade their browser.

I think this is better than outright refusing to serve them as bounce-rate when met with a "brick-wall" (upgrade your browser to proceed) will be far higher.

Scaled-up, mobile web-sites don't necessarily look bad. Ones built with JQuery Mobile for instance scale up quite well. (Scaling up: Example)

Answer 7

How does your site work with a text only browser? How does it appear to people using screen readers? If your response is that it doesn't work, you may be in contravention of disabilities legislation in your jurisdiction. When pushing the technological boundaries, you have a number of issues to deal with including this. Even for user who are capable of upgrading you have created a barrier to entry. As other have noted, this may not be a good business decision.

There have been a number of suggestions on how to get someone to upgrade their browser. At least you are on right direction on the upgrade. Unfortunately for users in corporate environments, they may be unable to upgrade because they have critical software tied to an older browser version. Please build you version check so that users can use any browser release after the earliest supported version. Corporate users may not have the privileges to up upgrade their browser, even if it would not break anything they can.

I would seriously consider a graceful downgrade path for users on less capable browsers. This may be more work, but early adopters will face this kind of issue. At this point requiring HTML5 for core functionality may not be a good design idea.

This may be similar to problems which where encountered when Flash was new. One corporate site I worked with adopted Flash for their front page. This at a time when corporate policy prevented use of Flash on corporate equipment. From browsers which were compliant with the corporate policy, users were presented with a plain white screen. If you noticed and paged down enough pages, there was a notice in very small font at the bottom right corner stating "This site require Flash ....".

Answer 8

One thing to ask is if you can do any part of the process for them? BJ Frogg gave his family envelopes with his address already written on them and asked his family to write him while he was away at school. Just completing part of the process motivated them to start mailing him frequently.

Additionally, constrain your users from subscribing to the service if they don't have the proper browser. Don't just warn them. Save yourself money in the long run by building brand value and not having to play technical support.

Answer 9

Answering a question with a question: Will your site work at all (as in provide any sort of value) with browsers that don't have full support for the HTML5 features you use?

If so, show users placeholder panels for content they're missing. This is both "carrot" and "stick"; they know they're not getting the full experience and value of what they're paying for because things are missing, and you're telling them exactly what they're missing in the placeholders, so if they really want it, they'll push for better browsers.

If not, then show your users a friendly splash page like Roger's, or direct them to the mobile site as Cthulhu advises. Since they're paying you for the site, bounce rate isn't quite as big a concern; you got your money, and if they won't agree to the TOS (you do have a TOS agreement stating that only HTML5 browsers are supported, RIGHT?) then it's on them. You've already said it's a huge backward step cost-benefits wise to try to support older browsers.

Answer 10

While I'm all for the other answers encouraging users to switch browsers, I think as UXers we should do our best to support users who are unable or unwilling to change browsers. Since for us the main problem is that the user is not permitted to upgrade their browser due to legacy software compatibility, we can't require that of our users (and users aren't permitted to use Chrome Frame by policy).

Since your issue is with <canvas> specifically, you can probably retain support fairly easily in older versions of IE: simply fall back on Google's ExplorerCanvas. It basically converts all <canvas> code to IE-supported VML instead. The project is quite old, but that's because IE 9 and 10 support <canvas> directly.

You also mention HTML5 in passing; if you're relying on any of the newer block-level elements, you can very easily get older IEs to support them using html5shiv.

Answer 11

First I like the idea about making video, but it's not boring, you can make a video of 30 sec showing the new features if he make an upgrade or divide this 30 sec on features number so if you have 6 features make 6 sec for every one and if you don't have these features make new feature and make simple for you ;)

Or you can check the version of the browser if it updated display the normal page if not, display a little bar in the top to tell the user that he should upgrade