Implementation - Page 3
May 8, 2002
As with all components, this one should be flexible enough to provide Nancy
with a good, usable interface element, and also accommodate different scenarios
for its use in other projects. Without this flexibility, you will end up with a
lot of code that might be able to do a very specific task for the MODA site but
not be very reusable.
Additionally, you should be able to define the bulk of the settings for the
scrolling list in the Component Parameters window. That way, the bulk of the
work is already done for you when you use the clip. It's then just a matter
of dragging and dropping the clip into your movie and setting a few
parameters.
To have a component with the kind of power and flexibility you need, you must
include a solid list of features:
Adjustable speed. The speed of the list should be easily
adjustable. Smaller size movies will probably need a slower moving list so that
the user doesn't lose control of it. Movies that take up bigger areas of
the screen may need a faster list to help the user move quickly around the list.
You'll also be able to provide different scrolling speeds for different
target audiences. Variable, user-controlled acceleration. Scrolling should be
fastest when the mouse is at the extreme ends of the list to offer Nancy maximum
control. At the middle of the list, where most of the clicking actions will take
place, scrolling should be slower so that Nancy can move her mouse without
making the list speed away.
Note
During the development of a very similar scrolling list several years ago,
my friend Andy Scott gave me a cubic equation that turned out to be a little
gem about acceleration. He pointed out that most scrolling lists use a linear
equation—on a graph they look like a straight diagonal line rising from
the lower left. A cubic equation looks like a gentle curve sweeping from the
lower left and then reversing its curve as it arcs to the upper right. Essentially
this means the scrolling timeline is less sensitive toward the center allowing
for easier access to the scrolling objects, and more sensitive toward the
edges allowing for greater scrolling speed. See Figure
5.4 to view what the equations look like in a graph.
Adjustable orientation. The component should enable you to choose
to display the list vertically or horizontally. Customizable list items. Abstracting the code from the artwork
enables you to use the code with any movie clips without having to rewrite or
tweak code. -
Adjustable activation area. The size of the area of the scrolling list
that responds to the mouse should be configurable. This is especially useful
for lists with smaller items—you can create an adjustable buffer around the
clip so that Nancy can easily have the list scroll when the mouse pointer is
within 20 pixels of the list rather than when the mouse pointer is rolled over
the list items themselves.
Figure 5.4
By using a cubic equation for the acceleration of the scrolling list, the user
gains more control over the items in the list.
Most of these requirements point to a component that acts as a controller,
sort of like a traffic cop. It's a clip that stands behind the scenes and
controls other clips, moving them across the screen, adjusting their
relationship to each other and the screen, and keeping aware of the mouse
pointer.
Keeping watch over a developer-specified number of movie clips is not easy.
The approach used here is to have the developer specify the base name of his
collection of clips and the number of clips he will have on the screen. If you
were to specify mc_someClip_ as your base name, and 3 as your clip count,
the scrolling list component will look for mc_someClip_0,
mc_someClip_1, and mc_someClip_2. This will make it easy for the
code to handle—and easier for the designer because he won't have to
keep track of many different clip names.
As you can see, most of the features are intended to improve the user
experience with the scrolling list. At the same time, several of these features
make it easier for the developer to customize the component for different
applications. If you can meet both these goals, you have a truly great tool.
Okay, now that you understand the requirements, you can get started on the
fun part... putting it all together!
Solutions—Making the User More Efficient - Page 2
Skip Intro: Flash Usability and Interface Design
Construction - Page 4
|
