No Going Back: Flash Usability’s Worst Enemy
di Jed Wood
Pubblicato il 15 Novembre 2003
A few approaches on handling the browser’s back button
Of all the complaints and misconceptions that surround the usability of Macromedia
Flash sites, the one that seems to cause more headaches than anthing else is
the browser back button. In this article, I’ll discuss a few options for dealing
with the back button, including the advantages and disadvantages of each.
Method #1 - GET RID OF IT COMPLETELY
Using a little Javascript, you can have a "splash page," and launch a window with no tool bar. If there’s no back button to click- then the problem is solved, right? Well, not exactly…
Advantage- back button gone.
Disadvantage- users can still use keyboard or menu commands to go back, and going back will be to whatever site they were visiting before yours.
Disadvantage- users must rely on your navigation system to go back.
Disadvantage- "pop-up killers" are becoming more and more popular, making it impossible for users to even see your main site.
Recommendation- if you decide to use this method, make sure you have persistent, global navigation that is intuitive and clear. Also, don’t launch the window automatically- let the user click an "enter" button. This may allow you to get past some of the pop-up killers.
Method #2 - MAKE SURE THERE’S NOTHING TO GO BACK TO
The idea behind this is to leave the window controls in place, but make sure your site is the first to appear in the window, which leaves the back button disabled.
Advantage- users cannot go back, even using keyboard or menu commands.
Disadvantage- as with #1, users must rely on your navigation
system to go back.
Method #3 - CREATE A BACK BUTTON IN FLASH
Whether you are still using multiple frames in your Flash movies, or put all your actionscript on one frame (highly recommended), you can make an array of "pages visited," and attach a script to a button that will go back through that array. Macromedia has a short article with more details.
Advantage- you give users a the opportunity to navigate back through your site in a familiar manner.
Disadvantage- you still have to deal with the keyboard and menu "back" commands.
Recommendation- combine with #2 to avoid the keyboard and
menu "back" commands.
Method #4- USE TRICKY CODE AND HTML FRAMES
Robert Penner created some code a while back that allows for the back button to work in some browsers.
Advantage- in many browsers, the back button works as it should
Disadvantage- in some browsers, it just doesn’t work right.
Recommendation- One thing I love about Flash is knowing that once I get my code working correctly, I can count on it being virtually the same in every browser. Though I have much respect for Robert’s efforts, I personally don’t ever use this method.
Method #5- COMPROMISE: ACCEPT A PAGE REFRESH
A while back my brother-in-law asked me if I could make him a very simple site to support some eBay auctions where he sells kits for spot-welders. With little time and a small budget, I decided to throw it together in Flash. But there’s nothing complex about the site; no animations, no backend transactions, no fancy interactive controls. It seemed to me that users coming there would expect their back button to work as it normally should. After all- the site looks and feels just like a "normal" web site.
And that’s when it hit me. With a little help from some server-side code, I could use just one Flash .swf and one dynamic page, but get full back button functionality. In addition, bookmarking would like it would on any other HTML-only site.
There was just one compromise: I had to accept a page "refresh." But, since the page would simply be reloading the same .swf file, I figured most browsers would just pull it from cache and the reload would be very fast. NOTE: this whole system requires that you use Flash 6 (MX).
So here’s what I did-
1- Pick a server side language that you’re comfortable with.
My pick is PHP, but you could use ASP, JSP, CFM, Perl, whatever. You need to
know how to grab a single variable from the URL string using the "GET"
method. In the case of PHP, the code at the top of the page holding the .swf
looks like this:
<?php
$page = $_GET[‘page’];
?>
2- Name your page "index.php"
This of course allows this page to be the default when a user comes to the site.
3- Make your links and buttons in Flash call the same index.php page, but with
a variable attached.
This can be done in several ways. Here’s the simplest (in actionscript):
home_btn.onRelease = function() {
getURL("index.php?page=" + this._name);
}
4- Call the variable in the Flashvars property.
There’s a little known property in the PARAM and EMBED sections of your HTML
code that you use to hold a .swf file. It’s called Flashvars, and it can hold
a TON of data. In PHP, that would look like this (the important parts are italicized
and colored):
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="720" HEIGHT="500" hspace="0" vspace="0"
ALIGN="top" id="hobby">
<PARAM NAME=movie VALUE="hobby.swf">
<PARAM NAME=loop VALUE=false>
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=FLASHVARS VALUE="page=<? echo $page ?>">
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="hobby.swf" WIDTH="720" HEIGHT="500"
hspace="0" vspace="0" loop=false ALIGN="top" menu=false
quality=high bgcolor=#FFFFFF flashvars="page=<? echo $page ?>"
NAME="hobby"
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
5-Catch the variable in the swf.
Any variable listed in the "Flashvars" property are immediately available
on the _root level. There are several ways you can do this, but here’s what
I do. First, all my initial code runs, which creates the navigation buttons.
Then I simply call the variable, and say "whatever button this variable
belongs to, run the "onRelease" function for that button. For example
(in actionscript):
_root[_root.page].onRelease();
Pretty simple eh? We use the array access to pull the value from the "page" variable, and find the navigation button with the same name. But one last thing- we have to account for the variable being empty- which of course will happen when your users first come to your site.
6- If no value, then go "home"
Let’s add an "if" statement to the actionscript above and make it
a little smarter (in actionscript):
if (_root.page = = "") {
_root.home_btn.onRelease();
} else {
_root[_root.page].onRelease();
}
NOTE: when you test this piece of code from the Flash player, it won’t work right. That’s because instead of seeing the "page" variable as "", it sees it as NULL. If you want to see it work in both the tested Flash player AND the browser, we’ll have to add one more bit of code (in actionscript):
if ((_root.page = = "") || (_root.page = = null)){
_root.home_btn.onRelease();
} else {
_root[_root.page].onRelease();
}
And that’s it. If you’d like to see a simple example in action, check out that site I made for my brother-in-law.
So my current recommendation is this: if your Flash site is a complex application involving back-end data or complex interactive elements, use one of the first few methods and get rid of the back button. But if your Flash site is more like a "regular" web site, try my technique and let your users browse like they expect to- making bookmarks and using the back button. If you have a great technique for handling the back button that I haven’t listed here, or have any other Flash Usability related comments, suggestions, or questions, I’d love to hear from you: jed@usableflash.com.