Usability for E-commerce – Navigation issues
When a user visits a site, one of their primary points of focus will be the navigation bar. Almost every site has About us, Contact us, Terms, and Conditions.
Navigation usability is a broad topic; right now we will cover some of the basic points.
Main navigation is easily identifiable
Every website has had a main menu since the first browsers came on the market. Make your main navigation easy to find, read, and use.
There are many factors involved in creating successful navigational menus. Like:
- Universal Navigation – navigation appears on every page
- Placement Consistency – navigation appears in the same location on pages
- The Importance of Text – text for navigation is good, images are bad
- Feedback on Location – breadcrumbs, hyperlink styles, colors, etc
- Flash Navigation – a sensitive subject, we do not suggest to use it for web shops
- Site maps – hierarchical outline of website on one page
The best place for the primary navigation menus is the top or left panel. To minimize navigational confusion, keep your navigation in the same location on every page of your website.
Navigation labels are clear and easy to understand
When a user visits a new website, one of their primary points of focus will be the navigation bar. Almost every website has certain sections that are “expected” by users, such as About us, Contact us, Shipping, Return Policy, Terms and Conditions. The best place for them is the footer area. Do not combine it with a Product catalogue menu. The best place for catalogue menu is a left or top bar.
Number of buttons and links is reasonable and they have a proper look
The rule: a button should look like a button, a link – like a link.
Using a different colour that grabs your attention is a good way of increasing the performance of a button. Increasing the size of the more important buttons is also very effective.
It is important that design of a button includes a hover and active state as it can go along way to conveying the appearance of a button. A shape around a word without any shading isn’t enough to make it clearly look “buttony”, and a simple word on its own definitely doesn’t provide enough visual cues.
A few simple rules for button creation:
- do not overload a button with a text
- make the most important button bigger than other buttons around
- label buttons with what they do, for instant, cancel, next, order, close, reset etc.
- put buttons where users can find them
When you style website links, remember that users don’t read – they scan the page. There are a few simple rules for hyperlinks to remember:
- Hyperlinks should indicate where they will take the user.
- They should stand out not only from the background but from the surrounding text.
- Avoid underlining text that isn’t linked.
- Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.
- Do not underline links in menus!
Company logo is linked to home page
The Logo image should contain a link to website homepage. Event if the user gets lost on your website they have still an option to come back to Home page and start all over again.
Website search is easy to access
On e-commerce sites up to 30% of visitors will use the web shop search box, and each of these users is showing a possible intent to purchase by entering product names or codes. Effective site search means better usability, thus higher number of sales.
Navigation, including site search boxes, should be visible across the entire website, so that shoppers can move around easily, whichever page they happen to arrive at. The best place to place a search box is near the top of the page, above the navigation bar. Test different position of search box on your own web shop, find out which one generates the most queries.
Do not combine it with other boxes, buttons, links and label it clearly. You can also use a magnifying glass icon as a button for a search box.
The size of it depends on what type of products your shop sells, generally it should be able include 2-3 words (12-18 characters) so that users can see the whole name of the product they are entering.
Usability gurus do not suggest to use an advance search because of its complicated structure. But Magento provide an advance product filtering system, where user can filter items by color, price, type etc. which is a perfect alternative. Or if you need anything special, your option is custom ecommerce development.
Looking for eCommerce development backup?
Share your contact information, and we’ll be back to you in no time
