International Journal of Engineering Insights: (2023) Vol. 1, Nro.1, Regular Paper

https://doi.org/10.61961/injei.v1i1.8

Web page user interface development for business shoe stores

Gissela Gamboa · Jonathan Toapanta

Received: 20 July 2023 / Accepted: 10 October 2023

Abstract: The user interface for web pages is very

important and indispensable for many companies that

want to thrive. It oﬀers the perspective of creating de-

signs for any type of company with a single software

that allows coding and coloring web pages. The ob-

jective of this work is to meet the needs of the com-

pany owner with a design created in Notepad++ that

is simple and freely available for users who wish to pur-

chase the product. It involves simple manipulation and

non-bold colors, as well as standard fonts that are visi-

ble to the customer. A satisfactory result was obtained

through a survey conducted with people from the Giker

company. We also designed the web page with four but-

tons that display each mentioned piece of information.

Finally, we manage to meet the company’s requested

needs, achieving the appropriate design for user com-

fort.

Keywords User interface · Web page · Companies.

1 Introduction

Companies have been innovating within the technology

ﬁeld, enabling the creation of simple publications for

everyone. It is essential that there are always means

of communication such as websites and mobile applica-

tions available to those who are interested. The creation

of a website is the primary tool for disseminating com-

pany information and making it freely accessible to the

public.

Thus, companies tend to improve the design of their

web pages with the aim of meeting existing needs. This

generates the necessary recommendations to achieve a

user interface that is easy to use, with attractive and

practical elements to fulﬁll its purpose [1]. The design of

the user interface is challenging and costly, which is why

automated generation may become increasingly impor-

tant in the future [2]. The user interfaces are designed

Gissela Gamboa · Jonathan Toapanta

Universidad Indoam´erica

Ambato, Ecuador

{ggamboa3, jtoapanta16}@indoamerica.edu.ec

to avoid eye problems, including visual fatigue, tired

eyes, irritation, redness, and blurred vision [3]. A user

interface includes software and tools that help develop-

ers design and implement the user interface. These tools

have had a signiﬁcant impact on today’s developers, as

practically all modern applications are built using some

form of user interface tool [4]. The execution of a user

interface is primarily automated by existing tools, but

the design remains a manual task [5].

This interface incorporates a wide range of function-

alities aimed at achieving optimal system performance,

proper management of available robotic resources in

the environment, and providing the user with real-time

information about everything happening in reality [6].

Colors and visual design are the primary languages for

expressing emotions and the content of a web page. The

design of a web page is crucial based on user prefer-

ences. The title, image, colors, and structure of a web-

site aﬀect the design style of its visual interface [7]. Soft-

ware is designed to provide primarily web pages and de-

signs that oﬀer markup code, screenshots, and web tags

[8]. Cyber-physical systems and the Internet of Things

represent two diﬀerent levels of vertical digital integra-

tion. The integration of websites with devices connected

to the Internet of Things has required the creation of

new designs and development strategies for web pages,

where websites are designed with the permutations of

smart devices in mind [9].

Today, companies acquire attractive websites; the

creation of user interfaces involves a complex process

that includes various actors such as project managers,

designers, and developers. It streamlines the process,

which can democratize access to the web for non-experts

[10]. The eﬀectiveness of using websites is strongly de-

pendent on their ergonomic qualities, which directly im-

pact the business. This is particularly signiﬁcant when

it comes to e-Commerce, especially for lesser-known

companies [11].

Currently, the use of services through the Internet

has become increasingly essential in people’s lives. How-

ever, the low usage of websites by individuals suggests

that their interfaces do not hinder the cognitive and

33 International Journal of Engineering Insights, (2023) 1:1

physical abilities of people. To address this inclusive

challenge, a guide for web interface design was devel-

oped based on a review of the literature and organized

into the following categories: visualization, navigation,

communication, cognitive support, and user security

[12].

In related work, a new web application development

platform is found that uses declarative programming

and the business process. A business process is deﬁned

that can eﬃciently and ﬂexibly organize the program

