Making Flash sites Usable

Making Flash sites Usable

Your final, revised Design Portfolio will be due
during the final exam period Monday, May 8th,
at 10:30. a.m. Be thinking about revising the five
websites in your Design Portfolio:

1) Portfolio page, 2) Web genre website, 3) Image website, 4) Flash Banner ad, and 5) Flash website

a). Basic elements of a webpage
b). Elements of a basic Flash Banner Ad
c). Elements of a Basic Flash website
d). Web Design Criteria for Final Design Portfolios

1.   Web Design Portfolio Site ( due Jan. 30)

2.      Web genre Site (due March 3 )

3.      Image Site (due March 24)

4.      Flash Banner ad (due April 21 )

5. Flash Site (Due May 8th)

1. Examples of Flash movies in Webpages

2..Students' Favorite Flash websites

3. TAM Certificate Program

The TAM Certificate
TAM Curriculum Courses
This Sewall Course, Digital Design, counts
for an "Invention and Practice" course
in the TAM certificate

4. Adding video to Flash movies

See my example of a simple Flash movie that
contains Mpeg video that I shot using my
digital camera: Flashmovie
Notice that I have put three movies in this
Flash movie.
I added the movies by first taking out the
sound that went with the movies. I want
to put the sound on another layer in
my Flash movie.
Notice that I can make these movies
symbols and movie clips and fully
integrate them into my Flash movie
However, Mpeg movies are very big. Be
careful about putting too long and too
big of a movie in your Flash movie.
When you add the Mpeg movie into the Flash
movie using the "File menu" and selecting
"import," Flash gives you the option to
reduce the quality and size of your movie
so that it won't make such a big file.

Notice that I made this movie an Mpeg movie
not a quicktime movie. You can run the movie
in Flash using quicktime, but this makes the
Flash movie a little clunky and dependent on
the Quicktime player.

4. Adding video files to Flash movies.

Use "mpeg" or quicktime "mov" files
See moviessm.html, moviesm1.html , movieslg1.html, and movieslg2.html
See California Soul
Make sure that you have the latest Flash Movie player and the latest Quicktime Movie player on your computer
In Flash, go to "File", then "Import" , and
then select "Import to Library" to import
movies into Flash.
Make sure you only use "mpeg" or "mov" files.
Flash uses the "Sorenson Spark" codec to
compress these movie files into Flash.
The difficulty of using movies is that they are
first compressed in order to be imported into
Flash, and then they are compressed again
when Flash makes the "Flash movie"-- the "swf"
file.
I would suggest putting the audio for these movies
that you insert into Flash on a separate layer. It
is easier to control the audio playback this way.
As more and more people have fast internet
connections, we will see increasing use of digitial
video movies in Flash and on the web.

4. Problems with using Flash alone to create websites

Macromedia: Flash Usability Tips
Usable Macromedia Flash: Myth no More
Flash: 99% Bad (2000)
Flazoom.com: Flash Usability Guide
Flazoom.com: Usability Tips for Design
Flash Usability: Where is Flash Going
Tom Wheeler: Flash Usability
Flash movies tend to be very big and take
longer to download.
Flash websites tend to be loud, fast, and very
dynamic. Many go to these sites for the
experience, not for the information in that site.
Can we create Flash websites that are both
entertaining and useful and informative?
What are the possible advantages of using
Flash tools to create websites?
Flash movies are helping to shift the ground of
the web. I sense that there will be an increasing
compromise between small, slow information-filled
websites and loud, fast, dynamic websites.
Web Designers working today in both Dreamweaver and Flash are helping to create the next generation of websites; sites that are both entertaining, dynamic, interactive, current, and information-filled.
Let's think about what are some basic
requirements that a Flash website must
still have to work as a useful website:

a. Current and easily updated

b. Easy to navigate and quickly find information

c. Several different levels of user interactivity
embedded in the structure of the site

d. Provide fresh, positive user experiences.

e. Entertaining but quickly downloads.

f. Provide users a choice of a Flash-only or
an Html-only experience.

g. Serves as a useful archive of information
for users.

h. Uses a consistent interface that users can go
to and quickly navigate to find what they want.

5. Requirements for Basic Flash movie Websites

See Hawaii Hilton Village as an example of a good
basic website.
Always offer two ways to enter the website,
either through a Flash movie or through HTML webpage.
Always use a "Pre-loader" if it takes more than
10 to 20 seconds to download the Flash movie.
Provide clear page titles and section headings.
Provide useful navigation buttons to help
the user navigate through the website.
Try to balance neat experiences, Flash bells and
whistles, and quick, useful information.
Be careful not to use Flash techniques just for the
sake of being cool. Balance fun and cool withfast and useful.
Make sure that your Flash movies fit into the
average size web browser window, which is
right now at 800 x 600.
Be very careful to not loop your Flash movies so
that good music and effects very quickly become
annoying and tiresome.

5. What is Web Usability?

6.Critics of using Flash to design websites

Flash: 99% Bad (2000)
Repent from Flash Sins (2000)
To Flash or not to Flash? (2000)
Flash and Web-based Applications (2002)

"The solution is also clear: Even if you have an advanced Flash application, don't tell users. Simply link to the application from your website, using a standard hypertext link. The more ordinary the application sounds and the more you present it as a solution to users' problems (rather than showing off your technological prowess), the more clicks you will get. Name the link something that clearly indicates what the application does. Avoid hype, and don't tell users that it's interactive or built in Flash. "
Jakob Nielsen, Flash and Web-based Applications (2002)

"So why the problem? Designers are so happy with their Flash applications that they over-promote them on Web pages. It's common for designers to link to a Flash application through a big colorful box of graphics that looks suspiciously like an advertisement. As we've seen in tests for many years now, Web users have developed a strong tendency to ignore anything that looks like an ad. This banner blindness serves users well when navigating traditional websites, because it lets them focus on the useful links and ignore the ads. Unfortunately, if the colorful promotion links to something useful, like a Flash application, users will never find it, because they simply won't read the box -- much less click it."

Jakob Nielsen, Flash and Web-based Applications (2002)

7. Making Flash Usable: Guidelines for using Flash

8. Flash Usability Books

Shockwave.com
QuickTime--Streaming Audio and Video
Macromedia Flash Showcase
FlashAnimation.net
Thinkmango.com
Paul Ingram Web Design