Skip to main content

Definition of a Digital Tool to Create Physical Artifacts: The Case of the Gamers4Nature Project

  • 402 Accesses

Part of the Springer Series in Design and Innovation book series (SSDI,volume 14)

Abstract

In a context where the urgency to act towards the promotion of environmental awareness is imperative, the Gamers4Nature (G4N) project aims to encourage the active participation of students in the creation of mobile games addressing environmental-related themes. This chapter introduces the G4N Cards Set Canvas, a tool integrated into the G4N portal-repository. The G4N Cards Set Canvas is a digital tool that allows the design of environmental-related thematic cards and has two main goals: (i) to provide the G4N project with a tool to ease the creation of the thematic cards for the Toolkit to Game Design by environmental organizations and/or teachers; (ii) to be used by users with no experience in the design field. This tool will be developed following a User-Centered Design approach, with iterative and systematic reviews of the tool, and it will emphasize the connection between the physical (i.e. Toolkit) and digital (i.e. portal-repository) artifacts. A snowball literature review and an overview of design and presentation tools and platforms currently available did not reveal the existence of suitable platforms to create graphical design contents while complying with a brand’s standard’s manual for non-experienced users in the design field. Thus, an opportunity for novelty arises from this gap, adding a layer of concern with designing a usable and accessible tool for the end-users.

Keywords

  • Digital tool
  • Layout design
  • Suggestive interfaces
  • Canvas
  • User-Centered Design
  • Environmental preservation
  • Games

1 Introduction

The undeniable progression of global warming, the rise of pollution levels [1] and the widespread of microplastics in “every crevice on Earth” [2], stresses the urgency to act towards the promotion of environmental awareness and behavior change in all age-groups.

Starting from this premise, the Gamers4Nature (G4N) projectFootnote 1—prompted by the interest of younger audiences in game creation and development activities [3,4,5]—aims to implement a set of strategies able to promote behavior change and environmental awareness. The research team expects to achieve this purpose by involving upper-secondary and undergraduate students in the creation of their own mobile games.

As one of those strategies, the G4N project’s research team designed and developed a Toolkit to Game Design—a physical artifact—that includes a set of resources (i.e. cards and game design documentation) able to support the game creation process, namely the narrative development and the definition of a game thematic [6]. In addition to the creation of this Toolkit, the research team developed a web-based portal-repository (See footnote 1) to host the project’s outputs and resources, as well as the games developed under the scope of the project [7]. The contents are available as open-access resources, thus allowing the creation of new contents deriving from the G4N project’s outputs.

Whilst promoting the use of the Toolkit, either in educational or non-educational contexts, the G4N project promoted the organization of Game Jams sessions addressing environmental themes. In some of these sessions, the G4N research team was responsible for exploring, writing, designing, evaluating and, finally, printing the materials. Other entities (e.g. institutions of social solidarity or environmental organizations) defined the content to be included in the Toolkit’s cards, as there was the need to create thematic resources (G4N thematic cards) related to the environmental contexts of the places where the game creation sessions were going to take place (e.g. Gouveia, a Portuguese city—the thematic cards set included the local biodiversity).

The process of preparing the thematic cards for other entities to fill with their own contents required the research team to prepare templates based on the project’s layout design, to ease the insertion of other entities’ contents.

Notwithstanding, some issues emerged from this card set creation process: (i) the research team had to correct design mistakes (e.g. text overlaps); (ii) originally, the cards contained iconographic compositions according to the cards’ theme, withal, in these contexts, these compositions cease to exist because, for the most part, there are no designers or illustrators in these entities teams; (iii) brand and project’s identity standards were not met, mainly due to the user’s lack of design and technical skills. In short, and since most entities did not have the necessary skills to do it, these entities could not complete the whole card set creation process.

It is the project’s intention that any entity, user or organization should be able to use the Toolkit autonomously and to produce their own thematic cards sets. Considering all the aforementioned limitations deriving from the use of the digital templates adopted, the project team decided to define and produce an authoring tool to create physical artifacts (i.e. G4N thematic cards) to be integrated into the G4N portal-repository: the G4N Cards Set Canvas.

Therefore, the production of the G4N Cards Set Canvas seeks to achieve two main goals: (i) provide the G4N project with a tool to ease the creation of the G4N thematic cards by other entities (e.g. environmental organizations and/or teachers); (ii) produce a tool for non-experienced users in the design field.

It is expected that this digital tool to create the G4N thematic resources (Fig. 1) will be a resource able to be used by teachers and environmental organizations staff, aiming to spread environmental awareness through the creation of digital games in several contexts, whether in classrooms or environment preservation events. In this process, it is crucial to design an intuitive tool, suitable for audiences (e.g. teachers and environmental organizations staff) without design or digital skills who wish to design their own thematic cards.

Fig. 1
figure 1

G4N Microplastics Thematic Cards (Physical artifacts from the Toolkit)

