CollectiveLab

The Lowest Below-the-Fold Links in the History of eCommerce

 

I have to say I'm extremely proud of today's creative on BrooksBrothers.com.  It represents, as far as I am aware, the lowest below-the-fold links in the history of eCommerce.  As a User Experience professional that is quite a feat.

Where the fold actually is obviously depends on your browser and your monitor resolution, but if, for the sake of argument, we place the fold at around 600 pixels, then the shopping links for the only creative on this page are 7,193 pixels further below.

The creative will stay up on the site for 3 days, and I am obviously looking forward to the click through rates, the heat-maps we'll get from CrazyEgg, and all of the analytics surrounding each element of the experience.  At this point we're already seeing a lot of Social Media buzz around this promotion - as the emails (which are as long as the homepage) just went out.

Needless to say we do not expect to sell many $2,000 Polo Box Sets - it's just a hook - but clearly I think it's a damn clever one.

 

 

Killing Off The Page

BEFORE:

AFTER:

Just stumbled on this - an article about the rise of casual gaming in today's NYTimes - where the image area featured a simple game.  Rather than simply bang away at oncoming asteroids - it allowed me to kill off various elements of the page - subnav elements, ads, related articles, Facebook recommendations, etc..

I guess what made me happiest is that I came across this naturally - not from social, or from a relatively unecessary and poorly written blog post.

Word Lens: Let the Epicurean Adventures Begin

 

 
The brand spanking new Word Lens App translates Spanish to English (and English to Spanish) in your camera without internet connectivity.  They're using their own dictionary - which evidently works ell enough (integrating with Google Translate or Bablefish would require an internet connection).

But, ideally, expanding their language options would be in their next build, even if it requires a connection.

Because when that happens - imagine how boldly you could dive into even the scariest menu - deep within the restaurant meccas of Flatbush, Astoria, etc..

 

Ideas List: Kinect and Ikea

I want to hold up various elements from my Ikea box, have a gesture-reading device like Kinect see it, and have the TV walk me through interactive instructions on how to put together my new bed.  Don't know what this random piece is or where it goes?  Hold it up, and a rotate-able 3D schematic shows me exactly where it fits into the finished bed, with a link to the step where that piece is used.

First thing one would do is start a little venture that would transcribe the entire Ikea PDF catalogue into interactive 3D models.  Who's in?

Geo My Four Loko

 I'm not active on Foursquare because I don't find value in getting updates to my friend's physical location.  If I want to know where one person is I'll text them directly.  Yes, I'm simplifying the Foursquare experience, but that's my position currently.

However, knowing the physical location of things I'm searching for would provide tremendous value to me.  I want products to geo-locate themselves.  I want to send a text message to a bag of the new Late Night Cheeseburger Doritos and the remaining cases of Four Loco in New York City.  I want to see the physical product plotted on a map.  I want to sign-up for a service where product X from brand Y texts me when they've shown up at my local deli.

Above, a GoogleMaps search-results showing a New Jersey liquor store (only because the people-powered-search site ChaCha associated them with Four Loko). Below is the scenario I'm waiting for:

