Xoom is a great service that allows you to send money overseas easily, quickly, and securely. The site definitely has a low-fi aesthetic but I suspect that it works well on an international level. There’s likely millions of users who value simplicity over sophistication and the site design reflects that. All in all, they’ve done a good job on the UX/UI but there are a few things that just drove me nuts because… well… I’m obsessive.
Make buttons easy to press.
The “Get Started” button is clearly marked and conspicuously green. Awesome! Until I went to press it and could not get passed the country pulldown. It was like a trick or a game to use the big button that the service clearly wanted me to press… or did they? Perhaps this behavior is purposeful and meant to drive users to a particular country instead of hitting the button but then why have the button? The answer to this issue would be to just make the arrow on the drop down area activate the list instead the entire thing. That would allow me to not have to go around the item that is 10 pixels away from the button. Click the video below and you’ll see what I mean.
Make sure an icon has purpose and retains that purpose.
There is a clear and convenient top navigation. Again, awesome! It seems to be a little off on some pretty standard UI rules, though. The arrow icons indicate that there are sub-menu items that reveal themselves on hover. Makes sense. There’s even an animation that turns the arrow upward to communicate that the menu is open and can be closed. The thing is that this has little meaning and is somewhat confusing. Most users know that the menu is now open, they are looking at it. Do they really need an indicator to explain that the menu is open? When you animate the arrow, you call attention to that visual device which makes me think it’s clickable, especially when there’s a click cursor on it. That up arrow is not clickable and neither is the “Go To” text but they both have click cursors on hover. Seems like a source of cognitive dissonance IMHO.
Use universally accepted UI standards.
In the original menu the “Home Page” item background is grey with black text. I’m going to assume that this is meant to be an indicator that you’re on that page currently. Perhaps this could be better communicated in a more universally accepted representation within the pulldown context. Grey out the text, put a carat indicator, and make it non-clickable. This would better discourage the user from looking at the menu item in the first place. When you invert colors on a menu item you’re calling more attention to it and people assume that you want them to click on that item. At the moment I can click on that link and arrive… right back where I am. Don’t send users in circles.
I’m not saying that we should NEVER not use a standard. I am saying that unless we’re pushing the standard further, we should use the standard.
Move away from images for promos.
Perhaps there’s some sort of legacy browser issue that drove the design toward using large images for these promo features but most of the web has moved away from this practice. It makes it harder to update, increases data transfer, and usually interferes with accessibility readers for the disabled. I’d suggest taking a short amount of time to convert these to CSS based “banners” which is now a best practice.