The Navigation Bar on e-commerce pages: an approach to the UI on mobile device

Structure of e-commerce web pages

From a design point of view, most web pages are structured by blocks framed within a container. According to Beaird J[2], they are organized hierarchically in an order similar to the following:

- Logo or identity block: it is the space assigned to the emblem and the elements that identify a company. On a website,  it is located at the top of each page, and its main objective is to give it cohesion and identity.

- Navigation block: it is a space assigned to the menus that guide users through the different pages of a website. As the Logo block, they are located at the top.

- Content block: it is the space in which information of a different nature is exposed: text, audio, image, or video. Generally, this space is located after the navigation and logo blocks.

- Footer block: it is a space destined to the elements that contain information referring to "copyright, contact and legal information, as well as some links to the main sections of the site[3]". This space is located at the bottom of the page and, as the logo, is usually on all pages of the website.

- Blank spaces or negative spaces: It is an “area of ​​a page without type or illustrations[4]" that allows the design to “breathe” by giving it balance and unity[5]. An example is the space surrounding the images, the margins, the space between each of these blocks with specific functions that can range from identifying the website, going through site navigation, to providing relevant information about the site. However, in the case of the Logo and Navigation blocks, we have observed in previous studies that both overlap to a point where they form a large block that we can call the Navigation Bar.

The Navigation Bar: a two-part structure

If we stick to the findings of our previous study, even though the Logo and Navigation blocks are considered separate elements, it is clear, at least on e-commerce pages, that both blocks are interdependent and their interaction forms a large block. This encompasses what we call the Navigation Bar. Specific functions such as Search, Sign in, Bag are associated with the Logo block of the e-commerce pages, others such as Wishlist, Language, Location may even appear. On the other hand, the Navigation block is associated with categories that depend to a great extent on the type of store[7], thus forming a Category Menu that is generally arranged horizontally or in dropdown.

Now, in many cases, the Logo block, together with its functions, is clearly delimited by a separating line or by the contrast between light and dark colors. However, it is no less true that in many other cases the elements of the Logo are intermingled with those of the Navigation block, which prevents an absolute delimitation between one block and another:

In the first image at the top, we can see, firstly, that the Logo and its Functions occupy the same line next to the Categories Menu. In the second image, the Categories Menu is located on the bottom line next to the Logo. It occurs similarly in the third image, in which, despite the color contrast that tries to differentiate both blocks, the Women-Men Categories Menu is in line with the Logo, mixed with what should be the Logo block. This dynamic can be observed in several e-commerce pages, which leads us to the conclusion that both the Logo block and its functions, as well as the Navigation block and its menu, make up that larger set that we can call the Toolbar Navigation.

In this way, we confirm what was stated before: on a website, all the blocks fulfill a very specific function. Those assigned to navigation have the function of guiding the user most efficiently throughout a website through a Category Menu or specific search functions, with which we are touching very important aspects of the User Interface (UI). This guiding function is carried out through the Navigation Bar, which is basically “a UI element within a web page that contains links to other sections of the website[8]”. These links are organized hierarchically, thus forming the structure of a website[9]. For this reason, it is considered to be part of the template of a site, as shown in image 1, so it is manifested on all its pages.

Without a navigation bar, users would have to enter the URLs of the web pages separately. Instead, the Navigation Bar links those URLs through hierarchical graphic elements to which the links of the different web pages of a website are linked, allowing users to distinguish topics, subtopics or links to specific functions such as search, registration, change of language, or location.

It is logical then that the Navigation bar claims a privileged place because, above all, it must be visible. For this reason, it is usually displayed at the top of the Content area or, in some cases, on the side of the webpage[10]. What does the Navigation Bar show? The navigation structure, which in many cases depends on the type of website. If we focus on the pages of large catalog e-commerce stores, our previous study suggests that the Navigation Bar can present functions such as Search, Account, Bag, as well as hierarchically organized categories such as Women, Men, Kids, Dresses, Clothing, Shoes, Accessories, and Sale[11], all of which constitute a classification that goes from the most general to the most specific, allowing the user to quickly filter the first stage of their search. According to our study, the elements that make up the Logo and Navigation blocks are structured according to the type of store as follows:

