UI/UX Design for Metora: A Gamification of Learning Journalism Interviewing Method

. In learning, effective media is needed to deliver the material. Visual media can be more acceptable and facilitate understanding and strengthen memory. In this modern era, digital- based visual media is more effectively captured by students. Educational games in the form of gamification can provide the same effect as effective learning media. To support educational games, interface design and user experience are the first aspects seen by users. This study explored the user interface and user experience in the process of developing a gamification of a non-game subject, Journalism Interviewing Method. User interface includes colour, shape and layout the interface. User experience in game design process includes the tangible user interface, constructive and helpful feedback, content and storytelling, how to appreciate user. This study explored the user interface and user experience in the process of developing a gamification of a non-game subject, Journalism Interviewing Method. impression or directly involve players in a particular activity. To support educational games, interface design and user experience are the first aspects seen by users. This study explored the user interface and user experience in the process of developing a gamification of a non-game subject, Journalism Interviewing Method.


Introduction
In learning, effective media is needed to deliver the material. Visual media can be more acceptable and facilitate understanding and strengthen memory. Visual media provides a connection between the content of subject matter and the real world. In this modern era, digital-based visual media is more effectively captured by students [1]. In the cone theory of experience proposed by Dale, learning will take place more effectively when a person is involved in activities directly such as seeing demonstrations, playing roles or being directly involved in the activity [2]. In previous work, explainer video has been created as demonstration media to deliver the material [3].
However, that media has deficiency in interaction activity. Educational games in the form of gamification, in this case, can provide the same effect, because it can give a real impression or directly involve players in a particular activity. To support educational games, interface design and user experience are the first aspects seen by users. This study explored the user interface and user experience in the process of developing a gamification of a nongame subject, Journalism Interviewing Method.

Related works
Professor Kathleen Hansen and Nora Paul conducted a game-based-learning research at the University of Minnesota regarding Journalistic learning using the Neverwinter Night game [4]. By modifying the RPG genre game, this game-based learning teaches about the ethics of interviews with interviewees. However, various types of interviews are not presented in a complex manner, so that the interviews conducted are only based on a type of interview. Besides, making this kind of game takes a long time and uses expensive costs.

Gamification
Referring to the Gamification lecture material from the University of Pennsylvania, gamification defined as the use of game elements and game design techniques in any nongame contexts [5]. The game elements could be used in learning the material and increase the fun and entertainment. The game elements to improve the skills of gaming and learning are result, report, dashboard, percentages of competency, progress bar, stage, level, countdown, profile information, pictures, and avatars [6].

User interface (UI)
A user interface communicates the user with the computer program. Design of the user interface includes any aspect of the computer program that is visible to the user [7].

Colour psychology
Wright said that there are four primary psychological colours: red, blue, yellow, and green. [8]. Red is a powerful, strong, and extremely basic colour. Yellow is the strongest colour; it is about emotions, self-esteem, and creativity. Yellow is most related with words like cheerful, jovial, joyful, and sunny; somewhat related with exciting and stimulating. Green is considered an emotionally calming colour. It gives a sense of refreshment, harmony, and equilibrium. It symbolizes universal love, environmental awareness, and peace [8,9]. Blue encourages intellectual activity, reason, and logical thought. Nature uses blue in the sky and the sea.

Shape
Shapes can be used to reflect a specific purpose or meaning. Text or icons can help reinforce that meaning when the shape of a surface alone could be ambiguous [10]. In example, circle, oval, and ellipse shapes create a positive emotional message [11]. The lack of angles makes them perceived as softer, more pleasant and likeable.

Button
Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout user interface, in places like: dialogs, modal windows, forms, cards, and toolbars [12].

User experience (UX)
UX in game design can be formed as tangible user interface, constructive and helpful feedback, content and storytelling, how to appreciate user [13]. UX has role in designing interactive learning media, such as gamification. In Metora, the user interface design is created according colour psychology and shape that chosen by user. The main contents divided by two sections: materials itself and evaluation session. In the evaluation session, interactive design needed to increase the fun and entertainment. Some questions answered by the user to examine how user's understanding of materials given. There are three question types, such as multiple-choice question (MCQ), true or false, and drag-and-drop. From these three question types, drag-and-drop interface is highly recommended to use. Because dragand-drop interface has benefits such as eliminating typing errors and ease of use may argue in its favour [14]. Helpful feedback also featured in Metora. A sign appears as feedback to user's answer. There are some badges to appreciate users.

Development process
In conducting this research, the method used is participatory design. Participatory design is a design technique that involves stakeholders in the design process, finding and identifying problems and finding solutions [15]. The advantage of this design technique is that more accurate information is obtained in the design process and participants can convey more ideas. There are two stakeholders, such as experts (consist of an academic and a practitioner in the field of journalism) and users (consist of eight students who learn journalism). In the development process of this method, the step is divided in two part such as:

Making assets
As content and graphic support for gamification as designed in the mock-up, game assets are created using Adobe illustrator (Figure 1). The assets that have been created are then exported into PNG (transparent) format, which is then imported as a sprite to the game engine, Construct 2.

Making gamification
In the gamification, an asset is merged by creating a layout in the Construct 2 software. Layout is a work page for game display; in the layout, we can add new sprites, background, text, buttons, and so on as needed. After the assets/sprites are entered into the layout, the next step is to create an event sheet. The event sheet is a page for adding functions from sprites that have been added to the layout.

Result
In this study, a flat design style is preferred by users. In addition, this design utilizes rounded forms on assets and fonts used. In user interface design, the use of simple fonts makes reading easier. Sans serif font types are more often used in flat design style because they are thick and flat in each section so they are easier to read. A type of font used in Metora is Quicksand (Quicksand Bold and Quicksand Bold Oblique). In this gamification, bright colours like yellow are used as a background colour that dominates the display to get a cheerful impression (Figure 2). Fusion red, green and blue are used as sprite colours, especially buttons. The colour for text is dark but not black. In this process, game design takes the form of using colours and shapes considering the tangible user interface.  Helpful feedback is needed for user to conduct interaction between user and media. In the evaluation session, after users answer each question, appear a sign to give feedback to user. Red cross sign means that user's answer is wrong and blue check sign means user's answer is true. There are six badges to appreciate the user about result they got. Every user who finished the materials and evaluation in each level got yellow-brown bagde. The green bagde reads "Jurnalis Jenius-Genius Journalist" to appreciate user who got score 100. The blue badge reads "Jurnalis Cerdas-Smart Journalist" to appreciate user who got high score under 100. And the red badge reads "Jurnalis Teliti-Thorough Journalist" to appreciate user who found 15 hints in materials session. From the bagdes user got we could discover user behavior.

Conclusion
From this study, we can conclude that user experience process in gamification includes the tangible user interface, constructive and helpful feedback, content and storytelling, how to appreciate user. Interactive design in Metora, especially in evaluation session divided by three question types, such as multiple-choice question (MCQ), true or false, and drag-anddrop. In delivering materials, Metora used four primary psychological colours as the main colour palette.