Keywords

1 Introduction

Encouraging young students to create their own games addressing educational subjects may increase their interest in the addressed theme and a better understanding of the importance of what is learned. Challenging students to create digital games – and not only to play them – promoted collaboration and the exchange of views and ideas, enhanced the development of critical thinking skills [1, 2] and fostered the acquisition of scientific concepts and developed technological and digital literacy [3]. Moreover, it increased the interest in the programming and design field [4] and enhanced their sense of achievement, self-confidence and self-efficacy, making students more engaged with the coding and implementation process [5].

Nevertheless this positive impact of engaging youngsters in the creation of digital games, research also points out some obstacles that may hinder the involvement of students in exploring educational contents through game design: low or undeveloped programming skills and low interest in the educational subject [4], a focus on storytelling and character development and a disregard to gameplay mechanics and content integration [6, 7].

Taking all these concerns into consideration, the Gamers4Nature project developed a toolkit to be used by younger audiences during mobile games development sessions. The initial version of Gamers4Nature (G4N) Toolkit to Game Design comprised several resources developed to support the development of mobile games about certain environment issues: a set of 12 cards addressing game design and game elements; a rapid game design document that proposes a path to explore the game design cards; and a set of thematic cards addressing a nature protection and biodiversity preservation. Along the game design sessions held with upper secondary and undergraduate students with and without experience in the digital game design field [8], it was possible to identify several constraints related to the design of mobile games user interfaces. Participants, most with no knowledge about mobile interface design, faced some difficulties when designing the game’s interface. Constrains – not limited to the small size of the screen – included knowing where to place buttons and other interaction elements, how to guarantee text contrast and legibility, icons dimension, feedback and the adequate use of color, which justified the development of a new resource to be included in the G4N toolkit, focused on mobile interfaces design – the “Mobile Game Design Guidelines” cards set.

This paper describes the “Mobile Game Design Guidelines” Cards Set, from the conceptual process to the final physical cards’ validation by experts in the mobile interface and the design field.

Following a background section (Sect. 2) presenting a theoretical background about the development of interfaces for mobile games, Sect. 3 introduces the G4N Mobile Game Design Guidelines cards, with a highlight on its topics and contents. Section 4 provides an overview of the two cycles of Expert Evaluation and their main results. The paper ends with Sect. 5, where conclusions and potential directions for future work are presented.

2 User Interface (UI) Design for Mobile Games

Creating a user interface able to provide an engaging gaming experience is crucial when designing mobile games. The User Interface (UI) design affects the gameplay and the game experience, and thus games designers usually avoid features overload, complex interfaces or any other issues that may require an extensive learning phase and therefore impair the player’s experience [9].

UI emerges as a key feature when designing mobile games, as it provides the medium for players to interact and engage with the game [10,11,12]. While having a good UI does not guarantee a great User eXperience (UX) per se [13], offering simple and familiar methods to control the game and adopting familiar navigation patterns may in fact impact the user experience, game flow and contribute to meaningful and engaging gaming experiences.

One of the main challenges of designing for mobile games arise from the nature of the physical device where they are played. Mobile phones’ portability and ubiquity features make it a device that can be used any time and any place, and while expanding the opportunities for the game to be played, they also present small screens and small keyboards. In addition, there is the need for a stable gaze and hand coordination, namely when the game’s main inputs are based on touch [14].

Usability heuristics usually applied to video games [15] can be a challenge when designing for small devices. Mobile applications are designed for small screens with limited input capability and therefore, while designing the game interface, mobile games UI designers must aim for the balance between the apps efficiency and on how to provide relevant information in a quick and clear way, and the need to design an experience able to provide a sense of progress, accomplishment and enjoyment [10].

Besides considering the way the device is used and its own specificities [16], mobile game UI designers need to concern about the UI’s intuition to the player, if it will transmit the required information easily and quickly, and also make adequate use of colors, fonts and symbols [10]. Moreover, having a clear understanding of the “how and why” is crucial in the user interface design process, and it is also a skill that requires time to be learned [17].

