Cool

A few weeks back, in Is Flash evil? No, but Flash-based sites can be a marketing nightmare, I discussed some of the potential problems Flash-based sites can create in regard to search optimization and accessibility. Today I'd like to continue the discussion with a focus on usability. Before I start discussing examples, I do want to make a few things clear.

Not every Flash-based site suffers from every problem I'll address. There are many very talented designers who are doing interesting things with Flash, while also working to keep usability in mind. This article isn't for them. It's for the designers, either new to Flash, or less well-versed in HTML, usability and accessibility who may not realize these problems could be lurking on their sites.

Also, if you are a designer who is producing Flash based-sites that overcome these challenges, please feel free to share your tips and examples with us in the comments below.

The Flash user experience: don't let design interfere with usability

Flash has some cool features. It let's us control typography, offer interactivity, make things move and is scalable. These features are all quite handy, but they also provide us with opportunities to confuse and annoy our site visitors. To illustrate this I've included some examples of typical Flash problems in my sample sites, Angst Space and Shapes.

Note: I found many real world examples I could have used for this article, but rather than publicly criticizing the designers—by pointing out that site X is really cool, but broken—I thought it would be more tactful to create my own samples.

1. Introductory animation.

Many sites, even HTML sites will begin with some sort of Flash splash page. This could include an animation, video, company motto, etc. Hopefully it also includes a "skip intro" button because in most cases these intro pages take time to load and don't offer informative content.

Back in 2002 when I took a Flash class at the Cleveland Institute of Art, I too succumbed and made Flash intro pages. I did a site for a concert series called Thursdays in the Park, and the intro page had moving colored dots (from the event logo) and included the names of the bands which fell into a list one by one. The intro then directed users to the main static page.

I built the page that way because I wanted an excuse to put my new Flash skills to work, but the animation didn't offer any value. I thought it looked cool because things moved, but most users, especially those under 30 who grew up with the Internet are not impressed by shiny moving objects. They've seen it all before. All they want is to get the information they need as quickly and as appropriately as possible. All I accomplished with the page was to show that I knew Flash.

The Shapes site includes a short animation of shapes morphing into one another. It gives the user a visual clue that the site is about shapes but animation wasn't required to convey that idea. Mostly it's just shapes moving about for the sake of movement.

If your subject requires animation to illustrate the topic, then it makes total sense to incorporate motion into the project. But if you're sitting at your computer, scratching your head as you ponder what what you might animate to introduce topic X, then you probably don't need animation at all.

Graphical navigation

Designers are often looking for new ways to present navigation beyond the traditional menuing system. This can be fun, but if users don't figure out the system immediately they may leave before they get a chance to see your content. Our attempts to be clever may instead hinder the visitor experience.

I once saw a site that had a row of colored squares under the primary navigation menu. It also had a left side menu, so I thought the squares were just decorative. Then I happened to mouse over one. Lo and behold it opened up another secondary menu (different from the side menu). I only discovered this hidden menu because I was moving my mouse around the page. I suspect many people never saw it and were stuck grumbling at the page trying to figure out how to find what they were looking for.

Traditional menus are boring, but they're familiar. Site visitors are used to the way they work. If you're targeting an audience that is more likely to go mouse-exploring, a unique navigation system may be just fine. But if your audience is more mainstream, don't hide or camouflage the menus, they may not know where to look. Offering a familiar interface can help make sure you don't confuse your visitors.

In the Shapes and Angst Space sites I used graphic elements, such as shapes, photographs and icons for navigation. I didn't put a lot of content on these sites, so most of you probably figured it out, but some of the sites I've seen in the wild are much more confusing.

The Shapes site also includes sections of hidden content that designers sometimes include on Flash sites. If you mouse over things or click in places that don't seem obviously clickable you'll discover an easter egg and extra bits of information. That's fine for Shapes, because none of this content is important. But if I were promoting a degree program or trying to sell widgets I'd want to make such information easier to find.

When designing for the real world, I find it is safer to err on the side of simplicity. If I want to make sure that all visitors can navigate to X and Y and can easily read B and C, I'll offer text-based options for familiarity and accessibility.

Sizing and scrolling

