TRANSFORMATION OF VISUAL METAPHORS IN GRAPHIC INTERFACE DESIGNS FOR CHILDREN

Year 2022, Volume: 16 Issue: 30, 345 - 363, 31.07.2022

Oya Cansu Demirkale Kukuoğlu , Sevgi Koyuncu

https://doi.org/10.48069/akdenizsanat.1120031

Abstract

The graphical interfaces used in digital game designs enable children to communicate between the application through visual metaphors and symbols. Visual metaphors used in designed game applications appear as a way of expression that recalls similarities with objects and is used in a way that refers to objects. If the symbols and icons used in game designs are familiar, the usability of the applications increases and plays an important role in the effective communication between the application and the child. Along with the changing graphic interface designs over time, icons that imitate real-world objects have evolved from skemorphic designs to flat designs and have directly affected the usability of applications. In this research, it is examined how the metaphors used in graphic interface designs are presented to children with game applications through the skemorphic and flat design approach.
The research tries to reveal the effects of visual metaphors on children from the change and transformation process of graphic interface designs. The research was carried out through qualitative research methods, and the data obtained through the literature review were interpreted with the descriptive analysis method. The intelligibility of graphical interface designs, the metaphors used in the design process and the transformation process in graphical interface designs were examined through visual metaphors and the research was supported with examples on the research subject. The intelligibility of graphical interface designs, the metaphors used in the design process and the transformation process in graphical interface designs were examined through visual metaphors and the research was supported with examples on the subject. In the research, metaphors used in graphic interface designs for children were examined. According to the research findings, interface designs should be made understandable and disseminated for children.

Keywords

Metaphor, Interface Design, Graphical Interface, Skeuomorphic Design, Flat Design.

ÇOCUKLARA YÖNELİK OLUŞTURULAN GRAFİK ARAYÜZÜ TASARIMLARINDA BULUNAN GÖRSEL METAFORLARIN DÖNÜŞÜMÜ

Abstract

Dijital oyun tasarımlarında kullanılan grafik arayüzleri, çocukların görsel metafor ve semboller aracılığı ile uygulama arasında iletişim kurmalarını sağlamaktadır. Tasarlanan oyun uygulamalarında kullanılan görsel metaforlar, genel anlamıyla nesnelerle olan benzerlikleri akla getiren ve nesnelere gönderme yapacak şekilde kullanılan bir anlatım yolu olarak karşımıza çıkmaktadır. Oyun tasarımlarında kullanılan simge ve sembollere aşina olunması durumunda uygulamaların kullanılabilirliği artmakta, uygulama ile çocuk arasındaki iletişimin etkili olmasında önemli rol oynamaktadır. Zaman içerisinde değişen grafik arayüz tasarımlarıyla beraber gerçek dünyadakine benzer nesneleri taklit eden ikonlar, skemorfik tasarımlardan düz (flat) tasarımlara doğru evrilmiş ve uygulamaların kullanılabilirliğini doğrudan etkilemiştir.
Bu araştırmada, grafik arayüz tasarımlarında kullanılan metaforların, skemorfik ve düz (flat) tasarım anlayışı üzerinden oyun uygulamaları aracılığı ile çocuklara nasıl sunulduğu incelenmiştir. Bu kapsamda, grafik arayüzü tasarımlarının değişim ve dönüşüm sürecinden görsel metaforların çocuklar üzerindeki etkileri ortaya koyulmaya çalışılmıştır. Araştırma, nitel araştırma yöntemleri üzerinden gerçekleştirilmiş olup; alan yazın taraması ile elde edilen veriler betimsel analiz yöntemi ile yorumlanarak oluşturulmuştur. Araştırma kapsamında taranacak olan veriler göz önünde bulundurularak, grafik arayüz tasarımlarının anlaşılabilirliği, tasarım sürecinde kullanılan metaforlar ve grafik arayüz tasarımlarındaki dönüşüm süreci görsel metaforlar üzerinden incelenmiş ve konuya dair örnekler ile araştırma desteklenmiştir. Araştırma bulgularına göre çocuklara yönelik oluşturulan grafik arayüz tasarımlarında bulunan metaforlar ve bu metaforların tasarımları sayesinde arayüz tasarımlarının anlaşılabilir kılınarak yaygınlaştırılması gerektiği düşünülmektedir.

Keywords

