|
One of the more noticeable changes resulting from the redesign
of the Macromedia website is the new Macromedia Flash navigation
on the home page. This navigation, referred to as the "FMA,"
changed drastically from the previous version. The FMA of the
previous version of the website took up most of the page but didn't
provide a significant amount of information about the website
underneath. You'll notice that the new FMA is smaller and encapsulates
much more information about the website.
We've received a lot of positive feedback about the new design
and about the new FMA in particular. In response, I interviewed
Tony Lopez to find out more about the new FMA. Tony Lopez is the
Executive Producer of the Macromedia website and has an overarching
view of the design and process behind the new FMA.
Jonathan Duran: What does FMA mean? And what is the FMA
used for?
Tony Lopez: FMA is a term that predates me here at Macromedia.
It stands for the Flexible Messaging Area, and it's the section
within the Flash portion of the home page where we do important
"high impact" messaging. Think of it as an end-cap in
a store. It's a display that we hope you'll spend some time looking
at, and eventually acting on. We try to tell a simple story here.
Sometimes it's about a new product, other times it might be about
an event, or a promotion that we are running. We always try to
tell this story in a manner that is clear, elegant and engaging.
Hopefully we strive to provide some design inspiration, but it's
always function over form.
JD: How were the graphics for the Flash navigation designed?
Did you use FreeHand or Fireworks, and then import these into
Flash as symbols?
TL: It's interesting to note that we use many techniques
for development and we had many people working on this home page
design. In general, information architect David Hatch and I created
wireframes/schematics in FreeHand and Fireworks. We took some
of these schematics into usability testing to make sure that we
were going down the right path. Once we validated the direction,
we handed the schematics over to the designers. Some designers
went straight to Flash to work on interaction design, and others
stayed in Fireworks to work on the visual design. Each of these
tools suits a different purpose during the next phases. For example,
the Fireworks mockups helped with the approval and communication
process with the rest of Macromedia. Alternately, the Flash prototypes
were indispensable for further usability testing. Finally, this
all moved into Flash where we integrated and further refined the
interaction and visual design.
JD: I see you are using several new types of navigation
together. What is the strategy behind that?
TL: Flash can do things that other technologies simply
can't touch. For example, one major goal of our home page redesign
was to surface more information. We used a lot of Flash "widgets"
and navigation elements to accomplish this. However, since we
hold usability very high, we tried to rely on preexisting conventions
whenever possible. For example, in addition to the sliding panels,
we use a lot of HTML-style drop down menus, but we can make them
more elegant because we're using Flash.
JD: How was the concept of the sliding panels developed?
Were any specific decisions made on the speed they slide or the
size they should be?
TL: This didn't come easy. We spent a lot of time brainstorming
around interesting ways that we could accomplish our goals. As
with any project, we started with tangible goals that we tested
all of our designs against. As previously mentioned, we wanted
to surface more content. We also wanted it to be a bit Flash-tastic,
but never at the expense of usability. Anyway, Milissa Hayes and
David Hatch were chatting and they came up with the idea of sliding
panels. We actually tried a bunch of different approaches to this
and even scrapped the idea at one point before we got it right.
These things take time!
JD: Is the navigation easy to update? Does it require
a complete recreation to change the content?
TL: We have many talented designers on our team, but we don't
want them to spend all their time on just updating stuff. Rather,
we want those designers to stay engaged and challenged with new
projects. Therefore, we always attempt to design all of our Flash
pieces with dynamic text so that producers can make changes. They
can't change everything, but they can make text changes, add links,
etc. This also helps with the localization process.
JD: How large (in terms of file size) is the navigation?
Does this present any special difficulties with bandwidth limitations
on the viewer's side?
TL: One of the beauties of Flash is that it helps you with
load time. It streams so you don't need to wait until the whole
thing loads before you can interact with the navigation. Furthermore,
you can choose the order in which discrete elements load on a
page. This allows us to have a larger file size than you could
have if you were using plain-old HTML, GIFs and JPGs, yet our
page load is still well within our guidelines. We are primarily
concerned with initial render time and how quickly it takes to
load the high priority items on the page (such as the FMA).
JD: How many people worked on just the FMA? How long did
it take?
TL: Our usual team consists of an information architect,
a Flash designer, and a Flash programmer. However, we really wanted
to nail our goals and explore all the possibilities, so just about
the whole team, including our creative director, design manager,
information architect, designers, and Flash programmers, helped
out in one way or another. It was truly a team effort and we've
been getting some amazing feedback about it!
|