This chapter presents the groundwork that set the basis for the G4N Cards Set Canvas development. Following this introduction, Sect. 2 provides a snowball literature review of tools and platforms that allow the production of graphical contents by either experienced or non-experienced users, called Layout Design Tools, as well as discusses two of the main components of these tools—Suggestive Interfaces and Canvas. Moreover, Sect. 2 also presents a summary of the performed UX benchmarking. Section 3 depicts the development methodology, prefaces the functional and non-functional requirements, and introduces the G4N Cards Set Canvas’ User Interface (UI) first prototypes. The chapter finishes with the presentation of conclusions and potential directions for future work.

2 Layout-Design, Design, and Presentation Tools

Presentation Tools (e.g. Microsoft PowerPoint, Apache OpenOffice Impress, Prezi, Google Slides, and Keynote) are well-known and commonly used in personal and professional contexts [8,9,10]. In fact, in the Education field, nearly all teachers in Europe use “Information and Communications Technology” (ICT) to prepare lessons and in schools, while teaching those lessons [11]. In fact, from the research team's empirical experience, in the context of the University of Aveiro, most teachers and researchers use Microsoft PowerPoint or Keynote to produce their multimedia presentations.

The recognition of these tools’ usefulness, the evidence of higher levels of student’s engagement [12] and the tools’ good usability justify its use as the first option when the goal is to produce a presentation—with or without multimedia content—or even to design. Furthermore, the availability of design templates conquers lots of users as they do not need to start designing from a blank canvas—a situation that, as mentioned above, is often seen as a discouraging difficulty. Moreover, these tools also allow users to customize their contents, therefore provide a sense of control over what they produce [13]. However, even though these tools are adequate for their main purposes—to produce customizable multimedia presentations and designs—they do not hold the required specifications to be adopted as a tool to design resources that need to comply with specific brand standards (e.g. G4N project’s layouts, font types and sizes) and design principles (e.g. alignment, visual hierarchy), which could lead to legibility and graphic balance errors.

Beginning to design a UI or any graphical content from a blank canvas can be a challenging task, especially for non-experienced users, as there is no support in understanding where or even how to start. Most of the existing and renowned tools, from intuitive and simple (e.g. Inkscape) to more professional and elaborated (e.g. Adobe Illustrator, Affinity Designer) systems, do not provide suggestions or models to follow while designing [14]. By contrast, multimedia presentation tools (e.g. Microsoft PowerPoint, Keynote) provide these suggestions but do not fulfil the need for compliance with brand standards. Notwithstanding, Microsoft PowerPoint contains a feature, called Design Ideas, which suggests design ideas based on users’ content.

2.1 Snowball Literature Review and UX Benchmarking

Nowadays, in the HCI research field, there is an interest in the identification and use of systems that aim to fill these gaps (i.e. lack of tools that allow the compliance of brand standards and design principles), such as DesignScape [14], Sketchplore [15] and others [16, 17]. In these tools, known as Layout Design Tools, a balance must be established, not only in terms of users’ freedom and constraints—to respect design principles—but also on how to design these systems by levelling the incorporation of professional software features more intuitively, therefore supporting its use by novice users.

Regarding the balance between freedom and limitations, some tools, such as DesignSpace [14], provide smart guides that snap objects to specific locations and assist in the alignment of objects in the canvas. Rather than completely constrain the user, these details promote the adequate placement of objects in the canvas according to some design principles (e.g. alignment). DesignScape also allows the user to lock objects (i.e. preventing them from moving), and displays layout suggestions—based on the user’s current layout—and brainstorming suggestions—completely independent of the user’s layout.

The tool incorporates two modes: (1) Suggestive interface (presented with more detail in the following section) —there are three different suggestions available based on the elements’ current position, ordered by the level of modifications, being the first with small suggestions and the last with more severe modifications; and (2) Adaptive interface—the adjustments occur automatically, allowing for more fluid interaction. Overall, the users preferred the Suggestive interface mode since it is less limited than the Adaptive interface mode [14]. From this experience [14], researchers understood that the Adaptive interface mode became frustrating for users, as they had less control over the final result. In both modes, on mouse over event users can observe the suggestions, and by clicking they can accept them.

Other tools, such as automatic magazine layout covers [16, 17], DesignScape [14] and Sketchplore [15] incorporate features from professional software, such as: moving, resizing, adding or removing, font styling, alignment and smart guides. These aspects must be taken into consideration because of their recognition and universalization as basic features in similar tools.

Layout Design Tools with template-based structures offer advantages for users with or without design experience and produce better results [18]. In fact, the way users interact with these tools becomes more agile and concrete when templates similar to the user’s choices are suggested. Additionally, according to Lee et al. [18], the concern to integrate design principles and users’ choices produces intuitive tools, suitable for both experts and novices.

On the whole, presenting suggestions according to the users’ design is understood as a helpful method of interaction, as it allows for the compliance of design principles without excessively constraining the users’ experience [14,15,16,17,18].

Suggestive Interfaces.

