Redesign for an Effective Website Interface Based on Cognitive Walkthrough and Eye-Tracking to Improve Usability (Case Study: SIAKAD Universitas Trunojoyo Madura)

Article Preview

Abstract:

The User Interface (UI) plays a critical role in usability. The usability of an information system focuses on how easy the system is to use and its effectiveness. This study aims to redesign the website interface of the academic information system of Universitas Trunojoyo Madura (SIAKAD-UTM). The cognitive walkthrough and eye-tracking analysis methods are proposed to assess the usability before and after improvement. The activities evaluated included the login page (task-1), course information (task-2), study plan card (task-3), study result card (task-4), and transcript (task-5). Thirty-nine students from the Faculty of Engineering participated. The study, based on McNemar's test, shows no difference in the success rate across the entire task. The error indicator did not show any improvement in tasks 2 to 5; however, there was evidence of progress in task 1. In addition, the Wilcoxon test indicated improvements in login activities (task-1), course information (task-2), and study result cards (task-4), although there was no increase in performance in study plan card activities (task-3) or transcripts (task-5). These results indicate that the redesign of UI SIAKAD UTM was effective.

You might also be interested in these eBooks

Info:

Periodical:

Engineering Headway (Volume 38)

Pages:

141-150

Citation:

Online since:

June 2026

Export:

Price:

Permissions CCC:

Permissions PLS:

Сopyright:

© 2026 Trans Tech Publications Ltd. All Rights Reserved

Share:

Citation:

* - Corresponding Author

[1] C. Østervang, C. M. Jensen, E. Coyne, K. B. Dieperink, and A. Lassen, Usability and Evaluation of a Health Information System in the Emergency Department: Mixed Methods Study, vol. 11, no. 1. 2024.

DOI: 10.2196/48445

Google Scholar

[2] A. Abd Aziz, R. N. H. Nor, Y. Y. Jusoh, W. N. W. Wan Nurhayati, and N. M. Ali, "Factors Influencing Information Quality of Information Systems: A Systematic Literature Review," Int. J. Informatics Vis., vol. 8, no. 3–2, p.1923–1931, 2024.

DOI: 10.62527/joiv.8.3-2.3483

Google Scholar

[3] H. Parwal, R. Radha, and X. Anita, "An Experimental Study on Website Optimization: Test Your Strategies," Procedia Comput. Sci., vol. 259, p.660–669, 2025.

DOI: 10.1016/j.procs.2025.04.016

Google Scholar

[4] K. Nezami Balouchi, J. Mercier, and R. E. Lopez-Herrejon, "An exploratory empirical eye-tracker study of visualization techniques for coverage of combinatorial interaction testing in software product lines," J. Syst. Softw., vol. 220, no. January 2024, p.112261, 2025.

DOI: 10.1016/j.jss.2024.112261

Google Scholar

[5] A. R. Nasution, R. Hidayat, H. W. . Manik, M. F. Assidiqie, and A. Ikhwan, "Pengaruh Tampilan UI Dan UX Terhadap Kenyamanan Pengguna Pada Aplikasi OVO," J. Penelit. Dan Pengkaj. Ilm. Eksakta, vol. 2, no. 1, p.81–84, 2023.

DOI: 10.47233/jppie.v2i1.713

Google Scholar

[6] M. Thüring and S. Mahlke, "Usability, aesthetics and emotions in human-technology interaction," Int. J. Psychol., vol. 42, no. 4, p.253–264, 2007.

DOI: 10.1080/00207590701396674

Google Scholar

[7] F. Agustina, R. Annisa, N. Ansori, W. Findiastuti, and I. D. Aisyah, "Usability Evaluation of Academic Information System Using the WEBUSE Method: A Study on University of Trunojoyo Madura Web Portal," Proceedings - IEEE 8th Inf. Technol. Int. Semin. ITIS 2022, p.184–189, 2022.

DOI: 10.1109/ITIS57155.2022.10009969

