#game ux

[geekersmagazine]

Game UX - How to Blend Game Design and UX?

In the vibrant world of video game design, the fusion of aesthetic appeal and functionality is central to creating an immersive and engaging experience for players. Game design and User Experience (UX) are two halves of a whole that, when perfectly blended, lead to the creation of games that are not just fun to play but also intuitive and accessible. It does not matter how nice a sports vehicle…

View On WordPress

[leearob]

ITGM 405 Blog #1

In the recent weeks I have started a project for my senior Studio class where we work on one long portfolio project. There is free range of what we can do, with some students programming a game and others modeling characters or environments. I chose to create the UX/UI design for an imaginary game which I have titled “Farming Protection Program.”

Farming Protection Program, or F.P.P for short, is an imaginary farming simulator game where you play as a character who recently stole valuable information from a foreign government and has to go into witness protection program. They have to be a farmer by day while at night you have to protect your crops from villians and foreign enemies at night.

The past 3 weeks I managed to finish 3 versions of wireframes for my project and they went under 5 different user testers to see what the issues were involving placement. Wireframes are meant to be in greyscale so that users can focus on placement before they see the visual design.

Above is the user testing that my wireframes went through. I found that I lacked a direction and that the wireframes weren’t cohesive so when I worked on my final wireframe I took the things that my user liked and didn’t and tried to apply it to a more cohesive design.

This was the final wireframe. I included some icons I also drew to help with context for the users. It underwent 3 more user tests just so that it could be nitpicked and get feedback as it was a completed and cohesive wireframe. (Note the backgrounds are not my property. They were simple placeholders that helped with context).

After, I had to come up with the visual design. Doing this required me to think about a color palette and font that helped with the style. I struggled with this at first and decided to work on creating more art such as icons and things of that like. After doing that I felt a lot more comfortable making the visual design, and they helped me a lot. The icons really helped with the visual design.

Included is the title screen, a HUD, an inventory, a main menu, a weapon customization screen, and a character screen. It has begun user testing and has already gotten some good feedback, but I haven’t finished the usertesting quite yet. 

More updates to come!

[ilovegameui]

Let’s Get Started... with a Rant!

I’ve been wanting to start this blog for a long time because there are surprisingly few resources for game UI/UX designers out there. And let’s be real, UI/UX wasn’t even a thing like ten years ago-- the field is finally being taken seriously, and it’s nice to finally see better UI/UX in games nowadays.

Even still, it is disturbing how it seems there are very few best practices documented out there for making game UI... which brings me here. Hopefully this blog entertains or informs someone down the line. I’ll be posting tutorials, tips, reviews, my work, and other rantings about the game industry and game UI/UX design specifically.

And what better way to start than with an unpopular opinion article! We’ve all seen terrible UX design where it seems like nobody was paying attention to how the final game came together... but today’s topic is about people who think way too hard about UX. I’m talking about all those fluffy articles written about user experience with buzzwords. 

Before anyone says anything, I am in no way discounting the value of UX and thorough research. It’s the attitude of these articles that baffles me... They all sound like they’re written by robots studying players/users like they’re some kind of alien lifeform.

All it takes to be an effective UX designer is a talent for information layout (graphic design, visual hierarchy, etc.) and some hard work playing, living, and breathing the game you are designing an interface for. By far the biggest fault I see in other UX designers is not doing the latter... they want to treat the product like it’s dog food-- that is, 1) something that they develop, but don’t consume, and 2) that is consumed by a creature that they have to study, that can’t communicate with them or properly explain what they want or like. 

(I’ll add a little disclaimer here saying that yeah, maybe the average player can’t tell you in depth why a certain design or layout isn’t working for them, but the amount of disrespect and treating of players like “rocks with arms” that need every little thing spelled out for them is appalling, and this is quite common in the industry)

It sounds stupid to say that being an avid player of the game you are developing is the key to success, but seriously, not enough UX designers do this. When you’re an active consumer of a game, you know exactly how the game design works. But more than that, you experience the emotions of being a player, thinking and feeling what they feel. You know when gameplay is dragging or tedious, you know what the most frustrating moments and/or pinch points are, as well as the best and most exciting moments. 

