When it comes to design trends and patterns it can be easy to focus on the overall styles and limit our consideration to the home page. With this in mind Monster Meltdown seeks to provide inspiration on specific topics in a much more comprehensive way. This sample chapter from our collection focused exclusively on e-commerce design is a great demonstration of a topic that gets talked about very little, but is ultimately critically important. Let’s dive in for some fresh inspiration on a topic that has more to it than meets the eye.
One of the most popular navigational tools on the web is the drop down menu. And while a drop down menu can be a simple list of links, it can also be an insanely rich tool stuffed with more information than one might ever imagine. It turns out that many of the sites in this collection have simple and beautiful drop down menus, while others have data rich menus that take over the majority of your screen.
Collected here is 60 drop down menus pulled from a variety of sites. The list includes some of the largest e-commerce sites, as well as some tiny operations only selling a small selection of items. When it comes to inspiration, one of the best approaches is to browse a variety of sources. With this in mind the collection is broken down into three core strategies.
Single column
The single column drop down menu is what you might call the standard layout for a drop down menu. Each drop down consists of a single column of links to select from. And while this might be the standard approach, this set of samples demonstrates that there is plenty of room for creativity and custom styling.
Multiple columns
One of the most common variations on the standard single column drop down is the multi-column version. In this case, each drop down displays a block of content with multiple columns. This is very common on e-commerce sites as the content needs of these drop downs can be rather extensive. Some of these samples contain a ton of links, far too many for a single stack.
Rich styles
This smaller subset consists of samples that contain rich HTML content inside the drop down. This might be a simple image or it might be a full on interactive form to use. This set demonstrates that a drop down need not be limited to simple links. Instead, it can contain rich content that helps users navigate a site beyond basic links.
In fact, when you really think about it the drop down menu has a very interesting potential usage. If a user hovers over a menu, they are essentially expressing an interest in that topic. If you simply provide a list of links on the topic, you’re doing what might be considered the bare minimum. But what if you could do something far more powerful and interesting. That drop down can be a far more compelling element that entices a user to click through. It could highlight the most popular product from the niche, advertise a promotion or simply showcase the newest product in the category. The point is to think about how you can use this as an opportunity to drive users towards more sales.
Conclusion
Drop down menu’s on e-commerce sites are not the most thrilling of topics, but their importance is immense. This key navigational tool is often the primary means of allowing users to skip around inside your content. Get it right and users will happily find your product. Get it wrong and the experience will be painful.
But wait, there’s more
If you enjoyed this inspirational collection, you will love the full E-commerce Collection on Monster Meltdown. It contains 22 e-commerce focused topics, 1,800 images and a sampling from 120 beautiful online stores.
This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we’re publishing. Also, it’s highly recommended to follow us on Twitter!