It’s an… Icon? A check box? Open/close mechanic? Navigation element? All of thee above? Please let this be broken.

I am a huge fan of (Ann Taylor) LOFT. The price point (everything eventually goes on sale within a week or two), quality, and style suite my budget and fashion sense just fine. I have a LOFT card to earn points towards more clothing, and I submit payments online.

The LOFT recently updated the account center where you manage your payments, balance, account activity, etc, because when I logged in today it announced the new account center “is even better.”

Yes, most of it’s cleaner and more suitable for multi-device and screen accessibility. But for whatever reason, there are square shapes showing up for almost everything, except text. And I mean everything.

The use of the square is so widespread I can’t be certain if something is broken, or whomever just got carried away. It’s a static visual, it’s part of the navigation menu, it’s part of the interactive features and selection mechanics in the UI. I’m really hoping something is wrong with their image server.

The worst part is that it just broke nearly every mental model I have when it comes to a square. Square = check box. Click/tap = select/unselect. I thought I was losing my mind. I kept tapping on my iPad expecting a check to appear.

Post Log-in Experience:
After the log-in screen I was presented with an overlay introducing the new account center. Initially, I wasn’t paying attention to the use of the square shape in this window. Not until I went to check the box “Don’t show me this again.” (See below).

LOFT_Screen3
Instead of a “check” in the box (or square), I got a square–in the box (or square). Is it broken or is this intentional? Good Lord, I hope this is broken.
LOFT_Screen4
Home Page and Menu:
LOFT_Home_1It just keeps getting worse. There are squares everywhere, and the intended use or purpose is a mystery to me. In the menu to the left of the page, the square is not used to visually demonstrate the “on state” (like filled in). Instead, a pink, vertical line is the indicator.

The three smaller gray squares in the upper right hand corner are navigation elements to the My Profile section, Message Center, and Help and Customer Care. I didn’t even know where I was going to end up until the page loaded. There is no label on hover state or otherwise.

When I click on the square next to the label “Recent Activity” it just rotates and reveals inline my recent account activity.

And at the top of the screen I don’t even know what the white squares in the pink circles are supposed to be.

Make a Payment:
The shot below is from my tablet, which is where I initially encountered this experience. Each time I tapped on the square, I kept waiting for the check mark. I must have tapped on “Other amount” half-a-dozen times before it occurred to me that the change in background color (light gray to dark gray) was the visual indicator for “selected.” Holy crap, is this intentional?

Not to mention, in the Select Checking Account and Select Payment Date columns, there are selections with TWO squares. What on earth are they meant to represent?

LOFT_TabletScreen1
The Aftermath:
I managed to make my payment. (I logged back in this morning to double check). But the scenario raises several questions.

The first question, obviously: is the use of the squares for all static and interactive UI assets intentional? I mean, was there a cognitive decision to use the shape to represent nearly everything?

Question number two: how many UI icons and assets are really necessary? A squint test on this page reminds me of a shooting gallery with lots of targets.

Final question, did this get a scrub and Q/A before it went live?

I really, really, REALLY hope something is temporarily wrong, because overall it’s an improvement to the previous experience.

The retailer customer challenge: mdot, responsive or dynamic serving?

According to a recent post by Pure Oxygen Labs, 2014 saw retailers shifting away from Mdots to Responsive and Dynamic Serving. Here’s a look at the numbers:

  • 59% used dedicated mdot sites – down (significantly) from 2013
  • 15% used dynamic serving – up slightly from 2013
  • 9% used responsive design – up (significantly) from 2013
  • 14% had no mobile web presence at the time (OMG)

Pure Oxygen Labs points out that while mdot usage is sliding, the biggest obstacle and conundrum for retailers adopting responsive design is page speed and it’s potential effect on conversion. Despite this “Achilles’ Heel”, POL expects responsive to surpass 15% retail adoption in 2015.

Read on for Pure Oxygen Labs interpretations, predictions and technical insights.

A Sober Look at Why Responsive Rebuilds Fail for E-Commerce Websites

3 Reasons Why Responsive Rebuilds Can Reduce E-Commerce Revenue

From our experience working with enterprise e-commerce companies in a wide range of product categories, it all comes down to one (or a combination) of the following three reasons:

  1. A retailer treats Responsive Design as a conversion-centered solution, which it inherently isn’t.
  2. A team makes improvements to the under-performing mobile layouts but ends up affecting desktop layouts as well, negatively impacting conversion rates.
  3. Lack of internal expertise with this relatively new design methodology leads to site speed issues that go undetected during the rebuild project but then shatter conversion rates and organic search traffic after the new site is released.

