Designing the UI/UX of Pangan Zone to Improve Accessibility to Food Education Content
Article Sidebar
Main Article Content
Abstract
Access to understandable food-related information can be limited by interface complexity, differences in digital literacy, and accessibility needs. This study presents the UI/UX design and evaluation of Pangan Zone, a web-based food-education prototype developed using a User-Centered Design (UCD) orientation. User requirements were obtained from a five-point questionnaire completed by 127 potential users and summarized using frequencies, percentages, and weighted mean scores. The resulting requirements informed the information architecture, card-based content presentation, typography, color selection, and navigation structure. The prototype was evaluated by 30 participants completing five usability tasks. Across 150 task attempts, 146 were successful, giving an overall task-completion rate of 97.3%. The mean of the five task-level average times was 17.7 seconds, the mean recorded error value was 0.2, and the mean task-difficulty rating was 1.3 on a 1 to 5 scale. Using the standard System Usability Scale (SUS) transformation on the rounded item means reported in Table 7 gives an approximate SUS score of 86.8. WCAG 2.1 Level AA was used as a design target, and selected text-background color pairs were checked quantitatively, but a complete criterion-by-criterion WCAG conformance audit was not performed. The results support high usability for the tested tasks and show how stated user requirements were translated into interface decisions within the evaluated prototype.
Downloads
Article Details
This work is licensed under a Creative Commons Attribution 4.0 International License.
Authors retain copyright of their work and grant Jurnal Ilmiah Teknologi Informasi Asia the right of first publication. The work is simultaneously licensed under a Creative Commons Attribution 4.0 International License (CC BY 4.0) that allows others to share the work with an acknowledgment of the work's authorship and initial publication in this journal.
While the editorial board endeavors to ensure accuracy, they accept no responsibility for the content of articles. Liability rests solely with the respective authors.
This is an open-access journal. All articles are immediately available to read and reuse upon publication under the CC BY 4.0 license. Users may share and adapt the material for any purpose, including commercial use, provided they comply with the license terms.
References
Abiri, R., Rizan, N., Balasundram, S. K., Shahbazi, A. B., & Abdul-Hamid, H. (2023). Application of digital technologies for ensuring agricultural productivity. Heliyon, 9(12), e22601. https://doi.org/10.1016/j.heliyon.2023.e22601
Ara, J., Sik-Lanyi, C., & Kelemen, A. (2024). Accessibility engineering in web evaluation process: A systematic literature review. Universal Access in the Information Society, 23, 653-686. https://doi.org/10.1007/s10209-023-00967-2
Atata, R., & Odedeyi, T. (2025). Designing inclusive interfaces: Enhancing user experience for people with disabilities through adaptive UI accessibility principles. International Journal of Science and Research Archive, 16(2), 1072-1096. https://doi.org/10.30574/ijsra.2025.16.2.2446
Bangor, A., Kortum, P., & Miller, J. (2009). Determining what individual SUS scores mean: Adding an adjective rating scale. Journal of Usability Studies, 4(3), 114-123. https://dl.acm.org/doi/10.5555/2835587.2835589
Brooke, J. (1996). SUS: A quick and dirty usability scale. In P. W. Jordan, B. Thomas, B. A. Weerdmeester, & I. L. McClelland (Eds.), Usability evaluation in industry (pp. 189-194). Taylor & Francis. https://www.taylorfrancis.com/chapters/edit/10.1201/9781498710411-35/sus-quick-dirty-usability-scale-john-brooke
Gomez-Hernandez, M., Ferre, X., Moral, C., & Villalba-Mora, E. (2023). Design guidelines of mobile apps for older adults: Systematic review and thematic analysis. JMIR mHealth and uHealth, 11, e43186. https://doi.org/10.2196/43186
Hassenzahl, M., & Tractinsky, N. (2006). User experience: A research agenda. Behaviour & Information Technology, 25(2), 91-97. https://doi.org/10.1080/01449290500330331
International Organization for Standardization. (2018). ISO 9241-11:2018 Ergonomics of human-system interaction, Part 11: Usability: Definitions and concepts. ISO. https://www.iso.org/standard/63500.html
International Organization for Standardization. (2019). ISO 9241-210:2019 Ergonomics of human-system interaction, Part 210: Human-centred design for interactive systems. ISO. https://www.iso.org/standard/77520.html
Klerkx, L., Jakku, E., & Labarthe, P. (2019). A review of social science on digital agriculture, smart farming and agriculture 4.0: New contributions and a future research agenda. NJAS - Wageningen Journal of Life Sciences, 90-91, 100315. https://doi.org/10.1016/j.njas.2019.100315
Lazar, J., Goldstein, D. F., & Taylor, A. (2015). Ensuring digital accessibility through process and policy. Morgan Kaufmann. https://shop.elsevier.com/books/ensuring-digital-accessibility-through-process-and-policy/lazar/978-0-12-800646-7
Lewis, J. R. (2018). The System Usability Scale: Past, present, and future. International Journal of Human-Computer Interaction, 34(7), 577-590. https://doi.org/10.1080/10447318.2018.1455307
Miya, T. K., & Govender, I. (2022). UX/UI design of online learning platforms and their impact on learning: A review. International Journal of Research in Business and Social Science, 11(10), 316-327. https://doi.org/10.20525/ijrbs.v11i10.2236
Nielsen, J. (1994). Usability engineering. Morgan Kaufmann. https://shop.elsevier.com/books/usability-engineering/nielsen/978-0-08-052029-2
Norman, D. A. (2013). The design of everyday things: Revised and expanded edition. Basic Books. https://www.basicbooks.com/titles/don-norman/the-design-of-everyday-things/9780465050659/
Paivio, A. (1986). Mental representations: A dual coding approach. Oxford University Press. https://academic.oup.com/book/10932
Poelman, M. P., Dijkstra, S. C., Sponselee, H., Kamphuis, C. B. M., Battjes-Fries, M. C. E., Gillebaart, M., & Seidell, J. C. (2018). Towards the measurement of food literacy with respect to healthy eating: The development and validation of the self perceived food literacy scale among an adult sample in the Netherlands. International Journal of Behavioral Nutrition and Physical Activity, 15, 54. https://doi.org/10.1186/s12966-018-0687-z
Power, C., Freire, A. P., Petrie, H., & Swallow, D. (2012). Guidelines are only half of the story: Accessibility problems encountered by blind users on the web. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 433-442. https://doi.org/10.1145/2207676.2207736
Saprida, S., Putri, R. A., & Harahap, A. M. (2024). Implementation of user experience design approach in web based e-commerce for the agricultural sector. Journal of Computer Networks, Architecture and High Performance Computing, 6(2), 804-816. https://doi.org/10.47709/cnahpc.v6i2.3809
Sauro, J., & Lewis, J. R. (2016). Quantifying the user experience: Practical statistics for user research (2nd ed.). Morgan Kaufmann. https://shop.elsevier.com/books/quantifying-the-user-experience/sauro/978-0-12-802308-2
Truman, E., Lane, D., & Elliott, C. (2017). Defining food literacy: A scoping review. Appetite, 116, 365-371. https://doi.org/10.1016/j.appet.2017.05.007
Vidgen, H. A., & Gallegos, D. (2014). Defining food literacy and its components. Appetite, 76, 50-59. https://doi.org/10.1016/j.appet.2014.01.010
Warahmah, A., Amanah, S., & Krishandini. (2025). Pemanfaatan aplikasi Digitani sebagai media komunikasi, informasi, dan edukasi pertanian. Jurnal Sains Komunikasi dan Pengembangan Masyarakat, 9(1), 1-11. https://doi.org/10.29244/jskpm.v9i1.1450
World Wide Web Consortium. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/