Suggestive Interfaces (SI) provide the user with some control over its work or design. Most research on SI are focused on 3D sketching and drawing [19,20,21,22], modelling tools [23, 24], gesture-driven interfaces [25, 26] and Layout Design Tools [14,15,16,17,18].

SI are often applied in contexts where ambiguity is placed in question, and the decision-making process is assigned to the users, allowing them to choose the result they aim to achieve. These interfaces are integrated into any UI—either mobile or desktop—are generally displayed on an interface section and depend on the users’ current design layout or model.

Concerning the DesignScape tool’s study [14], the SI is one of the modes made available to the user (Fig. 2). On the left side of the screen, the tool allows the user to hover the suggestion to see a preview and, by clicking, to execute the change. DesignScape also allows users to lock design elements, fixing their position and scale, both in the suggestions provided and the design itself.

Fig. 2
figure 2

Suggestive Interface in DesignScape [14]: Left shows the current layout, and right shows the suggested refinements—aligning the three elements on the left and changing the size of the image

In sum, suggestions, if not invasive, can represent good support for novice users. Even though these systems are mainly designed for users with no experience, they can also be used by experts. However, the suggestions must only represent a section of the UI, avoiding to overload users with unnecessary suggestions. SI may be adopted when users are first entering the tool and later be disabled when they are no longer needed.

Canvas.

Some interaction models, such as dragging, zooming, scaling, rotating, and moving, are integrated into both professional design tools (e.g. Adobe Illustrator) and Canvases or Layout Design Tools.

Canvases derive from the physical world, meant for artists to paint their art pieces, and are now, for many years, into the technological world through its digitalization [27]. A canvas is a type of Graphical User Interface (GUI) that contains graphic elements.

Some canvases are divided into workspaces dedicated to each design element, while others contain individual canvases, typically with smaller workspaces, dedicated to the production of single artifacts [28, 29]. An overview of available online canvases and research of its use allowed for the identification of a set of features able to characterize a canvas, such as: (i) dedicated workspace with a single or several windows [29]; (ii) use of icons to describe the functions available in the workspace [29, 30]; (iii) use of drag and drop graphic elements to build the design [29,30,31]; (iv) availability of multiple models of interaction, such as scrolling, zooming, scaling [32]; (v) the ability to save the design automatically and to recover previous versions [30].

UX Benchmarking.

Alongside the snowball literature review of tools and platforms’, a UX benchmarkingFootnote 2 comparing the features of a set of Presentation and Design platforms/tools currently available on the market was conducted. The goal of the UX benchmarking was to identify the structure and main characteristics of these systems in order to have an overall perception of the systems currently available. It was intended that these perceptions, combined with the empirical knowledge of the experts from the G4N project's research team, would contribute to the creation of a usable tool accessible for potential users.

The exploratory analysis focuses on comparing the most common platforms [8,9,10] for the general public (i.e. non-experienced users) but also the most used platforms in educational contexts, regardless of whether the goal is to design (e.g. Canva,Footnote 3 PiktochartFootnote 4) or to create multimedia presentations (e.g. Microsoft PowerPoint, Keynote).

In this analysis, structural similarities and characteristics were identified: the left side was mainly allocated to libraries of images, illustrations, shapes and templates, while the right side, predominantly, was reserved for artwork settings (e.g. font size and type, opacity manipulations and color).

Both the exploratory benchmarking and the Layout Design Tools analysis supported the design of the developmental research methodology stages and the requirements definition, as well as the process of designing the first prototypes of the UI.

Table 1 summarizes the main characteristics and features identified in the correspondent tools:

Table 1 UX Benchmarking summary

The analyzed platforms/tools were found through a snowball literature review and a web search, using the keywords “tools or/and platforms”, “online”, “graphic” and “design”, and was performed between December 2020 and January 2021.

3 Defining a Digital Tool to Create Physical Artifacts

As mentioned in Sect. 1, in order to support the game creation process, two main strategies were adopted: (1) the development of a Toolkit to Game Design (Fig. 3) comprising a set of physical resources to support the game creation process [6]; and (2) the design of a Portal-repository (See footnote 1) (Fig. 4). The portal would act as an extension of the Toolkit, and work as the G4N project’s online presence, hosting its main outputs, publications and resources, and acting as a repository for the games developed under the project’s scope [7].

Fig. 3
figure 3