Toolkits, mostly because of their problem-solving features, support materials and resources, can be seen as a powerful tool that allows faster prototyping, supports creative design, and assists in the production of interactive artefacts [18, 19]. Often presented in the physical form – e.g. a deck of cards, allowing users to think through design, playing and exploring the resources in a more free and unrestricted way [20] – toolkits are frequently used as tools to support and influence interactive systems’ design and implementation [21], emerging as a useful resource to be used in implementation activities, either by game design experts [22,23,24] or by users with no relevant experience in the game design field [25,26,27].

3 The G4N Mobile Game Design Guidelines Cards

3.1 Background

Creating and developing a game is a demanding process, namely for developers with no specific expertise in the field of game narratives, game design and interface design. When the lack of background and skills in the construction of games and game narratives is seen as an obstacle to the game making process [4, 6, 28, 29], the G4N project developed a Toolkit to Game Design to support young users with and without game design experience in the creation of mobile games addressing nature and biodiversity preservation.

The G4N Toolkit includes several resources developed to support the process of creating mobile games: a set of cards addressing game design and game elements; a rapid game design document that proposes a path to explore the game design cards; and a set of thematic cards addressing a nature protection and biodiversity preservation theme (e.g. microplastics, invasive species). The toolkit is available both in physical format – so it can be used independently of internet or computer access – and in digital format, available for download on the project’s website. All resources were developed following a User-Centered Design approach, with experts in the game design field, biology and education and potential users (i.e. undergraduate and upper-secondary students with and without experience in the game design field) being involved in the design and validation process [8, 30,31,32].

Throughout the validation process held with the students, several constraints related to the mobile interface design process were mentioned by participants and observed by the research team: participants mentioned to have difficulties when deciding where to place buttons or interaction elements in the mobile interface; were not familiar with images recommended format and size; were not aware or were not familiar with the guidelines and heuristics for mobile interfaces design; created games revealed some inconsistencies in what concerns font size, inappropriate use of color and contrast; there were issues of alignment and incorrect use of white space; and guidelines about icon and buttons size were not taken into consideration. Taking these contraints into consideration and acknowledging the importance of designing a clear and usable user interface in mobile applications and mobile games, a new set of cards introducing and exploring the main guidelines for designing mobile game interfaces was developed.

Developed through a User-Centered Design (UCD) approach that took into consideration the opinions and perspectives of the students that participated in the game design sessions, the development of the Mobile Game Design Guidelines cards set was guided by three concerns: (i) to summarize the main guidelines for designing mobile games presented in the literature and followed? by the game design market; (ii) to present the information in an understandable format to individuals with and without knowledge in the mobile games’ interface design field; and (iii) to present that information as “cards” – i.e. in the same format as the other toolkit’s resources – in order to include it in the G4N Toolkit to Game Design.

3.2 Defining Topics and Contents

The Mobile Game Design Guidelines cards summarize and aggregate essential guidelines regarding mobile game design, from interface design to game performance and monetization. Taking as starting point the constrains mentioned participants in the game design sessions faced during the mobile game design process, a comprehensive and broad search about game design rules and guidelines – either from academy or industry – was carried out, gathering a list of fundamental design principles (e.g. visual hierarchy and alignment), UI design concerns (e.g. usability and intuition), and specific game design elements (e.g. sliders and pop-ups) [33,34,35,36,37,38,39,40].

As result of the content analysis of the collected information, several dimensions emerged: how to design clear and intuitive interfaces; deciding on font’s readability; the importance of visual hierarchy (font size, color, contrast, alignment, repetition, proximity, white space); how to monetize games, advertisements and awards; when and how to use sliders for large amounts of information; when to present pop-ups with game information; presenting dialogues; and how to present an introduction video.

These dimensions were analyzed and revised, taking into consideration the Toolkit’s target audience (upper-secondary and university students). Dimensions related with game monetization – as they delved into the very technical details of game design – were removed from the list of topics to be addressed, and gestures and device orientation, the “fat thumb” problem, feedback, interaction types (e.g. gestures, device orientation), and performance optimization (e.g. file sizes and formats) were added to the list.

