 |
|
|
|
|
|
|
|
| |
Often times, the "page paradigm"
of today's web is inappropriate for the
tasks it supports. As an alternative to current
web applications, Rich Internet Applications offer
the ease of use more typical of a desktop application.
In certain areas of the site, we felt that freedom
from the limitations imposed by HTML would greatly
improve the execution of:
- Filling out logic-driven forms, where an
answer to one question can determine a set of
options for the next.
- Browsing and searching for content within
a large library, especially when sorting and
filtering are important.
- Navigating a deep hierarchy.
|
| The new applications on
macromedia.com |
| |
|
Treating the Fear of Forms
How many times have you abandoned an online purchase
because you couldn't muster the stamina
to complete the checkout process? You might have
been reluctant to deal with the interface problems
found in many multistep forms: no clear indication
of all the steps in the process, no reliable way
to go back and forward in the process, or confusing
error messaging. These are just a handful of the
issues that can make completing online forms a
tedious task.
To solve the problems of online forms, we created
the Accordion Form module. The main job of the
Accordion Form module is to help speed users through
the form completion process. The name refers to
the interface's "accordion panels"
that open and close to reveal the steps of the
process. Instead of navigating through multiple
pages, the user fills in fields presented in
each
panel, which are contained on a single screen.
After completing a panel, the user can click
Edit
to change any of its data. Enhanced visual design
conveys which fields are required and provides
clear error messaging and instructions. |
|
Figure 1. To aid in the user's
understanding of the entire process, all form-completion
steps are presented upfront in "accordions."
|
| |
|
|
Figure 2. The accordions expand to reveal
each step in the process.
|
Browse, Filter, Sort
Using HTML-based interfaces to sort and filter
content libraries can be a patience-testing experience.
Unlike desktop applications, these interfaces
make you wait for the page to reload with each
click. This can make browsing large amounts of
content, such as an e-mail inbox, frustrating
and time consuming.
To make browsing and filtering easier, we developed
the Content Browser for the Macromedia Exchange.
As the central interface to the new Macromedia
Exchange,
the Content Browser allows users to sort and filter
large libraries with the efficiency of desktop
applications. With a responsive interface and
no dreaded page reloads, users are liberated to
configure the display of data to match how they
most comfortably find content. |
|
|
Figure 3. Users can sort and filter thousands
of items without any page reloads.
|
Form Must Follow Function
The design system of the macromedia.com
beta was first developed for the new applications
and
then
extended
to all areas of the site. Its primary purpose
is to expose the site's functionality in
a meaningful, accessible, and nondistracting
manner.
We made a number of important changes to the
general design of the site. The site uses a limited,
neutral color palette so that important interface
elements and feedback are not lost in a sea of
color. Site areas that are product specific are
highlighted with the product's color, reinforcing
their purpose. Subtle beveling techniques and
gradients help differentiate user interface components
from nonfunctional elements. A series of icons
is used throughout the site to represent key functionality
in a consistent manner. |
|
Figure 4. A limited color palette allows
important interface feedback to stand out.
|
| |
|
Figure 5. Product branding accents the
otherwise neutral color palette.
|
| |
|
Figure 6. An icon system helps emphasize
key functionality on the site.
|
We Want Your Feedback
If you're like us, you're passionate about the
user experience. In order to continue improving
the experience at macromedia.com, we need to hear
from you. Please send us your observations, suggestions,
and the strong opinions we know you have. You
can start by taking our survey,
or send me an e-mail at jtknight@macromedia.com.
|
| |
| |
|
| About
the author
Jerry Knight co-led the user interface development
of the new applications on macromedia.com. He's
passionate about improving the way things are
done on the web through easy-to-use, next-generation
interfaces. Before coming to Macromedia, Jerry
helped redesign shockwave.com and worked on the
advanced technologies team at MetaDesign.
|
| |
|
|
|
|
|
|
