Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

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

  1. BMW website
  2. Hilton Hawaii Village
  3. Colorado.com
  4. Dell.com
  5. Nick Hess: Keane Creative
  6. Macromedia Flash Gallery

2..Students' Favorite Flash websites

  1. Macromedia Flash Gallery

  2. California Soul

  3. Business Power: Flash Showcase

  4. TheNorthFace.com

  5. Drive the Mars Rover

  6. Bacardi.com

  7. PeelPub.com

  8. ByMarkdowntown.com

  9. HomeStarRunner.com

  10. CatieCurtis.com

  11. Macrocosmetics.com

  12. Courvoiser.com

  13. Hennessy Cognac.com

  14. Moet.com

3. TAM Certificate Program

  1. The TAM Certificate

  2. TAM Curriculum Courses

  3. This Sewall Course, Digital Design, counts
    for an "Invention and Practice" course
    in the TAM certificate

4. Adding video to Flash movies

  1. See my example of a simple Flash movie that
    contains Mpeg video that I shot using my
    digital camera: Flashmovie

  2. Notice that I have put three movies in this
    Flash movie.

  3. 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.

  4. Notice that I can make these movies
    symbols and movie clips and fully
    integrate them into my Flash movie

  5. However, Mpeg movies are very big. Be
    careful about putting too long and too
    big of a movie in your Flash movie.

  6. 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.

  1. Use "mpeg" or quicktime "mov" files

  2. See moviessm.html, moviesm1.html , movieslg1.html, and movieslg2.html

  3. See California Soul

  4. Make sure that you have the latest Flash Movie player and the latest Quicktime Movie player on your computer

  5. In Flash, go to "File", then "Import" , and
    then select "Import to Library" to import
    movies into Flash.

  6. Make sure you only use "mpeg" or "mov" files.

  7. Flash uses the "Sorenson Spark" codec to
    compress these movie files into Flash.

  8. 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.

  9. 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.

  10. 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

  1. Macromedia: Flash Usability Tips

  2. Usable Macromedia Flash: Myth no More

  3. Flash: 99% Bad (2000)

  4. Flazoom.com: Flash Usability Guide

  5. Flazoom.com: Usability Tips for Design

  6. Flash Usability: Where is Flash Going

  7. Tom Wheeler: Flash Usability

  8. Flash movies tend to be very big and take
    longer to download.

  9. 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.

  10. Can we create Flash websites that are both
    entertaining and useful and informative?

  11. What are the possible advantages of using
    Flash tools to create websites?

  12. 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.

  13. 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.

  14. 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

  1. See Hawaii Hilton Village as an example of a good
    basic website.


  2. Always offer two ways to enter the website,
    either through a Flash movie or through HTML webpage.

  3. Always use a "Pre-loader" if it takes more than
    10 to 20 seconds to download the Flash movie.

  4. Provide clear page titles and section headings.

  5. Provide useful navigation buttons to help
    the user navigate through the website.

  6. Try to balance neat experiences, Flash bells and
    whistles, and quick, useful information.

  7. Be careful not to use Flash techniques just for the
    sake of being cool. Balance fun and cool withfast and useful.

  8. Make sure that your Flash movies fit into the
    average size web browser window, which is
    right now at 800 x 600.

  9. 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?

  1. Web Usability

  2. The Usable Web

  3. Jakob Nielsen's UseIt.com

  4. Are Web Users Stupid?

  5. The Church of Usability

6.Critics of using Flash to design websites

  1. Flash: 99% Bad (2000)

  2. Repent from Flash Sins (2000)

  3. To Flash or not to Flash? (2000)

  4. 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

  1. Macromedia Flash Usabilty Tips
  2. Macromedia Flash Usability
  3. Flash Usability Examples
  4. Macromedia's top 10 Usabilty tips for Flash sites
  5. Developing User-Friendly Flash sites
  6. Making Flash Accessible
  7. Create a Usable Flash site
  8. Introduction to Flash Usability
  9. Making Flash sites Accessible
  10. Creating User-Friendly Flash content
  11. Flash Interface Usability

8. Flash Usability Books

  1. Flash Usability and Interface Design
  2. The Flash Usability Guide
  3. Flash: 99% Good
  4. Flash Usability: Guidelines for Functionality
  5. Designing Web Usability
  6. Don't Make me Think

  1. Flashkit.com
  2. Hotscripts: Flash FLAs
  3. Free Flash Intros: FLAs
  4. Advanced Scripts: Flash FLAs
  5. Macromedia Flash Support Center
  6. Macromedia Flash Gallery











 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
6679      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 28 April, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/flashgls.htm

Digital Design Course homepage