From this revision, 24 guidelines for designing games interfaces for mobile devices emerged. The guidelines were grouped in in four categories: 1) interface, presenting information on how to design the game interface, alluding to UI design principles (e.g. clarity and usability), color schemes, fonts’ face, size and weight, contrast, white space, buttons and icons’ size, visual metaphors to apply in sliders, most frequently used buttons, and particular specifications when designing pop-ups; 2) interaction, addressing key topics on feedback (visual, vibration and sound), interaction types and models, crucial information to create an introduction video, and opinion dialogues; 3) performance, addressing methods to optimize the game’s performance through file’s size and format, specifications when including tridimensional objects into the game, and the device’s battery autonomy; and 4) promotion, introducing characteristics of promotional/purchasing dialogues, and briefly approaches the freemium model – an industry’s standard.

4 Evaluation Approach: Expert Evaluation

Following the same methodology applied for all Toolkit’s resources development and validation, the new set of cards was developed and validated through Expert Evaluation. Expert evaluations, which can be conducted at any stage of the design cycle, are settled on the expert’s expertise and experience in their fields of work.

The cards’ development and validation process went through two iterative evaluation cycles, with industry and academic experts being invited to analyze and validate the Mobile Game Design Guidelines Cards.

4.1 First Validation Cycle: Mobile Game Design Guidelines’ Content Validation

The first stage of expert evaluation focused on discussing, in an individual interview format, the content of the guidelines list.

Participants.

5 experts were invited to participate in the first validation cycle. Three were from the academic field with expertise in design, UX, Human-Computer Interaction, accessibility, and mobile development, with over 10 years of experience; and two from the game industry specialized in mobile game software development and game art and design with experience of 4 and over 10 years respectively.

Settings.

Due to the Covid-19 pandemic restrictions on social distancing, validation sessions were carried individually through video call conferences, between 28th October and 21st December 2020, and participants were asked permission to record the sessions for further analysis. Prior to the sessions, a document presenting the 24 guidelines distributed amongst the pre-defined four categories (i.e. interface, interaction, performance and promotion) and guidelines’ related content (i.e. guideline title, guideline description, representative image) was sent to the experts, to be read and analyzed. This allowed the experts to read, analyze and reflect upon the document’s content at their own pace, so that the interview would focus on gathering perspectives and opinions rather than on reading the document.

Each session was divided into two moments. In the first part, the moderator shared his screen with the guidelines document previously shared with the participants, being the experts invited to discuss each guideline’s content and analyze it from their expertise and experience in the field.

In the second part of the session, and after the analysis of each guideline was performed, a short interview was made to the experts. The questions were the following: 1) The mobile game design guidelines will be used in different contexts, such as game jams, classrooms, workshops. In what concerns the contents you have analyzed, do you consider 24 guidelines an appropriate amount?; 2) Concerning the categories to which the different guidelines were assigned (Interface, Interaction, Performance, Promotion), do you consider them relevant considering the contexts of use?; 3) Following the theme of the previous question, what is your opinion regarding the titles/designation of each category, do you think they correspond to their contents?; 4) In your opinion, are there any guidelines that should be revised?; and 5) Do you have any other suggestions or comments?.

Main Results.

Four of five experts considered the 24 guidelines an adequate number. In what concerns the name of the categories and related contents, all experts (n = 5) considered it a suitable approach. Nevertheless, some experts referred that some topics could benefit from a more detailed description, namely the topic about multimedia contents which could approach tridimensional objects and could be subdivided in video, audio, and images. The topic about interaction types could also be subdivided, and information about accessibility should also be covered by the guidelines. As for the guidelines, the only observations were about the guideline addressing the device’s sensors, included in “peripherals”, and that – according to experts – should be “internal sensors”, and about the category “promotion”, that could be shorter since it is not an extremely relevant topic for beginners. In what concerns the guidelines’ illustrations, experts considered that adopting a model that presented examples of the right and wrong use of each guideline would aid its understanding and help to “convey ideas” – as one of the experts said.

Overall, all the experts considered these guidelines a proper approach and an optimal synthesis of crucial topics regarding mobile game design, since these guidelines narrowed down subjects that are sometimes extensive and complex into something brief and clear.

