UTILIZING INTERACTIVE VECTOR GRAPHICS TO ENHANCE USER EXPERIENCE IN ENGAGING WITH COMPLEX USER INTERFACE DESIGN

Authors

  • Soon Eu Hui Faculty of Business and Communication, INTI International University (IIU), 71800, Nilai, Negeri Sembilan, Malaysia
  • Nur’azah Abdul Manaf Malaysia-Japan International Institute of Technology (MJIIT), Universiti Teknologi Malaysia (UTMKL), 54100, Wilayah Persekutuan Kuala Lumpur, Malaysia
  • Mohd Naz'ri Mahrin Razak Faculty of Technology and Informatics, Universiti Teknologi Malaysia (UTMKL), 54100, Wilayah Persekutuan Kuala Lumpur, Malaysia

DOI:

https://doi.org/10.11113/aej.v12.17689

Keywords:

Interactive Vector Graphics, Responsive Digital Layouts, Graphic Formats and Conversions, User Experience, User Interface Design

Abstract

In the shift towards the Fourth Industrial Revolution (IR4.0), there are a multitude of user interventions that are heavily dependent on screen-based content which are highly correlated with the Internet of Things (IOT). This has raised certain usability issues, primarily when utilizing pixel graphics in dealing with complex User Interface (UI) design on devices with smaller screen size. This paper addresses the delay in timing, as the main part of the usability issue, which is caused by the increased of user interaction in completing task given. This paper studies the conversion rate outcomes from pixel graphics to interactive Scalable Vector Graphics (SVG) as a solution in reducing user interaction thus enhancing overall user experience (UX). The research design focuses on 2 analysis stages, which starts with a comparison stage that is exploratory in nature, followed by a regression analytics as part of the usability testing. The comparative analysis utilizes A/B testing that is composed of a control group and a treatment group, which measures the time spent based on actions per-page, in determining the effect size of both pixel and vector graphics through specified observations. The regression analytics that follows through is explanatory in nature and measures the indirect effects of the time delay, in defining that there is a significant relationship between time spent against actions per-page. The findings contribute towards establishing a more impactful use of graphic format in the adaptation to UI design that maximizes UX outcomes, which defines effective usability towards conversion optimizations.

References

R.Sh. Mohamed & G.A. Yousif, 2010 Input resolution and its effect of the printed image quality on digital toner printing systems (case study – Sinai, Egypt), The Egyptian Journal of Remote Sensing and Space Science, 13(1): 75-80, ISSN 1110-9823, https://doi.org/10.1016/j.ejrs.2010.07.009.https://www.sciencedirect.com/science/article/pii/S1110982310000104.

Lumpapun Punchoojit, Nuttanont Hongwarittorrn, 2017. "Usability Studies on Mobile User Interface Design Patterns: A Systematic Literature Review", Advances in Human-Computer Interaction, 2017,1-22. https://doi.org/10.1155/2017/6787504