The Portuguese version of the G4N Toolkit to Game Design (physical artefact) with the Game Construction Cards Set (in the model's hand), Environmental-themed Cards (with watercolor marks) and the Rapid Game Design Document (in the left side pocket)

Fig. 4
figure 4

In the background, the G4N Portal-repository (digital artefact), and in the foreground, the G4N Toolkit to Game Design (physical artifact)

The design of this portal-repository aimed to address two concerns: (1) create a connection that visually related the two artifacts—the physical (the Toolkit) and the digital (the portal-repository); and (2) to reflect the feeling of gaming and non-linearity present in gaming activities.

Following the same approach taken during the portal-repository’s design and implementation process [7], the G4N Cards Set Canvas will be designed in compliance with the projects’ brand and identity and following the same design approach: involving users, intending to fulfil their needs and expectations and creating an accessible product that meets their technical and design skills. Hence, the development of this tool will apply a User-Centered Design (UCD) approach comprised of several evaluation stages and iterative improvements of the final product (detailed in Sect. 3.1). The G4N Cards Set Canvas will provide the necessary instruments for users (e.g. teachers and environmental organizations staff) to produce G4N thematic cards addressing their location’s environmental issues without the need for any previous design or technical knowledge or experience.

The development of this Canvas and its use will also ensure the compliance with the G4N project’s Brand Standards Manual. Furthermore, it will withdraw more complex tasks from the users’ role—therefore minimizing their cognitive load—by providing not only design specifications but also the necessary information regarding the layout, the export formats, the printing materials and the adequate sizes for all design elements (e.g. icons, colors, typography).

3.1 Development Research Methodology

Higher levels of usability are more likely to be achieved through users’ involvement by assuring that the final product meets their needs and considers their limitations. There are different methods to involve users, either from the beginning of the process or only in specific situations (e.g. exploratory interviews, redesign stages). On the one hand, some research only allows users’ direct input in redesign stages, whenever the majority of the design derives from the empirical analysis [33]. On the other hand, in some cases, their involvement starts at the very beginning of the process, and they participate throughout all stages [34]. Some research fields, such as Health, Autonomous Cars, Machine Learning and Artificial Intelligence, involve users in their research process since the beginning [34, 35] or assign users to specific tasks or moments [33].

Indeed, users’ involvement substantially reduces Usability errors and is proved to be effective in iterative design processes. In every design iteration, fewer errors tend to emerge [33]. Moreover, instead of forcing users to change their behavior due to the design of the interface, the interface is designed to increase its efficiency. Indeed, according to Shneiderman et al. [36, p. 75], “A frequent path to success is through participatory methods that bring designers in close and continuing contact with their intended users”.

Taking this into consideration, the Development Research Method is the approached methodology for the development of the G4N Cards Set Canvas. This method is a systematic and iterative process of design, development and evaluation, most commonly related to the development process of a product, to its analysis, description and evaluation [37, 38].

Therefore, this research will be divided in five stages, as it can be seen in Fig. 5:

Fig. 5
figure 5

The Development Research of the G4N Cards Set Canvas’ methodology stages

As shown in Fig. 5, after an evaluation, whenever adjustments are necessary, the iterative process anticipates the need to return to previous stages in order to redesign the prototype or to fix any feature of the tool. This iterative process ensures that the final product suits the users’ needs and expectations, resulting in a usable and pleasurable experience for the user.

Following a Development Research Method, the G4N Cards Set Canvas development process will be organized in five stages:

First Stage.

In the first stage, exploratory interviews will be carried out. The goals of this stage of evaluation are: (i) to validate this tool’s concept from the users’ perspective; (ii) to understand the expectations for a tool with presented objectives; and (iii) to grasp users’ needs and limitations when interacting with similar technologies.

Second Stage.

The second stage consists of prototyping the UI based on the exploratory interviews and literature review results. Low and high prototypes of the G4N Cards Set Canvas will be developed.

Third Stage.

The goals of the third stage are: (i) to identify improvements to be made; (ii) to identify interaction difficulties that could harm the users’ experience; and lastly, (iii) to gather concrete information derived from the experts’ expertise and knowledge of Usability Heuristics and design guidelines. In this stage, it is foreseen the need to return to the previous stage to correct the high-fidelity prototype, depending on the feedback received from the users’ evaluation.

Fourth Stage.

The fourth stage comprises the first stage of development of the digital tool.

Fifth Stage.

Finally, in the fifth and last stage, an online User eXperience questionnaire will be delivered to the participants. The main goal of this questionnaire is to perform a direct measurement of the tool’s UX. In this stage, the first version of the final product will be assessed. Participants will be asked to report their experience after they interact with the digital tool. This stage will take place around April 2021, when teachers from multiple schools around Europe will use this application in real-life contexts (i.e. classrooms). Since the researchers will not be physically attending the classes, the goal is to assess the experience, as soon as possible after it happened, with the maximum accuracy. Similarly to stage 3, it is planned the need to return to the previous stage to perform potential adjustments that may be required from the sessions with users.

3.2 Requirements

The snowball literature review and the UX benchmarking of presentation and design tools enabled the identification of potential approaches and characteristics for the G4N Cards Set Canvas, namely a suggestion-based tool, such as Microsoft PowerPoint Design Ideas feature that suggests design ideas based on users’ content, and the Canvas, as a component of the Layout Design Tools.

The G4N Cards Set Canvas will be designed responsively for devices with over 1024 pixels, which is a standard viewport size that encompasses horizontal tablet screens and the majority of desktops and will only be available for this screen format. This way, the eventual frustration and lack of control arising from the interaction with the tool on smaller screens are minimized [39].

In order to avoid the need to create user assistants, such as Clippit from Microsoft Word—colloquially known as Clippy—that sometimes fail at their functionality, design and humanization [40], it is imperative to use suggestions carefully and with moderation. Defining the system's requirements, as well as their further validation with potential users, aids to avoid creating systems with such issues.

The research team defined a set of Functional Requirements (FR) for the tool. Non-Function Requirements (Non-FR) (e.g. data privacy and security that must be assured to convey the system’s reliability; device’s requirements to run the tool smoothly and, therefore, upholding a better performance, among others) are also being defined in future work.

The FR depict the tool’s functionalities and features, the expected behavior and interaction, and what the tool offers to the users. The FR are listed in Table 2.

Table 2 Functional requirements

The FR listed in Table 2 emerged from the overview of Layout Design Tools and the UX benchmarking of Design and Presentation Tools, as well as from the empirical knowledge of the G4N project’s research team regarding the use of similar platforms.

Some FR are correlated: to allow the storage of the user’s design cards (FR 11), it is required the user’s register and login (FR 1) in the G4N portal-repository to link the produced contents to its creator (i.e. the user with logged session). Moreover, moving object in FR 6 unfolds in drag-and-drop items (FR 6.1), which is how the objects will be moved across the canvas.

Snap objects and smart guides are present not only in some professional design tools (i.e. Adobe Illustrator) but also in some Layout Design Tools. To ease the workflow, the design will be saved automatically, and the objects will be organized in layers.

Lastly, to prepare the cards to be used either in its physical format (e.g. in classrooms or environmental initiatives) or in digital format (e.g. online classrooms), there must be an option to export the artwork to both digital (i.e. digital PDF or image) and printable format (printable PDF with marks, bleeds, and suggested paper size). This feature is also presented in the Tools FR.

3.3 First Sketch and Digital Prototype

The Design Tools addressed in the exploratory overview, in general, have onboardings, tutorials or help menus (e.g. Canva, Gravit Designer); provide a range of templates for the user to choose from (i.e. all of the tools addressed in the benchmarking); include libraries of icons, images and shapes (e.g. Crello, Stencil); allow exportation to multiple formats with print settings embedded (e.g. Picktochart, Visme); have smart guides (e.g. DesignBold, Prezi Design); and have zoomable canvases (i.e. all of the tools addressed in the benchmarking, except LucidPress). The Presentation Tools (e.g. Microsoft PowerPoint, Prezi Present), besides providing templates, also have smart guides and canvases, suggest brainstorming ideas, allow team collaboration, font adjustments and basic image edition. Notwithstanding, most of the tools are paid or have very limited free features.

The abovementioned characteristics, which are the more prevalent in the analyzed tools and platforms, provide valuable insights to design the first prototypes. For instance, since the G4N Cards Set Canvas target audience—teachers and environmental organizations staff—may present some difficulties concerning visual literacy and information selection [41], an Onboarding and a help menu are useful features to include.

As it was mentioned, based on the exploratory overview carried by the research team, the first sketch was designed. The sketch in Fig. 6 proposes a sketch for the G4N Cards Set Canvas. A set of parameters was highlighted in the overview and supported the shaping of the first sketch. Along with the first prototypes’ sketch, and with the FR and Non-FR definition, exploratory interviews were considered for the first stage of the Development Research Method (cf. Sect. 3.1).

Fig. 6
figure 6

The G4N Cards Set Canvas’s first sketch

In Fig. 6, on the left side, there is a sidebar containing the library where the user can choose the templates, icons, images and illustrations to use, while, on the right side, the sidebar holds the artwork settings (e.g. font, opacity, and image settings). In the center, there is a zoomable canvas where the production of G4N thematic cards will take place. The most used options, such as zoom-in, zoom-out, and save will be displayed at the bottom, in a bar.

As the G4N Cards Set Canvas, will be integrated into the implemented portal-repository, some components of the UI design—such as the G4N project’s logotype, the navigation menu, and the login button—already have a defined place. The G4N project’s logotype, the navigation menu and some main actions are on the top navbar. The top bar, containing the languages of the available versions of the portal (Portuguese—PT—and English—EN), the G4N project’s logotype, the main menu, and two buttons (“Add Game” and “Sign in”), is a fixed element since it already belongs in the portal-repository currently online. However, in the main menu, namely in the “Toolkit” menu, appears a new subtopic: “Build your own cards”. This new section is where the G4N Cards Set Canvas will be framed.

Figure 7 represents a low-fidelity prototype of the G4N Cards Set Canvas translation from the first sketch presented (Fig. 6). allowing for a clearer understanding of each section’s goals: on left sidebar contains a search bar to explore the underneath identified elements—templates, icons, basic shapes and illustrations; the right sidebar presents multiple design settings and proposes some modules, such as, for example, displaying a color, a slider and an input to enter measures; the center, which comprises the design canvas, exhibits a card sample with both locked and editable elements.

Fig. 7
figure 7

The G4N Cards Set Canvas’s first digital prototype

The digital version of the first sketch was drawn in Adobe XdFootnote 5 and aims to provide a more accurate perception of the elements currently contained in the portal-repository.

In the design canvas, namely in the card area, in order to assure the compliance of the G4N brand standards, there are locked elements—e.g. the project's brand logo, marked with a locker icon—to prevent the user from moving it, therefore, breaking predefined standards. While the G4N project’s logotype is locked, immediately below there is a rectangle for the users to place their brand name or logotype. In Fig. 7, the areas outlined with the blue line enclose the design elements and provide precise identification of the G4N thematic card’s elements. The other elements can be modified by the user with some predefined constraints (e.g. the font-face and size will remain the same as the original sets of thematic cards).

The next steps will include the validation of the low-fidelity prototypes (framed in the second stage of the Development Research Method), in order to proceed to the high-fidelity prototypes’ development and first evaluations (second and third stages of the Development Method).

4 Conclusions and Future Work

This chapter presents the process of defining the G4N Cards Set Canvas as an integrated section of the already implemented portal-repository and describes the adopted methodological approach.

The UX benchmarking of Design and Presentation Tools provides an insight into the available products on the market, providing the possibility not only to distinguish the differentiating features of the G4N Cards Set Canvas but also to identify errors and issues to avoid, as well as to support the definition of the tool’s FR, and, posteriorly, of the Non-FR. Following this UX benchmarking, some features from professional vectorial design tools were considered for the G4N Cards Set Canvas, such as a canvas to design, image/shape settings, adjustments (e.g. manipulate object’s transparency), and multiple export formats. Among the analyzed tools, in a technical, conceptual and graphical level, some useful characteristics were identified: show/hide tools according to the selected object/element; library with shapes, icons and illustrations; icons combined with text; placement of edition tools; intuitive and sober design; and more. Furthermore, aspiring to produce high-quality resources for the Toolkit in compliance with the G4N project’s Brand Standards Manual, suggestions could be a suitable approach for the tool, which is designed for teachers and environmental organizations who are not professionals in the design field.

A detailed definition of the tool’s design and structure is presented, as it is important to maintain and emphasize the connection between the physical Toolkit and the online portal-repository, producing a digital tool to create physical cards about environmental themes.

As for future work, the research team plans to proceed to the next stages (cf. Section 3.1), which is to perform exploratory interviews with members from the target audience in order to understand their main needs and limitations in similar platforms. These interviews will be a method of validation of the above presented FR and prototypes. Following these interviews, the research team will proceed to define the Non-FR and design the high-fidelity prototypes.

Accessibility and usability concerns, such as the contrast of text and background colors and an appealing, functional and accessible design for the project’s target audience (i.e. teachers and environmental organizations staff), will also be addressed and considered during the tool’s development phase.

It is expected that the in-depth and accurate description of the G4N Cards Set Canvas development process provided by this chapter, allows its replication in other research contexts.

Change history

  • 04 May 2022

    The chapter “Definition of a Digital Tool to Create Physical Artifacts: The Case of the Gamers4Nature Project” was previously published non-open access. It has now been changed to open access under a CC BY 4.0 license and the copyright holder updated to ‘The Author(s)’. The book has also been updated with this change.

Notes

  1. 1.

    https://www.gamers4nature.pt/index.php?lang=EN.

  2. 2.

    The benchmarking can be observed here: https://www.gamers4nature.pt/benchmarking.png, last accessed on February 23th, 2021.

  3. 3.

    https://www.canva.com/en/, last accessed on February 19th, 2021.

  4. 4.

    https://piktochart.com/, last accessed on February 19th, 2021.

  5. 5.

    https://www.adobe.com/products/xd.html, last accessed on February 19th, 2021.

References

  1. Hill MK (2020) Understanding environmental pollution, 4th edn. Cambridge University Press, New York

    CrossRef  Google Scholar 

  2. Parker L. https://www.nationalgeographic.com/science/2020/08/microplastics-in-virtually-every-crevice-on-earth/. Accessed 08 Feb 2021

  3. Ke F (2014) An implementation of design-based learning through creating educational computer games: a case study on mathematics learning during design and computing. Comput Educ 73:26–39

    CrossRef  Google Scholar 

  4. Falcao TP, de Andrade e Peres FM, de Morais DCS, Oliveira GS (2018) Participatory methodologies to promote student engagement in the development of educational digital games. Comput Educ 116:161–175

    Google Scholar 

  5. Huizenga JC, Ten Dam GTM, Voogt JM, Admiraal WF (2017) Teacher perceptions of the value of game-based learning in secondary education. Comput Educ 110:105–115

    CrossRef  Google Scholar 

  6. Beça P, Aresta M, Veloso AI, Santos R, Ferreira E, Jervis S, Gomes G, Ortet C, Pereira M, Ribeiro S (2020) Developing a toolkit to game design: the Gamers4Nature project: from concept to artefact. In: Yannakakis NG, Liapis A, Kyburz P, Volz V, Khosmood F, Lopes P (eds) International conference on the foundations of digital games (FDG 2020). Association for Computing Machinery, New York, pp 1–8

    Google Scholar 

  7. Beça P, Ribeiro S, Santos R, Aresta M, Veloso AI, Ortet C (2021) Design and initial evaluation of an online portal-repository: the case of Gamers4Nature project. In: Martins N, Brandão D (eds) Advances in design and digital communication. Digicom 2020, vol 12. Springer, Cham (2021)

    Google Scholar 

  8. BBC Bitesize. https://www.bbc.co.uk/bitesize/guides/z7c82hv/revision/1. Accessed 24 Jan 2021

  9. PC Mag. https://www.pcmag.com/picks/the-best-presentation-software. Accessed 24 Jan 2021

  10. Noar A. https://presentationpanda.com/blog/new-presentation-statistics/. Accessed 24 Jan 2021

  11. European Union: Survey of schools: ICT in education. Benchmarking access, use and attitudes to technology in Europe’s schools. Belgium (2013)

    Google Scholar 

  12. Lari FS (2014) The impact of using powerpoint presentations on students’ learning and motivation in secondary schools. Procedia Soc Behav Sci 98(6):1672–1677

    CrossRef  Google Scholar 

  13. Nielsen Norman Group. https://www.nngroup.com/articles/personalization-is-over-rated/. Accessed 27 Jan 2021

  14. O’Donovan P, Agarwala A, Hertzmann A (2015) DesignScape: design with interactive layout suggestions. In: Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems (CHI 2015), pp. 1221–1224. Association for Computing Machinery, New York (2015)

    Google Scholar 

  15. Todi K, Weir D, Oulasvirta A (2016) Sketchplore: sketch and explore with a layout optimiser. In: Proceedings of the 2016 ACM conference on designing interactive systems (DIS 2016), pp. 543–555. Association for Computing Machinery, New York (2016)

    Google Scholar 

  16. Jahanian A, Liu J, Lin Q, Tretter D, O'Brien-Strain E, Lee SC, Lyons N, Allebach J (2013) Recommendation system for automatic design of magazine covers. In: Proceedings of the 2013 international conference on Intelligent user interfaces (IUI 13), pp. 95–106. Association for Computing Machinery, New York (2013)

    Google Scholar 

  17. Kuhna M, Kivelä IM, Oittinen P (2012) Semi-automated magazine layout using content-based image features. In: Proceedings of the 20th ACM international conference on Multimedia (MM 2012), pp. 379–388. Association for Computing Machinery, New York (2012)

    Google Scholar 

  18. Lee B, Srivastava S, Kumar R, Brafman R, Klemmer SR (2010) Designing with interactive example galleries. In: Proceedings of the SIGCHI conference on human factors in computing systems (CHI 2010), pp. 2257–2266. Association for Computing Machinery, New York (2010)

    Google Scholar 

  19. Igarashi T, Hughes JF (2001) A suggestive interface for 3D drawing. In: Proceedings of the 14th annual ACM symposium on user interface software and technology (UIST 2001), pp. 173–181. Association for Computing Machinery, New York (2001)

    Google Scholar 

  20. Tsang S, Balakrishnan R, Singh K, Ranjan A (2004) A suggestive interface for image guided 3D sketching. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI 2004), pp. 591–598. Association for Computing Machinery, New York (2004)

    Google Scholar 

  21. Peng M, Xing J, Wei LY (2018) Autocomplete 3D sculpting. ACM Trans Graphics 37(4):1–15

    CrossRef  Google Scholar 

  22. Liu H, Zhang H (2021) A suggestive interface for untangling mathematical knots. IEEE Trans Visual Comput Graphics 27(2):593–602

    CrossRef  Google Scholar 

  23. Kodama S, Poulin P, Moriya Takahashi T (2018) Creativity enhancement of painterly rendering using a suggestive interface. Comput Graphics 71:42–54

    CrossRef  Google Scholar 

  24. Yu L, Yeung S, Terzopoulos D (2016) The clutterpalette: an interactive tool for detailing indoor scenes. IEEE Trans Visual Comput Graphics 22(2):1138–1148

    CrossRef  Google Scholar 

  25. Cruz LMV, Velho L (2010) A sketch on sketch-based interfaces and modeling. In: 23RD SIBGRAPI - conference on graphics, patterns and images tutorials. IEEE, Gramado, pp 22–33

    Google Scholar 

  26. Kyan M, Sun G, Li H, Zhong L, Muneesawang P, Dong N, Elder B, Guan L (2015) An approach to ballet dance training through MS kinect and visualization in a CAVE virtual reality environment. ACM Trans Intell Syst Technol 6(2):23–37

    CrossRef  Google Scholar 

  27. Thokala K (2011) Haptic enabled multidimensional canvas. University of Akron

    Google Scholar 

  28. Santos-Gomez L (2000) Integration of procedural and object-oriented user interfaces, US6104393A

    Google Scholar 

  29. Swider NR, Hammond EJ, Kayastha C, Naylor DJ (2018) Technology for generating product designs using multiple canvases, US10726592B2

    Google Scholar 

  30. Yadav S, Chakraborty P, Mittal P (2011) User interface of a drawing app for children: design and effectiveness. In: Gupta D, Khanna A, Bhattacharyya S, Hassanien AE, Anand S, Jaiswal A (eds) International conference on innovative computing and communications. Advances in intelligent systems and computing, Springer Singapore, vol 1165

    Google Scholar 

  31. Johnsson BA, Magnusson B (2020) Towards end-user development of graphical user interfaces for internet of things. Future Gen Comput Syst 107:670–680

    CrossRef  Google Scholar 

  32. Golman NM, Balzer RM (1999) ISI visual design editor generator. In: Proceedings 1999 IEEE symposium on visual languages. IEEE, Tokyo, pp 20–27

    Google Scholar 

  33. Kushniruk A, Nøhr C (2016) Participatory design, user involvement and health IT evaluation. In: Evidence-based health informatics: promoting safety and efficiency through scientific methods and ethical policy, pp 139–151

    Google Scholar 

  34. Dufendach KR, Koch S, Unertl KM, Lehmann CU (2017) A randomized trial comparing classical participatory design to VandAID, an interactive CrowdSourcing platform to facilitate user-centered design. Methods Inf Med 56(5):344–349

    CrossRef  Google Scholar 

  35. Holländer K (2018) Applying the user-centered design process to external car displays. In: Dachselt R, Weber G (eds) Mensch und computer 2018 – workshopband. Gesellschaft für Informatik e.V., Bonn

    Google Scholar 

  36. Shneiderman B, Plaisant C, Diakopoulos N, Jacobs S, Elmqvist N, Cohen M (2018) Designing the user interface: strategies for effective human-computer interaction, 6th edn. Pearson Education Limited, Essex

    Google Scholar 

  37. Richey RC (1994) Developmental research: the definition and scope. In: Proceedings of selected research and development presentations

    Google Scholar 

  38. De Villiers MR (2005) Interpretive research models for informatics: action research, grounded theory, and the family of design- and development research. Alternation 12(2):10–52

    Google Scholar 

  39. Sharp H, Preece J, Rogers Y (2019) Interaction design: beyond human-computer interaction, 5th edn. John Wiley & Sons Inc., Indianapolis

    Google Scholar 

  40. Kao G, Hong J, Perusse M, Sheng W (2020) Turning silicon into gold: the strategies, failures, and evolution of the tech industry, 1st edn. Apress, Berkeley

    CrossRef  Google Scholar 

  41. Spiteri M, Rundgren SC (2020) Literature review on the factors affecting primary teachers’ use of digital technology. Technol Knowl Learn 25(1):115–128

    CrossRef  Google Scholar 

