Interface Issues

The key interface issues are usability and intuitiveness. This is an interesting dance because these issues are aimed at your audience more than anything else.

There is a site for a design company that is one seriously gorgeous piece of Flash work. The problem is that it is neither intuitive nor usable if you aren't "with it." This is rather odd because the site is designed as a showcase for the company's work to attract new clients (see Figure 12.3).

Figure 12.3. A typical "high concept" Flash page that fails the usability and intuitiveness tests.

The main page, as you can see, has a solid "A" (the first letter in the company's name ) and three circles of varying sizes on the left side of the page. On the right side are the four main site categories. If you click on the categories, nothing happens. If you click on the shapes on the left, nothing happens. You are left to discover that the four items on the left are draggable. Place them over the corresponding area on the right, and you launch that section. You only discover this if you are either patient or have the time necessary to experiment.

The point here is that interface design is a black art and requires a deep understanding of the user and his or her technical sophistication. As you move across the audience continuum from broad to very specific, your interface design choices actually expand as the audience contracts.

When the audience is narrowly defined, you have the freedom to make certain assumptions about the audience. For example, we assume the audience for this book has a basic familiarity with the applications presented. This is why we jumped right into the code for the Flash sprite in Director. If we assumed no experience and jumped right into the code, you would have closed the book by now or thrown it out the window. Is it any different in web design?

Keeping the audience in mind is the first rule. The second is never to drop your user into the interface and assume he or she will know how to use it. If it isn't intuitive, the user will be gone. Instead, give them subtle clues or brief instructions as to how the interface works. In many respects, you are yielding control of the interface to the user and acknowledging that the user is there to access information. If it isn't readily available, they won't hesitate to go somewhere else.

Designing Director Presentations for Dynamic Data

In many respects, Director functions as a "shell" for the dynamic data. The Flash sprite on the Director stage, using the Flash Player, is actually doing the bulk of the work in accessing the Flash Communication Server, or in the case of Flash Remoting, accessing the database through ColdFusion MX. This is the key factor to keep in mind when using Director for dynamic data.

Here are some other general things, in no particular order, to keep in mind:

• When sketching out the Director interface, for example, you need to know the physical dimensions of the Flash sprite and accommodate those dimensions. The great thing about Flash, though, is you aren't stuck with using the Flash sprite "size as." One of the great features of Flash is its capability to be resized with no loss of quality.

• Know how the interface is going to be used on the Dreamweaver page and its size on the Dreamweaver page. Designing a Director interface at 640x480 for placement into a 240x180 location on the Dreamweaver page is going to open you up to a world of grief . The main problem will be having to go back to Director and redesign the stage to fit the slot in the Dreamweaver page.

• Use Fireworks to create your bitmaps and Flash to create your vectors. This enables you to edit the content without having to leave the Director workspace. Photoshop images, including their layers , can be imported into Fireworks, and Freehand Symbols can be imported into Flash and Fireworks with no loss of quality.

• Optimize and slice the interface in Fireworks and save the interface as a series of .jpg or .gif images. These smaller images can then be used in Director to reassemble the interface.

• Embed any fonts used in Director into the final .swf file (Director's Shockwave file, not the final Flash MX 2004 file). This is done through the use of the Font Cast Member Properties dialog box, which is accessed through Insert, Media Element, Fonts. This way, you avoid the nasty surprises that are a result of font substitution.

• Create the primitive shapescircles and squares, for exampleused in the Director design and any solid backgrounds needed in the design in Director. The result will be smaller files sizes and loading times for the web page.

• Remove any unused cast members and channels from the Director presentation before creating the Director .swf file. You can remove channels by opening the Property Inspector and clicking the Movie tab. Set the number of channels from the default of 150 channels to one or two more than are used in the movie.

• Remove extraneous Xtras from the movie. They only add weight and an unnecessary hit on bandwidth. A quick way of doing this is to select Modify, Movie, Xtras to open the Movie Xtras dialog box. Select each of the Xtras in the list and click Remove. Click OK and immediately reopen the Movie Xtras dialog box. Only the Xtras used (or needed) will appear in the list.

• Test. Test. Test. Just because you understand how it is supposed to work doesn't mean your audience understands. One of the authors, for example, will sit his 76year-old father in front of an interface designed for a broad audience and ask him to try it out. If his father doesn't "get it," it is time to go back to the drawing board.