And as a UX designer, that’s where you can learn to smooth out those rough gameplay flows, easing the tedious and frustrating points, and make the exciting moments even better. That’s it. Simple.

I’ll give a quick example of this with Desinty 2. Before I started playing, I would hear people complain about various parts of the game, but I never knew what those things were until I started playing and sinking countless hours into the game. Now, I can give examples for those 3 moments above:

1) A tedious moment: The load times between planets are tedious, and it’s also a pain to have to go back to the Tower to look at your inventory/collect bounties

2) A frustrating moment: Random teammates in Gambit will frequently steal those last few motes you need in order to summon a blocker

3) An exciting moment: Getting an exotic drop

I’m sure every player (non designer) knows about the above 3 moments, but as a designer I can now take this experience that I have as a player and begin to dissect and come up with solutions for them.

For the tedious moment, I would have players load into the Tower upon game load, instead of out in Orbit. I would also design a UI system that would allow you to store/retrieve items from your main menu and get quests from the map screen. 

For the frustrating moments in Gambit, better UI needs to be made to help communicate to teammates how many motes you have... I would probably do this with a combo of more bold/obvious mote UI counters, plus audio cues and coloration (i.e. a teammate is flashing or something when they are close to getting the last mote needed for a blocker). The Drifter could also include these developments in his commentary as he talks over the fight.

Lastly, for exotics I would think about making the moment juicier with particles, or even a larger piece of UI a la the level up/rank up banners. Another idea would be to really highlight special exotics, such as those only obtainable from Nightfall strikes, or alternately having an ultra fancy moment for exotics that you are collecting for the first time. 