process [13]. The structure of the proposed platform

consists of four essential components: the business pro-

cess, the user interface engine. The business process de-

ﬁnes the program ﬂow and provides both the business

logic and the user interaction logic for a web application

[13]. In other research, the user interface is described in

web pages for businesses, where an XML conﬁguration

component was used [14] to build HTML pages using a

generic interface, which could also organize widgets or

build textual representations [14].

Another study focused on the development of a color-

based classiﬁcation method for websites. In that study,

they present methods for the analysis of websites of

companies based on visual information using their color-

based classiﬁcation method for the web [15]. Further-

more, other research has also been conducted on the

creation of a web page, resulting in the need to make

it as dynamic and user-friendly as possible to attract a

larger user interface when visiting the site and gener-

ate more business advertising, while ensuring that the

information provided there is clear [16].

This work presents a proposal for designing a sales

user interface within a company, using a website and

Notepad++ software. The document is structured into

ﬁve sections: Section 1 provides an introduction, Sec-

tion 2 contains methods and materials, Section 3 presents

the research results, Section 4 includes the discussion,

and Section 5 oﬀers the conclusions.

2 Materials and Methods

It is necessary to have a computer for research and to

download the appropriate software in order to create

a user interface design for web pages for businesses.

Additionally, programming within the software using a

basic language is required, which allows us to work on

our design. The website will feature a navigation menu

design that includes images of the company and basic

information. These elements can be displayed quickly

by simply clicking on the desired button.

In order to validate our website, a link to the web-

site was sent to three individuals from the company

’Giker’ so that they can assess its functionality for one

week. Based on the feedback from the company, we

will be able to determine the pricing for the website

design. Table 1 shows the ﬁve usability test questions

[17], which will be evaluated on a scale of 1-5. One in-

dicates ’completely disagree,’ two is ’disagree,’ three is

’neutral,’ four is ’agree,’ and ﬁnally, ﬁve is ’completely

agree.

Table 1 Questions delivered to the users

Question

Do I think I would like to use this system frequently?

Did I think the system was easy to use?

Did I feel very conﬁdent using the system?

Did I ﬁnd the system very complicated to use?

Did I need to learn many things before starting with this system?

2.1 Web-page requirements

The requirements considered for the web page design

can be formulated as: it should have an understandable

design; the page’s color should be suitable for the user’s

view; the font size should be neither too large nor too

small; it should use a standard font; it should contain

concise, summarized, and understandable information

about the product. Finally, the navigation menu should

have sections for viewing and purchasing the product.

Table 2 Company necessities

Necessities Solution

Online Sales Application Webpage

company information

Product Description

Category Section displaying the

product with images.

Payment Methods

Contact Section where users can ﬁnd

account numbers

Product Delivery Method

Through the contact numbers, send

the home address where the prod-

uct will be delivered along with your

personal information and a photo of

the payment receipt.

2.2 Web Page Design

This website is designed through coding, where on the

main page there is a bar with four buttons. Two of them

lead to another window, and the remaining button dis-

plays two options that will take you to another window

based on your selection. It will also include images of

the company.

The ﬁrst button provides information about the com-

pany, where you will ﬁnd images depicting the com-

pany’s history. On the other hand, we have the ’catalog’

button, which will take you to a new page displaying

shoe models, sizes, and prices based on your selection

34 International Journal of Engineering Insights, (2023) 1:1

Fig. 1 Webpage diagram

Fig. 2 Web Page Design (Home, History, Catalog).

for men or women. Finally, we have the ’contacts’ but-

ton, which opens a section with an email address where

people can reach out for any issues or questions. In ad-

dition, contact numbers will be provided.

2.3 Web Page Development

”Notepad++ software was used to design the user in-

terface for Web pages for businesses. We employed a

dynamic and visually appealing design method to make

it easier for customers to access and navigate the web-

site. Figure 1 illustrates the development of each section

that the web page will feature.

2.4 Participants

A link to the website was sent to three Giker company

employees, who had the opportunity to test the website

for one week. They will be the ones to assess whether it

