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.

Is it a problem of discovery (i.e. users don't care about their browser version, and expect you to guide them though the process) or a problem of affection ("you can pry IE6 from my dead cold hands")? The first calls for "Upgrade your browser now" links instead of "too old", the second for directed acceleration of blunt objects.
–
peterchenNov 20 '12 at 8:40

@Rob It's a decent browser, it just gets hate because of the IE legacy. Sure, it's not perfect, but neither are any of the browers. Firefox drinks memory like no tomorrow and chrome has some privacy concerns. Provided the browser is up-to-date then that is all that should be expected of users, regardless of what brand the browser belongs to.
–
JonW♦Nov 20 '12 at 16:07

8

@JonW Firefox does not "drink memory like they're no tomorrow". Despite the opinion of the internet echo-chamber, Firefox uses substantially less memory than all of the competition, and has for some time. Firefox does use a lot of memory for caching (i.e. speed), but it listens for low-memory events and drops caches as necessary to keep other programs running well.
–
Brendan LongNov 20 '12 at 17:51

5

I think that given the spread of mobile devices, any message that assumes the user is on a desktop, e.g. "please click to download one of these browsers" is problematic.
–
e100Nov 21 '12 at 11:20

11 Answers
11

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:

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

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.)

Chromeframe is a good suggestion, provided the user is able to install it. I'd love if this was just 'what we do now' with legacy browsers, but sadly I don't think it is well known enough among users (and not sure how many sites support it too).
–
JonW♦Nov 20 '12 at 17:00

2

@JonW Well the key is that support for it is adding an extension and a tag. Can someone do it? Depends on IT backing and Web Dev backing. But the ability to support IE6-9 with two simple steps can't be passed up.
–
WernerCDNov 20 '12 at 17:18

2

The Chrome Frame install is actually seamless as a non-admin user. If you work somewhere where they've specifically blocked it, it really needs to go on the long list of IT management-induced overhead and escalated up the ladder.
–
Chris AdamsNov 20 '12 at 22:43

1

Just a little extension to the original note about chrome frame: <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"><![endif]--> should be the whole meta tag incl. wrappers and fallback for IE edge.
–
kaiserDec 10 '12 at 10:50

Definitely agree with showing empathy in the form of an emotional message. However I would lead with the call to action "Please upgrade your browser.", or similar, rather than Apple's "not supported" message. The latter doesn't immediately suggest a solution until the sub-text is read, which on an error page might be missed.
–
DarqNov 20 '12 at 10:08

Oh please don't give them incentives. That's not fair on the rest of us who are already using modern tools!
–
Lightness Races in OrbitNov 21 '12 at 11:47

2

It would be nice if these pages actually provided at least a little bit of an indication of how each browser was different - i.e. offering information for an informed choice, rather than an arbitrary choice, or one based only on brand recognition... Icons don't usually give much else away.
–
naught101Nov 21 '12 at 13:13

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.

Who selected the font of "enjoyment" and "much improved"?
–
Marjan VenemaNov 20 '12 at 12:07

1

Both :-) I like it as a script face, but somehow the script feels a bit out of place between all the sans-serif.
–
Marjan VenemaNov 20 '12 at 12:24

2

@MarjanVenema Good! I like it as a typeface too - and I use it precisely to make it look out of place with the rest. So you might look at this page and read "Enjoyment...much improved...yes hit that button - whatever it does!" ;-)
–
Roger AttrillNov 20 '12 at 12:28

8

That font makes me want a can of Coca-Cola for some reason.
–
JonW♦Nov 20 '12 at 13:54

9

That's a UX guy for you; worried about the kerning of fonts on an image posted on a site where people answer questions for free. You're lucky to get cropped screenshots or MS Paint if I ever need to post an image to explain...
–
KeithSNov 20 '12 at 16:44

'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.'

Although that was of course just a publicity stunt rather than a genuine solution to the problem.
–
Matt ObeeNov 20 '12 at 15:05

4

@MattObee publicity stunt in part, but they're still going with it. They even got blocked by bing.com a few weeks after announcing this 'tax'. Although I'm sure that is just a coincidence.
–
JonW♦Nov 20 '12 at 15:28

4

This might work better if it was inverted. I reckon even if you gave people 1-2% off a purchase if they has an up-to-date browser, you'd get a lot of upgrades. And it wouldn't piss anyone off.
–
naught101Nov 21 '12 at 13:17

2

@Jameo: No, I'm saying you don't upgrade your washing machine every 3 years, yet for browsers 2 months seems to be considered an eternity by the major vendors. Of course the curve for tech does need to be faster (security being the major reason), but... "using browsers 3+ years old is unacceptable" seems ridiculous to me.
–
Lightness Races in OrbitNov 21 '12 at 14:25

2

I think the Canvas spec was released in 2005. That was 7 years ago, admittedly some time needs to go into implementing it, but if a user chooses a browser that is especially slow to adopt standards, and then doesn't make a good effort to keep up with the latest versions, they shouldn't have a reasonable expectation of the web working for them
–
JeffSNov 21 '12 at 17:36

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.

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 ....".

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.

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.

My problem is that they are paying for it at another site ( kind of an umbrella site for quite a few services), which doesn't want to cooperate on this issue.
–
Flot2011Nov 20 '12 at 12:47

1

It seems rather sad that BJ Frogg felt he needed to essentially manipulate his family into maintaining contact with them. Arguably, something was wrong there.
–
Lightness Races in OrbitNov 21 '12 at 11:51

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.

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