Based on recommendations from top Macromedia Flash designers, developers, and usability experts we've collected the top ten tips for creating usable Macromedia Flash sites.
1. Remember User Goals
Users typically come to a site with a goal in mind. Each link and click should meet their expectations and lead them toward their goal. When streaming your site, have key navigation links appear first, in case the user wants to get to another area in the site. Emulating common GUI elements will increase usability.
2. Remember Site Goals
Site design should reflect business or client needs, effectively communicating the main message and promoting the brand. Yet site goals are best achieved by respecting the user experience, so site structure should reflect user needs, quickly leading the user to their goal and avoiding company or regional jargon.
3. Avoid Unnecessary Intros
4. Provide Logical Navigation and Interactivity
Keep the user oriented: Display the previous location and guide users to their next one. Remind users where they've been by programming links to change color after being visited.
· Give users an easy exit from each major section of the site and an easy return to their starting point.
· Clearly indicate each link's destination. Keep navigation structures and nomenclature visible, rather
than hiding them until the user has triggered an event (such as a mouse over).
· Make sure your buttons have well-defined hit areas.
· Display primary site navigational elements first by using the streaming capabilities of
· Support back button navigation. To do this using built-in browser forward and back navigation,
separate Flash movies into logical chunks and place them on individual HTML pages. Alternatively, set
up the movie to include a Flash-based Back Button that the user can use to return to a frame or scene
that represents a logical previous page.
5. Design for Consistency
Consistency in user interface is the best way to improve your site's performance. Reusing architecture elements, design elements, and naming conventions frees the user's attention for your message while they navigate to their goal, and it also aids site maintenance. You can use Smart Clips to reuse interactive elements throughout the site, and have words and images from initial navigation links reappear on destination pages.
6. Don't Overuse Animation
Avoid unnecessary animations. The best animations reinforce the site's goals, tell a story, or aid in navigation. Repeated animations on text-heavy pages distract the eye from the message of the page.
7. Use Sound Sparingly
Sound should enhance your site but not be indispensable. For example, use sound to indicate that the user has just triggered an event. Always provide on, off, and volume control on screen, and remember that sound significantly increases file size. When you do use sound, Macromedia Flash will compress music into small MP3 files and even stream it.
8. Target Low-Bandwidth Users
The smaller the download, the better. The initial screen download should be no more than 40k, including all Macromedia Flash files, HTML, and images. To reduce download time, use smaller vector-based images (unless the image is a complex bitmap, in which case it's better left as a bitmap file), and use the Load Movie action only when the user specifically requests a file. If a wait is unavoidable, provide a load time sequence with a progress indicator, and have navigation load in the first 5 seconds whenever possible.
9. Design for Accessibility
Make your content available to all users, including those with disabilities. Highly descriptive Alternate Tags allow your content to be interpreted by assistive technology. The magnifying Smart Clip for zoom is another easy-to-use Macromedia Flash feature that allows more users to see your content.
10. Test for Usability
Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals. Even compact Macromedia Flash animations can delay users from reaching their goal, so use Macromedia Flash's built-in Bandwidth Profiler (located in the View menu in Test Movie mode)to analyze how well your site will perform over various bandwidths. Re-test the site each time you make even small changes. Make sure your site testers match the demographic of your site's anticipated audience—especially if the anticipated audience includes users at various levels of comfort with site navigation..
Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page. All of a sudden, you cannot bookmark the current page and return to it (the bookmark points to another version of the frameset), URLs stop working, and printouts become difficult. Even worse, the predictability of user actions goes out the door: who knows what information will appear where when you click on a
2. Gratuitous Use of Bleeding-Edge Technology
Don't try to attract users to your site by bragging about use of the latest web technology. You may attract a few nerds, but mainstream users will care more about useful content and your ability to offer good customer service. Using the latest and greatest before it is even out of beta is a sure way to discourage users: if their system crashes while visiting your site, you can bet that many of them will not be back. Unless you are in the business of selling Internet products or services, it is better to wait until some experience has been gained with respect to the appropriate ways of using new techniques. When desktop publishing was young, people put twenty fonts in their documents: let's avoid similar design bloat on the Web.
As an example: Use VRML if you actually have information that maps naturally onto a three-dimensional space (e.g., architectural design, shoot-them-up games, surgery planning). Don't use VRML if your data is N-dimensional since it is usually better to produce 2-dimensional overviews that fit with the actual display and input hardware available to the user.
3. Scrolling Text, Marquees, and Constantly Running Animations
Never include page elements that move incessantly. Moving images have an overpowering effect on the human peripheral vision. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text!
Of course, <BLINK> is simply evil. Enough said.
4. Complex URLs
Even though machine-level addressing like the URL should never have been exposed in the user interface, it is there and we have found that users actually try to decode the URLs of pages to infer the structure of web sites. Users do this because of the horrifying lack of support for navigation and sense of location in current web browsers. Thus, a URL should contain human-readable directory and file names that reflect the nature of the information space.
Also, users sometimes need to type in a URL, so try to minimize the risk of typos by using short names with all lower-case characters and no special characters (many people don't know how to type a ~).
5. Orphan Pages
Make sure that all pages include a clear indication of what web site they belong to since users may access pages directly without coming in through your home page. For the same reason, every page should have a link up to your home page as well as some indication of where they fit within the structure of your information space.
6. Long Scrolling Pages
Only 10% of users scroll beyond the information that is visible on the screen when a page comes up. All critical content and navigation options should be on the top part of the page.
Note added December 1997: More recent studies show that users are more willing to scroll now than they were in the early years of the Web.
We still recommend minimizing scrolling on navigation pages, but it is no longer an absolute ban.
7. Lack of Navigation Support
Don't assume that users know as much about your site as you do. They always have difficulty finding information, so they need support in the form of a strong sense of structure and place. Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user. Provide a site map and let users know where they are and where they can go. Also, you will need a good search feature since even the best navigation support will never be enough.
8. Non-Standard Link Colors
Links to pages that have not been seen by the user are blue; links to previously seen pages are purple or red. Don't mess with these colors since the ability to understand what links have been followed is one of the few navigational aides that is standard in most web browsers. Consistency is key to teaching users what the link colors mean.
9. Outdated Information
Budget to hire a web gardener as part of your team. You need somebody to root out the weeds and replant the flowers as the website changes but most people would rather spend their time creating new content than on maintenance. In practice, maintenance is a cheap way of enhancing the content on your website since many old pages keep their relevance and should be linked into the new pages. Of course, some pages are better off being removed completely from the server after their expiration date.
10. Overly Long Download Times
We are placing this issue last because most people already know about it; not because it is the least important. Traditional human factors guidelines indicate 10 seconds as the maximum response time before users lose interest. On the web, users have been trained to endure so much suffering that it may be acceptable to increase this limit to 15 seconds for a few pages.
Even websites with high-end users need to consider download times: many B2B customers access websites from home computers in the evening because they are too busy to surf the Web during working hours.