AIAIO: Our Blog

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.

After much cajoling, poking, and prodding, the office convinced me to perform a magic show at this week’s Hamster Time (our Friday afternoon “blow off some web-steam” gathering).
Enjoy the show, part 1, part 2, and the encore.

TouchDown – This Microsoft Exchange client is my primary email program. Without this piece of software, I would have purchased another Windows Mobile phone. I don’t have anything against Windows phones, they’re just lagging behind in the phone wars right now. I may switch back in a few years. But so far I am loving my Android Dev Phone 1.

Locale – This program lets you change your phone settings based on situations. You can create situations based on criteria such as location, battery status, date, time, and who is calling you. Right now the only rule I have is to turn the ringer on whenever I’m within a few blocks of home. It makes sure I won’t miss any of those middle of the night wake up calls when a server is down. I plan to add more rules, but this single one has reduced one of the biggest worries of my job…missing a call when I’m needed.

There are also plugins for Locale that allow you to send SMS or tweets based on situation changes. I’m already annoying my girlfriend with SMS messages that automatically go out when I get home :) This is one of those programs that you can’t believe you lived without once you start using it.

ConnectBot – I have to have an SSH client on my phone. With this one I can even do pretty well in emacs :)

There are a few other applications that I like, like AK Notepad, Yellowbook and The Weather Channel, but I can live without those.

About a year ago I read this blog post about Windows Vista’s file copy performance, and how most people seem to perceive it as slower than Windows XP. It seems in many cases that perception of performance is just as important as a real measurable performance gain.

So why did a blog post that I read a year ago suddenly pop into my head? Well, every time I go to troubleshoot a system in the office, whether it be a mac or pc, the system just feels so much slower than the systems I use. I was waiting for someone else’s laptop to boot, and it seemed so slow that I just wanted to smash the thing. If you were to run some synthetic benchmarks on the machines I use and compare them with the other systems in the office, there would probably be less than a 10% difference. In fact, my laptop would probably be slower than some of the desktops. My laptop is a 2.2 gig dual core AMD, I believe the newer desktops and the laptop in question use 2.2 gig core 2 duos. As a general rule of thumb, most users do not notice a speed difference in computers when the difference is 10% or less. So why do I perceive my computer as being 2, maybe even 3 times faster? Hard disk performance.

Hard drives are the slowest part of a computer. This is why I’ve been using RAID 0 setups on my desktops for a good 4 or 5 years now. My laptop has a decent SSD in it as well. Now, depending on what you’re doing, having a fancy hard disk set up may not actually speed up what you’re doing. Once MS Word, or whatever you’re using is loaded up into memory, hard drive performance becomes much less important…borderline irrelevant.

This is where user perception becomes relevant. A computer with a faster hard drive subsystem will boot faster. Programs will launch faster. The computer will FEEL faster and more responsive, even if it still takes the same amount of time to encode some video files or spell check a word document. If you’d like to see this taken to the extreme, take a look at this youtube video of a computer with a 24 disk SSD RAID set-up.

So what are the effects of a computer that feels faster? Well, based on my personal experience, I believe it can have just as big of an effect on productivity as a computer that can actually run the programs faster once they’re in memory. A computer that feels fast to a user, keeps the user happy, keeps the overall experience of using the computer positive. When someone has to wait over a minute for outlook to open, it sours the whole computing experience, and can easily frustrate the user to the point where they’re less productive.

Also, let’s not forget that in addition to the perception that the entire computing experience is faster, faster load times is a measurable productivity increase, and in business setting, that equates to money. Let’s say a user saves 2 minutes a day by having a fast hard disk subsystem. That’s 10 minutes a week, over 8.5 hours a year. In my opinion, that by itself is a large enough productivity increase to warrant investing an extra $300 in the hard disk subsystem of a computer.

