User Interface Analysis On E-commerce Website

R D Madhani
Departemen Tekik Informatika, Universitas Komputer Indonesia

Email : [email protected]

Abstract. The purpose of this research is to analyze the good user interface for the Envygreen
Cosmetics website. To find out what the appearance of the Envygreen website is good enough,
it will be analyzed by the method of Heuristic Evaluation. This method is used to get evaluation
of deficiencies and usability errors on the web Envygreen. To support this research, writer will
use the Heuristic Evaluation method. Results from 10 evaluation of usability of Heuristic
Evaluation method (Visibility of system status, Match between system and the real world, User
control and freedom, Consistency and standards, Error prevention, Recognition rather than
recall, Flexibility and efficiency of use, Aesthetic and minimalist design, Help users recognize,
diagnose, and recover from errors, and Help and documentation) the result of Envygreen website
has not fulfilled the standard of user interface either. It is expected that the current Envygreen
website can be useful for further development.

1. Introduction
Envygreen is a High Grade of Clinical Active Cosmetics based skincare for all skin problems like
acne, blackheads, excess oil, dull, premature aging, black spots, and acne scars. Envygreen cooperates
with international standard and certified CGMP (Current Good Manufacturing Process) manufacturers
to ensure the quality and safety of the products. Like other skin care stores, Envygreen Cosmetics
certainly has a website to support the promotion and sales. One aspect seen from a website is the
interface.
The interface or user interface is a bridge that serves to bridge between users with the system or
computer. [1] A simple, easy, yet compelling interface is a contributing factor to user experience on a
website. [2-4] As described in the journal Soren Lauesen, the thing learned is to identify the usability
issues of the existing system through usability tests. Learning how to determine and measure usefulness
also includes what is learned. [1] Heuristic evaluation is likely to be better predictors of end-user
problems (Mack and Nielsen 1994). Use of existing web Envygreen certainly not spared from the lack.
Based on observations, found interface Envygreen website is still not qualified. For example, the
interface design of the Envygreen website still does not match the aesthetic value and minimalist design
of the usability aspect. [5] Layout that seems messy is also considered not to support the value of
flexibility and efficiency aspects of reusability. The usability or usability aspect itself is a measure, in
which the user can access the functionality of a system effectively, efficiently, and satisfactorily in
achieving certain goals. [6,7]
Reusability may also refer to methods used for the study of the neatness or efficiency of a system.
To support the results of the usability to be obtained, the method to be used for this research is the
Heuristic Evaluation method developed by Jacob Nielsen. [6] According to him, Heuristic Evaluation
is a method used to find errors on interface design. This method is used to get evaluation of deficiencies
and usability errors on the web Envygreen. The research design conducted by the authors conceptual
qualitative because the research produces descriptive data in the form of words written or spoken from
the people and behavior that can be observed.