Fig. 3 WebPage Development

is a good website and suitable for the company. These

individuals are employees who have been with the com-

pany for more than three years.

Table 3 Participants

Work Area Age Work Experience

Accountant 45 4

Manager 30 3

Saleswoman 39 2

2.5 Data Collection

The company is located in Ambato and is engaged in

the manufacturing of footwear for both men and women.

It has employees and the appropriate machinery for the

production of shoes. Giker footwear company began to

excel. The name ’GIKER’ is derived from the initials

of the owner’s two daughters, Gissela and Kerly. The

company is represented and owned by Patricio Gamboa

and his wife, Carolina Guerrero, who oversee the shoe

production from leather cutting to the ﬁnished product

ready for sale. This company primarily produces indus-

trial footwear, including shoes for police and military

personnel. They also oﬀer women’s models in patent

leather and industrial styles. They have their own facil-

ity where the mini-company is located, complete with

specialized machines for shoe manufacturing.

2.6 Website Testing

In Table 3, we present the tests performed along with

their errors and relevant solutions. The ﬁrst test, re-

garding user-friendliness, revealed an issue with strong

colors that could strain the user’s eyes. We quickly ad-

dressed this by modifying the design style. In terms

35 International Journal of Engineering Insights, (2023) 1:1

of response time, we encountered a slowness problem,

which we resolved by reviewing the code. Regarding

image sharpness, we identiﬁed pixel issues that aﬀected

image clarity. To rectify this, we improved the image

format. Finally, due to a complex payment process, we

changed the payment method to something safer and

more practical.

Table 4 Experiments

Tests Conducted Errors Solutions

User-Friendly interface Strong colors Modify style

Response Time Slow Check Code

Images resolution Pixel errors Improve Image Format

Payment Methods Complicated Change Payment Method

3 Results

The website has been successfully designed, and its

most important feature is that it makes it easy for users

to access a signiﬁcant amount of information. Busi-

nesses typically create their websites to serve as a com-

munication source for customers interested in the entity.

This research ensured that there are categorized items,

such as the ’home’ section, where you can ﬁnd some

information about what the entity is about and what

services and products it oﬀers. Finally, in Figure 4, we

see a person testing the design of the website. The re-

sult obtained, in relation to the outlined methodology,

consists of four sections, with approval from the Giker

company.

Fig. 4 Completed Website

3.1 Collected Data

For this survey, the following questions were asked to

determine if the creation of the website is optimal. This

helps to innovate or correct potential design errors be-

cause the product should be eﬀective and not present

the same problems that exist on websites that are not

user-friendly.

3.2 Usability

We obtained satisfactory results with the company’s

website design. The website is suitable for users who

are new to comparing products online with the nec-

essary security. This page is eﬀective when navigating

within the website, as it consists of buttons that quickly

lead to other sections. The usability rating obtained is

72.5/100. According to studies conducted on websites,

this work is above the established rating. Therefore, we

have achieved an appropriate level of acceptance of us-

ability.

Fig. 5 Usability Result

4 Discussion

In this work, the usability of a website was determined,

which indicates the use of the website as a user-friendly

and easy-to-use website for any user. Similarly, [13] also

indicates user acceptance of the website, which is easy

to manage and manipulate. The platform’s structure

includes the business process and the user interface en-

gine. Based on sales, the web page can eﬃciently gen-

erate each task, which facilitates the use of the website.

We can see similarities in both of the two activities that

involve an eﬃcient and ﬂexible business process. In ad-

dition, [14] mentions a design aspect, since the user in-

terface on corporate web pages uses an XML conﬁgura-

tion component. Similarly, for building HTML pages, it

employs a generic interface, which is similar to this pro-

posal based on HTML pages. Consequently, this work

also received good acceptance, similar to that of the

previous one.

Compared to [15], it was also well received in the

business context because it developed a color-based clas-

siﬁcation method for web pages, improving user visual-

ization. Contrasting with our design proposal, it relies

on appropriate colors for user visibility and includes a

36 International Journal of Engineering Insights, (2023) 1:1

