%20(11).png)
Between two lands: desktop and mobile
Now then, from these previous studies, we have been able to deduce the structure and design that characterize the product pages of large inventory eCommerce. Nevertheless, those studies focused on the graphical window of workstations such as desktops or laptops, with a wide variety of inputs and outputs devices from mouses or keyboards to massive monitors. These workstations are designed for sessions that can range from minutes to hours and "are suitable for editing and managing significant volumes of information or for performing complicated tasks that require cognitive processing[3]."
Despite all these benefits, more and more users are accessing the web through other devices such as smartphones or tablets, which are mainly used to upload or download information from servers, and not to store or process it. The usage during other activities or the input and output restrictions conditioned the interactions with those devices. Also, the small touch screens and keyboards can fatigue users during prolonged sessions. That is why interactions are limited to seconds or minutes. Given these differences, the conclusions of our desktop-oriented studies cannot be extrapolated to the graphic window of these mobile devices, as they vary in size, type of connection, and the way users interact.
Designing for mobiles: adaptability and responsiveness
These facts are a challenge in terms of web design and development. In this matter, Ethan Marcotte, creator of the "responsive web design" concept, stated a decade ago that "we are facing a greater number of devices, input modes, and browsers than ever before."[4] What was a prediction is now a reality that designers and developers of web sites have to face.
To give you an idea, in 2014, 58% of adults in the United States owned a Smartphone with various operating systems, while 32% owned other types of phones from which they accessed the network through search engines with much more limited features[5. Currently, the connection with mobile devices reaches 65% in the United States, surpassing the connection through desktop or other devices. In Asian countries such as South Korea, Japan, or China, the connection through mobile devices is even higher.
In light of the variability of devices, browsers, and networks, the user experience requires websites to adapt to each device or browser. Given this scenario, two options are available: design websites specifically for mobile devices through adaptive web design (AWD) or responsive design. AWD involves creating a design adapted to the size of each screen, which is delivered after the detection of the mobile device and its specific characteristics[7]. Although the wide variety of sizes in the market affects this technique, because it means creating a version for each screen size, therefore a designer should create up to 6 different versions of a website.
In some cases, AWD is not a feasible solution considering there are many brands of devices and each one uses a different screen size. Fong states that "developing different versions of an application for each device is not cost-effective, and the development process for that purpose is a time-consuming process"[8]. This is why the second option is more attractive since it focuses on responsive design, which allows for the creation of a single design that can be adapted to different devices since it is not based on fixed elements, but on variables. It is a design that emulates a fluid that adjusts to the size of its container.
We are thus approaching an intelligent concept of design and development that has defined a new way of conceiving web pages: responsive web design, a flexible web design technique that does not depend on a fixed size of the design, but on detecting the size of the screen to adapt accordingly[9], allowing the same web design to be opened in a Smartphone as well as in a desktop or tablet.
Despite being different approaches, these web design techniques are not opposing, they are just different ways of converging on the same point. Moreover, they are not absolute methods. A designer can choose one or another technique depending on factors such as the type of device users have or the user experience they want to provide.
According to Soegaard[10], in receptive web design, the designs must adapt to changes in the width of the browser, which is achieved by optimally adjusting the location of the elements to fit the available space. This way, the content accommodates to the browser window. "On cell phones, this process is automatic; the site checks the available space and then presents the optimal layout." Hence the receptive design is conceived as liquid since when poured, it adapts to the container regardless of its shape: wide, long, high, or low. But the characteristic that defines more precisely the receptive design is that its "client" is the browser, that is what changes the appearance of the site depending on the dimensions it has. According to this author, among the advantages offered by this type of design are:
a. Good user experience due to its fluidity, users can access a website either on a portable device or desktop.
b. There is an extensive amount of templates for most content management systems.
c. SEO friendly, since one URL works for all devices.
d. Easy to implement.
These advantages are in contrast to limited control over screen size design, the ability for elements to move, and many variations in download times between desktop and mobile devices. Despite all this, responsive design is currently the most widely used method.
On the other hand, in the adaptive web design the content has a fixed design size, which means that at least six designs must be developed for the most common screen widths: 320, 480, 760, 960, 1200, and 1600 pixels[12], after which the best design for the screen size is selected. As a singularity, the adaptive design depends on the server. "Even before the page is delivered, the server (where the site is hosted) detects the attributes of the device and loads a version of the site that is optimized for its dimensions and characteristics"[13].
The adaptive design has three considerable advantages[14]:
a. Better performance: faster websites as a result.
b. Greater flexibility: changes can be made to the code without affecting the whole site.
c. Better user experience: the functionality can be designed in detail, allowing for an almost personalized experience.
The aspects that counterbalance these advantages are: first, a high cost in labor. Second, tablets and netbooks can have problems with site configuration that tends to be oriented to smartphones or desktop computers. Lastly, search engines have trouble appreciating identical content on several sites, which is a problem in terms of SEO.
Even so, what will determine the use of one of these techniques will be the circumstances. For example, due to design and maintenance costs, adaptive design should be implemented if it is certain that more than 50% of the users who visit a website are using mobile devices. Otherwise, it is better to lean towards responsive design; on the other hand, if a more specific, almost personalized user experience is required, adaptive design should be chosen.
Whatever the case may be, the reasons for leaning towards one design or another will depend on the purpose for which a website is being built. Also, there are significant differences between design for desktop and for mobile devices since the user experience varies according to the device, aspects that both designers and developers must undoubtedly take into consideration.
What we know about the listing page: structure and design
Structure
In our previous desktop research[15], we were able to identify five key elements that constitute the listing page:
- Page title: header that illustrates in a short sentence the content of the page.
-Categories: the classification of the products on the page (jeans, dresses, shoes, etc.)
-Filters: a feature that allows you to specify the characteristics of a product to facilitate the search.
-Sort function: a function that allows you to establish an order of appearance of the search, which can be ascending or descending, higher to lower, etc.
-Gallery: space on the page where the different products are presented through images with information such as name, price, popularity, or shipping.
As you can see in the image above, on desktop all these elements can be easily identified. Some of them are simple, as is the case of the title or the function to order. However, some are more complex since they have subelements. For example, the filter has alternatives such as Color, Size, Price, Brand as an essential part of its menu plus others that depend on the type of store.
As we stated in our research on the desktop listing page, another complex element is the Category. It is structured in several ways, in a "Browse by" feature, a "Categories" menu, or in most cases, without anything preceding it, as shown in image 2.
The gallery is another complex element due to its sub-elements called items. Each item has all kind of components, such as:
- Price: numerical expression of the cost of the product, often accompanied by another number in red indicating a discount.
- Title: it identifies the product. It can include a brand, name or code and a brief description of the product.
- Called: label usually located in the background. It can be used to announce an offer, a new or exclusive item, a wish list option, etc. More than one can be displayed at a time.
- Rating: it shows the rating that users give to a product.
- Variants: these are the different variants that a product can have, such as size or color.
- Shipping: its purpose is to inform about the product's shipping options.
- Quick Shop: quick action that sends the user directly to the purchase page.
Some of these components are frequently used on all pages, while others depend on the type of store. As you can see in the table below, all stores use the Title and Price. And the remaining components are not equally relevant in all stores. According to this data, the majority of stores use Called in more than 60%, except for those with unlimited products. On the other hand, unlimited, beauty, and home product stores use Rating in more than 67%. The Variant component has a percentage between 40% and 67% in fashion, department, and home stores. Shipping seems more relevant for unlimited product stores, as it is used in 100% of samples. Finally, the use of Quick Shopping is around 70% in home and fashion stores.
Methodology
As initially mentioned, the conclusions of our desktop study cannot be entirely extrapolated to mobile devices due to the differences between them. Therefore, we have developed a new study that aims to establish the key features of Product Listing Pages for large inventory eCommerce on Smartphones. In order to be able to compare desktop and mobile, we have considered the structure, which means considering the elements such as Title, Categories, Filters, Sorting Function, and Gallery. Additionally, we have chosen a quantitative approach based on the frequency analysis of each of these structural elements of the listing page. For this purpose, we have compiled a corpus of smartphone Product Listing Pages made of 32 iconic online stores in the United States, which we then classify according to categories we shared in previous studies. The criteria for selecting these stores were based, as in preceding articles, on Finder's statistics (https://www.finder.com/online-shopping#Nike). The table below presents the number of stores and the percentage of each category in the sample:
Preliminary results
Structural aspects of the smartphone Product Listing Page
The Mobile Listing Page maintains the five key elements that characterize the desktop page, which are: Title, Categories, Filter, Sorting Function, and Gallery. That said, the appearance of some elements changes, making them seem erased. As we can see in the following images, elements such as Categories, Filter, or Sorting Function seem to have been deleted.
As you may observe, in the left capture there is no option to search by Categories, and in the right one, there is no Filter, Sorting Function, or Categories. However, this suppression is not such. It is a merger between those not visible elements and others that are visible. To give an example, on the page on the left the element Categories is blended with the Navigation Bar Menu. Similarly, on the right capture, all those apparently absent elements are merged with the Menu. In other cases, elements such as the Filter and Sorting Function fuse into a single element. The image below shows how the Categories are displayed by clicking on the Menu on the Navigation Bar and the Filter and Sorting Function are merged into a single button.
It's interesting how merging the Category with the Menu makes the latter to be integrated into the Listing Page on mobile devices, even if it is part of the Navigation Bar. It should be noted that this behavior reflects a trend, since, in at least 66% of cases, users must enter the Navigation Bar Menu to select the categories in which they want to do their search. The rest of the pages go to either vertical or horizontal drop-down formats or an extended format. The following table shows the frequency of use among the different ways in which the Category is usually displayed.
As can be seen, the Categories can appear on the page in various ways without necessarily being merged with another element, as shown in image 6. Yet, these options represent only 34% of the cases in our sample.
Regarding the Gallery element, we have found that 81% of the sample use a grid layout, being more common the selection of two grids, only a few pages of Shoe stores use three and in no case four. The exceptions are the Unlimited Products store pages, where the list layout is favored.
On another note, if we focus on the items in the Gallery, let's remember that each one is made of seven different components: Price, Title, Called, Rating, Variants, Shipping, and Quick Shop. The presence of these components depends on the type of store. The exceptions are the Title and Price, which are essential since all pages require them.
Other components of the Item such as Call, Rating, or Variations, while not having a high frequency of appearance at a global level, are relevant for some stores. Such is the case of Unlimited Products store pages, which value the Rating feature, or Department, Shoe, and Home stores, for which the Variations feature is important, and Fashion, Shoe, and Home stores, which value the Called feature.
These observations are drawn from the frequency data, which gives us an idea of the relationship between the components of the Item and the type of store. As shown in the table below, 100% of the stores use the Price and Title, but for the remaining components, the percentages of use vary depending on the type of store. Thus, the Called component is relevant for most stores with usage around 60%, except for Unlimited Products stores. More than 75% of Beauty, Unlimited Products, and Household stores use the Rating, while 75% of Department store pages use Variations. Finally, Shipping is relevant in 80% of Unlimited Products stores. From this data, we can establish that on mobile devices the item is structured by six components, one less than on desktop.
Conclusions
Currently, the challenges in web design are geared towards adapting to different mobile devices. Navigating with a desktop is no longer the only option. Recent statistics indicate the boom in connection with mobile devices, 65% of users in the United States alone, and more in Asian countries. Designing according to these devices is now a priority, especially if it comes to eCommerce stores.
In previous studies, we have been able to extract the structure and design that characterize the Product Listing Page of large inventory eCommerce. However, these have been oriented to the graphic window of workstations such as desktop or laptop, so their conclusions can not be extrapolated to the graphic window of mobile devices, as they vary concerning size, type of connection, and how users interact. For all these reasons, throughout this study, a specific analysis of Listing Pages of large inventory eCommerce has been proposed to identify their structure on mobile devices. The result of this study reveals the following conclusions:
1. Mobile devices maintained the five core elements of the desktop Listing Page: Title, Categories, Filters, Sorting Function, and the Gallery. The difference is that elements such as Categories, Filters, and Sort Functions are merged with others, giving the feeling of fewer elements. For example, the Sort Function and Filter are normally merged into a single button, and Categories are merged with the Navigation Bar Menu.
2. 66% of the pages integrate the element Category to the Navigation Bar Menu, suggesting a trend towards this. Thus, in 34% of the websites, the Category appears in the form of a menu or horizontal list, without being merged with another element.
3. By merging the Categories to the Navigation Bar Menu, it integrates into the structure of the listing page on mobile devices.
4. On a different note, in most cases, the Gallery is made up of a maximum of two grids. The exception to this practice is the Unlimited Products store pages that preferred the use of the single-column list layout.
5. As for the Item, the Title and Price aspects are essential, as all pages require them.
6. Around 60% of the pages in almost all types of stores use the Caller component. The exception is the Unlimited Products stores.
7. According to the frequency data, the use of Ratings is related to the Unlimited, Beauty, and Home Products store pages.
8. Having Variants is more frequent in the Department Store pages.
9. The Shipping section is more relevant for the Unlimited Products store pages.
10. From this data, we can discern a difference between desktop and mobile: the Item in mobile devices is structured by six components, one less than in desktop.
References
[1] Balasubramanian, K. (2017). Isomorphic Go. Birmingham: Packt.
[2] Balasubramanian, K Idib.
[3] Komninos, A. (2019). One Size Fits All? Definitely Not in Task-Oriented Design for Mobile & Ubiquitous UX. Interaction Design Foundation. Recovered in www.interaction-design.org/literature/article/one-size-fits-all-definitely-not-in-task-oriented-design-for-mobile.
[4] Marcotte, E. (2010), Responsive Web Design. A List Apart. Recovered https://alistapart.com/article/responsive-web-design.
[5] Peterson, C. (2015). Learning Responsive Web Design. O’Reilly.
[6] Desktop vs Mobile vs Tablet Market Share Worldwide. (2020) Recovered https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet.
[7] Cousins, C. (2015). Is adaptive better than responsive design?. The Next Web. Recovered https://thenextweb.com/dd/2015/09/01/is-adaptive-better-than-responsive-design/.
[8] Fong. E. (2019). Responsive Web Application Problem Solution Approach. MillionStrengthKnowledge.
[9] Peterson, C. (2015). Ibid.
[10] Soegaard, M. (2019). Adaptive vs. Responsive Design?. Recovered www.interaction-design.org/literature/article/adaptive-vs-responsive-design.
[11] Goodman, G. Responsive vs. Adaptive Design: Which Is Best for Publishers? in Cousins, C. (2015). Ibid.
[12] Interaction Design Fundation (2020). Adaptive Design. Interaction Design Fundation . Recovered www.interaction-design.org/literature/topics/adaptive-design
[13] Cousins, C. (2015). Ibid
[14] Cousins, C. (2015). Ibid
[15] Rojas, N. (2020). A study on the eCommerce detailed product pages and their essential aspects. Insights Quo Agency. New York, EU. Recovered https://www.quo.agency/insights/a-study-on-the-ecommerce-detailed-product-pages-and-their-essential-aspects.
