Features explained in this article should be considered as guides that need to be followed from the beginning of site’s design, wireframing and through development phase. They’re all based on the experience from perspectives of the shopper, the shop owner and developers.
The one rule that can be applied here would be “Don’t over do it”. Many times you wish (feel or express a strong desire or hope for something that is not easily attainable) that you could show everything to the user (mostly for the first time user) so you try bringing it all out. In many cases that is not the best solution. Here are several reasons why and what to do about it :
Too many products – you can’t show them all, rather give a hint with a few featured products, selected products, new arrivals in an eye-cacthing manner. Big image or a slideshow that will solve the problem for the user trying to find his way around and actually enter the shop. Once she/he is in, the home page served it’s purpose: Showing the way inside the store.
Over categorization – When presenting the categories for the store you should be concise as much as possible with only top-level categories presented. Make the case even stronger by representing those categories with images and text for easy navigation and “Decision making”. It’s all about reducing the “Time to think” factor mentioned above.
No updates or news from you guys – Either being a regular or a first time user everybody likes to see that you’re alive and kicking. Use twitter updates or a facebook update or simply pull some headlines from your company blog. Anything that can help you with presenting yourself to the public should be utilized.
Static is sooo 2008. – If you have a video about your product or company that is actually worth watching on the front page, place it adequately or you can make it as big as a house if you have a flashy animation/video that will excite and motivate someone enough to see it and do something about it afterwards.
Enter the store, oh you’re already here… sorry ’bout that – Mind the lyrics, I mean the verbiage, ehm the way you write and speak to the public. Try, no, try harder when choosing the right words for using the shop’s features, be friendly and don’t point out the obvious while missing the explanation of the “not so obvious”. This will make a tremendous effect on the overall feel for the site and of course the product, the company and YOU!
As she said: “You had me at Hello”
…And for the the users that visit regularly or go straight to finding the product by name or manufacturer there is this thing:
Users will search either for a specific product, product feature or they will be using your site’s search for
pure store browsing, therefore you should make your search easy to use, refinable and also give the user more control when they know specifically what they are looking for using the advanced search the way it suits your store.
It is crucial that the search box stays visible all the time on the site for several reasons:
Why not? – Unless you have a secret reason why you should hide the search box, always iterate this feature as much as possible.
Advanced search in the sidebar – For those who know exactly what their looking for
Providing something like this in sidebar gives even more control for those shoppers that want to narrow their search and land directly to the desired result page.
Search Autocomplete – That one comes built-in when you run your store in Magento:)
If you would for example search for a phone the autocomplete would suggest the correct wording providing a reassurance to the user that she/he is on the right track adding to the value of great experience of shopping on your site.
As the man said: “You complete me“.
(O.K. Less of Tom Cruise please and more of catching the point, but you get it;)
Breadcrumbs and sub navigation – find my way around
Show me where I am – Always, except when I know where I am. Magento has breadcrumb navigation built-in and exactly in the places where you need them. You need not to worry about that:)
Show me where to go next – Even with every aspect of the store’s functionality covered, underestimating the power of navigation will for cause a headache and major disorientation leading to low conversion rates since the users will flea from your store quicker than they came in.
Don’t rely only on the drop-down menu provided in the main menu in the header section, place a category sub navigation so that all of the major categories are displayed. Remember the “Over categorization” from the top of the post? Well, now it’s time to display those categories in all their glory, preferably with those fancy expandable menus. See a great example here where we used the only the main categories but once you enter one category you’re presented with it’s subcategories. Nice way of saving the space and clever showing of the categories when they need to be shown. Note: Magento has item count for each of the categories products. This provides useful info about how large the collection. As you see in the image above.
Phew, hope you can keep up with these long sentences, ’cause we’re off to:
Category page or Category listing
Show me what you got- But let me decide how much I need to see at once.
The same principle as on the homepage, don’t over do it. If I want to see all of your 10000 products in one category on one page, well then I’m the one over doing it. If you let me see only 10 by 10 products out of those 10000 products, then you’re arresting my shopping experience. Find the balance and everybody’s happy.
Thankfully, Magento lets the store owner and the shopper meet half-way with options for numbers of products to show as well as sorting them by attributes or whatever suits your/their needs.
I’ve found the product – Let me buy now!
The look and feel of this page and the use of “Buy Now!” or “Add to cart” can dramatically affect user’s experience and convert it into “I’m their customer now” kind of experience if you let the shoppers who already found their product make the purchase. It’s all about who you’re talking to, right?
Note: This relates only to the products that don’t need any additional (required) choice to be made that is.
The Product page
Yes that’s the one- And now, impress me!
First impression is what makes the sale so make that one a success. No matter if your product is “simple” enough to have “only a few” color options present it with the best photo/illustration/3D render you can and describe it well.
This is the tipping point, so you better tip it to everyone’s favor with shopper’s purchase of exactly the right product and you making that sale on the spot.
Image is everything so try to put enough valuable images of the product as you can. Note: Don’t save on getting the best photo/illustration/3D render, you only get one shot so do it right.
There are some additional recommendations you should follow that can be easily overlooked during the site planning:
- Price – Make it clearly visible, don’t try to “minimize” it visually
- Add to Cart button – Make it clear as the summer sky: big, bright and very visible but of course, don’t over do it This one should be used instead of the “Add to Wishlist” button cause it doesn’t stay in the way of user’s purchasing decision.
- Payment – Provide as many payment options necessary: Paypal, Google Checkout, all major CreditCards, money orders etc. Magento has lots of payment gateways built-in for that so use them as many you need.
- Sharing – Allow the users to send this product to the ones that can actually buy it if they are not interested or want their parents to buy it for them, maybe?.
Highly recommended for the product page would be of course “Recommended products”. Hey, I like it when the salesman does his job and finds something interesting for me. Do you?
Magento has that built-in also as “Related products” placed cunningly in the sidebar and sits patiently there while you examine the product and decide in the next second to look what your “Online salesman” believes is related to that product. Take a look at it on the Magento’s official site .
My Shopping Cart
OK, I’m ready to go to the checkout – What’s in it and do I need more or less?
In a great situation where your customer has more than two products already in the cart, she/he is maybe considering to buy more of the same product with or without removing other items. Make sure you provide enough visual cues for adding as well as removing items from the cart.
This IS the way to do it ’cause you don’t go around the “Real shop” and stop people from returning the product back on the shelf.
As on the product page with “Related products”, “Shopping Cart” is a great place to advise the user about some cross-sell products available in the store. Presented like that, they’re easily added to the cart while the shoppers prepares to go to:
The Checkout page:
Keep it simple – Don’t make me dwell or register, please
Since we started this journey through Magento store process, we’ve come a long way and now it’s only fair that this checkout business feels fast, secure and with my shipping options presented well and understandable.
This is where Magento’s “One page checkout” comes in, built with that in mind and ready for action, so use it.
If there’s something not available at that moment or for the particular product, let me know and give me options. Especially for the shipping and handling.
Don’t require registration before the purchase except if it is “really” necessary for some reason. Rather provide some new and now widely acceptable ways of connecting thru:
now possible to allow your clients to register with their existing facebook account. This provides comfort, ease of use and friendly approach for the shopper and by default relieves her/him of those tedious tasks of reentering the same data again, registering for a new account etc. Yes, it is good as it sounds and you should get on that train right now.
Here you can find most of the answers about this service.
That’s it:) Well far from it, please leave your comments about your views as a shop owner or a shopper and it will definitely help everyone’s shopping experience.