top of page
Top

UX DIARY

UX ISSUES:

FFBE: SUFFICIENT INFORMATION

18th Feb 2019

Recently, I've started working in a mobile game company as a game designer. The game was launched way before I've joined the company. I realized that I can learn from the mistake of the game and decided to come out with solutions to improve the UX of the game.

 

One major UX issues that the game has is that it does not give out sufficient information to the player. Often, players will come across questions such as what does my abilities do? How much % of the boss's defense did I reduce? How long does this ability last? while playing the core system of the game which is the combat.

 

This results in an immersion breaking situation whereby the players have to go online to search for more details that the game could provide. This will easily cause fatigue to the player as he or she has to constantly go online to search for ability's detailed description with over 200 different types of abilities and equipment. 

 

 

Example 1

Giving sufficient information for the players is important for fair play.

 

In the first image, we can see from the ability description bar above the ability panel shows a brief description of what the ability does. It does not aid the player to identify which ability is being selected to display the description, which ability does the ability description bar belongs to. 

 

In addition, the information from the ability button and the ability description has the same information. This impacts its functionality whereby holding the ability button for more information does not aid the player to further understand the ability he or she is about to use.

 

 

Solution

In order to resolve the problems state above, we have to first identify to the player whose ability description is displaying on the bar. Thus, by adding the ability name helps the player to identify which skill is being selected and the selected skill can be darkened as it loses its functionality to be press at that moment. 

 

 

 

Example 2

Giving sufficient information for the players to highlight the unique selling point of the game.

 

The game has an interesting unique selling point which is called chaining. Chaining occurs when two attacking frames from two different units take turns to apply the damaged frame onto the enemy. 

 

However, the game does not display any chaining related information to the players. Leaving the players to either experiment the skill themselves or to let them search online again. Chaining occurs frequently in the game and it affects the core gameplay greatly as it increases damage dealt to the enemy.

 

Solution

Similar to the solution above, we first have to allow players to identify the ability they have selected and which ability's description is being displayed currently. 

 

Firstly, adding the ability name helps to identify which ability currently has its description is being displayed.

 

Next, we add values to aid the players to have an understanding of how much defense they are reducing. *Do note that this game does not add up multiple reduce defense ability values, instead it overwrites each other.*

 

Thirdly, we also use a red box to help identify the chain family of the ability. Thus, when the player is using another unit with the same chaining family they can easily identify if the two abilities can be chain together.

 

Lastly, it could have been better if the solution adds in which stats is the damage calculating from. The game offers 6 main stats, HP, MP, ATK, MAG, SPR, and DEF. 

 

e.g "Deals 720% physical ATK damage to one enemy and decrease target's 60% DEF for next 3 turns."

 

Example1_before.JPEG

Example 1

Example1_after.jpg

Adding solutions to example 1

Example2_before.JPEG

Example 2 - Attacking ability description

Example2_after.jpg

UX VISUAL DESIGN:

COLOR RED

05th Jan 2019

The color red is often a big help to the designer in visual design. Red color attracts the user's attention and is often striking when used with high saturation.

 

The color red also carries multiple meaning and can be an advantage to the designer when used in the right situation. In the east, red represents lucky. However, in the west, red represents danger.

 

There was once a person told me that humans in the past often get to see blue and green from nature itself. However, the color red is visible when someone is injured and thus blood is coming out from them. Therefore, our reptilian brain is hardwired that whenever we see the color red, it catches our attention quickly. I personally find this story quite interesting and helps me to remember the color red as a good tool to be used. 

 

A real-life application is the traffic light that everybody in their life has met before. It is a universal language that red signifies stop walking or stop the car.   

 

Often time in games, the color red is used to signify as blood or something negative is happening.

 

One interesting type of UI that can be found in games is the Meta UI. Meta UI is often an overlay over the screen to tell the player there are changes in the current situation. Red Meta UI overlays are used to tell the players that they received damage. Sometimes, this Meta UI is further divided into different sections to tell the player the direction where the damage is coming from. 

 

Not only games use the color red to grab the attention of their users. Software and applications such as Facebook and Macbook use the color red to grab the user's attention. Whenever there is a new activity, in one of the features, the User interface has a red circle to tell the user that something new is happening. Furthermore, they added a numerical number to tell the user how many new activities there are. 

Chinese_lucky.jpg
Girl Hiking in Mountains
45835701_10156143887218720_2803561394480
Screen Shot 2019-01-06 at 6.06.51 AM.png
Screen Shot 2019-01-06 at 6.04.08 AM.png

UX PSYCHOLOGY:

LAW OF PROXIMITY

04th Jan 2019

Law of proximity is that we perceive objects that are closer to one another are more likely to be grouped together or related.

 

With the Law of proximity, we can help the users to identify their goals quickly by placing related options together, manipulating the visual weight and to create an option to stand out from a group of other options.

 

The images shown are created with the Law of proximity in mind to create visual recognition for the users.  

 

The "Options, Credits and Quit" are to create visual weight to balance with the planet on the right side. The play button is placed far apart from the grouped options to allow it to stand out from the other options. 

 

As for the sound options screen, the boxes are position close to one another to simply tell the user that which rows of boxes are related to the corresponding sound option.

 

Different rows are separated by spaces and are boxed up by a translucent background box to create a clearer distinction.

Mainmenu.png
45184502_10156117115418720_7763436936965

UX ISSUES:

LET's GO POKEMON

3rd Jan 2019

One of the UX problems I found while playing Let's go Eevee was that it is inconvenient for the players to swap their existing pokemon with the pokemon in the player's pokemon box.

 

In this version of the pokemon, it is awesome that the game has improved by incorporating the pokemon storage with the player. Allow them to access pokemon outside of their party easily. 

 

However, for the player to swap out their pokemon in the party with the pokemon in the pokemon box requires them to go back to the inventory screen to access the pokemon box. 3 or more steps are required to swap out a pokemon. Every single meaningless step adds up to the player's frustration.

 

My solution would be simply to add a "Change Pokemon" option in the party screen. This allows the players to swap out their pokemon in the party and transit the player to the pokemon box screen when the option is selected. 

pokemonux.jpg
WhatisUXtome.png

UX QUESTIONS:

What IS UX Design TO ME?

2nd Jan 2019

User Experience Design to me is the combination of multiple elements such as human psychology, interaction design, visual design, and the product's knowledge to deliver a smooth journey when the user is using the product.

 

Similar to Cognitive behavioral therapy, the UX designer has to keep track of the user's feelings, thoughts, and behavior.

 

Human psychology and visual design in UX design help the UX designer to know what the user feels and think when using the product. Interaction design helps to plan meaningful interaction for the user and the product as well as act as a guide in the shadow to guide users to their intended goal.

 

Lastly, having product knowledge is crucial as it helps the designer to understand the goal of the product and the different type of users. In order to better understand the different challenges faced by the user when interacting with the product. 

bottom of page