User Interface on Game

Tugas Softskill Kedua

Nama Anggota Kelompok:

1. Aldhy Putra Mahardika

2. Angga Dewantoro Kekasih

3. Intan Wulansari

4. M. Arif Maulana

5. Sri Rahayu

Kelas : 3IA18

User Interface on The Game

As gamers and game developers we know that immersion is everything. When you’re immersed you lose track of time and become involved in what the game is presenting. A major factor in what makes or breaks immersion is how easy it is for your player to convert an idea into an in-game action — that is, how fluid your game’s User Experience (UX) is and how well-designed its User Interface (UI) is. A game hurts itself by providing too little information or too much, requiring too many inputs, confusing the player with unhelpful prompts or making it hard for a new player to interact. Poor UI design can even break your game completely.

What Are UI and UX?

The terms UI and UX are sometimes (incorrectly) used interchangeably, but they have specific meanings.

UI, or User Interface, refers to the methods (keyboard control, mouse control) and interfaces (inventory screen, map screen) through which a user interacts with your game. UX, or User Experience, refers to how intuitive and enjoyable those interactions are.

To look at it another way: the UI of a car is its steering wheel, its pedals, the dials and controls on the dashboard; the UX of the car comes from intangibles like the brake pedal being responsive, the engine smoothly accelerating when you step on the gas, the gear stick having just the right amount of resistance – those things that make the car enjoyable to drive.

In-game user interface design is different from other UI design as it involves additional fiction elements. Fiction involves an avatar of the actual user, or player. An Interface Design on a Game affects the convenience and extent to which users / users are interested in the Game.

In the design of game user interface, there is a theory proposed by Erik Fagerholt and Magnus Lorentzon from Chalmers University of Technology. In their thesis they wrote a thesis on the design of a user interface entitled Beyond the HUD – User Interfaces for Increased Player Immersion in FPS Games. They introduced the term different types of interfaces related to video game design.

HUD itself stands for Heads-up display, a method whereby information is visually conveyed to players as part of the game user interface. Usually indicates the HP (Health Point) or MP (Mana Point) and usually appears above the character’s head. This HUD function to make it easier for players to know the condition of the characters in the game.

Elements in The Game’s User Interface

1. Diegetic

The user interface elements are located in the game world (fiction and geometric) so that players and avatars can interact with them through visual, audible or haptic. Well executed executable UI elements can enhance the narrative experience for players, providing a deeper, more integrated experience. One of the games that implements diegetic elements is Assassin’s Creed. Assassin’s Creed successfully uses many diegetic patterns even though it is set in the world of history because players use virtual reality systems in the future. So the story is actually futuristic rather than historical

2. Meta

An image that can appear in the gaming world, but not always spatial visualized for players. The most obvious example is the effect displayed on the screen, like a splash of blood on the camera to show the damage. Example: Grand Theft Auto 4 Interacting with the phone in Grand Theft Auto 4 is an interesting example. It mimics real-world interactions – you hear phone rings and there are delays before characters and players respond. The actual UI element itself appears on a 2D hub plane, so it’s really a Meta element, even though the start of the interaction is typed.

3. Spatial

The User Interface element is presented in 3D game space with or without an entity from the actual game world (diegetic or non-diegetic). Fable 3 is an example where spatial elements are used to provide more information to the player and prevent them from jumping to the map screen. The shining trail almost fits in fiction considering the magical aesthetic quality of it but the character is not meant to be aware of it. This guides the player to the next destination.

4. Non-Diagetic

The interface provided outside the gaming world, only visible and audible to players in the real-world interface design all use visual heads-up display (HUD). all become very comfortable with the use of heads-up display (HUD) in the game. This system provides important information in a fairly simple way. If done correctly the player does not even know it exists. Mass Effect 3 uses many Non-diegetic UI elements to inform players of selected character and power weapons – among others. Given that futuristic setting I can not help to think if some of this information could have been integrated into the world of gaming, narration, or even both.

Who Should Design a Game’s UI?

Many programmers are scared off from making UIs because they feel that this is a creative job, one better left to someone like an artist who has a better understand of presentation. And yet UI design is a largely logical process, one that’s perfectly approachable to a developer.

In fact, I believe that the programmer (or creative director, or whoever in your team has the most direct role in shaping the playing experience of your game) should be responsible for making the UI, as they are the ones who know the game inside and out, and who know what information is important and what is incidental.

They should focus on the functional aspects of the UI: How big is it, does it (or should it) scroll, what information is displayed and where, and how the player navigates through it. Mock it up with two or three colors, and never rely on color changes alone to convey information. At the very least, run it through ColorOracle or Coblis to ensure that color-blind people aren’t missing out.

Good Video Game UI Criterion

There are criteria for video game design UI is said to successfully attract the interest of gamers.

1. Does the interface provide the required information on the spot.
2. Easily find the information searched (menu is not hidden, or located on the deepest submenu).
3. Easy to understand, no need to read other instructions.
4. It takes no time in loading the interface animation
5. Do not make users do repetitive things.

Designing Your Own Interface

1. Design and pay attention to the main character you create so that later the player can feel the feeling of becoming the main character itself.

Example: confident, timid, or brave.

2. Displays a list of complete functions to support the state of the environment in the game itself.

Examples: Health, Ammunition, Mini-map, weapon supply, destination location, etc.

3. In the early design of the interface, there must be and notice the elements of UI design in games such as diagetik, spatia, meta, HUD etc.
4. In the initial design of the interface, as much as possible later the user can be aware of the causes and effects of activities / activities undertaken in the environment in the game.
5. Re-evaluate your UI design design to meet all the requirements mentioned above.

In the final step combine the elements you have designed like the characters and the environment and then design an interface solution that will make the player really feel and behave as part of the storyline in the game.

So it can be said that the feeling of “fused with the game” depends on the implementation of the UI design. The various elements that exist in the game are adjusted creatively as possible as a foundation for improving the UI creation so that later players can experience real gaming experience.

Applications For User Interface Design

1. Adobe XD
2. Mockplus
3. Balsamiq
4. Mockflow
5. Axure RP
6. MarvelApp.com
7. Proto.io
8. InvisionApp.com
9. Flinto
10. Justimind.com
11. Adobe Photoshop

Presentation's video about User Interface on The Game

Source:

https://nabilfm.wordpress.com/2015/03/24/contoh-contoh-interface-game/

https://sylviaalfarina.wordpress.com/2015/04/22/user-interface-pada-game-komputer/

https://muhammadilhamx.wordpress.com/2016/02/18/antarmuka-pengguna-user-interface/

http://ariefnugrahaa.blogspot.com/2016/05/user-interface-pada-game.html

https://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crash-course-in-the-good-and-the-bad–gamedev-3943

https://garudapixel.com/10-aplikasi-windows-untuk-uiux-design/