Currently, getting an exotic has a dramatic sound effect and some slightly fancier visualization, but for the most part it has the same animations as picking up any ol’ engram. I’m at the point in the game (and I’m sure lots of other people are too) where I’ve ground out most of the content, and I’m only missing a few of those ultra rare exotics. In fact, I don’t even play Destiny regularly anymore because I’ve obtained most of the content I care to collect, and when I last played I didn’t even get excited when I see those yellow engrams drop anymore since I knew they’d be dupes :(

The above are just examples, and by no means perfect solutions, but my point is that the moments I described are things that all players know about, but that designers can make even better... and that only by playing avidly are you able to identify those moments. The me that heard friends and coworkers complaining about it would never have been able to come up with solutions so easily and directly if I had treated the game and players as something to be studied out of a text book. So let’s stop reading lofty UX articles that contain a ricegrain of useful information at best and play the game already!

[devcmarix]

Racing Gaming App Animation

Do you miss Road Fighter? Small chunk of Car Racing Gaming application project worked upon by us.

[indiexp]

My Oasis

Hi everyone! Today I’ve got a mobile game for review. These are becoming increasingly more common on my blog here, so I though why not keep it up?

My Oasis is a relaxing simulation game by Buff Studio Co focusing on sounds and relaxation. The player upgrades the Oasis and buys new creatures to thrive in it. So let’s get into it!

The game itself is fairly simple, the player taps to collect the soft currency (hearts) and completes small challenges to receive the hard currency (diamonds). These challenges vary from upgrading the Oasis and diverse Virtues to completing musical mini games.

When it comes to the HUD, the visuals itself are clean and quite fun, but the game screen is perhaps a bit too busy.

The rest of the menus keep to this simplistic style, both in game and on external menus.

There’s a huge variety of ground or flying animals that the player can buy, either with soft or hard currency depending on the rarity of the creature. These animals then roam the Oasis, singing songs or communicating with the player from time to time.

There’s also a few weather options like making it rain or thunder.

The animals sometimes will show speech bubbles which the player can reveal, or reveal new tunes that play and show up at the bottom of the game in the form of musical notes. To complete these musical challenges the player has to listen to the sounds played and try to match it to the notes at the bottom. 

Unfortunately, this is one of the features of the game that falls a bit flat, personally - the music stave is visually distorted in the HUD and the notes are much bigger than possible to fit in the stave. In the screenshot above, taking into consideration that this is a Treble clef the C should be in the upper middle position but in seems to be on the bottom middle, and the general note placing is just confusing due to their size. This is not a problem if you’re just trying to play the sounds by ear, but it’s a bit frustrating for a player that is musically trained. (I also don’t entirely understand the decorative Bass clef).

Another thing that has to be pointed out about this game is that their monetisation model is very add-heavy. Taking into account that this is supposed to be a relaxing game, having our Oasis animals pushing loud adds onto us isn’t perhaps the best option. I would have been happier to see the adds restricted to unlocking rewards chests, it feels like a fairer exchange than having to watch adds no matter what from x time to x time.

My Oasis is overall more visually pleasing than it is relaxing, taking into account elements like loud adds, constant tapping, fast moving goals etc. Still, it can be beautiful at times, immensely versatile, and I love the addition of the several virtues.

I will definitely keep playing and evolving my Oasis!

[indiexp]

Oxenfree

Hi everyone! Today I’ve got a game review that’s been long coming. I’ve been meaning to talk about Oxenfree on here for a while, it’s one of my favourite horror/thriller indie games, and the user interface is really interesting on this one. 

Created by Night School Studio back in 2016, it’s part coming of age part adventure/thriller, and has some really original ideas both in the writing and the actual UI.

In case some of you haven’t played it, I’ll try not to spoil too much of the story. Our main character is Alex, a teenage girl meeting up with her stepbrother and childhood friends to spend a night at a local island. Things get progressively weirder as the game advances and reacts to the players earlier choices.

The mechanics are very simple. The player interacts with other characters by choosing from speech bubbles, interactions that are saved and later have an impact on Alex’s relationship with her friends.

To commands are WASD to move and Enter to interact with objects (displayed with a small circle and text for clarity). This makes it possible to do several things at once, like responding with a speech bubble as you keep exploring the different sets.

One of the most interesting interactions in the game (and the main way to communicate with the freaky radio spirit world) is using the radio. 

By pressing Shift Alex opens up her radio and begins tuning it (mouse press+drag) until the right frequency is found. The player can find the right radio frequency by listening to the sound cues and detecting changes in colour on the radio dial - red meaning they’re close. This is a really interesting mechanic, and given that it takes a bit of time to adjust the frequency, the player has enough time to begin feeling a bit uneasy. This combined with the haunting minimalist synthpop music and static sound effects really makes for an unnerving experience and gives the game a lot of atmosphere.

The menus are simple - I quite like the choice of font, it’s very teenager-y. Even if I’m not a huge fan of the layover the game has in a few pop-ups, it’s nothing too confusing.

The options shown above represent also one of the greatest things about Oxenfree. If I were to describe it in any visuals, I’d say this game is a circle (a triangle could work as well). It can be played as a one off, and enjoyed like that, but given that the game never really ends, it can be played back and forth, where the end feels like the beginning and the beginning feels like the end. All the players choices are saved in a timeline and unlock new features and stories.

Oxenfree has a really suspended in time feel to it, and this is one fo the reasons I’m so fond of it.

The map feature is very simple and visual. There aren’t too many details, but the language is clear: the colouring represents where your character is, and the faces represent all of Alex’s friends. Missions are highlighted by an arrow and text, as shown in the screenshot above.

Another great feature that ties the story quite nicely, are the polaroid photos the group keeps taking as the game progresses. They serve as benchmarks and by the end of the game they leave a big impact.

A bit further into the game, a new mechanic is added. Alex gains the power to turn back time on certain occasions, and as the symbol of a rewinding tape appears the player can use the same motion that’s used in the radio to undo actions and go back in time a few minutes. As Alex affects time over and over, the glitches seem to worsen, which makes it feel like there are consequences to these actions.

Overall, I would really recommend Oxenfree, especially to anyone that likes horror/ghost stories/thrillers with an 80′s twist. The story is heartfelt and tremendously well written, the soundtrack is haunting and the characters are remarkable. More than finding out what happened in the island, the player will find out more and more about the protagonist Alex and what haunts her.

Get it here: http://nightschoolstudio.com/oxenfree/

[indiexp]

Monument Valley and UX

Hey guys! Today we’re in for a bit of an oddball review. That’s right, I’m talking about Monument Valley, poster child of mobile game design done right.

The creator studio Ustwo is at the forefront of innovative UX solutions and design thinking approach, and Monument Valley has the been the game that popped in my mind whenever I thought about great game UI/UX for a while now. So this won’t exactly be a review per se, but more of an exploration of the user experience themes in MV, and how they make for a successful game - with a successful sequel launched just last year.

In case anyone has been living under a rock for the last few years, Monument Valley is a meditative puzzle game that relies on perspective tricks, Escher style, to solve spacial challenges. It goes without saying that this game is breathtakingly beautiful, and there’s a lot to learn on how a seemingly simple design can be so eye catching (this is a theme in MV). All the artistic details like the palettes, gradients and small bits make it simply enchanting, and more than that, memorable.

The main menu on MV is the level selection menu, where a few of the mechanics/cues are introduced. The other options/usual settings are tucked away where the user can access if needed, but they don’t interfere with the level selection.

The tutorial is also very quick an only introduces one mechanic. I think one of the reasons this choice was made was so that the player can learn more about the playing style than the specific action, as a lot of actions are introduced later without a tutorial.

In the gameplay itself I can find some very interesting user experience principles, the kind of concepts that are great reflections on both game design and interaction design. These are the sort of ideas that are at the forefront of current design trends, and that I believe will be even more relevant in the future.

So in no particular order are some ideas I took away from my play-through this time:

Human Centered Design is more complex than we think

With the rise of user focused design as an increasingly relevant concept in games, sometimes we as designers can get caught up in trying to make the experience as easy and fast to learn for the player as possible. 

Monument Valley proves that while this is important, there are more aspects to what make a great user experience. Namely going beyond just making it easy on the player, and exploring more complex questions like “How do we learn?” and “What do we get excited about?”.

For this specific reason, this game teaches you not how to play the game, but how to think. And the psychological reward is much more valuable for that.

Simplicity + complexity makes for a richer experience

Less is more. We all heard this quite a fair bit in our lives, and if you’re a designer this was practically drilled in your brain during your educational journey. I do believe, however, that this saying should come with an additional *if*, should we mistake this for the advice holy grail of design.

While we should always aim to cut down on the clutter, we should also be constantly aiming for more value in our product/app/game, and the way to do this is to be able to distinguish the clutter from the extra steps that will make our experience richer for our user.

So for this reason, while this game cuts down on a lot of UI elements, specific mechanic tutorials, and keeps the visuals very minimalistic, it doesn’t let go of a lot of more complex interactions and themes. 

The value of the game is significantly raised by complex level endings, mind challenging puzzles that come without previous explanations (that first time you have to rotate the whole puzzle to use a perspective distortion to get Ida across a bridge is pure magic) and the challenge of deep, intuitive learning.

Establishing the Rules and the importance of cues

Now, where this game really shines is on how intuitive and responsive it feels. The sound is a huge part of the equation here, and I’m a big fan of how it reacts to the players manipulations of the architecture and the world, making MV feel like a living, breathing thing. 

This is introduced right at the start, in the level selection menu, and is a constant throughout the levels. Sound cues give the player intel on if something can be interacted with, if it’s moving, or if it has shifted successfully.

The abundance of visual and sound cues as an alternative to a more direct approach, prove that this sort of concept can work beautifully. By doing this you’re giving the player a real chance to take the reigns so to speak, and to really feel in control. This again makes solving a puzzle all the more rewarding, because if you’ve provided the player with independence, you’re also given him a heightened sense of accomplishment.

This is all I have for now on this game, but I’ll be finally playing MV2 soon-ish and I’m looking forward to doing another review. As always, playing anything by Ustwo is a delight.

What did you think? Are there any specific games you look up to in UI/UX terms? I’d love to know!