Read on at Mobify.com to learn how to avoid these potential pitfalls.

Not Charming

I love it when coworkers share websites or apps with me because of either great or horrible experiences. I love it when they proclaim, out loud, “WTF?” It’s the siren song for a UX person in an interactive agency. It’s also an affirmation because their reactions tell me I’m not the only one that notices kooky or poorly designed experiences that make a website difficult to use.

Case in point, Microsoft Surface website. Specifically, the product pages. At first glance, there is a fairly innocuous navigation panel on the right-side of the screen. A common website navigation element, the menu is a list of links that anchor or “jump” the visitor to a corresponding section of the page.

Location, location, location
The first thing that caught my attention was the location of the navigation panel itself in relation to the page. I generally encounter this type of navigation on the left side of a web page. My working assumption is that the navigation panel was placed on the right side in order to replicate, to some extent, the Charms bar in Windows 8 in order to familiarize potential customers with Windows 8/8.1 OS features. (For those unfamiliar with the Charms bar, it contains search, access to settings and contextual app menus. And it appears from the right side of the OS when activated by a swipe or click on the right.)

Image
Default state of the Surface Pro 2 page.

Granted, I don’t have to use the navigation panel menu items to access the information on the page. I can scroll up and down. But like any good navigation labeling, the labels give me clues into the section contents and the information. Not too mention, it’s faster to use the menu if I want to skip around. Also, the panel location in relation to content (and vice versa) changes depending on the width of my browser window because it’s a responsive site. Which means that my mom is not going to know she can expand the width of her browser window to see the information or access the calls to action, and will call me to complain.

Image
Navigation panel open

Label System
The first item at the top of the navigation is a single house icon with no descriptive label. I’m assuming that since it’s a house, it means “Home.” But which “Home?” Surface.com? Microsoft.com? Additionally, both the “House” icon and the first link in the navigation, “Surface Pro 2” go to the same anchor at the top of the page. So,  the Home icon is unnecessary if there’s a better link to do the job and the use of the Home icon is misleading. The visitor isn’t going Home, they’re going to the top of the page.

Image

Not to get too nit-picky, but whatever.

The label system is inconsistent. I prefer navigation labels on any site or app be similar, such as all descriptive or all actionable. The navigation across all three product pages is a combination of descriptive labels and actions.

Additionally there are two different navigation labels for buying the product, “Buy Now” and “Get it now,” even though all the buy buttons on the page are labeled “Buy Now.” Sure, it’s a minor discrepancy, but like paper cuts, they add up to one big painful experience.

Obscuring Content and Calls to Action
Moving into the page itself, using the nav menu, it becomes clear that the placement is not ideal. In fact, it’s questionable. The panel partially covers written content, details and primary imagery placed on the right side of the page, as well as the almighty “Buy now” buttons. Responsive or not, information on the screen is there for a reason and if it’s not accessible, then what’s the point?

I can’t believe that someone didn’t say, “woah, hang on” before the site went live. This is after all, the flagship website for Surface products. Every word and image of the product on the page is critical to influencing potential customers and selling the product.

Image
Product feature information obscured by the navigation panel.

And it isn’t just one instance of the navigation covering critical information and CTAs (calls-to-action) on the Surface Pro 2 product page, all three of the product pages suffer from this debilitation.

For example, “New Kickstand” is hidden by the navigation panel. In order for the visitor to see it, she has to move her mouse out of the panel in order to close the panel (or expand the browser, if she’s savvy enough). If she wants to continue using the panel to navigate the page, she has to position her mouse back over the closed panel to open it, then click on the next menu item she wants to see. A lot of unnecessary actions and movements.

Image
Kickstand imagery is obscured by the navigation panel.

Additional Content
Each product page has a content section not included and therefore not accessible via the navigation panel. For example, in the screenshot below for Surface 2, the section about the new touch and type covers is not in the navigation menu. In the screenshot for Surface 2 Pro, the section for the docking station is not evident in the menu either.

This “approach” is implemented across all three product sites. As mentioned previously, since visitors will often look for keywords or phrases in navigation to determine if what they’re looking is on the page or in a section (aka “information scent“), why are these sections not included? Yet, there are two different ways to get to the top of the page and two different versions of Buy Now? I’m at a loss.

surface2_1
Information section about the new and improved Touch and Type covers is not in the navigation menu.
surface5
Information section about docking stations is not in the navigation menu.

