Flash Scrolling Without Boundaries
This chapter is from the book
This chapter is from the book
This chapter is from the book
Any sufficiently advanced technology is indistinguishable from magic.
—Arthur C. Clarke
The use of Flash to create information interfaces has enabled designers to develop many new devices for browsing that information. Although most of these interfaces are designed to improve the user experience, many are littered with gimmicks and controls that actually confuse the user.
Among this plethora of experimental interface elements are some that really do improve usability. One of these is the gesture-driven scrolling list.
As a Flash developer, you've no doubt seen the gesture-driven scrolling list before. Usually it is a list of image thumbnails arrayed horizontally or vertically. As the user moves his mouse over the list, it reacts by scrolling in a direction based on the mouse position or motion.
Author Note: Michelangelo
When we were writing this chapter, it occurred to us that a gesture-driven scrolling list is actually pretty controversial in the world of usability. Many usability gurus recommend against using this type of control, and rightly so; it is an unfamiliar, newer type of navigational widget that many users might not be familiar with.
Many of the rules of usability rely on interfaces and controls being intuitive and familiar to the user. Abiding by these rules guarantees that your users always know how to get around your interface and the site they are looking at. However, all users are different. In the case of the MODA site, the target audience was not visiting the site to get through it in the quickest possible time, but rather, users of the site wanted to spend time and enjoy the experience of looking at the images on the site. In our informal tests, we even found that users who had never used this type of scrolling list before learned to use it almost instantly and found using it to be fun and enjoyable, a key goal for the target audience of the site.
Remember, the rules of usability that you will read in books or on web sites are great guides when designing an interface, but the one real rule to stick to is this: Know your user. In this case, our target user liked the scrolling list, and it added enjoyment to the site that a boring old scrollbar would not have.
Ultimately, using standard widgets may be the safest way to ensure maximum usability of your interface, but if you don't try and develop something new and better, we could be using the same old scrollbars 10 years from now!
In the gesture-driven list, the speed of scrolling is dictated by the distance of the mouse cursor from its target. This dramatically reduces the amount of mouse movement required to control the scrolling. The fact that the list scrolls by merely having the user move his mouse (this is where the "gesture" part comes from) also helps by reducing the number of clicks needed to scroll through the list to...0! Gone are the smaller click areas of the scroll arrows at each end of the list, and the scrolling "thumb" in the middle of the scrollbar.
This can be a powerful interface element, but it can truly help improve web site usability only if the designer spends the time to iron out the details of how users will interact with it.
In this chapter, you learn how to make your own simple, gesture-driven component that takes into consideration all the details necessary to improve Nancy's experience on the MODA site. Keep in mind the issues just discussed when you take a look at how the scrolling list works in the MODA structure.
Solutions—Making the User More Efficient
Using the gesture-driven scrolling list not only makes accessing the items in the list easier for Nancy, but it also enables you to organize the site in one simple level. This helps to make Nancy's time on the MODA site more effective by eliminating any nested areas of the site. Nancy can see all the site sections on one screen.
Cutting the amount of clicking Nancy has to do to scroll to the different exhibits also simplifies her interaction with the site and saves her time.
Figure 5.1. The Höpart exhibit site should focus on the artwork in the collection; the gesture-drive scrolling list helps to make this interface simple and focused.
){kind=link}
The gesture-driven scrolling list also helps simplify the site's visual design. Without system scrollbars or similar widgets to incorporate, Nancy can focus on the artwork and the information and have a fun, enjoyable experience on the site.
To see all these benefits in action, take a look at the Höpart sample movie.
Seeing It in Action
Download and open the 05_scrolling_list.fla file. Test the movie (Control>Test Movie) so that you can see how the gesture-driven list feels.
Figure 5.2. Spend some time getting the feel of the gesture-driven scrolling list. Pay attention to how it reacts to the mouse. Notice the help text on either side of the list—subtle yet helpful.
){kind=link}
Notice the list has a smooth and immediate response. You also may notice that the list scrolls quite fast when your mouse is at the extreme left or right edge of the screen, but that there's a large "slow" area in the center of the list that offers the user more control over the individual elements in the list. This is extremely important for providing user control. Although it is easier for the designer to create a list with a steady scroll rate, it would be much harder for the user to control it unless the scrolling rate were slowed down considerably.
The list contains a lot of items, so it's possible Nancy might get lost as she scrolls through the artwork. This is something you need to watch out for when using this type of list; too many elements can make it easy for the user to lose track. (The easy solution for this project was to provide a function that identified which piece of artwork Nancy was looking at.) The selected button acts as a reference point for the user as it goes by again and again; it is a simple and recognizable element.
Figure 5.3. When Show Streaming is turned on, notice how the buttons in the list fade in as the larger images finish downloading.
){kind=link}
As the file loads, Nancy is kept informed of the download status. If you test the movie and turn on Show Streaming, you'll notice that each of the buttons in the list fades in when its corresponding full-size graphic has downloaded. This offers a visual clue as to the state of the section to which that button corresponds.
NOTE
This is a classic case where not being lazy can really improve the usability of your Flash movie. With a little extra work, you can show Nancy which of the items are still downloading by initially setting each button's opacity to 25 percent and disabling its functionality. After the high-resolution image has downloaded, its corresponding thumbnail in the list returns to full opacity.
Now go ahead and take some time to play around with the gesture-driven list. Get a feel for how the list speeds up and slows down. Because you have seen how the scrolling list component works, how about making your own?
Implementation
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.
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.
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.
){kind=link}
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!