How can you simplify a complex navigation in an online shop?

Order makes a system of many appear fewer.

An online shop is usually the first battleground that comes to my mind when dealing with complexity. With each category you add, it seems to multiply.

The organization of things can go hand in hand with the first law of reduce because there are only two questions to ask: “What to hide?” and “Where to put it?”

Without much thought and enough hands on deck, a messy website becomes free of clutter in no time, and remains like this till we need to add more and more things and then we need to reorganize again and again.

So, in the long term an effective scheme for organization is necessary. In other words, the more challenging question of “What goes with what?” needs to be added to the list.

For example, in a clothing shop there can be groupings like t-shirts, jackets, shoes. Thousands of clothing articles can be organized into these three categories.

Of course this will only hold if the number of groups is significantly less than the number of items to be organized.

There are three well known (I suppose) ways to organize a system of many: SORT, LABEL, INTEGRATE, PRIORITIZE. I don’t think is necessary to explain each one of them because is pretty self explanatory.

These way of organizing is a free-form process for finding answers to the question of “What goes with what?”.

Humans are organization animals. We can’t help but to group and categorize what we see.

Gestalt psychologist believe that there are a variety of mechanisms inside the brain that lend to pattern-forming.

The principles of Gestalt to seek the most appropriate conceptual “fit” are important not only for survival, but lie at the very heart of the discipline of design.

We will try to respond to “What goes with what?” by using the “blur groupings” approach which is obviously a subjective interpretation but it’s a commonly used principle in various type of products.

Let’s start applying this in UI design.

First, let’s look at this navigation from Potterybarn website:

This navigation is correct in terms of navigation, it has answered the question “What goes with what?”.

As I said earlier, the organization of things can go hand in hand with the first law of “reduce” because there are only two questions to ask: “What to hide?” and “Where to put it?”.

Now, let’s see how can we improve the categorization by answering again to this three questions:

Here, I used an interesting method called “blur”. The aesthetics of the blur are common in the history of art. In this example, the navigation is more desirable because it blurs all the subcategories into one image of simplicity.

Blurred groupings are powerful because they can appear even more simple, but at the cost of becoming more abstract, less concrete. However, to make it less abstract we can display the categories when the user hover over the categories.

The role of this law is to “See more, by seeing less” and I think we’ve applied it successfully.

Thank you for reading!

This article is inspired by “The Laws of Simplicity” by John Maeda.

Independent product designer based in Bucharest.

Independent product designer based in Bucharest.