Solutions—Making the User More Efficient - Page 2
May 8, 2002
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.
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
Open the 05_scrolling_list.fla file located in the Projects
folder on the Skip Intro CD-ROM. 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.
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.
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?
Skip Intro: Flash Usability and Interface Design
Skip Intro: Flash Usability and Interface Design
Implementation - Page 3
|