As mentioned, Flash is scalable. I can make a .swf file of any size then publish it large in one place and small in another. The only things that don't scale well will be raster images (such as photos) included in the file and some type elements (depending on your settings.)

Alas, there seems to be a secret cabal of designers who create Flash sites and embed them in their HTML at sizes, that probably look superb on a 24" cinema display, but don't fit in the browser window on my Mac. And for some reason these sites don't offer scrollbars. I saw one last week that did this. I could navigate using the links in the top menu, but I couldn't read the text on the bottom of the pages or view the footer. I went to the contact page to try to let them know about the problem…but the submit button for the form was below the fold. Since I couldn't scroll down to it, I couldn't press it, and they never got my message.

This is a troubling issue because if visitors can't easily navigate, or even read all of the content on a site, then they will leave. This site was for a Web design firm, so they're potentially losing clients due to this one, easily fixable issue.

As an example, take a look at Angst Space at full size. When viewed on my computer I can see just the top part of the photo of the mausoleums. I can click on those and get to another page, but then I can't read the full text on the poetry page, or interact with the images on the photos page.

I come across such sites at least once a month, but I find it mystifying, because this situation is quite easily prevented. I use swfobject 2.0 to embed Flash .swf files (and videos, etc.), and when I use it normally, as I did for the medium-size version of Angst Shape, the scrollbars are readily available whether you need them or not—just as they would be in any normal page.

To remove the scrollbar for the full-sized example of Angst Space I actually had to add overflow:hidden to the body element in the CSS file. I don't know if the sites I find are disabling scrolling on purpose or if it's a result of using invalid code to embed their .swf files, but if you're building sites in Flash, be sure to test them on a variety of computers to make sure you're visitors aren't experiencing the same problem.

Flash and the Mobile Web

As I was writing this I sent out a Tweet asking if anyone had any Flash pet peeves they thought I should include. Interestingly the first two replies related to hand-held devices. Given the wide array of mobile devices and their respective browser platforms it is still a challenge to create sites that work well on a wide variety of gadgets, but Flash adds to this challenge.

1. As interactive strategist, Kati Davis (@katidavis) points out, Flash doesn't work on an iPhone. And it doesn't look like it will anytime soon. If your audience includes iPhone and iPod Touch users, you will want to provide some way for them to access alternative content. I see more and more friends browsing sites via iPhone now that they never would have tried to view on mobile phones a few years ago.

Developers used to focus on providing mobile support for specific types of sites: event schedules, news, directions, store hours, etc. But now people could be browsing anything from Amazon to your blog on their iPhone, so it makes sense to keep these users in mind.

2. Mobile devices that support Flash are still small hand-held gadgets with tiny screens. Designer Alan Houser (@alanhouser) said, "I'd say there will be a ton of issues when using flash content on mobile devices. Literal fat-finger issues." This is a rather important point. If a site like Angst Space was reduced to fit a mobile device that supported it, the icons and thumbnails that users click would be super tiny. Thus it would be tricky to click on such items using a touch screen device.

Admittedly I don't know that much about Flash and the mobile Web, but Adobe does. They've created Flash Lite specifically to generate content for mobile devices and are working with manufacturers to implement this on many different devices. If you're a Flash designer who wishes to offer support for mobile devices, visit Adobe's Mobile and Devices Development Center to learn more.

Flash Usability Conclusions

The issues I've addressed today seem rather obvious and simple, yet I still come across many Web sites don't address these problems. As Web designers/developers we're creating communications tools. We're trying to convey some message to our audience so that they can respond by buying our products, applying to our universities, reading our blogs or whatever else we hope that they will do. If that's our goal, then we just need to put the user foremost in our mind when we design our sites. Whether we're developing in HTML, Flash, Silverlight or something else we'll all be better served if we make sites that are easy for our visitors to use, read and navigate.

Flash and Usability Resources

• Adobe Flash Developer Center: Testing and Usability
• Alertbox: Jakob Nielsen's Newsletter on Web Usability
• Flash Resources Listing (Univ. of Minnesota, Duluth)
• Usability experts are from Mars, graphic designers are from Venus (old but interesting)
• 50 Beautiful Flash Web sites - Some of these sites are astoundingly cool to look at, yet some also have usability issues.

 Email This Post