Forem: Indieklem

How to make our game colors accessible to everyone

Indieklem — Thu, 27 Jul 2023 16:13:42 +0000

In this article, we'll take a look at how to make our colors easier to understand. Lack of accessibility is a hindrance to reading the game and, in the end, it's the user who pays the price.

It is estimated that around 8% of boys have some form of color blindness, while the figure is less than 1% for girls. This means that approximately one boy in 12 and one girl in 200 are affected by this color vision disorder.

If you don't want to degrade the gaming experience for these players, you've come to the right place.

Are you starting from scratch and don't know where to find your colors? I recommend Lospec, a site where other artists offer their palettes.

At the beginning, a definition of accessibility

Let's take a look at the definition of "accessibility" given on the French government's design website:

Digital accessibility means making digital content and services understandable and usable for people with disabilities.

However, we should point out that accessibility is not limited to people with disabilities.

Many factors other than our retina can affect the legibility of our interfaces, such as a poorly calibrated screen, a pair of glasses with tinted lenses or the sun's rays falling on our monitor.

Check the contrast between text and background colors

Contrast, in accessibility, refers to the difference in brightness or color between elements to make content more readable and understandable.

Let's say we have a beautiful yellow #F4D160. How do we know which colors to use to write on top of it? Or conversely, can I use my yellow text to write on a gray, white, black, blue or purple background?

Color Review is one of the best sites for working on this subject. It allows us to confirm that the contrast between my background color and my text color (foreground) is valid according to WCGA (Web Content Accessibility Guideline) standards.

All that remains is to test each of the color combinations we wish to use, and let the tool indicate whether or not the ratio is sufficient.

Yellow on black #001C30? Yes.
Yellow on white #FFFFFF? That's no.
Write purple #9726B6 on yellow? Titles yes, smaller texts no.
Write blue #7573D1 on yellow? That's a no.

Improving legibility for people with color blindness

The second point that interests us when we talk about accessibility is Daltonism, the famous visual anomaly that affects color perception, and which affects around 8% of boys and 1% of girls.

Of course, it's unthinkable that we should leave these people out in the cold, so let's do all we can to make their gaming experience as pleasant as possible.

Modify your color palette

One solution is to adapt our color palette so that all users can approach it correctly. To this end, there are websites and applications that simulate certain types of vision. This makes it much easier to see how colors are perceived by other people, and to correct (or not) accordingly.

Create a specific palette

A second solution is to create a color-blind mode in the game options. Can't agree on the colors to provide to all your players? Let's create a specific palette for color-blind people.

Several games offer this option, including World Of Warcraft :

Color, yes, but not only

What we need to understand here is that, despite our best efforts, there's always a risk that the player won't see what we're trying to show him if we rely solely on color.

For example, if you open the Wikipedia page dedicated to the subject of color blindness, you can read that achromatopsia is a disease that manifests itself by a total absence of color vision. In this case, even perfect contrast and a suitable palette may not be enough.

Let's imagine for a moment that we want to represent a state where the life bar has reached a critical stage. Instinctively, the first idea would be to change the color of the gauge from green to red. Here's the vision of someone suffering from this rare case of color blindness:

It's immediately more complicated, if not impossible, to understand the information, because it's based solely on the use of colors.

One of the easiest ways to correct this problem is to play with another element. We can, for example, choose to remove the life bars as they diminish, in addition to changing the color. The result is instantly more digestible and readable:

Game menus as a battle horse

Although it may seem trivial, this is a recurring error in many video game menus.

To compensate for this, some designers choose to add extra elements to differentiate items from one another: an outline, an arrow, a line...

The Animal Crossing menu, for example, features a cursor in addition to yellow highlighting (left), while Crash Bandicoot's selection is indicated only by a color change:

Finally, a few recurring phrases

Here are a few phrases that come up (too) often when we talk about accessibility, and my response to them.

Accessibility takes too long to set up, I'll do that later.