As a result of the first validation cycle and received inputs, a new version of the mobile game design guidelines – with a total of 28 guidelines – was produced. Table 1 presents the Mobile Game Design Guidelines that were considered to be included in the G4N Toolkit to Game Design.

Table 1. Mobile game design guidelines.
Full size table

4.2 Second Validation Cycle: Mobile Game Design Guidelines’ Visual Layer Validation

After validating the guidelines and defining the contents, a first version of the new set of cards (28 cards, one for each guideline) was developed. The Mobile Game Design Guidelines Cards layout follows the G4N identity manual [30] and color palette. To facilitate the understanding of the information contained in the cards and to exemplify the application of the guidelines, representative illustrations of each guideline were added to the cards (see Fig. 1).

To ease the interaction with the cards and to highlight and reinforce the structuring into four content categories, each content category is represented by a color. Blue, a well-accepted color by most people, was used for the “interface” category (12 cards). Pink was chosen for “interaction” category cards (8 cards); being considered as a positive and sensitive color, pink is suitable according to the meanings conveyed by this category – the interaction with the players must be sensitive to their feelings throughout the game flow [41]. Purple was used for the “performance” category cards (6 cards); purple is associated with the invisible [41] – in this case, a metaphor for what’s happening in the game’s background that reflects on its performance. Yellow, often related with optimism [41], was chosen for the “promotion” category cards (2 cards).

Colors were applied in a way that would create a connection between the front and the back of each card: in the front of the card, the color is used as background color; to establish the visual connection, the back of the cards is outlined with the same color. The category color is also applied in the category name and in background coloring integrated into the illustrations. Figure 1 represents a card model for each category (interface, interaction, performance, and promotion), both front and back faces (up and lower row, respectively).

Fig. 1.
figure 1

First design approach to the Mobile Game Design Guidelines cards set (example of each category).

Full size image

Participants.

The second validation cycle, also with expert evaluation, was focused on the visual aspects adopted in this card set. To validate the design of the cards, four experts with expertise in Communication Design, Product Design, Interaction Design, Graphic Design were recruited. Three participants had expertise in evaluating educational resources, and a two had experience in the digital games’ field.

Settings.

As the restrictions due to the Covid-19 pandemic were still imposed, these evaluation sessions took place through video call conferences between 11th March and 8th April 2021, with participants being asked permission to record the sessions for further analysis.

Along the sessions, experts were invited to explore each card and analyze it from their experience and expertise in the design field, using the think aloud protocol. After the sessions, a questionnaire was applied. The questionnaire was divided into two main sections: 1) characterization questions, asking about the experts’ profile (field of study and expertise, experience in developing and using education resources); and 2) questions centered on the analysis of the visual design of the “Mobile Interface Design Guidelines” cards.

Experts were asked to agree/disagree (by using a 5-point Likert scale) with the following statements: 1) The graphic solution is congruent with the concept; 2) The contrast employed emphasizes the relevant elements; 3) The design elements work together to create a seamless whole; 4) There is a cohesive use of the visual elements; 5) The color palette is appropriate; 6) The font face and size are appropriate; and 7) The amount of text is reasonable.

Experts were also asked to reflect about the visual hierarchy of the several elements presented in each card (i.e. title, color, QR-code, descriptive text and illustration) by sorting the visual elements by the order they visualized them, and invited to talk about the main strengths and weaknesses of the cards content and visual design approach.

Main Results.

In what concerns visual hierarchy of the different visual elements presented in the cards, experts pointed out the color as the most striking element, followed by the title, the QR-code, descriptive text, and illustration.

All experts agreed that the graphic solution was congruent with the concept, three experts strongly agreed/agreed that “the contrast employed emphasizes the relevant elements, and four experts strongly agreed/agreed that the design elements worked together to create a seamless whole. Three experts strongly agreed/agreed that there was a cohesive use of the visual elements. In what concerns color, three experts strongly agreed that the color palette was appropriate. As for font usage all experts agreed/strongly agreed that the font face and size were appropriate. All experts strongly agreed/agreed that the amount of text was reasonable.

