Redesign UI/UX Perpustakaan Digital UNRI Berbasis Mobile Dengan Fitur Auto Layout Menggunakan Metode Five Planes

Authors

  • novriandhandy Universitas Sains dan Teknologi Indonesia Author
  • Unang Rio universitas sains dan teknologi indonesia Author
  • Karpen Universitas Sains dan Teknologi Indonesia Author
  • Eiva Universitas Sains dan Teknologi Indonesia Author

DOI:

https://doi.org/10.36050/tgwfdc92

Keywords:

Auto Layout, Digital Library, Five Planes, UI/UX Design, User Experience Questionnaire (UEQ)

Abstract

The rapid development of digital technology has increased the demand for high-quality user interface (UI) and user experience (UX) design in online services, including the Riau University (UNRI) Digital Library, which has been available since 2016 as an academic resource platform. An evaluation using the User Experience Questionnaire (UEQ) revealed weaknesses in attractiveness and novelty, which reduced user satisfaction. This study aims to redesign the UI/UX of the UNRI Digital Library mobile application by applying the auto layout feature in Figma with the Five Planes framework (strategy, scope, structure, skeleton, surface). The research employed a mixed approach, including literature study, interviews with the library administrator, and UEQ surveys distributed to 100 active students as primary users. The redesigned prototype was evaluated with UEQ, and the results indicated improvement across all dimensions, particularly in attractiveness and novelty, which previously scored negative. The integration of auto layout enhanced design efficiency and consistency. The findings demonstrate that applying the Five Planes method supported by responsive design features can produce a more modern, intuitive, and engaging interface. This study provides practical implications for the development of digital library systems and theoretical contributions to mobile-based UI/UX design research.           

References

[1] R. F. A. Aziza, M. B. Aulawi, and A. D. Putra, “Perancangan UI/UX Aplikasi Digital Library Di Universitas AMIKOM Yogyakarta Menggunakan Metode Five Planes,” J. Teknol. Inf. dan Komputer, vol. 9, no. 1, pp. 191–198, 2023, doi: 10.36002/jutik.v9i1.2263.

[2] M. W. P. Dananjaya, G. Indrawan, and Sariyasa, “Perancangan Tampilan Aplikasi Pembelajaran Pinandita dengan Metode Five Planes, Heuristic Evaluation, Concurrent Think Aloud, serta Cognitive Walkthrough,” JURIKOM, vol. 9, no. 1, pp. 92–101, 2022, doi: 10.30865/jurikom.v9i1.3859.

[3] M. G. Fachridwan and M. C. Sondari, “Pengembangan User Interface dan User Experience dengan Metode Five Planes (Studi Kasus pada Website Taxsam.co Learning Center),” EKUILNOMI: J. Ekon. Pembangunan, vol. 5, no. 2, pp. 474–486, 2023, doi: 10.36985/ekuilnomi.v5i2.762.

[4] J. J. Garrett, The Elements of User Experience: User-Centered Design for the Web and Beyond, 2nd ed. Berkeley, CA, USA: New Riders, 2011.

[5] F. Handayani and Nurajijah, “Analisis Desain User Interface dan User Experience Aplikasi Spidol Menggunakan Metode Design Thinking,” J. Infortech, vol. 6, no. 1, pp. 37–45, 2024, doi: 10.31294/infortech.v6i1.21876.

[6] A. N. L. Indriani, F. Fahmiy, M. Muadhom, and A. Saefudin, “Pentingnya Perpustakaan Digital Sebagai Sumber Belajar di Era Society 5.0,” BIBLIOTIKA: J. Kajian Perpustakaan dan Informasi, vol. 8, no. 1, pp. 152–162, 2024, doi: 10.17977/um008v8i12024p152-162.

[7] A. V. Junilla, “Perancangan UI/UX Microservice Sistem Informasi Akademik Kampus dengan Metode Perancangan Five Planes: Studi Kasus AIS Mahasiswa UIN Jakarta,” S1 Thesis, Fak. Sains dan Teknologi, UIN Syarif Hidayatullah Jakarta, 2021. [Online]. Available: https://repository.uinjkt.ac.id/dspace/handle/123456789/56712

[8] D. Kristyawati and Jamilah, “Interaksi Manusia dan Komputer Analisa Aspek IMK pada Mobile Banking BNI,” Gunadarma Library, 2020. [Online]. Available: https://library.gunadarma.ac.id/repository/interaksi-manusia-dan-komputer-analisa-aspek-imk-pada-mobile-banking-bni-penelitian

[9] L. Munawaroh, “Penggunaan Konsep User Experience Terhadap Layanan Situs Web Perpustakaan,” PUSTABIBLIA: J. Libr. Inf. Sci., vol. 5, no. 2, pp. 323–346, 2021, doi: 10.18326/pustabiblia.v5i2.323-346.

[10] R. Pramudita, R. W. Arifin, A. N. Alfian, N. Safitri, and S. D. Anwariya, “Penggunaan Aplikasi Figma dalam Membangun UI/UX yang Interaktif pada Program Studi Teknik Informatika STMIK Tasikmalaya,” J. Buana Pengabdian, vol. 3, no. 1, pp. 149–154, 2021, doi: 10.36805/jurnalbuanapengabdian.v3i1.1542.

Downloads

Published

2025-12-17

Issue

Vol. 16 No. 03 (2025): Jurnal Ilmiah BETRIK : Besemah Teknologi Informasi dan Komputer

Section

Articles

License

Copyright (c) 2025 novriandhandy, Unang Rio, Karpen, Eiva (Author)

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.