Bogaard, D, Vullo, R., & Cascioli, C. 2021. Better than HTML Web: Dynamically Generated SVG Web sites. (https://www.researchgate.net/publication/251283131)

Cohen, J. 1988. Statistical Power Analysis for the Behavioral Sciences. New York, NY: Routledge Academic

Cohen, J. 1965. Some statistical issues in psychological research,” in Handbook of Clinical Psychology, ed B. B. Wolman (New York, NY: McGraw-Hill), 95–121

Schober, Patrick & Boer, Christa & Schwarte, Lothar. 2018. Correlation Coefficients: Appropriate Use and Interpretation. Anesthesia & Analgesia. 126. 1. 10.1213/ANE.0000000000002864.

Moore, D. S., Notz, W. I., and Fligner, M. A., 2021. The Basic Practice of Statistics, 9th ed., W.H. Freeman & Company, New York, NY

Kiran, S. S., & Suresh, K.V., Challenges in Sparse Image Reconstruction, International Journal of Image and Graphics, 21(3): 2150026 https://doi.org/10.1142/S0219467821500261

Rodrigues, Carlos & Jr, Bernardo & Ribeiro, Pablo. 2005. Using A Script Model To Preserve The Consistency Within An UI Design Environment. 143-149. 10.1145/1122935.1122963.

Холявкіна, Т & Резаєв, Я & Харченко, О. 2020. Video streaming web service. Problems of Informatization and Management. 1. 10.18372/2073-4751.63.15001

Rossiter, David & Lam, Gibson. 2013. A Web Service Framework Supporting Multimedia Streaming. IEEE Transactions on Services Computing. 6. 400-413. 10.1109/TSC.2012.11.

Li, Dingquan & Jiang, Tingting & Jiang, Ming. (2019). Recent Advances and Challenges in Video Quality Assessment. 17: 3-11. 10.12142/ZTECOM.201901002

Roth, R. E. 2017. User Interface and User Experience (UI/UX) Design. The Geographic Information Science & Technology Body of Knowledge (2nd Quarter 2017 Edition), John P. Wilson (ed.). doi: 10.22224/gistbok/2017.2.5

Olam, Mikail & Şanlıtürk, İsmail & Tosun, Nihat. 2016. Converting a pixel graphic into toolpath for machining on a CNC milling machine. 10.15224/978-1-63248-099-6-38

Hair, J. F., Jr., Black, W. C., Babin, B. J., & Anderson, R. E. 2010. Multivariate data analysis (7th ed.). Upper Saddle River, NJ: Prentice Hall

Cook, R. D., & Weisberg, S. 1982. Residuals And Influence In Regression. New York: Chapman and Hall

Kohavi, R., & Longbotham, R., 2017. Online Controlled Experiments and A/B Testing. 10.1007/978-1-4899-7687-1_891

Lu, Mengyin & Stephens, Matthew. 2016. Variance Adaptive Shrinkage (vash): Flexible Empirical Bayes estimation of variances. 10.1101/048660

Sheeba, Adlin & Arumugam, Chandrasekar. 2014. User-Centric Design for Mathematical Web Services. Advances in Human-Computer Interaction. 10.1155/2014/436980

Royds, A. B., Cagle, K., & Storey, D., 2017. Using SVG with CSS3 and HTML5, 75-104. O'Reilly Media, Inc., ISBN: 9781491921975,

Isenberg, Tobias & Carpendale, Sheelagh & Costa Sousa, Mario. 2005. Breaking the Pixel Barrier. In Proc. Computational Aesthetics. 41-48. 10.2312/COMPAESTH/COMPAESTH05/041-048

Martín, Domingo & Arroyo, Germán & Rodríguez Aguilera, Alejandro & Isenberg, Tobias. 2017. A Survey of Digital Stippling. Computers & Graphics. 67. 10.1016/j.cag.2017.05.001

Scull, Craig & Johnson, Steve & Aliaga, Frederick & Paris, Sylvain & Su, Sara & Durand, Fredo. 2009. Interactive Visual Histories for Vector Graphics MIT Computer Science and Artificial Intelligence Laboratory Technical Report, USA

Neumann, A., Winter A.M. 2003. Webmapping with Scalable Vector Graphics (SVG): Delivering the promise of high quality and interactive web maps, Peterson, M. (ed.) Maps and the Internet, p. 197–220. Elsevier, Kidlington, Oxford, UK (2003). 10.1016/B978-008044201-3/50014-1

Downloads

Published

2022-11-29

How to Cite

Hui, S. . E. ., Abdul Manaf, N. ., & Mahrin, M. N. . (2022). UTILIZING INTERACTIVE VECTOR GRAPHICS TO ENHANCE USER EXPERIENCE IN ENGAGING WITH COMPLEX USER INTERFACE DESIGN. ASEAN Engineering Journal, 12(4), 1-7. https://doi.org/10.11113/aej.v12.17689

Issue

Section

Articles