Yes, making your game accessible is an extra workload. Nevertheless, putting the right practices in place at the outset saves time later on.

Accessibility is a constraint, it limits my creativity

Yes, accessibility is a constraint. But what about the poor gameplay experience you’ll create for your players? It’s worst.

Game Jam is the very essence of the word "compulsion", and yet thousands of games, each more extraordinary than the last, are created every year.

If I understand my interface, then the others too

Apart from the fact that over-inflated self-confidence is rarely a good thing, it's rare for a design element to be perfect.

That's where user reviews come in. Having the ability to capture user feedback, learning to ask the right questions, or knowing how to analyze usage data are just some of the many skills of a good UX Designer.

Don't just rely on your own opinion, learn from others and, above all, ask your players for their opinion.

Want to learn more?

I strongly invite you to explore this vast subject, in particular via these links:

Web Content Accessibility Guideline
Uxplanet - Here’s What You Need to Know About Color Accessibility in Product Design

Links of the moment

Dome Keeper - or the art of using a limited palette to make a beautiful game
Our game - part co-op, part turn-based, we only use 32 colors
Mini-jam - feel like getting into video games, but have no idea how to go about it? Start here!
Game Maker Studio resources - chart your course through the world of Game Maker Studio
Some brush ideas - for your future pixel art landscapes
Pixel art inspiration - minimalist, with few colors, to keep with the newsletter theme
Tip of the moment - from (rip) Twitter
The interface of the moment - because if you haven't figured it out yet, we like it here!

Do you have a link that talks about video games, interfaces, game dev or design? Let me know.

Want to receive the next article in your mailbox directly? Subscribe here, and build step by step better interfaces for your games.

Creating a grid with Game Maker Studio 2

Indieklem — Sat, 08 Oct 2022 09:14:18 +0000