Google Scholar

[8] H. Tinmaz and P. K. Singh Dhillon, "User-Centric Avatar Design: A Cognitive Walkthrough Approach for Metaverse in Virtual Education," Data Sci. Manag., vol. 7, no. 4, p.267–282, 2024.

DOI: 10.1016/j.dsm.2024.05.001

Google Scholar

[9] A. Putkonen, Y. Jiang, J. Zeng, O. Tammilehto, J. P. P. Jokinen, and A. Oulasvirta, "Understanding visual search in graphical user interfaces," Int. J. Hum. Comput. Stud., vol. 199, no. March, p.103483, 2025.

DOI: 10.1016/j.ijhcs.2025.103483

Google Scholar

[10] J. Š. Novák, J. Masner, P. Benda, P. Šimek, and V. Merunka, "Eye Tracking, Usability, and User Experience: A Systematic Review," Int. J. Hum. Comput. Interact., vol. 40, no. 17, p.4484–4500, 2024.

DOI: 10.1080/10447318.2023.2221600

Google Scholar

[11] S. Akshay, A. Rames, and P. Ashika, "Visual search capability using heatmaps," Int. J. Eng. Adv. Technol., vol. 8, no. 5, p.1811–1814, 2019.

Google Scholar

[12] K. Nezami Balouchi, J. Mercier, and R. E. Lopez-Herrejon, "An exploratory empirical eye-tracker study of visualization techniques for coverage of combinatorial interaction testing in software product lines," J. Syst. Softw., vol. 220, no. January 2024, 2025.

DOI: 10.1016/j.jss.2024.112261

Google Scholar

[13] K. Pernice, E. Creative, and V. President, Acclaim for Eyetracking Web Usability.

Google Scholar

[14] R. Albaghli, A. Beidas, and N. Attar, "Eyes on higher education: Evaluating web usability in Kuwaiti private universities using eye-tracking and SUPR-Q metrics," J. Eng. Res., no. December, 2024.

DOI: 10.1016/j.jer.2024.12.001

Google Scholar

[15] J. Nielsen, "Usability Engineering," p.195–200, 1993.

Google Scholar

[16] K. Holmqvist et al., Eye tracking: empirical foundations for a minimal reporting guideline, vol. 55, no. 1. 2023.

DOI: 10.3758/s13428-021-01762-8

Google Scholar

[17] C. F. Buciuman and S. Potra, "Revolutionizing Education in Industry 4.0: Eye-Tracking and AI for Personalized Learning," Procedia Comput. Sci., vol. 253, no. 2024, p.1658–1667, 2025.

DOI: 10.1016/j.procs.2025.01.228

Google Scholar

[18] L. Rello, M. Pielot, and M. C. Marcos, "Make it big! The effect of font size and line spacing on online readability," Conf. Hum. Factors Comput. Syst. - Proc., p.3637–3648, 2016.

DOI: 10.1145/2858036.2858204

Google Scholar

[19] Z. Shen, L. Zhang, R. Li, J. Hou, C. Liu, and W. Hu, "The effects of color combinations, luminance contrast, and area ratio on icon visual search performance," Displays, vol. 67, no. February, p.101999, 2021.

DOI: 10.1016/j.displa.2021.101999

Google Scholar

[20] N. Modi and Y. Kumar, "Advancements in Eye Tracking for Visual Attention Analysis Across E-commerce Screen Sizes," Procedia Comput. Sci., vol. 258, p.3095–3104, 2025.

DOI: 10.1016/j.procs.2025.04.567

Google Scholar

[21] Y. Xing, J. Leng, and H. Zhou, "Cognitive preferences for architectural renovation strategies in traditional villages combining subjective evaluation and eye tracking," Front. Archit. Res., vol. 14, no. 4, p.1017–1034, 2025.

DOI: 10.1016/j.foar.2024.10.003

Google Scholar