Download references

Acknowledgements

This work is part of the Gamers4Nature project Gamers4Nature (POCI-01-0145- FEDER-031047) that has the financial support of FCT - Foundation for Science and Technology (Portugal)/ MCTES—Ministry of Science, Technology and Higher Edu- cation and FEDER under the PT2020 agreement.

Author information

Authors and Affiliations

Authors

Corresponding author

Correspondence to Pedro Beça .

Editor information

Editors and Affiliations

Rights and permissions

Open Access This chapter is licensed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), which permits use, sharing, adaptation, distribution and reproduction in any medium or format, as long as you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons licence and indicate if changes were made.

The images or other third party material in this chapter are included in the chapter's Creative Commons licence, unless indicated otherwise in a credit line to the material. If material is not included in the chapter's Creative Commons licence and your intended use is not permitted by statutory regulation or exceeds the permitted use, you will need to obtain permission directly from the copyright holder.

Reprints and Permissions

Copyright information

© 2021 The Author(s)

About this chapter

Verify currency and authenticity via CrossMark

Cite this chapter

Beça, P., Ribeiro, S., Aresta, M., Santos, R., Veloso, A.I. (2021). Definition of a Digital Tool to Create Physical Artifacts: The Case of the Gamers4Nature Project. In: Martins, N., Brandão, D., Moreira da Silva, F. (eds) Perspectives on Design and Digital Communication II. Springer Series in Design and Innovation , vol 14. Springer, Cham. https://doi.org/10.1007/978-3-030-75867-7_8

Download citation

  • DOI: https://doi.org/10.1007/978-3-030-75867-7_8

  • Published:

  • Publisher Name: Springer, Cham

  • Print ISBN: 978-3-030-75866-0

  • Online ISBN: 978-3-030-75867-7

  • eBook Packages: EngineeringEngineering (R0)