As for the main strengths and weaknesses of the adopted visual layout and format, the experts considered as strengths that the set of cards was well conceptualized and organized with a clear and clean layout, and accurate representative illustrations of the textual elements. As for weaknesses, they suggested that the space between the title and descriptive text should be levelled, that a chromatic variation in the purple cards should be applied; experts also suggested a more expression on the design of the illustrations (i.e. more thickness in the illustrations’ stroke), smoothing text breaks and revising any text widows, orphans and rivers, and polish alignments.

Lastly, in the expert’s opinion, these guidelines could be useful in guiding the construction of a game and promoting knowledge about different interface design fields, being adequate for in-class or recreational activities, and even appealing for young children. Asked to give their opinion about the potential of the cards, participants said that they could be used “in Classroom or Home Learning activities. I think they are quite attractive and different from other games, so they can have a greater adherence from children” [E1] and “for the purpose intended, the guidance of the construction of games” [E2]. Experts also mentioned that the cards have potential to “motivate learning in different areas” [E3] and “to support the construction of a solution when creating the game and defining interaction strategies” [E4].

Nevertheless, it was also mentioned that these cards could restrict creativity, and that a technical glossary should be provided in order to supply more specific information. It should also be emphasized that the cards represented not rules but guidelines, that could differ in each context. Experts also stated that the cards’ shape (irregular hexagon with rounded corners) might be difficult to replicate at home (e.g. if the users would like to print an additional set), namely because of the corner cut-outs.

Following the evaluation sessions, expert’s evaluations and opinions were analyzed and discussed, with the suggestion to provide a glossary – because of its complexity and because the cards aimed to provide guidelines and not a complete description about the development mobile visual interfaces – being discarded. As for the cards’ format, it was decided that the cards would follow the same shape/size as the already available Toolkit’s resources (game design cards and thematic cards) and therefore the corner cut-outs were maintained.

The final version of the Mobile Game Design Guidelines cards set, which benefited from the experts’ output in both content and design validations, is represented in Fig. 2. The complete set of cards can be seen in the project’s website in the following link: G4N.

Fig. 2.
figure 2

Final design approach to the Mobile Game Design Guidelines cards set (example of each category).

Full size image

5 Final Considerations and Future Work

As research indicates that creating games may increase the interest towards the addressed theme and a better understanding of the value of what is learned, giving young players the tools and opportunities they need to become game developers themselves may increase motivation for adopting positive attitudes towards nature and biodiversity preservation.

Developing a good UI is one of the main challenges when designing mobile applications. In mobile applications, namely in games, the user interface impacts the playing experience, immersion, and enjoyment and aids to maintain the users’ engagement [35]. Knowing how to display and present game design elements (e.g. characters, rules, icons, points, achievements, commands, and other game elements) on a small screen of a mobile device is a fundamental feature when designing a game, as it may impact the interaction between the player and the game – the gameplay. This paper describes the G4N Mobile Game Design Guidelines cards development and validation process. These cards, a component of the G4N Toolkit to Game Design, were designed to support users during the mobile interface design process. Articulated in four categories – interface, interaction, performance and promotion – the cards summarize the essential guidelines about mobile game design that are mentioned both in literature and in industry, from fundamental design principles to UI design concerns and elements.

The Mobile Game Design Guidelines cards were validated through Expert Evaluation in two iterative evaluation cycles. Industry and academic experts in game design and development, mobile design and development, Human-Computer Interaction, and graphic and communication design field (N = 9) were invited to analyze and validate the Mobile Game Design Guidelines Cards. From the expert’s perspective, the guidelines presented in the cards can be a useful guide along the process of constructing a game while promoting the acquisition of knowledge related to the mobile interface design field. Nevertheless, it was also mentioned that it should be mentioned that the information provided in the cards should be seen not as rules but as guidelines, and therefore could differ according to context.

The Mobile Game Design Guidelines cards were not yet validated by its target audience (i.e. younger students with and without knowledge and experience in the mobile game design field) and therefore additional evaluation cycles are needed. The next step of the cards’ development and validation process will focus on the use and validation of this resource with students from upper-secondary and university courses with no specific experience in the mobile interface design field.