Now I’d be wary of using RAID 0 in a business setting, just because of the increased risk of data loss. I’ve used it on my own desktop, but I’m well aware of the risks, and didn’t keep anything on my computer that I couldn’t live without. That still leaves SSDs. Most articles you read come to the conclusion that SSDs are not quite ready for primetime. They’re too expensive per gigabyte, and their capacities are too small. I don’t agree with that. Most business users do not need the ability to keep a terabyte of data on their work computers. In fact, nobody at our office needs that ability. 128 Gig SSDs will be more than sufficient for most people, whether they’re running vista, windows 7 or OS X. I say bring on the SSDs, they are already worth the investment and will pay for themselves.

We love open source solutions, but that doesn’t mean that there isn’t room for commercial software here at Ai. In fact, everyone here uses commercial software on a daily basis. I thought for today, I’d cover our servers.

Windows Server – 80% of the Ai servers I manage run linux. But we do have a couple of windows servers as we need them to run Microsoft Exchange, Quickbooks, and our phone system software. We use Windows Active Directory for authentication on our LAN, even on the linux servers. We also use and love the Volume Snapshot Service.  Unlike an LVM set-up on a linux fileserver, Windows just takes care of everything. I don’t have to worry about where Windows is storing its filesystem snapshots. It’s a very nice supplement to our backup plan. It saves me a ton of time when someone accidentally deletes or overwrites a single file.

Microsoft Exchange – I don’t believe we’ll be on Exchange forever, but for now, it has one killer feature that we need. Calendar delegation. I’ve yet to see a cheaper solution that has robust calendar delegation features. If google adds that feature to google apps, we may have a future there. Oh, and if you read my last post, you’d also know that I love push email :)

Shoretel – We use a Shoretel phone system. I bet not many people here realize that their voicemail is stored on a Windows Server :) When we finally outgrew our old Bizfon, I looked into both Asterisk and ShoreTel. I would have loved to build a custom solution with Asterisk, but simply didn’t have the time. Our good friend Lou over at Brightstack gave us such a good deal on the Shoretel system that it was impossible to turn down. However, if you are ever looking for an Asterisk solution, I highly suggest you give Inter7 a ring. I found their prices to be very reasonable, and their sales guy was extraordinarily helpful. I’ve also been using some of their qmail related open source software on my servers for many years now.

JIRA – JIRA is our bug and issue tracker. It’s made by Atlassian. We used Mantis for many years, but outgrew it. We tried and liked FogBugz as well, but JIRA turned out to be much more cost effective for us.

There you have it. Ai uses commercial software too. Shhhh, don’t tell anyone.

I just stumbled upon the fact that Chocolate Skittles allegedly exist. While researching the validity of this, as well as the availability of said Chocolate Skittles, I checked out skittles.com.
After you enter your birthday on the home page, you are brought to an external site – the official Skittles YouTube landing, which displays Skittles television commercials. In the top left corner of the page, there is a modal navigation bubble (built with Flash) that stays with you as you browse.
When you click on any of their product titles from the “Products” link, you are brought to a page in Wikipedia that displays tabular data of all Skittles products (including international). When you click “Friends” you are brought to the Skittles Facebook Fan Page. Click “Chatter” and it directs to the Skittles Twitter page, while “Videos” takes you to the YouTube page, and “Photos” leads to the Skittles Flickr page.
Skittles are also allowing their customers to interact with the company, and with each other. The Skittles Flickr page aggregates any photo titled with or tagged with “Skittle” or “Skittles.” The same rule is applied to their Twitter page.
The “Contact” page is a bare-bones, static page with a simple form. Any legal information, such as a Privacy Policy, is located under the “Other Gobbledygook” button on the navigation bubble, which expands to display the information.
It amazes me that such a well-known brand has used this method to present themselves on the web. They have used the most popular social websites to their advantage, and likely spent a minimal amount of money to build their site. They are advertising for themselves on all of these sites without even paying for the advertisement.
This is one of the most unique and interesting concepts of a branded website that I have seen. As the popularity of social websites progress, more examples like this will pop up. Just look at how many musical artists have deleted their personal websites and simply use MySpace as an outlet. It’s all about how to reach the largest audience, and social websites are the best tool for that right now.

