Web Development Tips

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.

Related posts

• Is Flash evil? No, but Flash-based sites can be a marketing nightmare. (1)
• “Make the Web site bright and shiny.” Bells, whistles and video are only cool if they help you tell your story. Choose carefully. (0)
• Would You Like to learn how to Earning A Living In During These Hard Times? (0)
• Which Affiliate Networks To Look Out For When Promoting. Interesting Things to Bear in Mind (0)
• Webdesign – The Info You Should Learn (0)