E-commerce
From a make-it-super-easy-to-purchase-the-product-and-feel-confident-about-it perspective, two  no-no’s that would bring Amazon.com’s KPI’s to their knees: Obscuring price and ability to purchase. In the screenshot below the price for the Surface Pro 2 is obscured by the navigation panel in the “Buy Now” section of the page, and in the second screenshot “Get It Now” is also hidden by the panel. These, in addition to the differently labeled Buy Now CTA’s mentioned in the above Navigation section.

Image
Price point is hidden, next to the Buy Now button. Also, the nav panel cover and the background color are identical, creating a bizarre affect.
surface5
“Get it Now” in the navigation panel vs “Buy Now” label on the button, which is obscured by the panel. Brilliant. Also, the Docking section isn’t even in the menu.

So what does it say about Surface when information is obstructed by navigation and by a potentially poor implementation of responsive design intended to help the customer learn about their product offering?

Putting on my black hat here, this is not how you design an e-commerce experience and expect to sell product. Nor is this the best example of an responsive, information-based website intended to generate interest, shift perception, and be accessible.

Benchmark study on e-commerce checkout experiences

I’m currently working on a purchase flow for a service-based product. In other words, there’s no shipping involved. In doing some research and reviews on an acceptable way to set expectations for how taxes are calculated, I stumbled across a great resource produced by Baymard Institute. They’ve created several usability reports, one of which is dedicated to the Checkout Usability in which Baymard has evaluated 100 retail websites on a set of usability guidelines. Ultimately each site is scored across 6 individual components: Flow, Focus, Data Input, Copywriting, Layout, and Navigation, and then ranked from 1-100. While you need to purchase the report in order to see the positive and negative critiques, the site does allow you to view the benchmark results, as well as filter the sites in several categories. It’s awesome if you need to view multiple examples of shopping carts and checkout flows quickly and without having to go through the flows on 100 retail sites.

Consumers’ Mobile Path to Purchase: 5 key findings

In this constantly connected world, people use their smartphones throughout the day to find information, shop, and stay connected. Google commissioned Nielsen to conduct a study of smartphone users who recently made a purchase to better understand the role of mobile in the research and shopping process. Through a combination of surveys and metered data of actual mobile consumer behavior, Google uncovered five key findings:

  1. Consumers spend time researching on mobile: Consumers spend 15+ hours per week researching on mobile sites and apps. They visit websites 6 times on average in the purchase process.
  2. Mobile research begins with search: 48% of consumers start mobile shopping-related research using search engines, more than they start on branded apps or websites.
  3. Location proximity matters: 69% of consumers expect a business to be within 5 miles of where they’re located.
  4. Purchase immediacy is key: 55% of consumers want to purchase within an hour, 83% within a day.
  5. Mobile influences purchases across channels: Of those who made a purchase and researched on their phones, 82% purchased in-store, 45% bought online (desktop/tablet) and 17% purchased on mobile.

With smartphone penetration in the US nearly doubling year-over-year from 31% to 56%1, it’s clear that the mobile savvy shopper is here to stay.

Key Implications
Below are ways that advertisers can use these insights to better reach the mobile consumer and drive more business:

Ensure you have a mobile-optimized site
Consumers expect a business to have a mobile-friendly website. To create a mobile-optimized experience, you’ll want to start by analyzing how your consumers currently interact with your website, what they’re looking for, where they’re visiting from, etc. These insights will provide hints for creating a mobile website that meets your consumers’ needs. For more information on building sites that are optimized for mobile and other devices, check out these resources.

Tailor your search ads for the mobile shopper
As search is the most common starting point for mobile shopping research, it’s important to have mobile ads running so you’ll be there when consumers are looking for you. You can help consumers get the information they need by designing your search ads with mobile-preferred creatives, such as “Call now” or “Visit our mobile site.”

Use location extensions so consumers can find you
Location extensions allow you to attach your business address to your ads, which lets consumers know how close they are to your business and provides directions for consumers to get to your store.

Facilitate faster checkouts
Showing local in-stock inventory with local PLAs, enabling click to call and building fast, seamless mobile checkout experiences with tools like Google Wallet Instant Buy are several ways advertisers can help consumers complete their purchases quickly.

Measure conversions across channels with cross-device conversion tracking
Consumers purchase across channels, often times starting their research on mobile, then buying in-store or on their computers. Advertisers can better understand how mobile ads drive purchases by using estimated cross-device conversion to measure conversions that start from mobile research.

To explore more of the findings from the Mobile Path to Purchase research, view the full presentation at the Think with Google site.

From Inside Adwords, posted by Bao Lam, Performance Ads Product Marketing Manager. 

1 Google & Ipsos Our Mobile Planet, 2011-2013