The key to great usability for an online store is familiarity. People have been buying goods online for years now, they expect you'll visit a certain process unfold when shopping on the internet, and when a developer makes radical departures from the status quo, tears may ensue (regardless of how good the designer's intentions may be). Does this mean a developer is locked into reproducing the same kind of shopping interface again and again? Certainly not, but conforming to certain standards will help the user.
This informative article analyzes the usability of components commonly found within most shopping website (e.g. the cart, the checkout process, etc). The concept isn't so much to be prescriptive and set down hard and fast rules, but instead to describe what will be most familiar to shoppers. Creativity and deviation from typical is a good thing on line, otherwise things would get pretty boring. But being aware of the de facto standards on shopping websites enables you to make informed decisions when taking a novel direction https://www.complasinternational.ie/.
The Login box - there's some variation in how shopping websites handle user log ins. Some sites require a person join before making a purchase, whereas others permit guest accounts. The obvious basics would be a username and password field. The sole pitfall here will be labeling the username field 'Email' ;.'Username' could be the more ubiquitous label, it helps cut-down on possible confusion which could arise if there were say a newsletter subscription box near by.
A lot of the choices to be produced within this interface element relate solely to naming; do you call it 'Register' or 'Sign-Up'?, in case you label your commit button 'Go' or 'Login'?, is the password recovery link called 'Password recovery' or 'Forgot your password?" ;.Whatever labels you decide on, you should favor brevity, generally nothing longer then three short words https://earsense.ie/.
After a person logs in, there's an opportunity to reclaim some precious screen real estate by eliminating UI elements which aren't needed anymore. Showing the shopper's name helps you to personalized the service and thus make it a little more friendly (nb. you can go with 'Welcome John Smith' as opposed to 'Logged in as: ...'). This is also a good place to show the 'My Account' and 'Logout' links since both these functions are logically related to the shopper's account.
By the way, a 'Logout' link is somewhat redundant since closing the browser window serves the same purpose (assuming the session has expired), but a logout feature might help alleviate any security-related concerns a shopper may have.
The merchandise search mechanism - the textbox for product searching is pretty straight-forward, but product browsing can go in a number of directions.
This works great if the category hierarchy is flat, it saves space plus you understand the UI wont behave unexpectedly if the item list gets long. But what if you have sub-categories (e.g. Fishing->Hooks, Fishing->Knives, Fishing->Bait, etc)? Sure you can use a dash to indicate a sub-category, nevertheless the drop-list option would start to get rid of some of its eloquence.
Categories and sub-categories could be treated exactly like site navigation, which is essentially what it's (i.e. product navigation). Common approaches are to make use of CSS fly-outs or in-place expanding panels (much like Windows Explorer) https://heelboy.com/.
Being an added touch, I love to put a reset icon close to the search button. Allowing the consumer return the searching mechanism to its initial state and never having to go all how you can the browser refresh button or press the F5 key.
The shopping basket - the structure of a shopping cart software is now fairly standardized these days. You have the item name with a hyperlink back fully product description, the price tag on the individual product, and the amount the shopper wants to buy.
I love to incorporate a small bin icon so shoppers can very quickly remove items from their basket which they no longer want. You might also add a sub-total in the bottom of the shopping cart software, but I don't think this is necessary since the consumer is likely to be shown a sub-total during the checkout stage.
Another feature which improves usability is feedback messages. It's important to let the consumer know when something happens as a result of their interaction with the device, as an example; showing a short message when something is added or taken from their cart https://www.pro-demo.ca/.
The merchandise details page - one of many biggest decisions here's whether to truly have a product listing page along with a detailed product description page. If you're just utilizing a listing page for products, you would show short descriptions along with each product. The alternative would show that a shopper needs to click a product's summary to be able to see its full details.
Generally I decide this based on what much information will be shown with a product. If it's only expected a few lines will be for every product's description, then the product details page wont be needed. However, this might have significant SEO consequences since each product doesn't have it's own name appear in the browser page title-bar. It could be argued that the summary-on-listing page interface is more efficient in terms of usability since a shopper gets all the info they need with fewer clicks.