Jakob Nielsen Likes Action (Envelope)
By
Michael Piastro, Senior IA/UXD
Jakob
Nielsen recently featured Ai client Action Envelope in his Alertbox article
“Mega Drop-Down Navigation Menus Work Well.” The
usability guru is a fan of what he is calling “Mega Drop-Down
Menus,” as opposed to traditional DHTML dropdown menus, which
he warns against using. Here is a screen shot featuring the
actionenvelope.com Mega Drop-Down from the article:
So: usability guru Jakob Nielsen , whose books, articles, and reports
I’ve read, whose evidence I’ve cited to clients,
and whose influence is hard to miss in the IA/UXD usability pond,
likes the mega dropdown Ai implemented for Action Envelope in our
last site redesign. By extension, he likes me. He really, really
likes me.
Seriously though, it’s not all roses and tweets. Mr. Nielsen goes on to
advise us not to put GUI widgets or other interface elements “that
involve more advanced interaction than simply click-to-go.”
Then the pain starts:
Action
Envelope offers a complete login mini-screen within the navbar’s “My
Account” drop-down. It would be better to simply have a
one-click “My Account” link that takes users to a
full-featured page that supports login for existing users. (Better
still: put this link in the utility nav, which is where people
actually look for it according to eyetracking research.)
Ouch. Here is the offending Mega Drop Down, from the Action Envelope site (the same drop down appears if you mouse over Reorder Center):
Mr. Nielsen’s critique sounds like great advice, and problems with mouse over/mouse out scenarios on DHTML menus have bedeviled many a web site user.
But
that’s where the Mega in the Mega Drop Downs helps-by
virtue of size, these dropdowns may be less likely to suffer
than these types of issues. And there may be site-specific
considerations whereby a login form and a little AJAX in a mega
dropdown buys us some functionality that enhances site functionality
in a measurable way (namely, log in success, order conversion, repeat
orders, and AOV). The only way to know for sure is to implement a solution, and test.
Here is what you would see behind the My Account and Reorder Center Mega dropdowns if you were logged in:
In the original design, these logged in dropdowns would have used AJAX to populate the appropriate data without a page reload once the user
logged in (using the same drop down), and keeping the user in context
of the current page. In other words, user gets Mega Drop Down
with login form, user submits form, user gets relevant My
Account/Reorder dashboards in context, in place, and without a page reload.
To understand
why this approach was taken, and why it works so well,
you’d need to understand Action Envelope’s business and
typical usage patterns. Action Envelope is largely a
business-to-business site. Repeat orders are important and common.
Workflow associated with providing artwork for a customized envelope
or paper order is important, and typically a customer has one (or a
very few) orders that they would wish to reorder, or provide artwork
for.
Oftentimes a user will submit an order, receive an email notifying them that they need to provide artwork for their order, and return to
the site within a few days. If they are still logged in, a simple
mouseover action will reveal their recent order that they need to take
action on.
In
the previous incarnation of the Action Envelope site (which Ai also
designed), the my account link was a small link in the utility
navigation, and exhibited a ‘standard’ behavior. Namely, you click it,
you go to a log in screen. Since the redesign, conversion is up,
average order is up, and reorders are up. Login success vs failure rate
doesn’t seem to have changed at all.
While none of these stats can be causally related to our design for the my account and reorder center
Mega Drop Downs (we haven’t A/B tested the simpler implementation in
order to be able to assign causality), our solution is based on the
specific needs of the Action Envelope site and its users. This, in
itself, is certainly a best practice Mr. Nielsen would recommend. So
perhaps Jakob does like Action (Envelope) after all.