Improved ergonomy

Better experience

Hello ! Happy new year everyone ! I hope you'll enjoy this 2019 year ! ;)

So, to begin this year, all of us had to work on the ergonomy of an open source game we would like to improve. On my side, I wanted to work on a game that look like a "Mario Kart" game. This game is called "SuperTuxKart", a free game with the mascots of some open source software like GIMP's mascot or Krita's mascot for example.

The objective

Each of us had the same objective, rework the interfaces of the chosen game. It could be the in-game interface, the menu interface or both. So I decided to rework the in-game HUD (Head-up display) of SuperTuxKart's previous version. I prefered to keep focus on the in-game HUD in order to attract a larger public.


Firstly, I had to define the intended audience. A persona is a fictional character created to represent a user type that might use a site, brand, or product in a similar way.

The main persona is William, a 24 years-old student. He is a casual player, that means he doesn't play several hours and alone. He only plays with some friends one or two times a week.

The secondary persona is Michael, a 45 years-old father who works for an automotive industry. He is an abstinent, that means he does not play video games and have a lack of knowledge about Internet and video games.

And the ante persona is Ambre, a 20 years-old streamer on Twitch. She is an enthusiastic player, that means she finds out a lot of informations about her favorite games. She also spend a lot of time in order to diffuse her gameplays on Twitch.

Conventions in this field

So as to have a better experience, let's have a look on the other games of the same type.

In "Mario Kart" games, the HUD is pretty simple but it talks to every player, even the youngers and the olders. It displays only the importants informations like the position, the number of laps or the item you're holding.

In "F-Zero" games, the HUD is more difficult but adapted to the gameplay because you must keep in mind several informations that are very useful for the player. For example there is a life bar for the ship you control, the current speed of your ship or the list of the five firsts players of the race.

And in "Wipeout" games, the HUD is very futuristic and it more involves the player than a classic HUD. There is informations like the life bar of your aircraft, your current speed or the weapon/item you are holding.

Zoning of the HUD

To see how the final HUD will look like, we must do a wireframe of a zoning of our final model.

Zoning of the final model

As you can see, I put every important infomations on the screen but you can also see a "?" next to the "TIME" zone. It's because I wasn't sure about adding the time information. The new players that are intended doesn't have to absolutely see their lap time.

Final model of the HUD

Finally, I made the final model of the HUD.

Final Model of HUD

For this model, I made the position, the item box and the mini map slightly like in Mario Kart games. I took inspiration in F-Zero games for the nitro bar and in Wipeout games for the number of laps.

That's it for this week ! Hope you will enjoy this article ! See you next week !