CHECKLIST DE AVALIAÇÃO HEURÍSTICA DE USABILIDADE PARA COMPARAR OS FRAMEWORKS BOOTSTRAP E TAILWIND EM INTERFACES GRÁFICAS DE E-COMMERCE

Abstract

Usability is one of the main factors that influence user experience, as it can lead to higher conversion rates due to easier navigation and faster purchasing processes. This is one of the reasons why e-commerce platforms that have friendly, clear, and responsive graphical interfaces provide users with a satisfactory experience, reducing abandonment rates and building trust in the system. In this context, choosing a CSS framework is a key decision in the development of graphical interfaces for e-commerce, as it impacts usability and the final user experience. Given the growing popularity of approaches such as the component-first model of Bootstrap and the utility-first model of Tailwind, the problem arises of understanding how these different development paths affect software usability based on programming best practices, and of deciding which one is more suitable for robust applications such as e-commerce systems. The main objective of this work is to compare the usability of the CSS frameworks Bootstrap and Tailwind through heuristic evaluations of e-commerce graphical interfaces, in order to determine their main interface characteristics. To achieve this objective, a research method similar to a qualitative content analysis was adopted, characterized as a comparative case study between CSS frameworks, employing heuristic evaluation using a checklist. This inspection was guided by a checklist adapted from Nielsen’s usability heuristics for the e-commerce context, according to Kumar (2022), applied to two open-source functional prototypes representing each framework. The main result obtained was the discussion of the two checklists generated through the heuristic usability evaluation. During the evaluation process, Bootstrap presented more implemented checklist items/heuristics than Tailwind; however, both frameworks are viable for the development of graphical interfaces for e-commerce. Bootstrap proves ideal for standardized projects with short deadlines, while Tailwind is more suitable for projects with more experienced developers, as they will find it easier to implement customized and optimized designs.