%20(10)-1.png)
Aesthetics of the user interface
Usability is one of the most important aspects of web application development. It is "a magnitude that determines the ease with which a specific user in a specific context can use a product/design to achieve a defined objective effectively, efficiently, and satisfactorily[1]" It can also be conceived as a "capacity of the software product to be understood, learned, used, and attractive to the user under certain conditions[2]". All can be described by attributes such as:
Now then, usability is also considered as one of the stages of the User Experience (UX) that helps to determine how is the interaction between the user and a web application. It is also one of the parameters that measures the quality of a software product.
This set of characteristics is the basis of the web usability model that guides both designers and developers to achieve the right level of usability of a web application. Therefore they are key in the process of evaluating usability in any web application.
In this particular study, we are interested in analyzing specific aspects of the User Interface (UI) of web applications. Thereby, we are touching on aesthetic aspects of a subjective or psychological nature that are vital to how users perceive a web application.
Web Applications
The third wave of computing has brought new ways of conceiving the world of applications. The ubiquity of virtual environments has demanded applications compatible with a multitude of platforms that can be accessed from any device, anywhere, and at any time. In response to all these new requirements, web applications have emerged. Unlike native applications, web apps do not require a platform or operating system, installation by the user, or a desktop station. These applications generally work in the same way as a web page. They use a browser to access a server, either through the Internet or an intranet, allowing them to work from any platform, from any device, and in any place. These features make a great difference from native applications, which depend on a specific platform (IOS, Android, or Windows), require installation by the user, are stored on the device, and require manual updates.
However, the difference between a web app and a web page is a little more subtle, as they are handled on the same HTTP protocol as a conventional web page. That's why when a user thinks of Google, he or she imagines a web page. But a web page only shows static information while Google is a web app that allows us to do things: open mail, make video calls, listen to music, or give a class. The same thing happens if that user now thinks of an online shoe store. The person doesn't realize that this webpage is different from others, even though he can interact with it through functions like selecting the brand, color, size, and payment method. So there is a fundamental difference between the function of a website and a web application, the former is informative, and the latter is interactive.
Components of a web application
In a web app we must differentiate between two types of components, those of a structural nature and those that constitute the interface with which the user interacts:
- Structural components: These components are responsible for the functionality of the web application, and control and storage of the database[5]. The user has no direct relationship with these components since they are part of the internal structure of the application and, according to Pisuwala, include three essential elements:
- The web browser or client: is a software to access the information on the World Wide Web, allowing users to interact with the functions of web applications. It is usually developed using HTML, CSS, or JavaScript.
- The web application server: is a specialized device that hosts applications and handles the backbone that supports programming logic and multi-layered applications, and is usually developed using Python, PHP, Java, .NET, Ruby and Node.js.
- The database server: is a type of software that organizes information through the use of tables, indexes and records. Its function is to provide the business logic and relevant information/data that the web application server stores and manages. Overall, what it does is to store, retrieve and provide the information.
- Components of the web application interface: The interface is how tasks are performed with a product, what it does, and how it responds[6]. It is more related to the user [7] experience and focuses on visual elements such as display dashboards, configuration settings, notifications and Registrations.
From this approach, the interface is not just about "organizing buttons and choosing colors, but choosing the right tools for the job[8]." With this premise in mind, the central point of this study is determine what are the features that define the registration process.
Classification of web applications
The ubiquitous nature and flexibility of web applications have made them an essential tool in various sectors like business, education, or communications. Web apps provide the optimization of processes such as personnel management, communications, or resource management, which often implies automation. Due to this new dynamic, Google has categorized the apps by their function. Some of the categories are:
- Business
- Productivity
- Education
- Communication
- Public services
- Others
Each of these areas has a specific set of categories. For instance, Productivity includes: Creative Tools, Development, Office applications and Task Management.
Inside the category of Task Management, for example, we will find all those applications that are in charge of managing the automatic organization of work activities within a company or a team.
Zapier is an app that allows automating workflows by connecting different apps. This tool created a much broader and specific classification. However, the principle is the same as Google, starting from general categories and then introducing subcategories. The main categories are:
- Business Intelligence
- Commerce
- Communications
- Content & Files
- Human Resources
- Internet of things
- IT Operations
- Lifestyle & Entertainment
- Marketing
- Productivity
- Sales & CRM
- Support
- Web & App Building
As it is described in the following sections, our particular interest is applications framed within the area of productivity, especially those dedicated to project management.
Project Management Web Apps
The path described up to this point has brought us to a very particular type of application. The objective of Project Management Web Apps is to assist a person or a team in the organization of work to effectively manage projects and tasks online[9]. According to MyManagementGuide.com[10] this tool is more than just a planning schedule. Some of its functions are:
- Documenting project tasks and activities
- Manage risks
- Assigning budgets and controlling costs
- Establish cooperation between project members
- Quality assurance and control
- Organizing human resources
- Assemble the project and teams
- Sharing information
The application service providers that offer this type of apps do so under the figure of SaaS (Software as a Service). More and more organizations are opting for this type of application to optimize through automation those processes that require constant monitoring.
Methodological aspects of the study
Previously, we have stated that the ubiquitous dynamics have influenced how the different projects are managed, whether they are of a business, educational, or personal nature. It is common today having a work team scattered around the world. For those teams, it is a clear advantage to have the activities compiled and organized in a common space where they can communicate. It is then when the Project Management Web Applications become necessary, allowing the remote management of the activities of each team member.
There are countless web applications of this type found on the network, but what differentiates or groups them is not yet clear. To answer this, we have initiated a study to establish the distinctive features of the structure of Project Management (PM) Web Apps.
This type of study involves addressing aspects related directly to usability and indirectly to the user experience. Nevertheless, usability is broad and can be better understood by delimiting its elements. Therefore, this study focuses on the registration and login stage of the PM Web Apps.
Our case study has 18 Project Management Web Apps. The selection criteria was based on the statistics issued by G2[11], an organization oriented to the software market, whose objective is “to be a reliable source that helps all business professionals around the world make better technology decisions”[12] so that they can "discover, review and manage the technology they need to reach their potential[13]".
Steps in the process of opening an account in a Project Management Web App
In general, whenever you want to use a web app you have to register. The process of opening an account seems to be identical at the beginning. Even so, there are variations in the case of PM Web Apps, especially in the stage of creation of accounts. The registration activates after clicking a button in the navigation bar or the center of the home page, commonly called Sign Up, Try for Free, Get Started, or Free Trial, as you can see in the following images:
The images above give us another common feature. This type of app requires the entry of an email address, preferably a work email. A characteristic feature of PM apps is a registration process with two steps: Creation and Configuration. After a more exhaustive look, we identified clear variations in each step:
1. Creation: as stated above, the first step is the entry of an email address, preferably from work. From this point, there are two ways to finish the process of creating an account:
a) Activation by email: A few seconds after providing the email address the app sends an email with a link that allows the activation of the account. Once the confirmation is finished, the account is activated.
b) Direct activation: The app omits the verification process and proceeds to create the account at the moment the user enters the email, and in some cases, a name and password.
2. Configuration: once the account is created, the apps must configure basic elements such as the name and password and others depending on the app. In this regard, when a user enters the app's Homepage for the first time some apps already have configured the first project, examples are Asana, BaseCamp, Trello, Jira, and Paymo. On the other hand, another group of apps like Wrike, Scoro, Proprof, Podio, and Monday.com omit the configuration of a first project, leaving the user to configure it once he has entered the app's Homepage. Depending on these two alternatives, we can classify the configuration into two categories:
a) App configures the first project: Apps that fall into this category structure the configuration step into three phases to acquire information about the user, the company, and the projects the user is working on. These phases are:
About the user: This phase requests the entry of personal information such as name and password.
About the user's work: At this point, the user is usually asked for information regarding the company's industry, role within the company, phone number, size of the company, country, and reasons for use.
Set up the first Project: This phase requires information about ongoing projects, tasks, how to group them, board design, add members, etc.
b) App does not configure a first project: This category is limited to two phases, obtaining information about the user and the user´s work. Consequently, it omits the third phase related to the configuration of the project.
The process of creation and configuration of an account.
Normally, the account creation and configuration steps are executed sequentially, regardless of the type of activation or configuration, as illustrated in the following images:
As can be seen in image 10, in some instances, the configuration process is reversed, leaving personal user information as the last element, hindering segmentation. Despite this alteration in the configuration sequence, the steps of creation and configuration are maintained. Thus, it can be considered a general feature of the registration process of a PM web app.
Extensive and synthesized processes in the registration of the PM web apps
Another characteristic of the PM We Apps is the number of actions that are executed during the registration process. Therefore, it is possible to classify PM Web apps in those that require a large number of steps in the creation and configuration process and those that synthesize them into a couple of actions.
a) Extensive process: it involves at least five steps arranged in different windows, each one illustrated, with titles, subtitles, and elements displayed for a broad selection, meaning that there are as many windows as steps are required for registering. An example of this process is shown in image 11.
b) Synthesized process: It involves less than four steps. Generally, apps that lean towards this process replace windows with templates built from boxes with specific requirements, which allows for space optimization. In certain cases, the process can even be simplified in a single step. In such a case, a sole template is enough to enter all the data that the application requires for opening the account, LiquidPlanner and Proofhub are examples of this since both apps have been able to synthesize their creation and configuration process into one template.
Login & Reset Password
Other aspects involved in the registration process are the entry and recovery of the password. In most apps, users access the content of the application through the Log In or Sign In section, where they introduce a set of credentials, usually the username or email and password. For PM Web Apps this process works the same way. During the account creation process, the credentials are loaded, after which the user can enter the app through the Log in or Sign In button located on the navigation bar of the application's homepage.
The Login button activates a credentials input window where the person uploads their username and password in the corresponding box. If the credentials are correct, the Home page of the app will open. This process is executed identically in all apps. If the user cannot remember the password there is a recovery feature usually called "Forgot your password?" located at the bottom of the window.
Throughout this study, we have noticed that the password recovery process is very similar among the apps and structured in 4 steps:
1. Select the option "Forgot your password?" from the Login window.
2. Enter the email address in the new window.
3. Open the link sent to the email.
4. In the new window enter and confirm the new password.
Some applications send the user to the app's configuration panel, but most follow the scheme described above.
Conclusions
At the beginning of this study, we stated that usability is one of the essential aspects in the framework of user experience, its function is oriented to determine the interaction between the user and a software product. The quality of the system depends on this interaction since it involves a set of abilities that allow evaluating the adequacy, operability, didactics, accessibility, and aesthetics of an app. It is natural, then, that web designers and developers focus on this set of attributes, they know that flaws in usability lead to errors in the construction of an app.
The objective of this study has been to analyze the aesthetic capacity, one of the attributes of the usability, which some PM Web Apps expressed in the user interface. However, the user interface is also a broad concept that is best understood by defining its elements. Hence this study has focused on the registration and login stage of the PM Web Apps, from which we have been able to establish the following conclusions:
All Project Management Web Apps have a button that activates the registration process in the navigation bar and the center of its home page as a redundancy. This button is usually called Sign Up, Try for Free, Get Started or Free Trial.
A common factor in PM Web Apps is the input of an email address, preferably a work email.
PM Web Apps have a dual structure consisting of the creation and the configuration of accounts.
The step of creating an account has two variants: activation by mail and direct activation.
The configuration step also has two alternatives: One in which a first project is configured and one in which a first project is not configured.
The case in which the first project is configured has three phases: About the User, About the User´s Work, and Set up of the first Project.
When the first project is not configured there are only two phases: About the user and About the user's Work.
In PM Web Apps, the account creation and configuration steps run sequentially, regardless of the type of activation or configuration.
Depending on the number of actions executed during registration, we can differentiate between apps with an extensive process and those with a synthesized process.
The Log In or Sign In is the method of individual access to the application content. It is located in the navigation bar of the application's home page.
The password recovery process is very similar among the different apps and is structured in four steps: select the option from the Login window, insert an email address, open the link sent, and enter and confirm the new password.
References
[1] Lledo P. (2012). Gestión Ágil de proyectos: Lean Project Management. United States. Trafford.[2] Manifesto for Agile Software Development. Recovered http://agilemanifesto.org/iso/en/manifesto.html.[3] Japan Management Association (1989). Kanban Just-in Time at Toyota. Taylor & Francis.[4] Japan Management Association.[5] Japan Management Association.[6] Japan Management Association.[7] Monden Y. (2012). Toyota Production System An Integrated Approach to Jus-In-Time. CRC Press: Florida.[8] Schwaber K. Sutherland J. (2017). The Scrum GuideThe Definitive Guide to Scrum:The Rules of the Game. Recovered https://www.scrumguides.org/docs/scrumguide/v2017/2017-Scrum-Guide-US.pdf#zoom=100.[9] Schwaber K. Sutherland J. (2017)[10] Schwaber K. Sutherland J. (2017)[11] Schwaber K. Sutherland J. (2017)[12] Rojas, N. (2020). Project Management Web Application UI - Methods for creating and configuring accounts.[13] G2. Best Project Management Software. Recovered https://www.g2.com/categories/project-management.[14] MyManagementGuide.com. What is Project Management Application Software? Recovered[15] G2.
