Celebrating the weird, the different and the atypical.

Sure we have a set few ideas about user experience and what we consider best practice, but that doesn’t mean there isn’t room for experimentation.

The following examples offer a different view, whether it’s in their search tools or in the way they present their products.

Some of the following are perhaps better in principle rather than execution, and none of them should be considered as anything more than ‘interesting’, however you may just find some inspiration here…

The First World Problems Store

This brilliant Dutch site sells placebos for your most sensitive ‘first world problems’, all the proceeds of which go towards providing affordable HIV medication.

The full-page carousel is glorious, inviting you to scroll through items via two ghost buttons, until you find a solution to something that ‘is your problem’.

Ted Baker

In an effort to make the ecommerce experience more tangible, more ‘real world’? Ted Baker has launched an online virtual store, which uses 360 degree panoramic photography to allow users at home to walk around its Shoreditch branch and browse through many racks of designer clothes.

 

Zoom into the racks, then when you find a product you like, click on it and be taken to a pop-out product description with a direct link to the ecommerce store.

Fat Face

If you hover over one of the homepage products an eye appears which you can then click, and it rearranges the page so that the item is highlighted in a larger box, with colour and size options and an ‘add to bag’ call to action.

Zara

Zara operates a search tool where the content of the page completely disappears, then is replaced with dynamically loading search results as the user types.

Chief customer officer Borja Santaolalla explains the logic behind Zara’s idiosyncratic approach to search. 

The search experience at Zara has been designed from a discovery perspective. That is, selling clothes is not a functional search, such as browsing a catalogue of electronics, search in fashion is about inspiration, it’s about emotions and empathy.

So basically search as an inspiration tool, not necessarily as a discovery tool. The problem with this is in the unpleasant blankness that occurs before you begin typing as if something has gone wrong with the site. 

The same design team improved on the above with the next example…

Pull & Bear

Instead of completely wiping the page of content when you click in the search box, a smaller flyover appears.

This is definitely an improvement. There is also the very simple addition of a close button, which is definitely lacking from Zara, and a way to toggle between how many results are served on the page.

Mendo

A scrolling transition from product page to basket is a neat way to keep things fluid.

B&O Play

This scrolling landing page lets you explore the various features of the headphones at your own speed, while a captivating full-screen video plays in the background.

Brickfielder

Here’s an incredibly thorough look at the technology behind its latest sweater using a plethora of interactive scrolling and swiping techniques.

Whistles

Alongside its super minimalist menus and subtle grey calls to action, I also like the way image of the man is greyed out when you’re not looking at men’s clothes, and the giant luminous cross that denotes the category you’re in.

Björn Borg

A very simple idea, as you scroll back and forth you can see how each product looks when in its reflective state.

Mack

In the same way that clothes shops are using clustering to see how entire ‘looks’ can be created and purchased, here you can hover over individual items in the room and purchase them or if you’re feeling even more extravagant, buy the entire room.

Further reading…

For more on web design from the blog, check out: