II.) Layer 2: Functionality
One thing that is very easy to overlook is the scope involved in creating a great user experience. For example, let’s say you want to create a custom menu, on the left sidebar, that loads multiple levels of categories. For example, you have a ‘Furniture’ category and beneath that category you have different tools to choose from. If the user clicks on one of those links what happens when they arrive at that page? Does the menu stay in a solid ‘closed’ state, where you do not see a hint as to what product or category you are on?
Imagine this is an accordion menu which is a menu that has a ‘header’ link, such as the main category (Furniture) and when you click on it you find sub categories load underneath it. While the rest of the menu stays ‘closed’, meaning only the main categories are visible, the ‘Furniture’ section of the menu opens up and you can see the sub categories.
Would it not make sense, when you visit a link from one of the “Furniture” sub categories, to allow the user to look at the navigation menu on the left and see that there is a set of links related to “Furniture” that they can click on, without having to click on “Furniture” and open up the sub categories panel?
Small things like this make a big difference in the user experience but they also make a difference in the development of a project. These small facets of web development, such as having a menu which loads sub category links whenever you are on a sub category or main category page, are one of many possibilities you can offer a customer that can easily be overlooked. Think like the customer and ask yourself what would make your life easier if you were navigating your site. What would reduce the number of steps to get them from point A – checkout?
It is easy to think in terms of header, footer, content, shopping cart, product page etc but the small details, such as advanced user navigation, can go a long way in making the shopping experience a pleasant one. Think of the small things, that are part of the ‘functionality layer’, and you may be surprised to see what ideas you come up with. For inspiration, consider the following ideas:
Ajax Shopping Cart
Why not save a step in the standard checkout process and have product titles, quantity and price load on a sidebar, such as the right sidebar, instantly instead of having to view another page entirely? While the checkout page is part of a standard e-commerce experience, and you will not be replacing it, this example shows how focusing on *eCommerce website functionality* helps you reduce the number of steps and allows the customer to speed up the process of selecting their items for order.
Products Slider
Imagine on your homepage, instead of having rows and rows of products for people to sort through, you have a slick slider that lets people move left and right and view products without having to scroll. This is another example of focusing on functionality, which is really usability, in order to speed things along for your visitor.
The trick is to take every aspect of your website and ask yourself “What would speed up the process, while making things easier for my visitor, to help them find what they want quick and easy and order?”. Asking this question, while it will require more work on the development end, will certainly compel more people to buy and continue to do business with you. If you are skeptical of this claim, which website would you do business with if 2 websites offer the same items for sale? The one that makes it easier to find what you want and checkout or the one that requires more steps?
Summary:
Take the time to visualize the user experience for your new eCommerce website, in terms of appearance and the functionality, and you will be amazed with what ideas you come up with. Visit various well known eCommerce sites and even take a moment to find niche sites and see what ideas come to you.
Magento Development Lead