2. Method
The method used in this research is Heuristic Evaluation method using qualitative approach. The
research focuses on the design of the Envygreen website interface to improve user experience based on
usability aspects. [3,8] Data collection method used in this research is done through several stages. These
stages include a study of the literature on Human Computer Interaction [9,10], the determination of the
evaluation method (Jacob Nielsen's "Heuristic Evaluation Method"), [6] evaluation of interface display,
[7] analysis of interface display evaluation results , recommended improvement recommendations, [4]
and final stages of conclusion.

3. Result and Discussion

As discussed earlier, Jacob Nielsen's "Heuristic Evaluation" method is the method used by this study
as a reference or basis in evaluating the appearance of the Envygreen website in measuring the user's
ease of use interface.

Evaluation of the display of Envygreen web user interface with Heuristic Evaluation method consists
of 10 reusability. The first is the Visibility of System Status. A system must be able to inform the user
about what is going on through a good message of feedback or feedback at the appropriate time. Thus,
the user will be more able to know what will be done next if the functions are visible. Seen in Figure 1
below, which is on the Shop menu when users want to search system products do not give feedback or
error message as in Figure 2.

Figure 1. Evaluation of Feedback on Website Envygreen before

 Figure 2. Evaluation of Feedback on Website Envygreen after

The second is the Conformity Between System and The Real World. This evaluation is also known
as metaphor evaluation, where a system is expected to speak in an easily understandable language using
sentences, phrases, and concepts known to the user. In the case of Sign-up in Figure 3, Envygreen lacks
the proper selection of words, giving rise to ambiguity to users in the system usage process.

Figure 3. Evaluation of Metaphor on Envygreen Website

The third is User Control and Freedom. In this evaluation is expected the user can navigate a system
easily without need to pass other additional activities. The system should also have undo and redo
capabilities. Website Envygreen is still not meet the criteria because the web header menu which if
clicked the destination page does not have a navigation menu to return to the previous page. For example,
if click the "Watch The Story" button in Figure 4 then the destination page will change to youtube that
is not linked to Envygreen main website or in other words youtube link does not provide undo to return
to main website Envygreen as in Figure 5.

Figure 4. Navigation Evaluation on Website Envygreen before

Figure 4. Navigation Evaluation on Website Envygreen after

Fourth is the Standard and Consistency. Users do not need to think / question again about differences
in understanding the word, situation, and action. This evaluation is intended for the system to follow
existing standards and consistent in terms of writing sentences, fonts, and so forth. In the case of the
Envygreen website, the evaluation consistency lies in the button in the footer menu as shown in Figure
6. There is an English usage of the words "Clinical Active" and "Real Testemony" but on other buttons
there is also the use of Indonesian in "Qualified", "Sample Free ", and" Certified Factory ".
 Figure 6. Evaluating Consistency on an Envygreen Website

The fifth reusability is to Support Users to Understand, Diagnose, and Recover Errors (Help Users
Recognize, Diagnose and Recover from Errors). This evaluation is also known as evaluation evaluation.
This evaluation is aimed at the system to explain error messages to users with simple language (no code),
explain the cause of the problem, and constructively suggest a solution. On the Envygreen website, the
thing about this recovery is still poorly applied. Evaluation is on the Login menu. When the user wants
to login, either the account is registered or not registered error message that delivered the system is
always the same as in Figure 7.

Figure 7. Evaluation of Recovery on the Envygreen Website

Sixth is Error Prevention. Error in choosing can happen to user. A good system will certainly be
designed in such a way as to prevent users from making mistakes in their use by displaying a selection
of confirmation messages. Designs that can prevent users from making mistakes are important in a
system.
Seventh is Recognition Rather Than Recall. In doing a job, the system is expected to minimize the
use of user memory. Therefore, instructions and information on the system should be easily accessible
and clearly visible when the user needs. This evaluation is related to system user memory, where users
are expected not to think or remember existing information from one page to another.

Eighth usability is Flexibility and Efficiency of Use. Speed and accuracy in using the system will
certainly facilitate the user in performing its activities. Need to be considered in designing the system
so that the system can accommodate the user, both the expert and the beginner. One example of the
inefficiency of the Envygreen website is the double content on the menu and the footer of the website
as shown in Figure 8.

Figure 8. Evaluation of Efficiency on an Envygreen Website

Ninth is Aesthetic and Minimalist Design. A good system is a system that only contains the necessary
or relevant information. The principles in visual design are divided into four parts: contrast, repetition,
alignment, and proximity. For example as in Figure 9, layout design or web layout Envygreen does not
use the grid system causing the interface to be not aesthetic.

Figure 9. Evaluation of Design on Envygreen Website

Finally, the tenth reusability is the Help and Documentation Feature. The help evaluation discusses
systems that provide good help features and relevant documentation, so they can help users learn the
system and help users deal with problems / difficulties. On the Envygreen website, the column / action
help has not been visible so it needs to add the menu.

Based on the result of evaluation of user interface of Envygreen web interface above, the
recommendation of usability improvement by using Heuristic Evaluation method can be seen in Table
1 below.
Table 1. Usability of Heuristic Evaluation Method.
No Description Recommendation
There needs to be an increase in giving feedback when
1 Visibility of system status
searching
Match between system and the real Pay attention to the selection of words to be precise and
2
world easily understood by users
Fix the navigation of each page for each page to connect
3 User control and freedom
well by adding undo / redo options
Pay attention to language selection to be consistent and
4 Consistency and standards
familiar to users
Help users recognize, diagnose, and Needed an error message in accordance with user error
5
recover from errors and provide instructions to solve the problem / error
Provide format and confirm the field field whether it is
6 Error prevention
appropriate or not
This evaluation does not have a big effect because the
7 Recognition rather than recall information the website offers in the form of news that
does not make the user a lot of thinking / remembering
Minimize useless content such as blank content and
8 Flexibility and efficiency of use
duplicate content to improve website efficiency
Pay attention to the grid system in designing website
9 Aesthetic and minimalist design
layouts
Add a help or ask menu to help users with system
10 Help and documentation
operation
Note: Improved user interface is obtained with various usability.

4. Conclusion
The Heuriristic Evaluation Method consists of 10 usability: Visibility of system status, Match
between system and the real world, User control and freedom, Consistency and standards, Error
prevention, Recognition rather than recall, Flexibility and efficiency of use, Aesthetic and minimalist
design, Help users recognize, diagnose, and recover from errors, and Help and documentation. It can be
concluded that the Envygreen Cosmetics website still does not meet interface standards.

5. Acknowledgements
The author would like to thank the Lord Jesus for His blessings and grace. To both parents who have
helped and supported to complete this research. And to Adhi Satria Ginting, Solita Saragih Sumbayak,
Harlin Cahya Telaumbanua, and Entin for their cooperation during the research.

6. References
[1] G. Glonek and M. Pietruszka, “Natural User Interfaces ( NUI ): Review,” J. Appl. Comput. Sci.,
vol. 20, no. 2, pp. 27–45, 2012.
[2] K. Majrashi, M. Hamilton, and A. L. Uitdenbogerd, “Multiple User Interfaces and Crossplatform
User Experience : Theoretical Foundations,” in Computer Science & Information Technology
( CS & IT ), 2015, pp. 43–57.
[3] K. Mike, Observing the User Experience. 2012.
[4] A. Yeskasafitri, D. S. Kusumo, D. Ph, and M. K. S. S. T, “Perancangan Model User Interface
untuk Website E-Commerce Liliput Edu Toys dengan Metode Paper Prototyping User
Interface Design Model for Liliput Edu Toys E-commerce Website Using Paper Prototyping
 Method,” ISSN 2355-9365 e-Proceeding Eng. Vol.2, No.1 April 2015 | Page 1529, vol. 2,
no. 1, pp. 3–8, 2012.
[5] S. Lauesen, User Interface Design: A Software Engineering Perspective, vol. 10, no. 1. 2005.
[6] J. Nielsen, “Heuristic Evaluation,” Usability Insp. Methods, pp. 25–62, 1994.
[7] G. Bhatti, R. Brémond, J. P. Jessel, N. T. Dang, F. Vienne, and G. Millet, “Design and evaluation
of a user-centered interface to model scenarios on driving simulators,” Transp. Res. Part C
Emerg. Technol., vol. 50, pp. 3–12, 2015.
[8] F. Daniel, M. Matera, J. Yu, B. Benatallah, R. Saint-Paul, and F. Casati, “Understanding UI
integration: A survey of problems, technologies, and opportunities,” IEEE Internet Comput.,
vol. 11, no. 3, pp. 59–66, 2007.
[9] M. Hassenzahl, “User Experience and Experience Design,” InteractionDesign.org, no. January,
2011.
[10] A. Dix, J. Finlay, G. D. Abowd, and R. Beale, “Human-Computer Interaction,” Human-Computer
Interact., vol. Third, no. January, p. 834, 2004.