[22] M. Matthee, M. Hattingh, and L. Normund-Van Wyk, "The use of heat maps to explore perceived visual indicators of online fake news," Procedia Comput. Sci., vol. 239, no. 2023, p.1687–1695, 2024.

DOI: 10.1016/j.procs.2024.06.346

Google Scholar

[23] V. Raghunath et al., "Mouse cursor movement and eye tracking data as an indicator of pathologists' attention when viewing digital whole slide images," J. Pathol. Inform., vol. 3, no. 1, p.43, 2012.

DOI: 10.4103/2153-3539.104905

Google Scholar

[24] A. K. Chinnaswamy, B. A. Sabarish, P. Karhik, P. Karthikeyan, J. P. Maheshvar, and S. Adithya, "ScienceDirect Web-Based Task-Driven Eye Tracking : A No-Integration Approach," Procedia Comput. Sci., vol. 260, p.655–664, 2025.

DOI: 10.1016/j.procs.2025.03.244

Google Scholar

[25] F. Guo, Y. Ding, W. Liu, C. Liu, and X. Zhang, "Can eye-tracking data be measured to assess product design?: Visual attention mechanism should be considered," Int. J. Ind. Ergon., vol. 53, p.229–235, 2016.

DOI: 10.1016/j.ergon.2015.12.001

Google Scholar

[26] A. Z. Mohamad Ali, R. Wahid, K. Samsudin, and M. Zaffwan Idris, "Reading on the computer screen: Does font type has effects on Web text readability?," Int. Educ. Stud., vol. 6, no. 3, p.26–35, 2013.

DOI: 10.5539/ies.v6n3p26

Google Scholar

[27] D. K. Davis and F. Zhu, "Analysis of software developers' coding behavior: A survey of visualization analysis techniques using eye trackers," Comput. Hum. Behav. Reports, vol. 7, no. June, p.100213, 2022.

DOI: 10.1016/j.chbr.2022.100213

Google Scholar

[28] S. A. Morey, R. E. Stuck, A. W. Chong, L. H. Barg-Walkow, T. L. Mitzner, and W. A. Rogers, "Mobile Health Apps: Improving Usability for Older Adult Users," Ergon. Des., vol. 27, no. 4, p.4–13, 2019.

DOI: 10.1177/1064804619840731

Google Scholar

[29] F. Bakhshoudeh, "Minimal Colour-based Social communication and meaning-making communication practices," 2023.

Google Scholar

[30] W. Swasty and A. R. Adriyanto, "Does Color Matter on Web User Interface Design," CommIT (Communication Inf. Technol. J., vol. 11, no. 1, p.17, 2017.

DOI: 10.21512/commit.v11i1.2088

Google Scholar

[31] L. Y. Lo and C. Y. Tsang, "Best thing is always in the middle? An investigation of centrality preference by eye-tracking technique and memory recall," J. Pacific Rim Psychol., vol. 12, p.1–7, 2018.

DOI: 10.1017/prp.2018.5

Google Scholar

[32] A. Vehlen, I. Spenthof, D. Tönsing, M. Heinrichs, and G. Domes, "Evaluation of an eye tracking setup for studying visual attention in face-to-face conversations," Sci. Rep., vol. 11, no. 1, p.1–16, 2021.

DOI: 10.1038/s41598-021-81987-x

Google Scholar

[33] E. Sillence, P. Briggs, P. R. Harris, and L. Fishwick, "How do patients evaluate and make use of online health information?," Soc. Sci. Med., vol. 64, no. 9, p.1853–1862, 2007.

DOI: 10.1016/j.socscimed.2007.01.012

Google Scholar

[34] E. J. Kim and Y. Kang, "Analyzing image recognition characteristics in landscape architecture: A study using eye tracking with a focus on educational perspectives," Front. Archit. Res., vol. 14, no. 3, p.797–811, 2024.

DOI: 10.1016/j.foar.2024.09.010

Google Scholar