If you want to create a checkerboard level for a chess game, or a turn-based game like Advance Wars 2 (which by the way is a great game, if you don't know it, play it!), you're in the right place to start. In this tutorial, we will learn how to create a grid using a 2-dimensional board. Then we'll fill in the grid with the different objects in our level.

Quick introduction: the 2D table

When I talk about a 2D array in GameMaker Studio, it is simply an array where each entry contains... another array. Most development languages have this type of variable, and it is a must in video games. In this way, you can store a lot of information in an orderly way, whether it's your future level or a list of characters and their favorite colors:

// Player
array_2d = [
    ["Mario", "Red", 1],
    ["Luigi", "Green", 2],
    ["Peach", "Pink" , 3]
];

// Output result
array_2d[0,0] = "Mario";
array_2d[0,1] = "Red";
array_2d[0,2] = "1";

To learn more, I invite you to visit this page.

Initialization and creation of the grid

To begin, we will create an object called oGrid and initialize in its create event a 2D table which will be used as a level. We wish to obtain a level of 20 squares in length and width, with squares of 32 pixels.

// Create event oGrid

depth = -1000;

// Width & Height size
gridWidth  = 20;
gridHeight = 20;

// Box size
boxSize = 32;

// Create 2D array filled with 0
for(var i = 0; i < gridWidth; i++){
    for(var j = 0; j < gridHeight; j ++){
        global.grid[i, j] = 0;
    }
}

Let's put this object in our room and... Congratulations! We have an object oGrid which contains a 2D array:

depth -1000 so that the grid is above the rest
gridWidth and gridHeight is the size of the grid
boxSize is the size of each square
And global.grid the variable that contains our grid, currently all cells contain the value "0"

As you have seen, we use the word global to define our grid. Being an essential element of our game, and as we will use it often, it is better to use this type of variable.

Draw the grid with the draw_line() function

To view our 2D table we can use the debugging tool provided by Game Maker Studio, and then look at what is in the variable global.grid. The second solution is to draw it on the screen. Knowing that this solution facilitates our life during the debugging phase, here is what we must write in the draw event of the object oGrid to make our grid appear:

// Draw event oGrid

// Set opacity & color
draw_set_alpha(.5);
draw_set_color(c_green);

// Loop trought each row and column
for (var i = 0; i < gridWidth; i+=1){
    draw_line(0, i*boxSize, room_width, i*boxSize);
}

for (var j = 0; j < gridHeight; j+=1) {
    draw_line(j*boxSize, 0, j*boxSize, room_height);
}

// Reset opacity & color
draw_set_color(c_white);
draw_set_alpha(1);

With these few lines of code, we now display the 400 cells (20 * 20, I'm a math whiz, but this is good) of our level:

draw_set_alpha and draw_set_opacity allow you to change the opacity and color of the lines
The two loops for go through the grid
And draw_line draws horizontal and vertical lines at each iteration

Adding walls in the level

Let's add elements to our level and then transfer them to our grid. I propose that we add walls: to do this, we need to create a oWall and assign it a sprite. For this tutorial, I advise to use a sprite of 32px by 32px.

Then use the room editor in Game Maker to place the object in question in the level. To make it easier let's set the grid size to 32px and use the snapThis way the elements will always be positioned on a multiple of 32.

At this point we have a grid drawn and objects in our level, but the two are not linked. Indeed, the objects are present in the room, but at no time have we added them to our global.grid. I don't want to keep the suspense going any longer, that's what we'll do now.

Inserting the walls in the grid

// Create event oWall

// Array position
var _x = x / oGrid.boxSize;
var _y = y / oGrid.boxSize;

// Add id to the array
array_set(global.grid[_x], _y, id);

Congratulations, every object oWall of our room is now added to our grid when it is created. Be careful, for this to work, make sure that the oGrid is created before your objects oWall in the order of creation of your room, otherwise you will try to access a variable that does not yet exist.

Add objects on several squares at the same time

Let's imagine a world where one of your walls is 32px wide and 16px high (incredible, I know). With our code, it will be added only on the square where it originates, and not on all the squares it overlaps. Here's how to fix this problem:

// Create event oWall

// Array position
var _x = x / oGrid.boxSize;
var _y = y / oGrid.boxSize;

// Obj size
var _width  = sprite_width / oGrid.boxSize;
var _height = sprite_height / oGrid.boxSize;

// Add the id of the object on the grid
for (var i = 0; i < _width; ++i) { 
    for (var j = 0; j < _height; ++j) {
        // Add id to the array
        array_set(global.grid[i + _x], j + _y, id);
    }
}

We calculate the size of the object in relation to its variables sprite_width and sprite_height
We translate this into number of cells with / oGrid.boxSize
We loop on these and modify array_set() to add the object on the boxes in question

Detect the walls contained in the grid

That's great, now our grid contains the ID of the objects added to the room. Let's try to modify our code to view the grid to show the boxes blocked by walls.

// Draw event oGrid

// Set opacity & color
draw_set_alpha(.5);
draw_set_color(c_green);

// Loop trought each row and column
for (var i = 0; i < gridWidth; i+=1){
    draw_line_width(0, i*boxSize, room_width, i*boxSize, 1);
}

for (var j = 0; j < gridHeight; j+=1) {
    draw_line_width(j*boxSize, 0, j*boxSize, room_height, 1);
}

// Display values
for (var i = 0; i < gridWidth; i+=1) {
    for (var j = 0; j < gridHeight; j+=1) {
        var _value = array_get(global.grid[i], j);
        if(_value != 0) {
            draw_set_color(c_red);
            draw_rectangle(i * boxSize, j * boxSize, i * boxSize + boxSize, j * boxSize + boxSize, false);
        }

    }
}

// Reset opacity & color
draw_set_color(c_white);
draw_set_alpha(1);

Our table is browsed with the loops for
Then the values contained for each iteration are retrieved with array_get(global.grid[i], j)
And finally, if it is different from 0 which is our base value, we display a red rectangle with draw_rectangle()

Conclusion

We have a grid, which contains the walls of our room, and we know how to detect them. And that's it for this tutorial! Here is what you can do next:

Add more than one object per box
Destroy a wall by clicking on the right square
Adding elements on the fly
Move a character square by square, checking for collision
Or use path finding algorithms to ensure that a path is available

If you have any questions about this tutorial or a specific need, let me know in comments so we can talk about it together.

See you later!

Originally published at https://indieklem.com on October 8, 2022.

8 UI/UX tips about password design

Indieklem — Tue, 09 Nov 2021 10:25:28 +0000

With the multiplication of saas (service as a software) these last years and the security problems linked to the fact of having an identical password for each service, I find myself using the « Forgot password » page much more often than before.

If this can be corrected beforehand thanks to password managers such as 1Password or LastPass, with the « no password » methods implemented by tools like Slack or the social login here are a few UI/UX tips to apply to the design of your « Login » and « Forgot password » pages.

Users who try to log in, create a new password or reset their password will be eternally grateful to you.

1. Add a button to hint the password

The first thing to do to avoid mistakes is to offer your users the possibility to see the characters they just typed in the password field. This feature is often represented by an « eye » icon on the right of the field.

It’s simple, basic, as my favorite singer would say but it’s not always available.

For those who know the browser console (press F12 now and enter a wonderful world) you can simply change the type= »password » of the password field to type= »text » and see what you have written.

2. Show if the Caps Lock key is on

Tell your users if the Caps Lock key is enabled when they type their password.

But don’t worry if it’s not, there is no need to display the text « Caps Lock is Off ». Few users will see the message and act accordingly.

3. Show if the Num Lock key is on

The same UI/UX design practice can be applied with the Num Lock key

4. Limit password conditions and display them

Display precise explanations when creating the password, don’t hide them in an tooltip to bring them out only when your user makes an error. Save him time and frustration. A real time validation is also a real plus.

5. Show the conditions required when creating the password

Remember… It was 6 months ago, to create his password you asked your user to add:

At least 1 uppercase
At least 1 number
At least 8 character
And the last 3 digits of his credit card (Wait, what? Did you really ask that?)

A security measure, a fashion effect, a copy cat because the competitor was doing the same or a useless waste of time? It doesn’t matter, you did it. And today he doesn’t remember these constraints that you imposed. So if he makes a mistake while login, make his life easier and remind him. Remind him the conditions required days, weeks, months or years ago, I promise you it will help him.

6. Delete the password confirmation field

If you follow the previous steps, especially the one that allows the user to see what they are writing, then the password confirmation field that was a safety feature (a long time ago in a galaxy far, far away) to avoid errors becomes obsolete. It’s already a pain to type the password once, don’t make it twice.

7. Fill the email field on the forgot password page

The process when your user realizes he have forgotten their password often looks like this:

Comes to the login page
Types in his credentials
Receives an error message
Realizes that he does not remember his login information
Clicks on the link « Forgot your password »

And that’s where the magic happens, because at this point in the user’s journey, you already know their email address. Yep. They just typed it in a few seconds ago. All you need do to is to fill it on the present page so that they don’t have to write the same things over and over again. Remember in design every second saved matter.

8. Suggest creating a new password rather than automatically generating a new one

Who’s going to remember your long, complicated machine-generated password? Spoiler Alert: no one. Whether it is for security reasons or to let the user use his password manager, it’s better to let the user create a new password rather than randomly generate one in the email they will receive from you.

TLDR:

Here is 8 UI Tips to make the life of your user easier on your login and password lost pages. Remember, less friction is more conversion. You don’t want to spend time fighting with bad interface, neither does your user.

Add a button to hint the password
Show if the Caps Lock key is on
Show if the Num Lock key is on
Limit password creation conditions and display them
Show the conditions required when creating the password
Do not add a password confirmation field
Pre-fill the email field on the forgot password page
Suggest creating a new password rather than automatically generating a new one

👋🏻 Thanks for reading me, this article was originaly posted on Jimmy Lollipop.