An example of the influence of the type of store in the structuring of the Navigation Bar is represented by the Unlimited store pages, whose main elements are Categories, Deals and Services, since the most general in these stores is the type of product that the user searches, then the offers and finally the services offered to the user, such as shipping, claims, etc. In this way, what is relevant in these cases is not so much what the navigation bar contains, as this may vary, but rather the clear hierarchy expressed by all the elements it contains.

Methodological approach

In a previous study, we have determined the elements that characterize these blocks in the Desktop[13] graphic window, and they remain to be determined in the window of mobile devices such as smartphones or tablets. This fact responds to the differences between these two types of windows as the input and output modes of both differ, being characterized in the case of Mobile by the use of small keyboards and small touch screens, efficient to load or download information from servers, not so much to store or process it since they have been designed for short sessions, unlike workstations or Desktop.

Due to these differences, the conclusions of our Desktop study on the Logo and Navigation blocks cannot be extrapolated 100% to the graphical window of mobile devices because there is a difference in the way in which users interact with these devices. This has motivated us to undertake a study that, in the first instance, focuses on the study of the Logo and Navigation blocks that make up the Navigation Bar on mobile devices to determine the design features in the UI.

For this purpose, we have chosen a quantitative approach that focuses on the frequency dynamics of four design aspects in the Navigation Bar of mobile devices, which refer to the alignment, the graphic representation of the different elements, the background, and the segments into which the Navigation Bar is divided, all of which has been observed in a corpus designed for this study, made up of the Desktop and Mobile Navigation Bar of e-commerce stores with a wide catalog. The corpus is based on screenshots of the Navigation Bar taken from a set of 32 iconic wide catalog e-commerce stores in the United States. The criteria to establish these stores was based, as in our previous studies, in the statistics provided by Finder (https://www.finder.com/online-shopping#Nike), all of which has allowed us to derive the categories of stores that we have used in our previous studies, which appear labeled in the following table with their frequency and the percentage that each one represents in the sample:

NavBar Desktop and Mobile Comparative Study: Preliminary Findings

Logo alignment

One of the first aspects that we have analyzed is the alignment of the Logo, both on Desktop and Mobile. In the first case, the frequency has allowed us to determine that 61% of the pages in our sample align the Logo to the left of the Navigation Bar, while the remaining 39% align it in the center.

On Mobile the dynamics change so that 58% of the pages in this type of window align the Logo to the center of the Navigation Bar, the remaining 42% do so to the left.

Now, these percentages, placed in relation to the type of store, reveal some interesting trends. On Desktop, for example, a large part of that 39% that aligns the Logo in the center is specifically occupied by the pages of Fashion and Beauty stores, a feature that differentiates them from the Department, Shoes, Unlimited, and Home stores. On Mobile, on the other hand, the Shoes, Unlimited and Home stores make up 42% of those pages that align the logo to the left, while the Fashion, Department and Beauty store pages make up the group with the highest frequency that aligns the Logo in the center of the Navigation Bar.

Category Menu Alignment

Regarding the alignment of the Category Menu, on Desktop, 52% of the pages in our sample are aligned in the center. The remaining 48% of the pages rank the Category Menu on the left.

On Mobile, however, the menu is less variable because 87% of the pages in the sample align it to the left; in very few cases the trend is different and when it breaks, the menu is usually located on the right.

If the type of store is taken into account, a clear trend can be observed on the Desktop graphic window on the Departament and Unlimited store pages to align the menu to the left, the pages of both stores represent almost the total of 48% of those stores that prefer this variant of alignment, leaving Fashion, Shoes, Beauty and Home stores within the majority group that tends to the variant of central alignment.

Alignment of Functions

On the other hand, regarding the alignment of the functions that accompany the logo, it has been observed that, both on Desktop and Mobile, functions such as Bag, Account, and Wishlist are aligned to the right in 100% of the cases. Nevertheless, the Search function, although it generally follows this same trend, tends to vary its alignment, and in some cases, it may appear at the bottom of the bar, in the center, or on the left.

Regarding the functions, there is a significant difference between the Desktop graphic window and the Mobile one. This difference lies in the fact that the set of functions that is generally used on Desktop (Search, Account, Bag, Wishlist, Language, Location ) is reduced to its minimum expression on the Mobile window, Search and bag being the most recurring and only in very specific cases of Fashion, Unlimited and Home store pages other functions such as Account and Wishlist.

Graphic representation of the elements of the Navigation Bar

The second aspect of our study has been the graphic representation of the elements of the Navigation Bar. This is the way in which the elements are presented to the user. In the case of the Desktop window, 94% of these elements are presented using spellings. Certainly, occasionally some icons mediate; nevertheless, they are generally described by means of spellings.

In the case of the Mobile graphical window, the same does not happen, since in 94% of the cases the graphical representation of its elements is done by means of icons so that we are facing two different modes of graphical representation with which the user must be familiar with: spellings on Desktop and icons on Mobile.

A clear example of this difference is the Categories Menu, which on Desktop is usually represented extensively by means of spellings. This menu on Mobile is represented by the iconic Hamburger Menu in which all the categories that make up a certain website are condensed.

Navigation Bar Background

Our third aspect of analysis is the background of the Navigation Bar. When observing it, there are no marked differences between the Desktop and Mobile windows. In both cases, 74% of the pages use a white background, while the remaining 26% use a generally dark background. This background variation seems to be associated with the type of store in both cases since in both Desktop and Mobile it is observed that the 26% that use a dark-colored background is made up entirely of Unlimited store pages and one or two pages that simulate its structure.

Navigation Bar Segments

The fourth aspect that we have analyzed has to do with the segments into which the Navigation Bar can be divided. We have seen that on Desktop, 65% of the pages in our sample split the Navigation Bar into 2 linear segments, another 26% condense all the elements into 1 line and 10% into 3 linear segments.

This trend completely changes in Mobile as 81% of the pages in our sample change to a single linear segment in which the Navigation Bar elements are organized, establishing through this aspect a clear difference between the graphic window of Desktop and Mobile.

Conclusions

It is important to remember at this stage that the hypothesis of this study is based on the existence of great design differences between the Desktop and Mobile graphic windows; differences that are manifested in the Navigation Bar. For this reason, it is inappropriate to extrapolate the characteristics of one to the other by 100%. To specify these differences, we have relied on the analysis of the frequency of four design aspects on the Navigation Bar: the alignment, the graphic representation of the different elements, the background, and the segments into which the Navigation Bar is divided. From the results of this observation we have been able to determine the following:

As seen in the table above, there are very clear contrasts that make the difference between the graphic windows of one device and another. In the case of the Mobile graphic window, it is distinguished by a central alignment of the Logo, as well as the left alignment of the Categories Menu and the right alignment of the Functions, as well as their reduction to the minimum necessary. In addition to these differences, the graphic representation of the elements of the bar is done through icons and the generalized use of 1 linear segment that frames all the elements of the Mobile Navigation Bar.

References

[1] Laurinavicius, T. (2020). Web page layout: website anatomy every designer needs to learn. https://webflow.com/blog/web-page-layout-101-website-anatomy-every-designer-needs-to-learn.

[2] Beaird J. (2010) The Principles of Beautiful Web Design. Canada: SitePoint.

[3] Beaird J. Op. Cit.

[4] Beaird J. Op. Cit.

[5] Beaird J. Op. Cit.

[6] Rojas, N. (2019). Study on elements that constitute navigation and footer blocks in ecommerce stores with a wide catalog. https://www.quo.agency/insights/study-on-elements-that-constitute-navigation-and-footer-blocks-in-ecommerce-stores-with-a-wide-catalog.

[7] Rojas, N. (2019). Ibid.

[8] https://www.techopedia.com/definition/20934/navigation-bar

[9] Dhillon, B. (2018). Systems Reliability and Usability for Engineers. Florida. United States: CRC Press.

[10] Dhillon, B. (2018). Ibid.

[11] Rojas, N. (2019). Ibid.

[12] Rojas, N. (2019). Ibid.

[13] Rojas, N. (2019). Ibid.