Metafor, Arayüz Tasarımı, Grafik Arayüzü, Skemorfik Tasarım, Düz Tasarım

References

• Altındal, S. (2020). Transformation of Visual Metaphors In Design, User Experience and Usability By Observing Mobile Interfaces. (Basılmamış doktora tezi). Yeditepe Üniversitesi, Sosyal Bilimler Enstitüsü. İstanbul.
• Barr, P. (2003). User-Interface Metaphors in Theory and Practice. (Master of science thesis). Victoria University of Wellington, Department of Mathematical and Computing Sciences.
• Backhaus, N., Trapp, A. K., ve Thüring, M. (2018). Skeuomorph versus flat design: User experience and age-related preferences. In International Conference of Design, User Experience, and Usability, 527-542.
• Basalla, G. (2004). Teknolojinin evrimi, (Çev. Cem Soydemir). TÜBİTAK, Ankara.
• Batı, A. (2012). İnsan-Bilgisayar Etkileşiminde Arayüz Tasarımları ve Metaforlar. (Yayımlanmış sanatta yeterlik tezi). Marmara Üniversitesi Güzel Sanatlar Enstitüsü, İstanbul.
• Blackler, A., Popovic, V. ve Mahar, D.P. (2005) Intuitive Interaction Applied to Interface Design. In Proceedings International Design Congress - IASDR 2005, Douliou, Taiwan. Erişim: 12.04.2022. http://eprints.qut.edu.au/archive/00003638.
• Cherng, F. Y., Lin, W. C., King, J. T., ve Lee, Y. C. (2016). An EEG-based approach for evaluating graphic icons from the perspective of semantic distance. In Proceedings of the 2016 CHI conference on human factors in computing systems, 4378-4389.
• Cio, (2013). Microsoft’un en kötü 13 yanlış adımı. Erişim: 03.02.2022. https://www.cioupdate.com.tr/teknoloji/microsoftun-en-kotu-13-yanlis-adimi/
• Cho, M., Kwon, S., Na, N., Suk, H. J., ve Lee, K. (2015). The elders preference for skeuomorphism as app icon style. In Proceedings of the 33rd Annual ACM Conference Extended Abstracts on Human Factors in Computing Systems, 899-904.
• Cooke, J. ve Woollard, J. (2006). Visual literacy and painting with technology: observations in the early year’s classroom. M. Hayes, ve D. Whitebread (Ed.) Ict In The Early Years, 107-123.
• Çakmak, E. K. (2007). Arayüz tasarımında yeni bir yaklaşım: Paralel öğretim tasarımı. Gazi Üniversitesi Gazi Eğitim Fakültesi Dergisi, 27(1), 1-22.
• Erickson, T. D. (1995). Working with interface metaphors. In Readings in Human–Computer Interaction, 147-151. Morgan Kaufmann.
• Gossen, T., Hempel, J., ve Nürnberger, A. (2013). Find it if you can: usability case study of search engines for young users. Personal and Ubiquitous Computing, 17(8), 1593-1603.
• Gossen, T., Nitsche, M., ve Nürnberger, A. (2012). Search User Interface Design for Children: Challenges and Solutions. In EuroHCIR, 59-62.
• Hartson, R., ve Pyla, P. (2019). Mental models and conceptual design. The UX Book; Elsevier: Cambridge, UK, 327-340.
• Hiniker, A., Sobel, K., Suh, H., ve Kientz, J. A. (2016). Hidden symbols: how informal symbolism in digital interfaces disrupts usability for preschoolers. International Journal of Human-Computer Studies, 90, 53-67.
• Kai-Chun, H., ve Chun-Heng, H., (2013). A Preliminary Study On Aesthetic of Apps Icon Design, Erişim:15.01.2022. http://design-cu.jp/iasdr2013/papers/1811-1b.pdf
• Karabulut B. (2015). Skemorfik Tasarımdan Flat Tasarıma Geçiş. Erişim: 10.05.2022. https://medium.com/tasarim-turkce/skemorfik-tasar%C4%B1mdan-flat-tasar%C4%B1ma-ge%C3%A7i%C5%9F-559baeb27147
• Kıral, E. (2015). Öğretmen adaylarının algılarına göre öğretmen metaforları. Adnan Menderes Üniversitesi Eğitim Fakültesi Eğitim Bilimleri Dergisi, 6(1), 57-65.
• Kubincová, M., ve Ingesson, E. (2021). “They don’t look real; they are not nice.”: Skeuomorphic vs. Flat Design Icons–Ease of use, Recognition and Preference of Children Aged 7-9.
• Kuiper, U, Schulz, U, ve Will, G. (1997). Bucherschatz - A prototype of a children’s OPAC. Information Services & Use, 01675265, 17(2/3), 201–214.
• Marcus, A. (1998). Metaphor design in user interfaces. ACM SIGDOC Asterisk Journal of Computer Documentation, 22(2), 43-57.
• Mountford, S. J. (1990). “Tools and Techniques for Creative Design”, in B. Laurel (ed.), “TheArt of Human-Computer Interface Design”, Addison Wesley, 17-30.
• McKnight, L., ve Read, J. C. (2009). Designing the’record’button: using children’s understanding of icons to inform the design of a musical interface. In Proceedings of the 8th International Conference on Interaction Design and Children, 258-261.
• Naranjo-Bock, C. (2011). Approaches to user research when designing for children. Erişim: 20.04.2022. https://www.uxmatters.com/mt/archives/2011/03/approaches-to-user-research-when-designing-for-children.php.
• Nielsen, J. (1994). Usability Heuristics for User Interface Design. NN/g Nielsen Norman Group. Erişim: 12.06.2022. https://www. nngroup. com/articles/ten-usability-heuristics.
• Ogle, J. (2017). Abstraction vs Skeuomorphism. Erişim: 10.06.2022 https://thoughtbot.com/blog/abstraction-vs-skeuomorphism
• Oswald, D., ve Kolb, S. (2014). Flat design vs. skeuomorphism–effects on learnability and image attributions in digital product interfaces. In DS 78: Proceedings of the 16th International conference on Engineering and Product Design Education (E&PDE14), Design Education and Human Technology Relations, University of Twente, The Netherlands, 402-407.
• Robbins, W. H. (2014). Design practices ın mobile user ınterface. San Luis Obispo: Graphic Communication Department College of Liberal Arts California Polytechnic State University.
• Saffer, D. (2005). The role of metaphor in interaction design. Information Architecture Summit, 6. Schneidermeier, T., Hertlein, F., ve Wolff, C. (2022). Changing paradigm–changing experience?. In International Conference of Design, User Experience, and Usability, 371-382.
• Schröder, S., ve Ziefle, M. (2008). Effects of icon concreteness and complexity on semantic transparency: Younger vs. older users. In International Conference on Computers for Handicapped Persons, 90-97.
• Shahid, S., Voort, J., Somers, M., ve Mansour, I. (2016). Skeuomorphic, flat or material design: requirements for designing mobile planning applications for students with autism spectrum disorder. In Proceedings of the 18th International Conference on Human-Computer Interaction with Mobile Devices and Services Adjunct, 738-745.
• Spiliotopoulos, K., Rigou, M., ve Sirmakessis, S. (2018). A comparative study of skeuomorphic and flat design from a UX perspective. Multimodal Technologies and Interaction, 2(2), 31.
• Kahraman, M. E., ve Toy, E. (2017). Çocuk Merkezli Kullanıcı Arayüz Tasarımlarında İkon Kullanımı. Medeniyet Sanat Dergisi, 3(1), 8-28.
• Uden, L., ve Dix, A. (2000). Iconic interfaces for kids on the Internet. In IFIP world computer congress, 279-286.
• Zeğerek E. ve Kara M. (2014). Dijital Kullanıcı Arayüz Tasarımlarında Skemorfik Anlayış. Hacettepe Üniversitesi, Güzel Sanatlar Fakültesi, Sanat Yazıları Dergisi. Ankara.
• Zhang, X., Wang, Q., ve Shi, Y. (2016). Contrastive analysis on emotional cognition of skeuomorphic and flat icon. In China Academic Conference on Printing & Packaging and Media Technology, 225-232.
• Watzman, S. (2002). Visual design principles for usable interfaces. The human-computer interaction handbook: Fundamentals, evolving technologies and emerging applications, 263-285.
• Wiebe, M., Geiskkovitch, D., ve Bunt, A. (2016). Icons for Kids: Can Young Children Understand Graphical Representations of App Store Categories?. In Graphics Interface, 163-166.