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.
Great article, Smike.
Like many people these days, I pay a majority of my bills online. One of them is Verizon, my cell phone service provider.
For some reason, Verizon is constantly changing the UI of their website. I have seen it in numerous stages over the past couple years, yet they still never seem to nail it.
On a site where user login is a high-level feature, I prefer there to be a clear, visible area for this directly on the homepage (generally on the right side of the header). On Verizon’s site, the login has become part of the navigation menu, on the far right side, simply called “My Verizon.”
It’s clear enough for me to understand that this would likely be the area where I would locate a user login, but upon rollover of the menu item, a drop down appears with options. From there, I must choose from the four different kinds of “My Verizon”: Personal, Prepay, Business, or Enterprise.
From there, another drop down menu appears as a child of the first one, giving me options to Sign In, Register, or hate Verizon more than I did in the first place. Perhaps the latter isn’t a legitimate option, but it gets my point across.
There is too much work to be done by the end user to simply log in to Verizon’s site with too many child drop down menus. With Action Envelope, there is a specific reason for the drop down (or Mega Drop Down in this case) to exist in the main navigation menu.
However, with Action, a user can simply click the My Account menu item, which directs them to a static login screen. This functions the same with javascript enabled or disabled in a browser. The same cannot be said about Verizon’s website. If a user has javascript disabled, they will never be able to log in.
While some may not like these Mega Drop Downs, I think if there is a clear purpose for them, there is no harm done.