Navigation and Information Architecture

'Don't make me think' (Krug, 2013).  This phrase is often used by web designers and developers to describe achieving the best website usability. Usability means making sure something works well and that a person of average ability or experience can use it for its intended purpose without getting hopelessly frustrated (10 Usability Lessons from Steve Krug's Don't Make Me Think| UX Booth 2017).

My original menu was difficult to navigate, in particular there were issues with selecting the shoes, boots and trainers sub categories when they appeared to the right of the boy and girl categories.  The sub categories were difficult to select, especially from further down the menu, into the girls section. I was not happy with this menu and I could see that it would become frustrating for the users of my website.

Below is an image of my original menu structure before I enlisted the help of some family members to help create my menu structure using the card sorting method.  The purpose of this task is to create a menu which is logical and intuitive so that my site is user-friendly and encourages return business.  


Card sorting is a method use to help design or evaluate the information architecture of a site (Affairs, 2017).  The post it notes were arranged in a way that appeared most obvious and logical by each person involved in the card sorting process.  In evaluating the results from the card sorting method, it became clear that my eight family members agreed with the same menu structure which can be seen pictured below. 


As my site became more complex, I needed to create more headings in my menu to accommodate these new features into my site. I created a 'FAQ' and a 'Size Guide' page, I felt these pages were necessary to give the customer greater confidence when making their purchases. I asked members of my family whether they would like to see such pages in the menu bar at the top of the page or at the bottom in a footer menu.  It was decided that the pages should appear in both areas of the website so that they do not become overlooked.  It was also discussed whether the 'About Us' page was being overlooked as it appeared in the 'Home' drop down. I moved the 'About Us' from the drop down and created a new page for it's place as I wanted to make sure customers could view this page in order to get a greater feel for the company. 

The most recent site map can be seen below.


After I had created my top navigation menu, I created my footer menu.  I researched a number of e-commerce sites to see what pages and information is typically placed in the footer menus. I found that both Clarks and Mothercare placed their contact information, terms and conditions and FAQs in their footer menus.  











(Mothercare December 2017)


(Clarks December 2017)

As seen above, Clarks have size charts and guides available to select from their footer menu. I wanted to make sure that important information was going to be visible on the site across a number of areas to ensure that customers could view this information. My footer menu has been designed as pictured below.

Through my research into site navigation and information architecture, I became aware that site navigation does not solely apply to menu bars but other tools are available to help build a user-friendly site. A search bar has been placed onto my site which will allow customers to pin point exactly the products that they are seeking to find.  

Very often shoppers search for an item and then want to look at others before returning to their original item. From personal shopping experience, I feel that a very useful tool is the 'recently viewed items display'.  The 'recently viewed items display' ensures that items can be viewed and easily compared amongst others with the click of a button, it allows the user to move freely back and forth from products and creates a streamlined shopping experience. 


Product findability is key to any e-commerce business- after all, if customers can't find a product, they can't buy it (An E-Commerce Study: Guidelines for Better Navigation and Categories, 2017).


REFERENCES

Affairs, A. (2017) Card Sorting | Usability.gov. [Online] Available from: https://www.usability.gov/how-to-and-tools/methods/card-sorting.html [Accessed 9 December 2017]


Clarks Official UK Site | Clarks UK (2017). [Online] Available from: https://www.clarks.co.uk/?cm_mmc=PPC_TM_google-_-G_UK_PS_dA_T_EXA_NoGender_Shoes-_-clarks-_-clarks&gclid=CjwKCAiApJnRBRBlEiwAPTgmxPmu6h4MzZObgNnNgOyxlit037yCCyPP-KyiitykbrBgC5KtkSOUQBoCD1gQAvD_BwE [Accessed 5 December 2017].

Krug, S. (2013) Don't Make Me Think: A Common Sense Approach to Web Usability.


10 Usability Lessons from Steve Krug’s Don't Make Me Think | UX Booth (2017). [Online] Available from: http://www.uxbooth.com/articles/10-usability-lessons-from-steve-krugs-dont-make-me-think/ [Accessed 9 December 2017]

Pushchairs, Baby and Maternity Clothes from Mothercare (2017). [Online] Available from: https://www.mothercare.com/ [Accessed 5 December 2017].

An E-Commerce Study: Guidelines For Better Navigation And Categories (2017). [Online] Available from: https://www.smashingmagazine.com/2013/11/guidelines-navigation-categories-ecommerce-study/ [Accessed 9 December 2017].

Comments

Popular Posts