sales link for users to purchase products in a more color-

ful manner, which aligns with the work’s focus. Finally,

[16] also obtained an acceptance rate of 100% for all

projects because they aim to create a more dynamic

and publicity-oriented website for businesses, empha-

sizing clarity and user-friendliness. In conclusion, we

have a successful track record in sales as we strive to

increase advertising within businesses.

Table 5 Comparative Results

Attributes [13] [14] [15] [16]

Eﬃciency 94% 95% 70% 95%

Satisfaction 92% 91% 88% 89%

Errors 9% 9% 45% 10%

Learning capacity 89% 94% 89% 96%

Acceptance 90% 97% 70% 99%

5 Conclusions

The work carried out for the design of web pages has

proven to be eﬀective as it improves the user interface.

Easy access to the digital platforms of each business was

optimally executed, making it dynamic and providing

all kinds of information required about the entity. The

use of the software was developed using Notepad++. It

oﬀers three information options, including a bit of the

company’s history, products, and contact information

for inquiries. The company location is also provided.

In comparison with other researched works, we con-

clude that we all have a common thread of work to fol-

low to ensure that the web page is user-friendly. I con-

ducted an analysis of speciﬁc questions that were posed

to three people from the company. In future work, the

goal is to use this website with more users and modify

the interface design for a better user experience and a

more impressive and recommended display.

Acknowledgements Special thanks to CICHE Research Cen-

ter and SISAu Research Group of the Universidad Indoam´erica

for the support in this research. The results of this work are

part of the project “Education 4.0 applied to the teaching of

skills STEAM”. This work was supported in part by collabo-

ration with the REDTPI4.0 CYTED program.

Conﬂict of interest

The authors declare that they have no conﬂict of inter-

est.

References

1. D. Metaxa-Kakavouli, K. Wang, J. A. Landay, and

J. Hancock, “Gender-inclusive design: Sense of belonging

and bias in web interfaces,” in Proceedings of the

2018 CHI Conference on Human Factors in Computing

Systems, ser. CHI ’18. New York, NY, USA: Association

for Computing Machinery, 2018, p. 1–6. [Online].

Available: https://doi.org/10.1145/3173574.3174188

2. H. Kaindl, “Modelgenguis – high-level interaction

design with discourse models for automated gui

generation,” in 26th International Conference on

Intelligent User Interfaces - Companion, ser. IUI ’21

Companion. New York, NY, USA: Association for

Computing Machinery, 2021, p. 3–4. [Online]. Available:

https://doi.org/10.1145/3397482.3450619

3. Y. Hwang, D. Shin, J. Eun, B. Suh, and J. Lee, “Design

guidelines of computer-based intervention for computer

vision syndrome: Focus group study and in-the-wild de-

ployment,” Journal of Medical Internet Research, vol. 23,

03 2021.

4. B. Myers, S. E. Hudson, and R. Pausch, “Past, present,

and future of user interface software tools,” ACM

Trans. Comput.-Hum. Interact., vol. 7, no. 1, p. 3–28,

mar 2000. [Online]. Available: https://doi.org/10.1145/

344949.344959

5. G. R. Mattiello and A. T. Endo, “Model-based

testing leveraged for automated web tests,” Software

Quality Journal, vol. 30, no. 3, pp. 621–649, 9 2022.

[Online]. Available: https://link.springer.com/article/10.

1007/s11219-021-09575-w

6. C. Garc´ıa Cena, R. Saltar´en, J. L´opez Bl´azquez, and

R. Aracil, “Desarrollo de una interfaz de usuario para el

sistema rob´otico multiagente smart,” Revista Iberoamer-

icana de Autom´atica e Inform´atica Industrial RIAI,

vol. 7, no. 4, pp. 17–27, 2010.

7. L. Kuo, T. Chang, and C.-C. Lai, “Multimedia webpage

visual design and color emotion test,” Multimedia Tools

Appl., vol. 81, no. 2, p. 2621–2636, jan 2022. [Online].

Available: https://doi.org/10.1007/s11042-021-11684-4

