Analysis of Web-based Learning Interface Design based on Experts’ Verification for Higher Education

Zuriana Abu Bakar - Faculty of Ocean Engineering Technology and Informatics, Universiti Malaysia Terengganu, Kuala Nerus, Malaysia
Fatin Sarah Salim - Faculty of Ocean Engineering Technology and Informatics, Universiti Malaysia Terengganu, Kuala Nerus, Malaysia
Nor Fatin Farzana Zainuddin - Faculty of Ocean Engineering Technology and Informatics, Universiti Malaysia Terengganu, Kuala Nerus, Malaysia
Noor Maizura Noor - Faculty of Ocean Engineering Technology and Informatics, Universiti Malaysia Terengganu, Kuala Nerus, Malaysia
Rosmayati Mohemad - Faculty of Ocean Engineering Technology and Informatics, Universiti Malaysia Terengganu, Kuala Nerus, Malaysia

Citation Format:



Recently, the Web-based learning (WBL) platform, particularly for higher education, has become more crucial due to the Covid-19 pandemic. Thus, due to the increased use of WBL   in higher education, an effective WBL interface design for higher education is truly important in order to attract students to use WBL and to further keep them engaged during learning via the Web-based platform. Therefore, the aim of this study was to determine the aesthetics of web interfaces based on experts’ opinions. This study adopted a quantitative research approach involving a data-gathering survey. Fifteen (15) WBL interfaces were designed based on nine (9) design principles which were balance, proportion, simplicity, alignment, movement, hierarchy, consistency, contrast, and proximity. The results of this study discovered that nine (9) WBL interfaces were determined by the experts as aesthetic interfaces, five (5) WBL interfaces as non-aesthetic and 1 (one) WBL interface was considered neither aesthetic nor non-aesthetic. This finding revealed that six (6) out of nine (9) interfaces had the balance design principle. However, balance was also in most non-aesthetic interfaces. A possible reason that balance was the most design principle in both the aesthetic and the non-aesthetic interfaces is that when designing WBL interfaces, there is a need to consider the combination of the design principles as a whole, and not count the design principles individually. In conclusion, this study's findings could contribute to the knowledge in the Human Computer Interaction domain, specifically in the interface design area.


Human computer interaction; web design; aesthetics interface; web-based learning; higher education.

Full Text:



T. Lavie and N. Tractinsky, “Assessing dimensions of perceived visual aesthetics of web sites,†International Journal of Human Computer Studies, vol. 60, no. 3, pp. 269–298,, 2004.

G. Lindgaard and C. Dudek, “Aesthetic appeal versus usability: Implications for user satisfaction,†Human Factors, 2002.

G. C. Cupchik, “Component and relational processing in aesthetics,†Poetics,, 1993.

M. Hassenzahl, “The interplay of beauty, goodness, and usability in interactive products,†Human Computer Interaction,, 2004.

B. H. Khan, “A framework for web-based learning,†TechTrends, vol. 44, no. 3, pp. 51, 2000.

V. Arkorful and N. Abaidoo, “The role of e-learning, advantages and disadvantages of its adoption in higher education,†International Journal of Instructional Technology and Distance Learning, vol. 12, no. 1, pp. 29–42, 2015.

J. Kim, J. Lee and D. Choi, “Designing emotionally evocative homepages: An empirical study of the quantitative relations between design factors and emotional dimensions,†International Journal Human-Computer Studies, vol. 59, pp. 899–940, 2003.

H. Azman, A. Salman, N. Abdul Razak, S. Hussin, M. S. Hasim and M. Abu Hassan, “Determining digital maturity among ICT users in Malaysia,†Jurnal Komunikasi, Malaysian Journal of Communication, vol. 30, no. 1, pp. 22–34., 2015.

D. A. Cook, “Web-based learning: Pros, cons and controversies,†Clinical Medicine, Journal of the Royal College of Physicians of London, vol. 7, pp. 37–42,, 2007.

B. L. Brady and C. Phillips, “Aesthetics and usability: A look at color and balance,†2003.

A. Blair-Early and M. Zender, “User interface design principles for interaction design,†Design Issues,, 2008.

D. C. L. Ngo and J. G. Byrne, “Another look at a model for evaluating interface aesthetics,†International Journal of Applied Mathematics and Computer Science, vol. 11, no. 2, pp. 515–535, 2001.

D. Leflore, “Theory supporting design guidelines for web-based instruction. In Instructional and Cognitive Impacts of Web-Based Education, pp. 102–117., 2000

A. Mardani, A. Jusoh and E. K. Zavadskas, “Fuzzy multiple criteria decision-making techniques and applications - Two decades review from 1994 to 2014,†Expert Systems with Applications, vol. 42, pp. 4126–4148,, 2015.

J. Reyna, “The importance of visual design and aesthetics in e-learning,†Training & Development, vol. 40, no. 5, pp. 28–31, 2013.

C. J. Costa, P. Costa and M. Aparício, “Principles for creating web sites: A design perspective,†ICEIS 2004 - Proceedings of the Sixth International Conference on Enterprise Information Systems, pp. 484–488, no. 2004.

M. E. Graves, The Art of Color and Design. McGraw-Hill Book Company, 1941.

D. C. L. Ngo, L. S. Teo and J. G. Byrne, “Formalizing guidelines for the design of screen layouts,†Displays, vol. 21, no. 1, pp. 3–15,, 2000.

D. C. L. Ngo, A. Samsudin and R. Abdullah, “Aesthetic measures for assessing graphic screens,†Journal of Information Science and Engineering, vol. 16, no.1, pp. 97–116, 2000.

C. Salimun, H. C. Purchase, D. R. Simmons and S. Brewster, “Preference ranking of screen layout principles,†Proceedings of the 24th BCS Interaction Specialist Group Conference, pp. 81–87, 2010.

S. Khalighy, G. Green, C. Scheepers and C. Whittet, “Measuring aesthetic in design,†Proceedings of International Design Conference, DESIGN, pp. 2083–2094., 2014.

A. J. Lazard, I. Watkins, M. S. Mackert, B. Xie, K. K. Stephens and H. Shalev, “Design simplicity influences patient portal use: The role of aesthetic evaluations for technology acceptance,†Journal of the American Medical Informatics Association, vol. 23, pp. 157–e161,, 2016.

T. M. Kar, J. M. Zain and G. Y. Soon, “Measuring aesthetics of mandarin learning web pages are users’ perceptions congruent with the measured values of aesthetics-measurement application,†(AMA), 2008.

Z. Jiang, W. Wang, B. C. Y. Tan and J. Yu, “The determinants and impacts of aesthetics in users’ first interaction with websites,†Journal of Management Information Systems, vol. 33, no. 1, pp. 229–259., 2016.

K. Reinecke, T. Yeh, L. Miratrix, R. Mardiko, Y. Zhao, J. Liu and K. Z. Gajos, “Predicting users’ first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness,†Proceedings of the SIGCHI Conference on Human Factors in Computing Systems - CHI ’13,, 2013.

S. Lee and R. Koubek, “The impact of cognitive style on user preference based on usability and aesthetics for computer-based systems,†Int. J. Hum. Comput. Interaction, pp. 27, 2011.

Z. Abu Bakar and P. Long, “A study of visual appeal interfaces based on subjective preferences,†Proceeding of the International Conference on Artificial Intelligence in Computer Science and ICT (AICS 2013), pp. 25–26, 2013.

M. Bauerly and Y. Liu, “Computational modeling and experimental investigation of effects of compositional elements on interface and design aesthetics,†International Journal of Human-Computer Studies, vol. 64, no. 8, pp. 670–682., 2006.