Join Robert Hoekman, Jr. for an in-depth discussion in this video How Flash applications differ from HTML, part of Flash User Experience Best Practices.
- View Offline
>> In this section I'd like to discuss for a few minutes how Flash applications actually differ from more traditional HTML applications. We've all been using the web for quite a while now and we've all seen how HTML applications act and how Flash applications might act and hopefully we've seen some of the better examples of that, like maybe the Broadmore Hotel Reservation system, which actually I'm going to show you in a moment. Or maybe on the HTML end of things, maybe we've all used Amazon.com's one click purchase system.
But generally speaking web based applications are spanned across multiple pages. For example a shopping cart. A shopping cart, you might start with choosing, say again with the book store scenario, choosing a book and then the next step would be to go to start the checkout process and in the checkout process you'd have to fill in maybe your contact information and on the next page you'd have to fill out your shipping information and on the next page you'd have to choose your shipping method and once that total all gets summed up then you'd have to fill in your credit card information and then on the next page you'd confirm everything and on the next page you'd get a little thank you message saying that you'll be sent an email confirmation.
So there are obviously quite a few steps in HTML based web applications. Another thing that is generally true with HTML apps is that user sessions can expire. At some point you could be going through that HTML web application and hit the back button and find out that your session has expired and find out that something has gone wrong and that you simply have to start over. And another thing that is always true of HTML web based applications or any traditional HTML site when you're flipping from one page to another, where you're going through a paging type system, this has actually been demonstrated in usability studies, is that there's actually a moment of stress in the user's mind when you're switching from one page to another, because say you're on a website and there's a header, there's a bunch of buttons up at the top that are sort of the persistent navigation for all the sort of global sections of the website, there's another set of navigation for just the section that you're in, there's a whole content area with the body for that page, when you click any one of those links just to go to another page, every single thing that you're staring at disappears and the page actually whites out completely and the best that you can hope for is that most of those elements are again going to display when you hit the next page, only you're going to see new content this time around.
So but there's actually a moment of increased stress in your mind when that happens, the page blanks out, and just for a split second, whether it's a half a second, because you've gotta really great internet connection, or whether it's 30 seconds because you're using dial up in a hotel somewhere, the best that you can hope for is, it's called the click and hope approach, and basically you click and hope that that link takes you where you think it's gonna take you and that the page actually displays. In Flash applications, however, they differ quite a bit.
In Flash you can actually consolidate entire web applications into a single screen interface and you can do that by using various US widgets or components, such things like an accordion component, which I'll be talking about later on in the course. Another thing that you can do is sort of just arrange things so that data can be pulled and retrieved from the server and sent back to the server without actually having to switch over to a new HTML page or without having to completely change the state of the Flash application.
You can actually consolidate all those screens into a single screen. And another thing Flash does very well is retain its state offline. Say for example you're going through a shopping cart and you're sitting in the hotel lobby and you're on your laptop using the hotel's WiFi connection, wireless access, and your WiFi connection drops when you're in the middle of it, with Flash you don't actually have to start over because all the information that was loaded into Flash and the current state of the application in Flash is actually stored, it's maintained, so if your WiFi connection then comes back a couple of minutes later, if you can manage to get that back, you haven't actually lost anything, you don't have to start your application process over again, you can just continue from where you left off and it will synchronize with it's next event whether it's sending or pulling data from the server.
Another thing, another major benefit to using Flash for web applications is that it's much easier to maintain context. Like I said, with the HTML application, there's actually that moment of stress where the page wipes out because you were looking at a header and some navigation and some other navigation and then the body of the page and it all actually disappears, the next page that you land on might look completely different and it's very easy on a website to get lost, to just sort of lose yourself in the site map and lose your place, you can't really tell where you are any more, you can't really tell if the page you're on directly relates to the page that you were last on and if this is where you're supposed to be and with Flash applications, depending on how they're designed, you can maintain that user context a little bit better.
So I do have a couple of examples of this. The first example is gonna be the Hermosa Hotel reservation system. The Hermosa is a historic hotel the Historic Hotels of America are recommending and this is their reservation page. When you get to the Hermosa's reservation page you find all the usual things that you'd expect to find on a reservation page, such as when are you going to be arriving, let's say November tenth and what I find interesting is actually the departure actually auto adjusts based on the number of nights that you've selected.
If I change this to three nights then this number changes from 11 to 13, so now I'm checking in on the tenth and departing on the thirteenth. So right underneath that however, is this button that says check availability. So now, at this point, we don't even know if the hotel room is available, if there is a hotel room available for those nights. So we'd need to click that button and find out what happens. But before we even do that, I want you to look down here towards the bottom and just consider for a moment what these two calendar widgets might do.
There doesn't seem to be any clear explanation as to how they work. There doesn't seem to be any instructions and it's generally just a click and hope sort of situation. If I click 14, what's going to happen? Oh, it seems that what happens is that your arrival date changes up here. So now they're actually offering you two different ways on the same page to adjust the identical information. I think this is actually kind of unnecessary because I think the drop down was pretty clear to begin with or if the calendar was designed a little bit more simply and maybe there was some context that you could tell how to easily use it that might be a better option.
I'd say choose one or the other. I'd say using both isn't really necessary. But what happens when we hit the check availability button? As soon as this loads here, we'll see. So what we find out is that these rooms are actually available. Arrival date, departure date, click on rate type for rate details. Okay, so let's say we want the Rancho room. It tells me that the room is, in fact, available and the next thing that we need to do is either log in, if you already have an account, or you can fill out all this form information, your first name, your middle initial, your last name, your home address.
This is one of those things where forms can be a little interesting, because why do they need your middle initial? I mean, I can understand if that was part of your credit card, but they don't actually need that to make your room reservation, so in this case, they're actually asking you for information that they don't actually need. They're not going to use your middle initial for anything. But the other thing that I've found on quite a few websites lately is the need to enter your email address, retype your email address, select a password and then retype your password. You actually have to do both of those things twice.
So doing all these things can be kind of cumbersome and as you can see, the form is rather long, there are quite a lot of fields on this page and you simply have to go through just a whole bunch of options in order to get your hotel booked. Now let's compare that to the Broadmore Hotel. The Broadmore Hotel, their reservation system is built entirely in Flash. It's a rich internet application. The way that theirs is laid out, they've got these three sort of pod areas. And in the first pod is the calendar widget.
As you can tell from the legend down here, it basically says that if it's white, then it's an unavailable date, if it's dark, it's a selected date, if it's a date you've selected, if it's a lighter color, then that means that day is actually available. So let's try to book the same days. As we can see, white means the hotel is actually booked for that night. So let's try to book it for November twelfth and then try to leave on November fourteenth.
So now as you can see, those three dates are not displayed in that darker color and over in the next pod the information all automatically updated. We can see the room rates for any one of the rooms right there, we can see that the Superior room is not available, but the classic, deluxe, elite, premier and suite actually are all available. So let's try the classic, maybe I'm interested in that one. Choose the classic. Here in just a moment it's gonna show me a picture of the classic suite, so now I actually know what the room looks like, I know what it is that I'm buying.
And once that's done, I can simply go over to the third pod here and start typing in my credit card information and such and complete that form and ultimately hit the final reservation button down at the end and I've managed to get through the entire process of completing this application on one screen. And that is one of the ways that a Flash application could actually help a lot when it comes to consolidating screen space and improving the user experience. This is much more intuitive, you maintain context the entire time that you're on the page and it's generally much simpler to deal with.
Now another example of how HTML differs from Flash is in a simple contact form. This is a contact form from a friend of mine's website, thebigdark.com, and basically he just asks a few basic things that you'd expect to find in a typical contact form, your name, your email address, basically the type of inquiry that you are sending in, whether it's a client inquiry or just a comment on something he said on his blog, and your email subject and then your message. Now if I fill all this out and then refresh the page, or maybe go to another website and then come back to this one and wanna fill this out again, the browser isn't actually gonna remember any of my information, so I'm gonna have to type in my full name again, I'm gonna have to type in my email address again, I'm gonna have to choose everything again basically and send the message all from scratch.
Whereas in the contact page, for example, on rhjr.net, this is actually my website, I build the contact form in flash and one of the things you can do here is spell very badly and make all sorts of typos and then correct yourself. So what I'll do is fill in my information, I'm Robert Hoekman, Jr., I am Robert at rhjr.net and I'm just gonna say this is a test email from lynda.com and then I'm gonna send it.
So now what happens, if I go back to this page, my first name and my email address have actually been retained for me. I set this up using shared objects, which I'm actually going to discuss in another movie later on in the course, but the information that you can save from the user with Flash, you can actually retain that and pull it up and show it to them again. So say going back to the Hermosa Hotel reservation, if they had the ability to remember your first name, middle initial, last name, say you have an account, they're actually requiring an account to do that, but on something as simple as this contact form, I'm able to just pull up that information again so that you can go to this particular contact page a hundred time and every time your name and email address is gonna show up there and you're never gonna have to type that information again.
So ultimately, what I'm trying to demonstrate here is that we can learn a lot of lessons from existing sites, whether they're built in Flash or in HTML. The rest of this course examines all kinds of user experiences and how they can either be improved with Flash or how Flash experiences can be improved to more closely resemble traditional applications.
Please note that while this training title is relevant regardless of which version of Flash you are using, if you wish to follow along with the exercise files, you will need Flash 8 to open the files.