In the first in the series last week we talked about the Product Detail page. We looked at two of the top 100 ecommerce sites and picking out the good parts and making suggestions to improve. In today’s post we’re going to take a trip downstairs and have a look at the footers of two more sites from the same list, Bluefly, and GAP but we won’t focus on the good and the bad but more of how the footer can be used in an overall UI design strategy. In the past footers were where you stuck information like copyright info and privacy policies but nowadays footers have become an integral piece of the ecommerce puzzle.
Often times the forgotten child in the overall scheme of a sites design. Organizationally speaking, they are the last item on the page but are not any less important than any other element of a sites structure, and should be treated strategically equal.
Bluefly.com
bluefly.com
Email Solicitation
Bluefly.com has a very basic footer. The first thing we see is an email signup form that’s titled, “be the first to know!”. But first to know what? There’s no context behind what I’m signing up for. Daily, weekly, monthly emails? Am I getting emails about the brands I’m interested in or when new items are added to their catalog? Being the first to know could be a good thing or bad thing depending of Bluefly’s email campaign strategy.
A better approach to soliciting email sign-ups in the footer would be to first give the customer some explanation of what they’re signing up for. Provide a link to more info or just come out and say it. something on the lines of…
Now we know at least how frequent, and how many emails we’re actually signing up for. There is a fine line between too vague and over explanation. In this particular case, one short sentence would have sufficed.
Link Relevance and Order
Bluefly doesn’t have many links in their footer so my next point may be moot, but the grouping of links seem out of order. It could very well be for symmetrical appearance and to keep the four column of three links, this was the most logical order, but in general people (in most countries) read left to right and top to bottom, so we want to make sure that customers can find the most frequently used information first. My best guess would be, “ORDER STATUS” and “RETURNS” even before email sign up.
I don’t have any metrics from bluefly to base my assumptions on, but items we would look at changing would be moving the email sign-up to the far right and placing order status and returns in the first column, with security and privacy next to it one column over.
I also noticed Bluefly is looking for a UI designer on their careers page, so to any of you New York UI Designers, here’s an opportunity for you to make an impact. I won’t even ask for a kick back. :)
Gap.com
Gaps
Not as far as I can see. At least not in the footer. It’s a little odd to admire a footer, but Gap really did a good job. If we have to say something negative about it, we could look at how tall it is. Or if we REALLY wanted to split hairs, the orange color is a little on the heavy side, but over all a great example of good design.
Email Solicitation
I still have a small issue with the email solicitation. We still don’t know if we’re going to get one email or several. In fact they even say “email(s)” which leads me to believe that I will in fact get more than one, or at least have the option to select which emails I will get. The reason we’re not picking apart Gap on their email solicitation is because that’s exactly what they do.
After enter your email address you’re taken to a page where you can select which emails you will receive and Bluefly does not. This is truly a User Experience faux pas for Bluefly and leave it to Gap to pull it together nicely.
Wrap Up
Next time you’re shopping online, take a look at the footer. See if you can spot things that don’t seem to fit. Think about what you would do to improve the design. We don’t only learn from our own mistakes, but we can also improve our skills by analyzing good ui design and thinking about the user experience.
Photo Credit
Header image courtesy of George Eastman House and has no known copyright on it’s usage