Exploratory visualization of science in an academic context: development of an interface applied to languages
Abstract
This work presents a web-based platform developed as part of the DIAL4U project, funded by the Erasmus+ program of the European Union. The project aims to assist foreign language teachers during the challenges posed by the COVID-19 pandemic. It focuses on designing and deploying a web-based interface for delivering multimodal academic content in foreign language education, emphasizing collaborative knowledge creation. Drawing from Scientific Communication, Data Visualization, and Digital Humanities, this project seeks to create an interactive and multimodal interface to support language educators in adapting their teaching to pandemic scenarios. The platform's concept of data visualization in a hierarchical structure, radial tree layout, as a source of interaction and knowledge discovery enhances user navigation and access to content visually and interactively. The development process involved creating a medium-fidelity prototype, implementing a radial tree data visualization, designing the web page, and integrating content using HTML, CSS, JS, JSON, and the E-charts visualization library. In addition, the DIAL4U project incorporates a curated podcast series and diverse pedagogical resources to engage the audience. The development used User Interface Design and User Experience. The project culminated in a workshop designed for foreign language educators to experience the resource and gain a deeper understanding of the intended user base. The workshop provided an opportunity to get educators' feedback and identify issues for further improvement.
Full text
Universidade do Minho Escola de Letras, Artes e Ciências Humanas Mariana Dora dos Santos Pereira Exploratory visualization of science in an academic context: development of an interface applied to languages March 2024 UMinho | 2024 Mariana Dora dos Santos Pereira Exploratory visualization of science in an academic context: development of an interface applied to languages
Mariana Dora dos Santos Pereira Exploratory visualization of science in an academic context: development of an interface applied to languages Dissertation Supervised by Master dissertation Master Degree in Digital Humanities Professora Sílvia Araújo Professor Bruno Azevedo Universidade do Minho Escola de Letras, Artes e Ciências Humanas March 2024
II DIREITOS DE AUTOR E CONDIÇÕES DE UTILIZAÇÃO DO TRABALHO POR TERCEIROS Este é um trabalho académico que pode ser utilizado por terceiros desde que respeitadas as regras e boas práticas internacionalmente aceites, no que concerne aos direitos de autor e direitos conexos. Assim, o presente trabalho pode ser utilizado nos termos previstos na licença abaixo indicada. Caso o utilizador necessite de permissão para poder fazer um uso do trabalho em condições não previstas no licenciamento indicado, deverá contactar o autor, através do RepositóriUM da Universidade do Minho. Licença concedida aos utilizadores deste trabalho Atribuição-NãoComercial-CompartilhaIgual CC BY-NC-SA https://creativecommons.org/licenses/by-nc-sa/4.0/
III Acknowledges I extend my heartfelt gratitude to my parents, whose wise support and guidance have been instrumental throughout my journey, particularly in supporting my life choices. Their commitment to education influenced me and played a pivotal role in my life path and in realizing this master's degree. I also express my appreciation for my family and community, recognizing the significance of every individual who has presented me with new possibilities. To my supervisor, Professor Sílvia Araújo, I thank you for introducing me to this challenge and providing support throughout this journey. While I initially doubted my ability to fulfill the tasks, her belief in me was instrumental in surmounting those challenges. Her guidance and relentless confidence made all the difference. I must also acknowledge my co-supervisor, Bruno Azevedo, for his invaluable contributions to developing this work and dissertation. His guidance and teachings significantly enriched my academic experience. My deep appreciation extends to my colleagues at the DIAL4U project, particularly those at Jaume I University, with whom I collaborated closely: Mercedes Sanz Gil, Carmen Notari, Carol Girón, and Noelia Ruiz. Their commitment and professionalism were vital to the success of this work, and this journey would have posed far more significant challenges without their exceptional collaboration. I want to express my deepest gratitude and appreciation to everyone who contributed to completing this master's dissertation. Lastly, I want to convey my gratitude to everyone who was part of my life in Portugal. The support and companionship I have received throughout this journey are invaluable.
IV STATEMENT OF INTEGRITY I here declare having conducted this academic work with integrity. I confirm that I have not used plagiarism or any form of undue use of information or falsification of results along the process leading to its elaboration. I further declare that I have fully acknowledged the Code of Ethical Conduct of the University of Minho.
V Abstract This work presents a web-based platform developed as part of the DIAL4U project, funded by the Erasmus+ program of the European Union. The project aims to assist foreign language teachers during the challenges posed by the COVID-19 pandemic. It focuses on designing and deploying a web-based interface for delivering multimodal academic content in foreign language education, emphasizing collaborative knowledge creation. Drawing from Scientific Communication, Data Visualization, and Digital Humanities, this project seeks to create an interactive and multimodal interface to support language educators in adapting their teaching to pandemic scenarios. The platform's concept of data visualization in a hierarchical structure, radial tree layout, as a source of interaction and knowledge discovery enhances user navigation and access to content visually and interactively. The development process involved creating a medium-fidelity prototype, implementing a radial tree data visualization, designing the web page, and integrating content using HTML, CSS, JS, JSON, and the E-charts visualization library. In addition, the DIAL4U project incorporates a curated podcast series and diverse pedagogical resources to engage the audience. The development used User Interface Design and User Experience. The project culminated in a workshop designed for foreign language educators to experience the resource and gain a deeper understanding of the intended user base. The workshop provided an opportunity to get educators' feedback and identify issues for further improvement. Keywords: Information Visualization; Science Communication; Interfaces; Radial tree layout.
VI Index ACKNOWLEDGES ................................................................................................................................ III ABSTRACT ........................................................................................................................................... V INDEX ................................................................................................................................................ VI FIGURES .......................................................................................................................................................VIII TABLES .........................................................................................................................................................VIII LIST OF LISTINGS............................................................................................................................................... IX ACRONYMS ...................................................................................................................................................... X 1. Introduction ............................................................................................................................... 1 1.1. OBJECTIVES ........................................................................................................................................ 2 1.2. BENCHMARKS..................................................................................................................................... 3 1.3. MOTIVATION ..................................................................................................................................... 3 1.4. DOCUMENT STRUCTURE ....................................................................................................................... 3 2. State Of Art ................................................................................................................................ 5 2.1. SCIENCE COMMUNICATION ................................................................................................................... 5 2.1.1. The Dissemination Paradigm .................................................................................................... 6 2.1.2. The Public Participation Paradigm ............................................................................................ 7 2.1.3. Data Visualization and Science Communication ....................................................................... 8 2.2. HIERARCHICAL STRUCTURES ................................................................................................................ 12 2.2.1. Visual Encoding in Trees.......................................................................................................... 15 2.2.1.1. Properties .............................................................................................................................. 15 2.2.1.2. Layout .................................................................................................................................... 16 2.2.1.3. Task ....................................................................................................................................... 17 2.3. DIGITAL HUMANITIES......................................................................................................................... 18 2.4. RELATED WORK ................................................................................................................................ 20 3. Methodological Approach ......................................................................................................... 23 3.1. INVESTIGATION PROCESS .................................................................................................................... 25 3.1.1. Development ........................................................................................................................... 26 3.1.2. Analysis .................................................................................................................................... 26 4. Web Interface Development ..................................................................................................... 27 4.1. RESOURCES CREATION ....................................................................................................................... 28
VII 4.1.1. Podcast .................................................................................................................................... 28 4.1.2. Glossary ................................................................................................................................... 29 4.1.3. Library...................................................................................................................................... 29 4.1.4. Map of Experts ........................................................................................................................ 29 4.2. DATA STRUCTURE ............................................................................................................................. 30 4.3. INTERFACE PROTOTYPE ...................................................................................................................... 34 4.4. DATA VISUALIZATION ......................................................................................................................... 37 4.4.1. Radial Tree Layout ..................................................................................................................... 38 4.4.2. Interactive Design ................................................................................................................... 42 4.4.3. Color Design ............................................................................................................................ 43 4.5. FRONT-END DEVELOPMENT ................................................................................................................ 45 4.1.2. System Architecture Design .................................................................................................... 45 4.1.3. Website Architecture .............................................................................................................. 46 4.1.4. User Interface .......................................................................................................................... 48 5. Workshop ................................................................................................................................ 53 5.1. MATERIALS ...................................................................................................................................... 53 5.2. PROCEDURE ..................................................................................................................................... 54 5.3. PREPARATION................................................................................................................................... 55 5.4. PERSONA ......................................................................................................................................... 55 5.5. TASK-BASED ACTIVITY ........................................................................................................................ 56 5.6. TASK ANALYSIS ................................................................................................................................. 59 5.6.1. Data Pre-processing ................................................................................................................ 61 5.6.2. Participants Profile .................................................................................................................. 62 5.6.3. Tasks Analysis .......................................................................................................................... 64 5.6.4. Refined Persona ...................................................................................................................... 69 6. Final Considerations ................................................................................................................. 70 6.1. CONTENT ENHANCEMENT ................................................................................................................... 70 6.2. ENHANCED USER EXPERIENCE ............................................................................................................. 71 6.3. IMPACT ........................................................................................................................................... 72 6.4. FUTURE WORK ................................................................................................................................. 73 References ........................................................................................................................................ 75
4 overview of Science Communication and Data Visualisation as a foundational pillar. The link between the fields of Digital Humanities and the role of Science Communication in developing online resources is explored in depth in the next section. With this foundation, we move on to the Methodological Approach chapter, which describes the elements of the solution space and the research process critical to the development of this work. In the Web Interface Development chapter, we delve into the details of creating the resource. Based on this groundwork, the next chapter describes the workshop, presenting how it was set up and how it takes place, as well as a brief analysis of the results. The final chapter delves into the improvements made to the user experience and the discerned impact of the project and offers recommendations for future endeavors.
5 2. State of Art This section comprehensively examines key themes supporting this project's development. It explores the role of Science Communication as a tool for delivering meaningful information to the public and delves into the implications of employing Data Visualization interfaces. 2.1. Science Communication Science communicators, such as academic institutions, research institutions, or public relations agencies, depend on the knowledge of their audiences to communicate science (Kessler et al., 2022). Whether the audience is scientists, the media, policymakers, or non-scientists (Schäfer et al., 2019), the creation of new resources depends on the ability of science communicators to respect their audience's prior knowledge and thus keep them interested in what will be communicated (Geenen et al., 2020). In this sense, it’s important to underline that the concept of science communication isn't homogenous (Kessler et al., 2022). Some researchers advocate for a unidirectional flow of scientific information from experts to the public as a suitable approach to science communication. Conversely, alternative models prioritize dialogue and deliberation involving the public, experts, and decision-makers as the preferred method of engaging in science communication (Kappel & Holmen, 2019). The timeline of these models begins with the Deficit Model in the 1960s, which, during the 1980s and 1990s, shifted to the Public Understanding of Science (PUS) paradigm (Entredas, 2021). Both models assumed that a lack of knowledge among the public needed to be addressed. Despite the decline in the popularity of the deficit model and its lack of empirical support, a deficit approach still prevails in science communication. The PUS paradigm assumes that increasing lay knowledge about science will lead to more significant public support for science. The longevity of the PUS approach can be attributed to the simplicity of implementation. Moreover, it views science communication as a one-way dissemination of knowledge, hindering public influence on scientific discourse (Kessler et al., 2022).
6 After the 2000's, a new model called Public Engagement with Science (PES) emerged, aiming to facilitate a two-way dialogue between science and the public. The focus shifted from merely creating public awareness of science to encouraging citizen engagement and dialogue among various stakeholders (Bucchi & Trench, 2014). Non-scientists' involvement in scientific research and knowledge generation, such as citizen science, gained importance (Haklay et al. 2021). The goal of science communication now includes establishing a dialogue with the public and enabling their participation. This approach promotes discussions and interactions as equals between science and society. A third model, Strategic Science Communication, has gained prominence in the last decade, emphasizing the legitimation of science and its protagonists. For example, scientific institutions and academics lead to strategic communication with instrumental goals like reputation-building, especially regarding communications as publications. On the individual level, academics are pressured to compete for limited positions, publish extensively, secure funding, and strategically use public communication to their advantage (Kessler et al., 2022). The New Public Management (NPM) ideology is centered on the premise that institutional communication responds to the era of 'academic capitalism' (Entradas, 2022) and the competitive environment driven by NPM. Current research has delved into the shifting landscape of science communication, highlighting the evolving role of science journalism and the ascending influence of strategic communication by science organizations (Marcinkowski et al. 2014). This transformation is witnessed through two distinct types of studies: those focusing on structural aspects and those using analytic instruments or strategies. On the structural element, it is possible to see the increase in institutionalization and professionalization of science communication professionals, and this work relies on this. 2.1.1. The Dissemination Paradigm Models within the dissemination paradigm perceive science communication as effectively conveying information from scientific experts to the public. Prominent perspectives assume this transmission occurs through formal education or mass media, including various media formats like books, documentaries, magazines, blogs, and websites (Kappel & Holmen, 2019). Including
7 scientific journalism, popular science channels, open lectures, and social media fosters public trust in science and extends engagement beyond the scientific realm (UNESCO, 2021). And social media, such as Twitter, due to the potential to promote public engagement (Guenther et al., 2023). When it comes to evaluating science communication, both individual context and context diversity have a significant impact. Some dissemination models acknowledge the importance of social diversity and how it can affect people’s responses to communication efforts. These models recognize that an individual's information processing is influenced by various factors, such as social, psychological, experiential, and cultural factors. Considering these different factors makes it possible to understand better how to effectively communicate scientific information to a diverse audience (Kappel & Holmen, 2019). 2.1.2. The Public Participation Paradigm Most models within the public participation paradigm prioritize enabling interactive communication—dialogue and, at times, deliberation—among the public, experts, and policymakers (UNESCO, 2021). Numerous methods have been proposed, varying from traditional approaches like public hearings and referendums to less familiar methods such as Science Shops, Scenario Workshops, Citizens Juries, Planning Cells, Deliberative Polling, and more (Kappel & Holmen, 2019). One of the most prominent models of this paradigm is Citizen Science, a participatory approach that involves public members in scientific activities, contributing to research and data collection (Haklay et al., 2021). This model leverages the collective power of individuals to assist scientists in addressing complex questions and conducting various projects across diverse fields. Participants engage in data collection, observation, and analysis tasks, often aided by digital technologies and online platforms. Citizen Science empowers individuals to contribute meaningfully to scientific endeavors and fosters a sense of ownership and connection to research outcomes, promoting a deeper public engagement with science (Kappel & Holmen, 2019). Notably, journals specific to science communication, such as Science Communication (SC), Journal of Science Communication (JCOM), and Public Understanding of Science (PUS), have
8 increased the number of publications between 1976 and 2016 (Schäfer et al., 2019). This results in investigating diverse science communication topics among bioscientists, political scientists, and social scientists; however, it's important to point out the lack of quantitative studies (Kessler et al., 2022). At the same pace, it's notable that the internationalization of the field, besides the notable discrepancy between the number of productions of English writing in the Western world and other languages and countries, is also noteworthy. The diversification in language matters is a challenge that needs to be addressed in this field. It's also significant for the diversification of study subjects and the increase of resources used to communicate (Schäfer et al., 2019) the support of institutions such as museums, universities, and public relations companies that hosted the research or were a communication channel. On the other hand, social media communicators have approached science through the roles of curators, conveners, intellectuals, and civic educators, facilitating interaction with the public by using multimodality (Schäfer et al., 2019). The presence of these speakers, who may become influencers, occasionally generates tensions with more traditional academic communicators (Bucchi & Trench, 2021). This is influenced by how communication is carried out in institutions such as museums, which use a centralized communication channel. This project creates a web interface focusing on language teaching data, thus forming a resource of scientific content created by participants, whether connected to the project or not. It also emphasizes the multimodal dissemination of knowledge, aiming to make the content more appealing to the public. 2.1.3. Data Visualization and Science Communication Data visualization is a tool that facilitates the dialogue between the scientific fields and the public, including peers and/or the lay public (Silic & Lowry, 2020). Being a powerful tool in the information society (Norris, 2012)—enabling the presentation of data in an attractive, interactive, and easy-to-understand way (Zentner et al., 2020)—motivating the public interest in science and pursuing knowledge through discovering and discerning relationships between elements that emerge from large and complex data sets (Arce-Orozco et al., 2019). Synthesizing knowledge in a
9 visual representation as done by Leonardo Da Vinci (1480/1482) 1 (Figure 1) with his research through graphic representations (Silic & Lowry, 2020), that is, the synergy between text and image (Unwin, 2020). Figure 1. Atlantic Codex (Codex Atlanticus)—Leonardo da Vinci: Geometrical drawings dealing with the transformation of curvilinear surfaces into linear surfaces and vice versa. Note. By Da Vinci (1480), drawing, pen, ink, and wash on paper are located at Veneranda Biblioteca Ambrosiana. Information visualization is the result of the combination of science, art, and visual design (Silic & Lowry, 2020) that makes it possible to improve the ability to perceive visual patterns, trends, and outliers (Idrissov, 2021). Data visualization uses technologies—artifacts such as the clock, compass, abacus, or map—that transform how people relate to reality (Cairo, 2020) by making complex data more accessible to understand than tabular data (Geenen et al., 2020). 1 Available on Google Arts & Culture.
10 InfoVis (Information Visualization) is a complementary tool to scientific writing and plays a strategic role in clarifying the information presented in the text (Unwin, 2020). Using graphic forms, it is possible to communicate objectively with a broad and diverse audience (Gai et al., 2022) and promote the dissemination of scientific knowledge (Cavaller, 2021). However, when presented ineffectively, these graphics can leave viewers needing clarification in terms of navigation and interpretation (Franconeri et al., 2021). Visualization principles are the basis for building compelling visualizations and are influenced by several areas, such as epistemology, sociology, semiotics, history, ethics, critical theory, and philosophies of science, statistics, art, and technology (Cairo, 2020). From an approach that maximizes obtaining reliable, replicable, and representative results by analyzing history, assumptions, conventions, and practices in observational, descriptive, hermeneutic, normative, and critical approaches (Meyer & Dykes, 2020). Both academic and civil society institutions (Zentner et al., 2020) use information visualization to communicate with their audiences (Unwin, 2020) through projects that emphasize three aspects of scientific communication: Dissemination of scientific knowledge, dissemination of scientific experience, and dissemination of the scientific community (Yansong et al., 2020). Examples include The COVID-19 Pandemic: Visualizing the Global Impact 2 (Figure 2) from the University of Oxford, which presents data on the COVID-19 pandemic around the world through the dissemination of scientific knowledge (Mathieu et al., 2020), the same perspective as Mapping Antibiotic Resistance 3 (Figure 3), which uses interactive maps to display the levels of antibiotic resistance around the world (Criscuolo et al., 2021); and the Palladio 4 (Figure 4) project from Stanford University (2021), which created an interface in which users develop visualizations 2 Available on Our World in Data. 3 Available on Resistance Bank. 4 Available on Palladio Project.
11 from historical data related to their research (Edelstein et al., 2017), in an attempt to combine graphical interfaces with humanistic methods (About, n.d.). Figure 2. Daily confirmed COVID-19 cases per million people, Feb 11, 2021 Note. Heatmap of new confirmed cases of COVID-19 ON February 11, 2021 (Mathieu et al., 2020). Figure 3. Global Antimicrobial Resistance Cases Note. Global heatmap of antimicrobial resistance cases (Criscuolo et al., 2021).
12 Figure 4. Historical Data Visualization Note. From Palladio [image] by Edelstein et al. (2017), webpage, https://hdlab.stanford.edu/palladio/ 2.2. Hierarchical Structures Trees are a collection of nodes linked together to form a hierarchical structure. Each node represents a singular unit. A classification element is the context in which each node is inserted based on its relationship with the surrounding nodes, such as a parent, child, or sibling node (Burch, 2020). A sub-tree is a subset of nodes and links in a tree dataset that preserves all the properties of a tree. An additional way of defining a subtree is in terms of the node: from any node, there is a set of descendant data, which form a subtree (Pandey et al., 2021). Any node in a tree with a child node is called an internal node. A particular type of internal node is the root node, which is the starting node of the hierarchy and does not have a parent
13 node. Those nodes outside the hierarchy that do not have child nodes are called external nodes or leaves (Pandey et al., 2021). The visualization of hierarchies can be applied to the organization of codes, the explanation of decision models, the representation of natural phenomena, and the exploration of genetic evolution data (Figure 4). This type of visualization is used in various fields, such as software engineering, machine learning (Figure 5), linguistics (Figure 6), finance, and biology (Pandey et al., 2021). Composing these visualizations is based on at least four central visual metaphors: grouping, stacking, indenting, or explicit linking (Burch et al., 2022). Figure 5. The first monophyletic tree of organisms was drawn by Haeckel in 1866. Note. The Generelle Morphology der Organismen from Haeckel (1866) is available on Gontier (2011).
20 reconstruction of historical architecture, GIS modeling) and visualization (e.g., sketching for visuospatial reasoning)" (Munster & Terras, p.1, 2020a). 2.4. Related Work Within the framework of the projects related to this initiative, we were directly inspired by the Strategic Alliance 5 launched by the World Economic Forum. This innovative tool is designed to give leaders the ability to crack the intricate global dynamics and to facilitate well-informed strategic decision-making. The purpose is to promote strategic dialogues and simplify the understanding of complex interconnections in the ever-evolving global landscape. A comprehensive exploration of more than 250 distinct thematic areas 6 , providing users with the means to identify relevant multimodal content such as publications, videos, data, events, initiatives, and key players in each domain. In addition, on the paid version of the Strategic Alliance, the platforms offer access to customized content and the flexibility to build personalized visualizations. Each Transformation Map has a continuously refreshed feed incorporating the most upto-date research and analyses from esteemed research institutions and global media outlets. These interconnected maps function as centralized hubs for comprehending each topic from various perspectives and offering diverse pathways for exploration. It is important to note that the visualization framework employed is reminiscent of a radial tree layout. However, it should be emphasized that the visualization consists of three primary components: the root, parent, and leaf/child nodes. As users interact with each node, the corresponding information dynamically appears in the right sidebar, adjusting instantaneously in response to user interactions. Each leaf node has the potential to serve as the root node for other visualizations within the system. When a user selects a leaf node, it triggers a new visualization with a similar structure, 5 Available on Strategic Intelligence webpage. 6 Available on the Strategic Intelligence About page.
21 all adhering to the same user interaction model. This approach effectively transforms the complex, hierarchical information structure into a series of smaller radial tree layouts with only two levels of depth. A further look at the platform suggests “(…) a network of “systems maps” across a range of interrelated topics, tracing linkages amongst them and identifying pathways of transformation” (London School of Economics and Political Science, n.d.), which increases the simplification and improves user interaction by breaking down information into more manageable segments while ensuring an informative and facilitated experience. Figure 9. Strategic Alliance Transformation Map Note. From Strategic Alliance [image] by World Economic Forum, 2023, webpage, https://intelligence.weforum.org/ Although the Strategic Alliance is a source of inspiration for this project, it is essential to note that these two ventures' objectives and target audiences differ. While the Economic Forum project primarily focuses on equipping leaders with tools to understand global forces, the goals of this project revolve around improving access to language teaching practices, especially in virtual environments. And the Target audiences also differ.
22 TechDetector (Envisioning, n.d.), a collaborative project between research institutes Envisioning 7 and GIZ 8 , focuses on simplifying the understanding and evaluation of emerging technologies within the context of sustainable development. Launched in 2019, it compiles a wide range of technology applications, subject to assessments based on technological maturity (Technology Readiness Level—TRL assessment) and sustainability criteria. Figure 10. Tech Radar Radial Tree Note. From techDetector [image], by Envisioning, 2023, webpage, https://techdetector.de/. The techDetector employs a radial tree layout that considers the representative value of technologies based on their Technology Readiness Level. Each resource's position within the hierarchical structure is determined by the TRL value and is distributed in clock order from Prototype to Concept. The circle's border features lines that fulfill the same purpose while utilizing a distinct encoding method. Replicability is the main characteristic of techDetector; both the interface and data were used to foster new projects with the objective of future foresight. Like Innovation Map 9 , a project financed by the Austrian Economic Chamber aimed at business mapping. Strategic Foresight of 7 Enviosining research institute webpage available on: https://www.envisioning.io/ 8 Giz company webpage available on: https://www.giz.de/en/html/index.html 9 Available on innovationmap.at
23 Ukraine 10 maps are based on information from the United Nations Development Programme to create the radial tree layout with 160 trends with the potential to impact the Ukrainian and global future. 3. Methodological Approach The DIAL4U Project adopts a research approach deeply rooted in Design Science Research (DSR) principles. DSR is a research paradigm that emphasizes crafting innovative artifacts to address practical challenges (vom Brocke et al., 2020). This approach is especially suitable for initiatives looking for solutions to face the constantly evolving innovation landscape. In the context of DIAL4U, the project's focal point is squarely on creating transformative artifacts intended to address the pressing issues encountered by foreign language educators. The interaction between science and technology is dynamic in that one influences the other and contributes to both knowledge domains (Li et al., 2020). Science employs the scientific method, gradual paradigmatic changes, and empirical evidence. On the other hand, the technology leverages this knowledge to design artifacts. Science-oriented research, focused on descriptive knowledge, elucidates the nature of the phenomena underlying technology. This knowledge is essential for technological innovation beyond trial and error (Drechsler & Hevner, 2022). Design-oriented research, which cultivates prescriptive understanding, is concerned with practical technological advances in projects that often mix both genres, enriching knowledge bases (Adam et al., 2021). The iterative nature of DSR ensures that user feedback and needs guide the journey to reassessment (Peffers et al., 2007). This alignment reflects the project's overall goal of supporting language teachers as they navigate the complexities of digital teaching with the support of multimodal content. 10 Available on https://www.foresightua.com/
24 The core of this research approach revolves around creating a fundamental artifact: a personalized interface for language educators—a digital tool designed to respond to the challenges identified with a reactive digital structure. Developing this interface is characterized by several iterative cycles covering design, implementation, evaluation, and refinement. That led to the resource's first interaction with users through a workshop. Based on the analysis of the data collected at the workshop, it was possible to make refinements and improvements. The Knowledge Base of the DIAL4U Project is an integral component. The project relies on a spectrum of tools and technologies to facilitate its research and development efforts: • JavaScript: JavaScript 11 is a versatile language for developing interactive digital artifacts and resources. It enables dynamic and responsive elements within the project's solutions, promoting user engagement. • HTML: HTML 12 is the backbone for structuring and presenting digital content. It ensures the accessibility and readability of the project's online resources, particularly in virtual and multimodal educational settings. • CSS: CSS 13 complements HTML by governing the visual presentation of web pages. It ensures a cohesive and user-friendly interface, enhancing the overall user experience. • DOM: DOM 14 manipulation enables the project to create interactive, data-driven visualizations. This capability is crucial for effectively representing complex language education data. As a strategy to reach a broader audience in terms of multimodal content (Yasong et al. 2020), the following resources were used: 11 JavaScript definition by Mozilla. The Mozilla Developer Network (MDN) is a resource for web developers, offering detailed documentation and educational materials on various web technologies. This open-source initiative supported by Mozilla encompasses critical areas, which makes it an essential platform for developers. 12 HTML definition by Mozilla. 13 CSS definition by Mozilla. 14 DOM definition by Mozilla.
25 • Anchor: Anchor is a platform for hosting and sharing multimedia content, such as podcasts and videos. It supports the project's dissemination of scientific knowledge to a broader audience. Recently, the name changed to Spotify for Podcasters 15 . • Spotify: Spotify 16 is a digital audio streaming platform that enhances accessibility to language education materials. It offers a convenient channel for delivering audio content, complementing traditional teaching methods. • Notion: Notion 17 is a tool for sharing and communicating, serving as an alternative and supplemental source to access information. 3.1. Investigation Process With a comprehensive understanding of the problem and its context, the objectives may encompass quantitative and qualitative outcomes. To define these objectives, an examination of existing solutions is imperative. In this context, an analysis of related literature revealed existing solutions employing information visualization for accessing academic content. However, these solutions did not cater specifically to language teaching or multimodality. Based on this knowledge, the project outlined the following objectives for the solution: • Optimal Visualization Approach: The radial tree layout was identified as the most suitable visualization method for achieving the project's communication objectives. It must be interactive so users can easily access the information they want. Returning to the starting point of the view must be done in a single click. The layout must avoid overlapping labels. To be a flexible resource, it must allow the user to zoom in and pan. 15 Spotify for Podcasters, formerly known as Anchor, is a podcasting platform that allows content creators to create, distribute, expand their audience, and monetise their podcast effortlessly, directly through Spotify's app or website, all at no cost. 16 Spotify music and podcast streaming platform. 17 Notion is a comprehensive digital workspace that allows users to brainstorm, take notes and manage projects efficiently. It also offers the ability to oversee a company's operations, providing a flexible and customisable environment for working and sharing information.
26 • Workshop with language teachers: The final product should undergo a workshop inviting users to try out the interface and access its content. This will enable preliminary information to be gathered about the interface and thus improve it. The selection of appropriate technologies and tools is a pivotal aspect of this proposal phase. Outstanding technologies were chosen based on their alignment with the project's overarching goals. 3.1.1. Development The development phase unfolds with the creation of innovative digital tools, resources, and artifacts designed to tackle the identified problem. The process follows an iterative approach, enabling continuous refinement based on user feedback. The refinement efforts are conducted in collaboration with University Jaume I teachers and DIAL4U partners, both of whom consist of foreign language teachers. This iterative process ensures that the solutions are effective and adaptable, catering to the evolving needs of language educators and learners. 3.1.2. Analysis The analysis phase considered the workshop held during the LTTA1 event. This event brought together 33 foreign language teachers who were actively involved with the product in person. A comprehensive description of the workshop can be found in the Workshop Chapter. The evaluation was carried out with a focus on feedback from workshop participants. In the final phase of the process, the project synthesizes the insights gleaned throughout its journey, including the analysis of the workshop feedback. The project culminates with the dissemination of knowledge through academic publications, presentations, and resource sharing within the broader language education community. This knowledge dissemination strategy extends the project's influence beyond its original scope.
27 4. Web Interface Development In the upcoming chapter, I will describe the journey involved in creating and advancing the interface, beginning with the initial conceptualization of web pages and InfoVis and covering the collection of crucial data from various sources, including publications, web content, and videos. The resources created as part of the project, such as the podcast, map of experts, and glossary, were utilized to communicate science through the interface webpage. Later in the section, I will present the webpage's test development and results. The project's inception was marked by a preliminary meeting that convened members from Minho University and Jaume I University. This meeting served as a foundational step, driven by the partnership of both universities on this project deliverable. Especially to respond to the evolving needs highlighted by the project coordinators at the University of Lille, who are foreign language educators in a digital scenario related to the COVID-19 scenario. The primary aim was to assess the project's prerequisites comprehensively, recognizing the requirements to empower teachers once they “(…) are key persons in multilingual education” (UNESCO, 2022) and facilitate the development of language skills among their learners. One key realization from this collaborative dialogue was the need for multimodal content that would serve as a dynamic resource uniquely designed to accommodate a diverse array of multimedia information. Its vision extended far beyond static content, envisioning an interactive environment where mediation interaction played a pivotal role in foreign language information acquisition. Objective 18 of both universities provided teachers with an innovative and interactive interface. This interface would empower them to navigate the intricacies of language education within a digital and multimodal context. This collaborative effort laid the foundation for 18 IO-3 description on the DIAL4U webpage.
28 developing a comprehensive and user-centric interface that would address the challenges of modern language instruction and resonate with the dynamic nature of digital education. 4.1. Resources Creation In the contemporary landscape, multimodal content has emerged to enhance the communication experience. This section provides a comprehensive overview of the strategies employed in developing a diverse set of multimodal content elements in digital pedagogy and language education. These elements include podcasts, a map of experts, publications set, and a comprehensive glossary, each strategically designed to engage users and foster a dynamic and inclusive educational environment. 4.1.1. Podcast As part of our collection of multimodal resources, a podcast was created. This podcast series features expert educators invited by our partners to record brief episodes, each limited to a concise 90-second duration. In these episodes, the experts succinctly elucidate their language teaching practices, providing users with insightful overviews. The podcasts are available on Spotify 19 , Google Podcasts 20 , and Amazon Music 21 to reach a wider audience by making the content available on these popular platforms. I directly linked to these experts' bios to enhance user engagement and foster connections with them. These links, personally selected by the experts themselves, serve as gateways for users to access the researchers' extensive work and immerse themselves in their ongoing research endeavors. 19 DIAL4U podcast on Spotify. 20 DIAL4U podcast on Google Podcasts. 21 DIAL4U podcast available on Amazon Music.
29 4.1.2. Glossary Glossary 22 was designed to be comprehensive, encompassing key concepts across various interface sections, making essential content-specific terms easily accessible. Users can access the glossary as a user-friendly list hosted on Notion, providing a tabular structure. The glossary terms were aggregated to the layout on the node “Glossary,” providing a more interactive experience; it is also available as an intuitive radial tree visualization on a webpage, offering a visual representation of the interconnected concepts. 4.1.3. Library Library 23 is a set of publications curated to provide users with educational materials that delve into the scientific literature related to their areas of interest. Within these publications, users will discover a collection of carefully selected articles about each topic covered in this interface. Notably, the publications in this set may be authored by our esteemed partners or feature contributions from other accomplished writers, ensuring a diverse and comprehensive range of perspectives. The curatorship of the publications was the responsibility of the experts involved in the project and the researchers who recorded the podcast. These researchers are specialists in language teaching. Along with much of the material in the DIAL4U project, the library is staffed by multilingual publications. 4.1.4. Map of Experts The interactive map 24 featured within the DIAL4U interface is a dynamic tool designed to provide users with insights into the diverse origins and work locations of the experts who have contributed to the project. These contributions can be through content development, podcast recording, or other forms of participation. 22 Notion DIAL4U Glossary. 23 Notion DIAL4U Library. 24 DIAL4U Map of Experts on Google Maps.
36 Figure 13. Second prototype present a more detailed version of the webpage. In this second prototype (Figure 13), the main objective was to obtain a deeper understanding of specific requirements. When a user selects or interacts with a node in the view, the name or label associated with that node is dynamically displayed in the central bar of the interface. This feature provides users immediate context and information about the selected node, contributing to a more intuitive and user-friendly experience. I relocated the multimodal content box from the left side to the right side of the interface, improving the overall layout and organization of content.
37 Figure 14. Final prototype in which all the content related to the node click. During the prototype evaluation with the team, we perceived that the webpage needed to be more uncluttered. This way, a third prototype 26 was developed, the main change of which resides in the translocation of the node title from the up central position to the right column. Besides that, the colors used on this prototype (Figure 14) are more neutral. To maintain the user focus on specific resources such as the radial tree and the node title on the right column. 4.4. Data Visualization The process of creating this visualization initially involved a careful library selection phase. Echarts.js 27 was the chosen library for its notable strengths, including high-quality image rendering in SVG format and seamless integration with HTML files. 26 Prototype available on Figma. 27 Available on Apache Echarts webpage.
38 The ECharts, a JavaScript library, was selected because it is a powerful open-source JavaScript visualization tool optimized for web and mobile devices. It offers a wide range of chart types, customizability, and support for interactive elements. ECharts simplifies dynamic data updates, supports geographic and 3D visualizations, and complies with accessibility standards, making it a versatile choice for data visualization. ECharts is a prominent project under the Apache Foundation that was implemented in JS. It boasts compatibility with major web browsers, cross-platform performance, and a wide range of data visualization options. It supports various graphic combinations and data formats, asynchronous rendering for data block loading, and interactive features like legends, prompts, and animations. This comprehensive toolkit effectively addresses the diverse needs of front-end data visualization. 4.4.1. Radial Tree Layout Employing the radial tree layout stems from its exceptional ability to organize hierarchical structures, a trait well-documented in prior research. Its visual prowess is particularly effective in delineating the hierarchy of subcategories within overarching classifications, providing clear insights into their relative proportions. Moreover, its integration of interactive elements facilitates an intuitive portrayal of expansion and contraction dynamics (node triggering) and content scalability (zoom in/zoom out). The radial tree layout can consolidate information about a specific topic within a dedicated node. This layout simplifies the process of identifying pertinent content, especially when exploring for nuanced terms or isolating content within a context. In essence, the radial tree layout provides an overview of a given topic by presenting its primary domains and the associated nodes within each field (Burch et al., 2022). This visual representation streamlines the identification of valuable and relevant information, offering users a quick and efficient means of accessing suitable content.
39 The DIAL4U project incorporates a dynamic and intuitive data visualization feature, the radial tree layout (Li et al., 2020). This visualization has been positioned on the left side of the webpage to enhance user interactions and facilitate a logical exploration of the data hierarchy. The radial tree layout within DIAL4U boasts several vital characteristics that drove this placement decision: • Expand and Collapsible Nature: DIAL4U's data is structured hierarchically, often with numerous nodes. To manage this complexity, the radial tree allows users to expand and collapse subtrees, revealing or concealing data layers. Placing this visualization on the left side of the webpage offers ample space for users to engage with this expand-and-collapse (Figure 15) interaction seamlessly. Figure 15. Node Collapsed and Node Expanded Representation Note. This radial tree compares the screen space usage between the collapsed and expanded tree views. • Zoom and Pan Capability: The radial tree visualization supports mouse zooming and panning, enabling users to explore intricate radial tree structures effectively (Figure 16). Situating the visualization on the left ensures users have a dedicated space for these interactions without conflicting with other webpage elements, providing a smooth and unobstructed exploration experience.
40 Figure 16. Zoom and Pan Capability Note. Comparison of the zoom and pan capability of the radial tree layout. • Initial Tree Depth: Radial trees typically feature multiple layers or levels, with the root node as the initial layer (depth 0), followed by successive layers. By positioning the visualization on the left, DIAL4U aligns with the user's expectation that data exploration starts from the left and extends to the right as they delve deeper into the tree, following a clockwise direction. This logical arrangement aids users in intuitively navigating through the data hierarchy. Figure 17. Initial Tree Depth Note. The initial radial tree configuration.
41 • Mitigating Label Overlaps: The visualization design interaction aimed to maintain the readability of labels associated with nodes. Labels are organized horizontally and sequentially to prevent overlaps (Figure 18). The visualization on the left guarantees that labels can be arranged without obstruction, allowing users to easily access and comprehend the information presented. However, overlaps are still observed, especially when zooming out (Figure 19). Figure 18. Radial Tree Labels Figure 19. Radial Tree Labels Overlap • Restore: a tooltip has been added to the top-right corner of the data visualization (Figure 20). This tooltip triggers the option to return to the initial tree, making it easier for users to navigate back to the starting point.
42 Figure 20. Restore the tooltip tree layout. • Path Tracking: When the mouse hovers over a node, its appearance changes (Figure 21), making highlighting or tracking the node's hierarchical path easier. This is particularly useful for monitoring specific nodes (Burch et al., 2022). Figure 21. Viewing the path of the selected node in the layout These are the most relevant interaction techniques used during the layout creation process. They cover different aspects of the layout. 4.4.2. Interactive Design The DIAL4U view strongly emphasizes the data structure within the radial tree format. However, it's important to note that as the radial tree expands, data visualization becomes
43 increasingly challenging once the expansion of the tree is associated with a higher probability of overlapping (De Luca et al., 2019). Two key interaction features, zoom functionality, and the radial tree function, were implemented to address this limitation inherent in radial tree layouts. On the homepage, users can initially view the root and two additional levels of the tree (Figure 22). Users can click on specific nodes for more detailed information to delve deeper into the content. Figure 22. Tree initial view on the home page Additionally, to enhance user experience and offer customization, an interactive option that allows users to toggle the display of labels on or off was integrated into the glossary visualization. This feature provides a more straightforward mode, enabling users to tailor their viewing preferences. 4.4.3. Color Design The color design for this visualization drew inspiration from the DIAL4U logo's color palette (Figure 23), predominantly featuring hex colors #1B459F and #F7CE46. Two primary considerations influenced the color selection: the lines and the nodes.
44 Figure 23. DIAL4U logo and hexadecimal color palette extracted from the logo. When addressing the lines, the paramount concern was navigation. The contrast between the thin lines and the white background initially posed a challenge in meeting contrast standards. To resolve this, we opted to introduce a darker shadow color to the lines to improve the overall contrast and enhance navigation. As for the node color, I chose a shade closely aligned with the logo color but with heightened vibrancy (HEX #006AF5). This color successfully passed contrast tests on the Adobe color tool, ensuring user comfort and readability within the visualization.
45 Figure 24. Radial tree prototype featured a radial tree layout with blue lines and yellow nodes. During the development process, a preliminary experiment was conducted using a radial tree layout with blue lines and yellow nodes (Figure 24). However, this initial color scheme proved unsatisfactory regarding visual appreciation and overall aesthetics. When I presented this prototype to the team members, some pointed out that visualizing the lines, as they were skinny, took a lot of work. So, one of the requirements was that the radial lines of the trees should be thicker. 4.5. Front-End Development 4.1.2. System Architecture Design The system’s architecture (Figure 25) is structured into three distinct layers: the application layer, the service layer, and the data layer.
52 whether related to language teaching methodologies, digital tools, or other pertinent topics covered in the resource. Figure 31. Vertical tree layout webpage After implementing the InfoVis (Figure 31) on the completed, the next phase is the workshop, which will serve as a data source for future improvements.
53 5. Workshop The workshop was part of the Learning Teaching Training Activity (LTTA), an event organized by the DIAL4U project. It took place at the Jaume I University in Spain from 12 to 14 December 2022. A key objective of the LTTA was to evaluate the products the project's partners developed. In this particular event, a specific focus was placed on language teachers; each participating university was tasked with bringing five language teachers to the event to ensure a diverse group of educators with varying backgrounds and experiences. The LTTA provided an ideal setting for the user's initial contact with the product, as the product presented here was designed with this target audience in mind. This event served as an opportunity to gather feedback from educators who could benefit from the project's resources. The following section will delve into the detailed process of creating and conducting the workshop during the LTTA event, outlining this phase's methodology, objectives, and outcomes in evaluating the product. 5.1. Materials The materials used in the workshop comprised three questionnaires. The first (Appendix A) was administered at two different times. Previously, the first questionnaire was applied to the workshop, aiming to provide information about the training and profile of the participating teachers. The second questionnaire was used after completing the tasks set out in the second questionnaire (Appendix B). These two forms were available online, and participants accessed them through the event's webpage using Google Forms. A third questionnaire (Appendix C) was delivered to the participants to provide suggestions and report errors and was distributed in printed format.
54 To participate in the workshop, participants must have their computers and headphones, as they are needed to listen to the podcasts and not disturb the others in the room. 5.2. Procedure During this workshop, our objectives were as follows: 1. To gather foreign language teachers to utilize the interface. 2. To identify points of friction that participants encountered concerning the content and/or the design of the visualization. 3. To foster discussions regarding content, the design, and potential problems. The workshop took place in a previously designated room at Universitat Jaume I on the second day of the LTTA event and lasted 90 minutes. The initial 15 minutes were dedicated to presenting the workshop's objectives and administering the first questionnaire. Subsequently, the following 60 minutes allowed participants to complete tasks, after which they filled out the final questionnaire. Once all attendees had completed their tasks and forms, the remaining 15 minutes were allocated for a discussion focused on participants' feedback and impressions regarding the interface. The first phase was conducted by the Uminho team, and the second phase of the workshop was led by the Universitat Jaume I team 29 . This timeframe allowed ample time for participants to explore the InfoVis, perform assigned tasks (Appendix B), and provide comprehensive feedback. Ensure that participants have sufficient time to engage with the visualization, allowing for a thorough understanding of its functionalities and features. The workshop proceeded as follows: 1. The Uminho team presented the manual and its application within the first 10 minutes. 2. Attendees were given a 5 to 10-minute window to investigate the interface independently. 29 Universitat Jaume I team.
55 3. The assignments (Appendix B) were distributed, with 60 minutes allocated for their fulfillment. 4. Fifteen minutes were designated for participants to complete a survey (Appendix A). If participants detect any errors, problems, or malfunctions, they must be noted in Appendix C. 5. The last 15 minutes were set aside for a conversation and feedback session led by the Jaume team to exchange viewpoints and gather insights from the audience. 5.3. Preparation Before the workshop commenced, participants were contacted via email and requested a computer and headphones. This preliminary communication was essential to ensure participants could interact individually with elements, such as podcasts and videos, during the workshop section. 5.4. Persona Creating a persona was a tool to approximate the project to the idealized final user. The creation of a persona can be approached through various methods based on the necessity of the research. A persona represents user types by creating a fictional person (Salimen et al., 2020). The creation process may draw from user studies, designer assumptions, experiences, and creative possibilities. Some researchers argue that a persona based on a single individual may not be essential. In contrast, others warn against combining characteristics from multiple individuals, which could create noise in the data (Bowen et al., 2020). Design processes don't strictly follow a linear path. The goal-directed design approach may involve conducting user research, creating personas, and using them to drive design scenarios (Salminen et al., 2020). However, according to the research design process, a persona doesn't necessarily have to be introduced during the first research phase. The persona can be introduced at various stages of the design process and may evolve throughout the investigative process.
56 In this project, a persona was developed incrementally, with a preliminary version created before the interface development. By the study's conclusion, the persona will be refined. The persona's characteristics and motivations will become evident as the research progresses. The initial persona for this project is an experienced language educator working in Europe who has traditionally operated in physical teaching environments. During the COVID-19 pandemic, this female-identifying educator seeks innovative tools and resources to navigate the evolving language teaching landscape. Although her technological skills may be B1, she can quickly adapt to different digital contexts. The pandemic was challenging; she had to look for online teaching methodologies, activities, and tools. Despite knowing the names of some tools, she never used them frequently. Therefore, she has searched online for resources to speed up her digital classes. Although she is aware of new technologies and tools and their potential, these tools must enrich her teaching methods and ensure effective student engagement. Her primary needs revolve around discovering effective solutions to optimize language teaching in digital environments. Because she is not used to teaching in a digital environment very often, she is a professional who actively seeks to follow advances in language teaching to remain current. 5.5. Task-based Activity The workshop encompassed two distinct phases: an initial phase of unrestricted exploration and a subsequent phase of task-based evaluation. This section presents these phases. In the first phase, participants were encouraged to explore the DIAL4U interface for five minutes freely. The primary aim of this phase was to familiarize users with the interface’s overall structure and content, including its vital component, the radial tree visualization. Participants were free to navigate through various sections and subsections at their own pace, enabling them to explore different aspects of the interface as they saw fit. The interface was named "guide" during the workshop to improve communication and avoid misunderstandings. Following this five-minute exploration, users were invited to respond to two specific questions on the questionnaire:
57 1. Regarding the first 5 minutes, when you have been surfing the guide freely, what is the first content that you have consulted? 2. What surfing criteria have you followed? (e.g., random, motivated by professional interest, terms that caught your attention, hierarchical order, etc.) These questions aim to understand users' initial interactions with the guide, uncover any challenges they encountered, and discover how they overcame these challenges. The second phase involved task-oriented exploration, with participants receiving specific assignments to complete within the interface. These tasks were designed to evaluate the participant's ability to gauge their ability to locate information efficiently. Participants were encouraged to complete as many tasks as possible within the 60-minute timeframe, and they were informed that if they faced difficulties or couldn't finish a task, they should provide feedback detailing the challenges they encountered. The list of tasks that participants were tasked with during the second phase of the workshop is presented below. The tasks included identifying a specific node on the tree and pinpointing a leaf within a node. Such activities explore the ability to click on a node and search for a piece of information at the end of this node. Additionally, participants had to find information relevant to their teaching practice or of interest to them, listen to an episode of the project's podcast on Spotify, and explore the glossary. 1. Identify in the guide the teaching modality that best applies to your professional context, or you are interested in. 2. Choose the teaching methodology that you would like to put into practice. 3. Choose the linguistic competences you would like to work on. 4. Choose a strategy that could adapt to / fit into the modality, methodology and competences you have chosen and a digital tool you could use. 5. Find in the guide a podcast related to flipped classrooms and collaborative tools. 6. Check the podcast list on Spotify and if you like the topics, follow us! 7. One of your students has problems following your online classes. Find useful information and resources in the guide that can help you solve the problem.
58 8. Find a training course that could be of your interest. 9. Surf the dynamic library and find a paper or article of any field of your interest. 10. Use the glossary and select a term you do not know. 11. Think about one of your courses and try to find material from the guide that would help your students to reinforce the content taught in class. After each task, participants were required to report whether they completed it (yes or no) and offer insights into the specific information they sought during the task. This feedback mechanism allowed us to comprehensively evaluate users' navigational efficiency within the guide and identify any challenges or issues they encountered during the process. Integrating unrestricted exploration with task-based activities to assess InfoVis thoroughly aids language teachers in accessing pertinent information and resources for their professional development. Upon concluding the workshop session, participants were encouraged to share their valuable feedback through a structured questionnaire. This questionnaire aimed to collect insights regarding their experiences while interacting with the DIAL4U interface and assess their overall satisfaction with the workshop. The questionnaire consisted of the following questions: 1. How many suggested tasks have you accomplished? 2. In general, have you found the information you were searching for easily? [Yes | No | Sometimes] 3. If your answer to the previous question was no or sometimes, can you specify the task or content you were searching for? 4. Do the names on the tags or labels clearly identify the content? [Yes | No | Sometimes] 5. If your answer to the previous question was no or sometimes, can you specify the tags? 6. How would you describe the content of the guide? (Please choose as many adjectives as you need) [relevant | useful | useless | too general | too specific | sufficient | insufficient] 7. Surfing the guide has been:
59 a. easy: very | moderately | slightly | not at all b. clear: very | moderately | slightly | not at all c. intuitive: very | moderately | slightly | not at all 8. In general, I found this guide: a. useful: very | moderately | slightly | not at all b. intuitive: very | moderately | slightly | not at all c. user friendly: very | moderately | slightly | not at all d. legible (word size): very | moderately | slightly | not at all e. interactive: very | moderately | slightly | not at all f. innovative: very | moderately | slightly | not at all 9. What did you like the most about the guide? 10. What would you improve in the guide? 11. What's your level of satisfaction with this workshop? a. Not satisfied at all 1 2 3 4 5 Very satisfied 12. What's your level of satisfaction regarding the material used at this workshop? a. Not satisfied at all 1 2 3 4 5 Very satisfied 13. Please provide any additional comments about the workshop, the guide, or any other information not included in the questionnaire that you would like to highlight. The post-task questionnaires were a crucial component of the evaluation process, enabling us to gain deeper insights into the user experience and gather valuable feedback for potential improvements. 5.6. Task Analysis During the initial phase of the workshop, participants were invited to explore the interface freely before embarking on specific tasks. The findings from this phase reveal the use behavior of a user who will discover the interface before no initial contact with it. The task evaluation process involves a comprehensive examination of data visualization analysis tasks, some pertinent to this workshop. The primary objective of these tasks is to
60 establish a shared vocabulary that fosters a more profound understanding of the analytical process (Zeng & Battle, 2023). While Amar et al. (2005) proposed ten tasks, it's worth noting that some do not directly apply to this specific context. Still, the relevant tasks are aligned with qualitative data related to the DIAL4U visualization. Table 3. Selection of Task Taxonomy related to the DIAL4U project. Task Description Pro Forma Abstract Retrieve Value Identify specific attributes associated with a given set of data case What are the values of attributes {X, Y, Z, ...} in the data cases {A, B, C, ...}? Filter Find data points satisfying the specified conditions Which data cases satisfy conditions {A, B, C...}? Cluster Detect clusters of similar attribute values Which data cases in a set S of data cases are similar in value for attributes {X, Y, Z, …}? Correlate Determine/estimate the correlation within the specified attributes What is the correlation between attributes X and Y over a given set S of data cases? Note. Zeng & Battle, 2023; Amar et al., 2005. These tasks collectively offer structured data, serving as a tool for data analysis within the workshop context. The task analysis related to which activity is available in Table 4. Table 4. Task Taxonomy Task Task Taxonomy 1. Identify in the guide the teaching modality that best applies to your professional context or you are interested in. Retrieve Value 2. Choose the teaching methodology that you would like to put into practice. Filter 3. Choose the linguistic competences you would like to work on. Correlate 4. Choose a strategy that could adapt to / fit into the modality, methodology and competences Correlate and Filter
61 you have chosen and a digital tool you could use 5. Find in the guide a podcast related to flipped classrooms and collaborative tools. Filter 6. Check the podcast list on Spotify and if you like the topics, follow us! Retrieve Value 7. One of your students has problems following your online classes. Find useful information and resources in the guide that can help you solve the problem. Filter and Retrieve value 8. Find a training course that could be of your interest. Filter and Retrieve Value 9. Surf the dynamic library and find a paper or article of any field of your interest. Retrieve Value 10. Use the glossary and select a term you do not know. Retrieve Value 11. Think about one of your courses and try to find material from the guide that would help your students to reinforce the content taught in class. Filter and Retrieve value Note. Created by the author based on Zeng &Battle, 2023 These elaborated tasks offer a structured approach to the analysis process, cultivating a deeper understanding of participants' responses and engagement with each task's objectives. Identifying these analysis tasks promotes an emphasis on analytical measures in information visualization systems as a common language for discussing system capabilities (Zeng & Battle, 2023). 5.6.1. Data Pre-processing Throughout the data pre-processing phase, a few measures were taken to maintain data consistency while addressing any inconsistencies introduced during data collection. The normalization process and the handling sections contributed to the uniformity and reliability of the dataset used for analysis. By ensuring data uniformity and consistency, we aimed to enhance the accuracy and reliability of our findings and insights.
68 Figure 39. Graphic How would you describe the content of the guide? Users expressed overall satisfaction with the multimodal content and the diverse resources available. They particularly appreciated the podcasts, highlighting their potential to support autonomous learning. Feedback on the layout and design was uniformly positive (Figure 40), with users finding it clear, intuitive, and efficient. Figure 40. Graph Surfing the guide experience classification. Users provided valuable insights into enhancing the interface. Their suggestions included more examples, additional content (particularly videos and more English-language resources), increased web page font size, addressing label overlapping issues, incorporating a search bar, and ensuring accessibility across various devices, including iPads.
69 5.6.4. Refined Persona The refined persona embodies an experienced language educator based in Europe with over 11 years of teaching experience. She has in-depth knowledge of language teaching, pedagogical techniques, and student engagement. Her teaching experience goes beyond traditional physical classroom environments. This educator identifies as a woman and defines her technological level as B2. Demonstrating high self-confidence, she is an expert in a wide range of digital technologies. Her technological proficiency has increased during the COVID-19 pandemic. Her professional interest fuels her primary motivation for consulting this interface. She seeks content that directly reinforces her language teaching methodologies and elevates her students' learning experiences.
70 6. Final Considerations The projects presented in the Related Work chapter played a fundamental role in defining the vision and design of the interface. Although there are some common points, DIAL4U differentiates itself by its approach to hierarchical structuring of information and by the proposal that invited the community to participate in the creation of resources—incorporating a radial tree layout aimed to enhance the discovery of knowledge by users, complemented by interactive elements strategically integrated into the interface, particularly in data visualization. These design choices were carefully implemented to facilitate access to knowledge for the target audience: foreign language educators. The workshop conducted as a part of this study has provided invaluable insights into the DIAL4U resource. The findings have shed light on critical aspects of the interface, leading to improvements that aim to enhance the overall user experience. One of the key takeaways was the recognition that the content needed further refinement. The involvement of the University Jaume I team played a pivotal role in this enhancement process. Reviewing and complementing the content ensures alignment with language teaching and learning objectives. The collaborative effort resulted in a more robust and pedagogical resource. User feedback highlighted specific interface-related issues, particularly concerning font size and label clarity. Responding to these concerns, the font size was increased, making it easier for users to read and navigate the content. Furthermore, label clarity within the radial tree layout received attention, offering users a more seamless and comprehensible experience. 6.1. Content Enhancement Based on the workshop feedback, a few areas needed content improvement. To address this, language teachers who are integral to the project revised and augmented the content within the interface. This revision process resulted in enriched and more informative content that aligns with users' needs and expectations.
71 The glossary was also enhanced with more terms. Recognizing users' diverse linguistic backgrounds, it expanded to include English, Portuguese, and French translations. This expansion not only broadens the resource's accessibility but also caters to a broader audience. The LTTA2 event at Universitatea Babeș-Bolyai introduced an opportunity to enhance the content. Students from the DIAL4U partner universities were invited to test the deliverables of the intellectual outputs. They had the chance to contribute to the project content from the students' perspective on foreign language learning. These students were invited to record podcasts sharing descriptions of foreign language learning activities or personal practices that significantly improved their language skills. Furthermore, they contributed to creating informative infographics related to the learning process. These contributions are now accessible in the radial tree under the "Student contribution" node. 6.2. Enhanced User Experience The layout underwent review based on user feedback. Notable changes include increasing font size to enhance readability, especially in the radial tree layout. The labels within the radial tree layout were also improved to provide greater clarity to users. To provide a more engaging and intuitive experience, as users hover over a node, the font size increases, the text becomes bold, and the color changes, drawing their attention to specific nodes. Additionally, the path to the root node is highlighted, creating a visual hierarchy that aids navigation and comprehension.
72 Figure 41. Glossary Visualization with the option Labels On and Labels Off Note. The glossary interface with the radial tree layout and the tooltips allows the users to see or not see the labels. In response to user preferences for different viewing options, the interface offers a more straightforward approach for the glossary radial tree visualization (Figure 41). Users can view only the leaves' labels, simplifying the visualization while maintaining its informative value. Additionally, the vertical visualization was enhanced with a larger font size to ensure an optimal user experience. 6.3. Impact The impact and reach of the DIAL4U project have been substantial, and it has been updated frequently. In October 2023, five more podcast episodes were released. The podcast series garnered an audience of 194 users from around the globe, including Portugal, Spain, Romania, France, the United States, Lebanon, Colombia, and Brazil. This diversity of countries and users from different linguistic and cultural backgrounds aligns seamlessly with the project's core objectives. It underscores the project's capacity to transcend geographical boundaries and cater to a global audience interested in foreign language education. The DIAL4U homepage was integrated with a visitor counter after the LTTA2. This resource allowed us to gauge the reach and engagement of our resources. Since its implementation, the page has recorded 828 visits. In addition, the glossary hosted on Notion has been accessed 110 times. The DIAL4U Library, a repository of academic publications, caught interest with 98
73 visits. These statistics underscore the project's impact and demonstrate its capacity to engage a diverse and geographically dispersed user base, although it is being born as a European project. The work developed at DIAL4U has resulted in two papers being published at the ArtsIT Interactivity & Game Creation conference in two different editions of the conference. The most recent article, "Enhancing Scientific Communication Through Information Visualisation: A Proposal for a Multimodal Platform" (in press), will be presented in November 2023 at the conference in Brazil 30 . At the Portuguese 31 event, the paper "Designing a Multilingual, Multimodal, and Collaborative Platform of Resources for Higher Education" (Azevedo et al., 2023) was presented. Both papers are dedicated to aspects related to the interface development discussed in this article. In addition, this research has contributed to the field of scientific communication (Araújo & Pereira, 2022), where data visualizations have been used in projects such as "Lidera" (Alves, 2023), which focuses on women in business and the "Nano Tool" prototype developed by the International Iberian Nanotechnology Laboratory (Silva, 2023). 6.4. Future Work The adjustments I made while working on the DIAL4U interface characterized significant progress, but more advanced user research techniques could yield more profound insights into user behaviors and interactions. User feedback could evaluate and improve the platform's usability, and this feedback could be used to add new features and functionality that could improve the overall performance of the platform. Also, in the future, data visualization can be explored using more advanced libraries and interactive visualizations to help users explore and analyze data in more detail. 30 EAI ArtsIT 2023 - 12th EAI International Conference: ArtsIT, Interactivity & Game Creation 31 EAI ArtsIT 2022 - 11th EAI International Conference: ArtsIT, Interactivity & Game Creation
74 It is essential to mention that the interface developed here became the webpage integration of all project resources into a single interface, making the interface the portal to all components done on the DIAL4U project due to the smooth characteristic. The DIAL4U done on this work has a high potential for replicability in different scientific fields. However, some challenges must be addressed to ensure it, as has been done in various aspects of NATO Knowledge Hub and Lang2science. For example, the JSON file should be replaced with an interface allowing users to add information easily. Regardless, inputting data into a JSON file can be an obstacle for some users. Therefore, creating an intuitive interface for data input associated with a database capable of effectively managing large amounts of data is paramount to future replicability projects that give the users autonomy to create their own data visualization and content, focusing on science communication. This work stood dedicated to building the DIAL4U interface; the platform still has room for improvement in usability, functionality, and data visualization capabilities. However, it has already shown great potential to become a tool for language educators and, in the future, for other academic areas.
75 References About. (n.d.) Palladio. Visualize complex historical data with ease. http://hdlab.stanford.edu/palladio/about/ Adam, M. T., Gregor, S., Hevner, A., & Morana, S. (2021). Design science research modes in human-computer interaction projects. AIS Transactions on Human-Computer Interaction, 13(1), 1-11. https://doi.org/10.17705/1thci.00139 Alves, S. S. M. (2023). Projeto Lidera: plataforma de liderança feminina em tecnologia (Master dissertation). https://hdl.handle.net/1822/82745 Amar, R., Eagan, J., & Stasko, J. (2005). Low-level components of analytic activity in information visualization. In IEEE Symposium on Information Visualization, 2005. INFOVIS 2005. (pp. 111-117). IEEE. https://doi.org/10.1109/INFVIS.2005.1532136 Araújo, S., & Pereira, M. (2022). Para um mapeamento multimodal do conceito de translanguaging com base em dados abertos. Diacrítica, 36(2), 188–208. https://doi.org/10.21814/diacritica.4814 Azevedo, B., Branco, P., & Cunha, F. (2023). Design for Science: Proposing an Interactive Circular 2-Level Algorithm. In A. L. Brooks (Ed.), In Creating Digitally: Shifting Boundaries: Arts and Technologies - Contemporary Applications and Concepts. (pp. 445– 472). https://doi.org/10.1007/978-3-031-31360-8_16 Azevedo, B., Pereira, M., & Araújo, S. (2023). Designing a Multilingual, Multimodal and Collaborative Platform of Resources for Higher Education. In: Brooks, A.L. (eds) ArtsIT, Interactivity and Game Creation. ArtsIT 2022. Lecture Notes of the Institute for Computer Sciences, Social Informatics and Telecommunications Engineering, vol 479. Springer, Cham. https://doi.org/10.1007/978-3-031-28993-4_27 Berry, D.M. (2022). Critical digital humanities. In J. O’Sullivan (Eds.). The Bloomsbury Handbook to the Digital Humanities (Bloomsbury Handbooks). London: Bloomsbury Academic. http://dx.doi.org/10.5040/9781350232143.ch-42 Bowen, J., Petrie, H., Hinze, A., & Samaddar, S. (2020). Personas revisited: Extending the use of personas to enhance participatory design. In Proceedings of the 11th Nordic Conference on Human-Computer Interaction: Shaping Experiences, Shaping Society (pp. 1-12). https://doi.org/10.1145/3419249.3420135 Bromham, L. (2022). Meaning and Purpose: Using Phylogenies to Investigate Human History and Cultural Evolution. Biol Theory. https://doi.org/10.1007/s13752-022-00401-5 Bucchi, M., & Trench, B. (2014). Science communication research. Routledge handbook of public communication of science and technology, 1-14. https://doi.org/10.4324/9781003039242 Bucchi, M., & Trench, B. (2021). Rethinking science communication as the social conversation around science. Journal of Science Communication, 20(3), Y01. https://doi.org/10.22323/2.20030401 Burch, M., van de Wetering, H. & Klaassen, N. (2022). The power of interactively linked hierarchy visualizations. J Vis 25, 857–873. https://doi.org/10.1007/s12650-021-00818-3 Burch, M., ten Brinke, K.B., Castella, A. (2021). Dynamic graph exploration by interactively linked node-link diagrams and matrix visualizations. Vis. Comput. Ind. Biomed. Art 4, 23 https://doi.org/10.1186/s42492-021-00088-8
76 Chang, Y., Lim, Y. & Stolterman, E. (2008). Personas: From theory to practices. In Proceedings of the 5th Nordic Conference on Human Computer Interaction: Building Bridges, NordiCHI ’08, pp. 439–442. Association for Computing Machinery. https://doi.org/10.1145/1463160. 1463214 Criscuolo, N., Pires, J., Zhao, C. & Boeckel, T. (2021). resistancebank.org, an open-access repository for surveys of antimicrobial resistance in animals. Sci Data 8, 189. https://doi.org/10.1038/s41597-021-00978-9 Da Vinci, L. (1480). Atlantic Codex [Photograph]. https://artsandculture.google.com/asset/codice-atlantico-codex-atlanticus-f-26verso/OQE4GU_G0Od95w De Luca, F., Hossain, I., Gray, K., Kobourov, S., & Börner, K. (2019). Multi-level tree based approach for interactive graph visualization with semantic zoom. ArXiv.org. https://doi.org/10.48550/arXiv.1906.05996 Drechsler, A., & Hevner, A. (2022). Knowledge Paths in Design Science Research. Foundations and Trends® in Information Systems, 6(3), 171-243. http://dx.doi.org/10.1561/2900000028 Edelstein, D., Findlen, P., Ceserani, G., Winterer, C., & Coleman, N. (2017). Historical research in a digital age: reflections from the mapping the republic of letters project. The American Historical Review, 122(2), 400-424. https://doi.org/10.1093/ahr/122.2.400 Eker, C. (2020). A New Taxonomy in Foreign Language Teaching: ECRIF. International Online Journal of Educational Sciences, 12(5). https://doi.org/10.15345/iojes.2020.05.001 Entradas, M. (2022). Public communication at research universities: Moving towards (de) centralised communication of science?. Public Understanding of Science, 31(5), 634-647. https://doi.org/10.1177/09636625211058309 Envisioning (2023). TechDetector [Image]. https://techdetector.de/ Envisioning (n.d.). TechDetector. TechDetector. Retrieved October 3, 2023, from https://techdetector.de/ Franconeri, S. L., Padilla, L. M., Shah, P., Zacks, J. M., & Hullman, J. (2021). The Science of Visual Data Communication: What Works. Psychological Science in the Public Interest, 22(3), 110161. https://doi.org/10.1177/15291006211051956 Fullan, M., Quinn, J., Drummy, M., & Gardner, M. (2020). Education Reimagined: The Future of Learning. Remote to Hybrid Learning. A position paper on a paradigm shift for education. https://edudownloads.azureedge.net/msdownloads/Microsoft-EducationReimaginedPaper.pdf Geenen, D. & Wieringa, M. (2020). Approaching data visualizations as interfaces: An empirical demonstration of how data are imag(in)ed. In M. Engebretsen & H. Kennedy (Ed.), Data Visualization in Society (pp. 141-156). Amsterdam: Amsterdam University Press. https://doi.org/10.1515/9789048543137-013 Gontier, N. (2011). Depicting the Tree of Life: the Philosophical and Historical Roots of Evolutionary Tree Diagrams. Evo Edu Outreach 4, 515–538. https://doi.org/10.1007/s12052-011-0355-0 Guenther, L., Wilhelm, C., Oschatz, C., & Brück, J. (2023). Science communication on Twitter: Measuring indicators of engagement and their links to user interaction in communication scholars’ Tweet content. Public Understanding of Science, 0(0). https://doi.org/10.1177/09636625231166552
77 Haeckel, E. (1866). Generelle Morphologie der Organismen: Allgemeine Grundzüge der organischen Formen-Wissenschaft, mechanisch begründet durch die von Charles Darwin reformierte Descendenz-Theorie. Band 1: Allgemeine Anatomie. Band 2: Allgemeine Entwicklungsgeschichte. de Gruyter. https://www.biodiversitylibrary.org/item/22319#page/11/mode/1up Haklay, M. M., Dörler, D., Heigl, F., Manzoni, M., Hecker, S., & Vohland, K. (2021). What is citizen science? The challenges of definition. The science of citizen science, 13. https://doi.org/10.1007/978-3-030-58278-4_2 Junning L., Xinjian L., Bo A., Zijie X., and Xu W. (2022). Multi-Faceted Hierarchical Multi-Task Learning for Recommender Systems. In Proceedings of the 31st ACM International Conference on Information & Knowledge Management (CIKM '22). Association for Computing Machinery, New York, NY, USA, 3332–3341. https://doi.org/10.1145/3511808.3557140 Kappel, K., & Holmen, S. J. (2019). Why science communication, and does it work? A taxonomy of science communication aims and a survey of the empirical evidence. Frontiers in Communication, 4, 55. https://doi.org/10.3389/fcomm.2019.00055 Kavaz, E., Puig, A., Rodríguez, I., Chacón, R., De-La-Paz, D., Torralba, A., Nofre, M., & Taule, M. (2023). Visualisation of hierarchical multivariate data: Categorisation and case study on hate speech. Information Visualization, 22(1), 3151. https://doi.org/10.1177/14738716221120509 Kessler, S. H., Schäfer, M. S., Johann, D., & Rauhut, H. (2022). Mapping mental models of science communication: How academics in Germany, Austria and Switzerland understand and practice science communication. Public Understanding of Science, 31(6), 711–731. https://doi.org/10.1177/09636625211065743 Li, G., Tian, M., Xu, Q., McGuffin, M. J., & Yuan, X. (2020). Gotree: A grammar of tree visualizations. In Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems (pp. 1-13). https://doi.org/10.1145/3313831.3376297 London School of Economics and Political Science. (n.d.). First edition of the World Economic Forum Transformation Map released. https://www.lse.ac.uk/ideas/media/news/Transformation-Map-First-Release Luhmann, J., & Burghardt, M. (2022). Digital humanities — A discipline in its own right? An analysis of the role and position of digital humanities in the academic landscape. Journal of the Association for Information Science and Technology, 73(2), 148-171. https://doi.org/10.1002/asi.24533 Mathieu, E., Ritchie, H., Rodés-Guirao, L., Appel, C., Giattino, C., Hasell, J., Macdonald, B. Dattani, S., Beltekian, D., Ortiz-Ospina, E. & Roser, M. (2020). Coronavirus Pandemic (COVID-19). Published online at OurWorldInData.org. https://ourworldindata.org/coronavirus. Münster, S., & Terras, M. (2020a). The Visual Digital Humanities–Topics, Researchers and Cultures. https://doi.org/10.1093/llc/fqz022 Münster, S., & Terras, M. (2020b). The visual side of digital humanities: a survey on topics, researchers, and epistemic cultures. Digital Scholarship in the Humanities, 35(2), 366389. https://doi.org/10.1093/llc/fqz022 Münster, S., Apollonio, F. I., Bell, P., Kuroczynski, P., Di Lenardo, I., Rinaudo, F., & Tamborrino, R. (2019). Digital cultural heritage meets digital humanities. International Archives of the
84 Appendix B – Workshop Tasks
85
86 Appendix C – Errors LTTA1 - 12TH to 14TH December 2022 - UJI (Spain) IO3 - Guide’s improvement Please, help us fix the errors in the guide. We would appreciate it if you could note down in a few words any errors, glitches or problems you come across while surfing it. Thank you! Where is the problem? (Route) What is the problem? E.g. Methodologies / Collaborative Learning E.g. The link to the first paper is broken