(This quick little illustration includes the notion that Four Loko brand could authenticate itself to the user through an MMS graphic and chat through some basic AI/language-recognition software, tweaked to the brand's specifications.) 

I believe our notion of LBS will drastically in the next few years and it will be much more significant to the consumer than what we currently know as LBS - which focuses on checking-in and mobile couponing.

The value behind Google's "Store View" is surely not in giving customers a visual peek of what the store looks like inside.  Instead it's one step closer to the customer getting an up-to-the-minute inventory of the merchandise available in the store.  With ever-cheaper RFID technology connecting products you're searching for and the loading dock and point-of-sale system of your local Gap - you'll be able to geo-locate the nearest pair of Jeans in your size.  Using Google Maps to find a store (or a website's store-locator) is only solves part of the customer need - as often it's not the store you're looking for - but the product itself.  Brands and stores are going to be pushed into providing real-time merchandise look-up to the customer.

And that will help my present-need, locating that frustratingly elusive malt-liquor-energy-drink and pairing it with a potentially horrendous new flavor of Doritos.  

The Importance of Being Sketchy

... or, "why you should sell innovation via crappy sketches."

There are a number of elements in Facebook's announcement of Messaging which are familiar to those people who, like me, got excited about Google Wave.  However they are not simple to explain, so in both cases (the launch of Messaging and the launch of Wave) you see a reliance on crappy sketches to communicate the ideas.  In fact, showing you how it actually looks (the user interface) could complicate their point.

One of the key innovations that Facebook is claiming (although, again, it was inherent in Wave) is the notion of a Social Inbox, ie., a place where your communication with friends and family are separated from the rest of the noise that enters your E-Mail's inbox.  Another core idea from Facebook is that "messages" don't need to be defined as E-Mails vs. SMS vs. IMs, etc..  Lets just call them Messages.  Nice in theory.

And just like all nifty theories in this space - whether it will work ultimately comes down to the UI. The UI is where it gets complicated, in fact (although of course that's where it's supposed to get easier).  I'm not sure whether the UI of Facebook Messages will get this right and that's why they don't show it in their video.  Because it confuses things.  But I do appreciate one more key commonality between Messages and Wave: they were explained with really simple crappy sketches.

If you want to explain something relatively complicated do it in as simple a language as possible.  And make it visual.  And now you've made it approachable, accessible.

Vogue Redesign (with a touch of Brand perspective)

The Vogue Redesign (by Code and Theory) has a number of lovely new functionalities (I came across this bit of news in PSFK that references the original Times article). The design/layout/UI challenges of creating readable image-rich online Magazines are numerous. Vogue’s redesign provides some interesting responses to these challenges, but naturally can’t address everything. Here’s a quick rundown of some features I appreciated.

1. Large Feature-Preview Window
The first bold element here is that it pushes the top-nav down significantly. This thing is huge – quite a statement for those with larger resolutions / smaller monitors. The Vogue audience must be viewing their site from fairly large gorgeous monitors (like mine!).  Obviously attractive real-estate for an ad-buy.

Fantastic Flickr Future Functionality (Preview)

So when I head over to Flickr this morning I get this tantalizing message in a little pink window, "We're introducing a new photo page, and you can check it out early. Take Me to the Future!"  For it's frustratingly slow pace of functional enhancements Flickr sure does try to make up for it with entertaining copy: 

Diving in I'm faced with two elements I didn't expect, both of which make me real happy.  First, I'm given a very clear (and huge) tour-widget.  I don't need to click on anything - simply rolling over these buttons (and huge means easy to target) reveals floating tooltips that point out new pieces of functionality:

Now that's rather nifty on it's own.  But better yet I can close the tour-widget window and I'm left with the page in its future-functionality state.  Furthermore I can browse the rest of my images in this mode and even interact with the new functionality (adding the photo to a map, etc). 

Besides how easy to use and entertaining this Functionality Preview was, it points to a bigger fact: for websites with a high degree of customization and functionality (and arguably most sites fall into this camp), gone are the days of top-down redesigns that the user has to learn and contend with. Carefully eeked-out iterative redesign of key functional pages through clear AJAXY-widgets is the way to go.

Displaying "Recently Viewed" on a Landing Page

 In the spirit of not jinxing my team, here's a bit of functionality from NBA site's Boston Celtics landing page that aint too shabby.

 We're familiar with seeing "Recently Viewed" items on the Product Page of a typical eCommerce site.  The conversion metrics for Recently Viewed are higher than for cross-sells (sometimes called "You May Also Like," "Our Stylist Recommends," etc.).  You're obviously more likely to purchase product that you've already considered as opposed to product that the site is recommending -- and it's best practice to provide both sets of related product.

I have not seen, however, "Recently Viewed" items displayed on a Landing Page, and I like it.  Furthermore I did not log in to the NBA site, nor do I have an account with them.  I had considered these items during a previous session, weeks ago.

There may be folks out there with privacy concerns who don't appreciate cookies being dropped on them without their clear consent.  I'm not one of them.  If I'm shopping online I don't mind a little reminder of where I was and what I did -- it saves me time.  It even gives me the perhaps misguided notion that the Celtics are just as interested in me as I am in them.

"-Ness" Linking Fail

 

A couple weeks ago I wrote about the common UI problem of illustrating "-Ness."  Here's a classic example of how it can bite you in the butt.  The above grid of images are used to illustrate categories on a team's landing page within the NBA's website. 

The visual design is telling me "clicking into this square you will be taken to All Boston Celtics" (Boston Celtics-ness, vs. Jacket-ness, Wall Hanging-ness, etc.) but the functionality tricks me, and sends me just to this specific shirt. 

I can presume why they did this.  Users saw the product, clicked into a category page of all-like product, and some of them expected to see the product that they had clicked on.  These (relatively small subset of) users didn't see it and called the call-center and complained.  The call center folks called the online folks.  And somewhere down the line someone told the UI Designer to make the image linkable to the specific product.  Oh dear.

The shirt should appear as the first product in the category page, and the entire square (light-red, above) should link to that page.  If the site structure doesn't allow you to merchandize the shirt in the top-left corner of the category page, you should supply two clear and distinct text links in the above creative.