Finding the right design patterns
Comparing navigation patterns, search patterns, and other patterns I could apply to my own design of an online clothing store.
I have chosen to compare the features of 2 of the most popular clothing websites, ASOS and the Iconic.
Search patterns
ASOS

ASOS prioritises the search bar, putting it at the top centre of the page. This is useful for shoppers who know what they want. Browsers can enter the site a variety of ways, but visual browsers wanting to browse by a particular category have to scroll to the the end of the page to find an attractive opening point. I will look at this under Navigation patterns below.

Once you click into the search bar it shows your recent searches. This sort of personalization can save regular shoppers time, especially for the more particular searches.

Autocomplete is another useful feature, although I wonder about how this algorithm works as I would think the most popular search categories would be at the top, such as shirt. “A star is born” is the 5th option down, which strikes me as odd and not one of the most popular/useful options to suggest.

Once I wrote shirt, the search bar suggests the top shirt searches and lets me know how many results this returns.
The Iconic

The Iconic hides the search button for a cleaner interface. This makes search a bit harder to find but can be identified by those looking for it. This icon opens up to a search bar as shown below.

I like that it gives examples in the search field to give you an idea of the type of search terms you can add. This is easier to type into than a blank space.

When you finish writing a term it gives you both “categories” search results and a “related products” search result. I find this broader approach more useful than the more random autocomplete results of asos which are more specific, but also more likely to not be what the user is searching for.
Navigation patterns
ASOS


The top of the ASOS homepage is very text heavy and favours those who browse by text. The Women and Men sections at the top drop-down to give more detail. This is split into product, brand and edits (events).
I like that 3 categories to browse are given to cater to people who are browsing with different priorities in mind, but this is not the easiest to use. If I was looking for a vest I might look at the end of the list at the “v’s” to find it, but it is bundled in with t-shirts, so I would have to look under “t”. This is not intuitive. There is also an issue with the taxonomy as I would not group t-shirts, quite a casual item, with vests which I see as a more dapper, specialty item.
I also think it would be easy to miss the Women and Men categories to begin with. Although placed at the top, they are followed by bright attention grabbing images which advertise sales and promotions.
When I tested this website in the research stage, the user who was looking for a shirt, scrolled right past the navigation with the men and women ‘buttons’ until he reached the categories pictured at the bottom. He mentioned that he wished the categories were at the top before going back and finding them there.

Users who are more visual browsers are not favoured on this website.
The Iconic


The Iconic puts the 2 top main categories at the very top and draw the user’s attention with large images. This works better for me as I think this is the first decision the user would want to make in refining down what they are looking for.
This is followed by the promotions and sales sections that ASOS prioritised. I feel more valued as a customer by the Iconic, as it gives me the choice to find what I want before trying to reel me in with the sales/promotion talk.

The Iconic also has a more text based navigation system at the top where you can search by the main product categories or by brand or quality. I like the idea of having a premium section for those willing to spend more for designer items. This navigation lets you search by item and brand and shows new arrivals. This looks a lot cleaner to me than the ASOS navigation which is complicated and less welcoming.
Add to cart

The Iconic has a very simple icon in keeping with its more simple and elegant interface. It shows a bag icon which I found a little bit confusing. It also looks like it could be a clipboard which made me think it could be a notepad type feature. It is where the cart is usually found but I had to click this to double check this was in fact the “cart”. This shows when you have an item in the cart, but you do not know what it is or how much is it without clicking in to it.

ASOS has a hover function which allows you to see the total of your bag’s contents as well as the total cost. This is much more useful for those who are trying to keep tabs on their spending. You can also view bag or pay from here, and some delivery info is given as well. This is all useful information for someone who is looking to secure their purchase. I had a few issues with the hover. For those on slower internet such as myself, I had to hover for quite a while for this to pop up, and it took a while to load. Then it disappeared quite quickly.

My preference was the Farmers cart. This always shows the total price and number of items in the cart and I can access this cart by clicking the button. This then stays there until I click it again. I feel more in control with this cart, and I like that there is only one call to action within the cart. I think the “view bag” button is a bit unnecessary on ASOS as surely this is what you are doing with this hover down function.
In conclusion, I prefer the simplified style of the Iconic which feels to me like it has considered its users more in where it has placed content and in what it has prioritized with it search autocomplete and navigation choices. ASOS feels like it wants to do it all and so comes across as quite cluttered, making it more difficult to find things.