8. A. Soto, H. Mora, and J. A. Riascos, “Web generator: An

open-source software for synthetic web-based user inter-

face dataset generation,” SoftwareX, vol. 17, p. 100985,

2022.

9. A. Kumar and A. Arora, “An ANFIS-based compatibility

scorecard for IoT integration in websites,” Journal of

Supercomputing, vol. 76, no. 4, pp. 2568–2596, 4 2020.

[Online]. Available: https://link.springer.com/article/10.

1007/s11227-019-03026-x

10. R. Berari, A. Tauteanu, D. Fichou, P. Brie, M. Dogariu,

L. Stefan, M. G. Constantin, and B. Ionescu, “Overview

of the 2021 imageclefdrawnui task: Detection and

recognition of hand drawn and digital website uis,”

in Proceedings of the Working Notes of CLEF 2021

- Conference and Labs of the Evaluation Forum,

Bucharest, Romania, September 21st - to - 24th, 2021,

ser. CEUR Workshop Proceedings, G. Faggioli, N. Ferro,

A. Joly, M. Maistro, and F. Piroi, Eds., vol. 2936.

CEUR-WS.org, 2021, pp. 1121–1132. [Online]. Available:

https://ceur-ws.org/Vol-2936/paper-89.pdf

11. W. J. Yamada, M. Morandini, T. A. Coleti, and C. R.

S. C. Barbosa, “Development of a generator system of

parameterized questionnaires to evaluate the usability of

web pages,” in HCI International 2019 – Late Break-

ing Papers: 21st HCI International Conference, HCII

2019, Orlando, FL, USA, July 26–31, 2019, Proceedings.

Berlin, Heidelberg: Springer-Verlag, 2019, p. 85–100.

12. L. Dombrovskaia and A. Vilches, “Guideline for web

pages design inclusive for senior users,” in 2021 40th In-

ternational Conference of the Chilean Computer Science

Society (SCCC), 2021, pp. 1–7.

37 International Journal of Engineering Insights, (2023) 1:1

13. W.-J. Yang, W.-L. Huang, C.-S. Liao, Y.-W. Wang, and

C.-Y. Chu, “Novel web application development platform

using declarative programming and business process,”

in 2014 Second International Symposium on Computing

and Networking, 2014, pp. 231–237.

14. U. Zdun, “Dynamically generating web application

fragments from page templates,” in Proceedings of the

2002 ACM Symposium on Applied Computing, ser. SAC

’02. New York, NY, USA: Association for Computing

Machinery, 2002, p. 1113–1120. [Online]. Available:

https://doi.org/10.1145/508791.509010

15. K. Takono and Y. Moriwaki, “Company web site anal-

ysis based on visual information,” in Advances on P2P,

Parallel, Grid, Cloud and Internet Computing, F. Xhafa,

L. Barolli, and F. Amato, Eds. Cham: Springer Inter-

national Publishing, 2017, pp. 869–876.

16. Y. Blanco-Jimenez, L. K. Ahumada-Torres, J. R.

Castro-Suarez, and M. A. Chico-Ruiz, “Development

of a web system for the management of pqrs

in higher education institutions,” IOP Conference

Series: Materials Science and Engineering, vol. 844,

no. 1, p. 012068, may 2020. [Online]. Available:

https://dx.doi.org/10.1088/1757-899X/844/1/012068

17. J. Brooke, “Sus: A quick and dirty usability scale,” Us-

ability Eval. Ind., vol. 189, 11 1995.

License

Toapanta.

This text is protected under an international Cre-

ative Commons 4.0 license.

You are free to share, copy, and redistribute the ma-

terial in any medium or format — and adapt the docu-

ment — remix, transform, and build upon the material

— for any purpose, even commercially, provided you

comply with the conditions of Attribution. You must

give appropriate credit to the original work, provide a

link to the license, and indicate if changes were made.

You may do so in any reasonable manner, but not in

a way that suggests endorsement by the licensor or ap-

proval of your use of the work.

License summary - Full text of the license