I don’t know how I missed it, but Nitrodesk released a major update to their Touchdown software yesterday. New in version 2, push email! I made the switch from Windows Mobile to Android back in January, and push email was the biggest feature that I missed. Now that I have push again, there’s nothing I used my old Windows phone for that I can’t do on my Android Dev Phone 1.

There are also a few other business friendly features in the new version. Remote wipe is nice. They also added ‘Supress Delete from Server’ and ‘Surpress Mark-Read from Server’. I’m guessing these are welcome features to people who have used Blackberrys even though I won’t use them myself. You can see the complete list of new features in version 2 here.

Touchdown cost me $24.99 and it has been worth every penny. It’s nice to see a solid Microsoft Exchange client on such a young platform.

I decided for my first blog post that I would mess around with Windows Live Writer to see how it works with Movable Type.

Setup was easy. I followed the instructions here to create a WLW Manifest file for Live Writer. I was initially unable to log in, but that was my own fault. I didn’t realize that I had a separate API password for logging in via the RPC script. If you don’t know your API password, log into Movable Type, and go to your profile page. It’s at the bottom.

After spending a few minutes messing around with Live Writer, I have to say that I like it. It’s nice to be able manage my blog posts in a single place, whether I’m online or offline. It does a very good job rendering our blog’s CSS, although your mileage may vary here. The program is nice and simple, I didn’t have to spend any time figuring out how things work. With the exception of the authentication error, I was up and running very quickly.

I’ve only run into one glitch so far. The “post draft to blog” action is grayed out. I guess that feature hasn’t been made to work with Movable Type yet. While this won’t be a problem for me, I can see that being a useful feature for others. So for now it seems my drafts can only be kept on my local computer.

I haven’t used any other programs like this, so I’m not sure what else is out there. But for now, this is all I need.

Ai folks have become quite fond of Bath & Body Works foaming hand soaps. Sadly, the arsenal of soaps we once had–seven different scents lined up at our kitchen sink–has been dwindling. Today a few of us went to the Bath & Body Works store, not even one block down from our office, to pick up some new foamy, sweet-smelling, anti-bacterial soaps. (I even got some for myself because I love it and I have no problem admitting this.)
I left the store with a bag of hand soap and what appeared to be some coupons. One of them was actually a letter, printed on Bath & Body Works corporate stationery. This turned out to be a letter to customers, informing them that the Fifth Avenue location would be closing later this month.
It is a great idea to inform customers of location changes, so they will not be completely shocked one day when they arrive at a locked door of a now-vacant storefront. It is an even better idea to give customers incentive to continue shopping at other locations by providing coupons. Sure enough, the letter in my bag was also a coupon, giving street addresses and phone numbers of other Bath & Body Works locations in the New York City area.
I love the concept behind this: “We have to close our store, and that sucks, but we have other stores and we value your business and would like you to find a new location to shop at. Here is a discount on your next purchase, should you choose to continue shopping with us.” There is even a phone number listed to their Customer Relations Department, should anyone wish to inquire about why the store is closing or any other questions regarding the company in general.
This format of open communication between retailer and customer inspires a sense of loyalty and value that goes both ways: a retailer staying loyal to the customers they value, and customers staying loyal to the retailer which values them.
I will absolutely use this coupon at a different location, not only because I like their hand soaps and can get a discount, but also because they have shown concern for customers like me.

Welcome back to our OmniGraffle tutorials, run by Mike Piastro, Ai’s senior information architect. This is the fifth in a series of short videos designed to help users get the most out of OmniGraffle with the least amount of confusion.

Today’s video is about sub-graphs. Watch the tutorial here.

Previous tutorials:
Part I–template setup and variables
Part II–shared layers
Part III–stencils
Part IV–actions