To say that eCommerce has grown tremendously over the past five years would be an understatement. Just as with the ever-evolving tech industry, the Internet has grown in leaps and bounds in recent years. It has become the desired medium for advertising and shopping in our modern society and for good reason: convenience. With the click of a button, consumers can have anything and everything delivered to their door within days. Brick and mortar storefronts are still a great way to start and grow a business, but in today’s retail market, it is imperative that all businesses also have an online presence.
Web development for eCommerce sites is quite an involved and complex process. There are many things to take into consideration, from marketing and design to performance and security. Our main goal, as developers, is to make the user experience (UX) as easy and intuitive as possible. Form and function are at the core of usability, but it must also be aesthetically pleasing, engaging and search engine friendly. Below are a few design and UX tips to consider during the development process.
Rewriting the Grid with Upward Responsive layouts
Responsive web design has seen a complete shift in the last 5 years and now is almost a requirement. Our techniques and approaches have evolved from the standard screen size. We have focused solely on optimizing for tablet and mobile devices, but now we are seeing an increasing trend towards browsing and shopping on high-res devices and TVs. It is time to take upward responsive layouts into consideration when designing an eCommerce store.
Firebox.com at large screen widths
According to WebDesignerDepot.com, over 32% of web users have devices with a screen resolution of 1920 pixels of higher, which demonstrates just how important it is to consider those larger sizes. Through 2016 more and more sites will take their lead from eCommerce stores that work well on large screen devices, such as Firebox, Smythson and Burberry.
Large Expanding Navigation
When you are designing a eCommerce site that is packed full of information and categories, it is important to have a cohesive structure in your navigation. Categories and products should easily be accessible. The user shouldn’t have to ‘go searching’ through layers and sub layers of navigation to find what they are looking for. In the past, we literally had to ‘minimize’ the amount of links in standard dropdown menus for usability. With large, expanding menus like the mega menu, we have a lot more control over what categories and products ‘make the cut’.
Home Depot and Lowe’s mega menus
This menu style is used to direct content and the flow for the end user through a store. The navigation becomes a sales force, highlighting the most profitable and purchased products. It can also be used to guide users to popular or sales items. Take Home Depot and Lowe’s mega menus for example. The end user can easily navigate through categories without a multitude of clicks or hovers. Thus, creating a better UX.
Images Sell, Not Content
Let’s be honest, the best way to sell a product is to let it sell itself. Having engaging, beautiful and informative photographs of your products is your best marketing tool. Photographs can be used to educate, inform, inspire, evoke. They give depth and tell a story. Nowadays most people are overwhelmed with information from the web and pay more attention to visuals when browsing and shopping.
Joss and Main homepage
Photographs can communicate information very quickly. They can evoke an emotional response and create a more immersive experience than text can do alone. Take Joss and Main for example. Their home page layout depicts rooms and products so the customer can envision their products in their own home. Not to say that content is to be left on the back burner. Rich content is essential for SEO, but with new SEO strategies like Schema, we no longer need to rely on text based content solely to drive traffic.
Material design for layout
Last year, Google launched its new style language, Material Design. It uses shadows, layers, movement and depth of objects in order to create layouts that appear more realistic and engaging to the user. Material design is a more clean and modern approach. It engages the user and focuses on UX and interaction with elements. It has a minimalistic approach and similar to a common and growing design trend – flat design.
Conclusion
Success of any eCommerce site lies in improving UX, keeping it simple, and gaining the customer’s trust. We should be taking usability and design into consideration in all aspects of our development process. Speed and optimization are important, but what’s the point if the user can’t properly navigate or find what they are looking for in a crowded layout? It is proven that a consumer will decide in 3 seconds if they are going to stay on a site or not… so let’s keep them there!
