close
FM Design Team
FM Design Team

Website as a Game: 10 Hacks That UI/UX Designers Should Take From the Game Design

Ok guys, we have to confess that surfing the sites can be а boring thing to do even if they are brilliantly planned. Us, the UI/UX designers, we care about the user’s comfort and get very happy if we manage to create a clear, smart and intuitive flow. Now it’s time to think about making the process an interesting adventure.

 

Playing games is fun, considering that sometimes your brain has to make big efforts to find a good solution for a task. In fact, the users see the comprehension of a complicated interface of a game as a challenge (and yes, UI designers also have something the game designers can learn from), they get involved and start to perform goal-directed tasks with no pain.

Cyberpunk 2077 upgrade menu interface

Look at the menu of upgrading the character in Cyberpunk 2077 - there is a complex set of more than 200 parameters, but it does not stop the users from learning the options because the result usually exceeds expectations

The gamification penetrates everything, making the main task of a game-designer to “gamify all that is gamifyable”. Not only the activity itself, but also the menu, awards, learning, microintercations and even game-involvement.

The map in the Moving Out game is a small game inside a big

Micro or even nano games inbuilt into a big game give the user psychological satisfaction of resolving small issues. Broadly speaking our brain does not differentiate if the task is big or small - what matters is the endorphin worked out once the task is completed.

 

Let’s have a look at what the UI designers get inspired by in game industry.

 

By the way the gamification in interfaces has already been discussed in our blog on design, here is the link where you will find the article.

 

‘Okay, let’s go’

1. Еrror predicting

Game designers think over the game flow and user’s behavior so deeply and carefully that they can predict where a mistake or wrong action can be made, and they create separate mechanisms preventing the user from a false move.

If you try to sell some important of rare weapon in Cyberpunk 2077 you will be asked to confirm additionally if you want to do it, stressing that the action may be a mistake

In some interfaces the weak points are known in advance. This is where you’d better give up the idea that the user will waste time to better understand what’s going on, therefore it’s useful to guide him by sending a pop-up or a microanimation.

 

2. Relevant help

The game designers know where the user may have difficulties. Very often it gets obvious closer to the final tests, when it’s too late to change the design of the level. In this case the developers create special algorithms which track the user’s behavior pattern and assist him if he repeatedly gets stuck with some target action.

Example of onboarding in the Uncharted 4 game

If you got mislead in the riddle, the Uncharted game will notice it and drop a hint, so that you could move towards the correct task solution

3. Onboarding (of course with great gamification)

Let’s have a look at our onboarding flows. They are nice and smart, and well designed but yes, a bit flat:

Designed by Alex Gilev

and to compare - here is a game onboarding:

Ghost of Tsushima Game screenshot with example of game onboarding

While doing an external mission in Ghost of Tsushima the user gets additional errands encouraging him to learn the techniques on how to break though the more difficult parts further in the game. Solving these kind of tasks is complimented by upgrading the character

The learning process in a game is accompanied with emotional praising. The onboarding can be divided into a number of mini games with awards for passing each. It’s nice to fully pass the onboarding, isn’t it? :) Game designers have to find solution for the following tasks:

 

  • how to teach mechanics and not destroy the game vibe
  • how to involve the user into learning process or make him eager to get onboarded
  • how to check knowledge

 

The essential technique applied by programmers is learning while using. Given this there are a few pieces of advice for the UI designers:

 

  • learning process should go by small portions, on the need and in connection with the user’s moving along the interface
  • ask yourself a question: “What emotional or practical benefit will there be from the onboarding in this very place?”
  • learning should be praised
  • there should be an option to skip learning, but do it later, say, in user’s account. There should also be an option to review the onboarding and explore new topics.

 

4. Microinteractions

The game designers are the bosses at using the microinteractions, for these are the points that differentiate a good game from an excellent one.

 

These small events are used by the Ui designers as well, thus the game may become a very good source of inspiration and help to find a new approach where these microinteractions could generally improve the user’s experience.

Nice small interactions designed by Robin Holesinsky

5. Useless (useful) awards

The web designers often underestimate the power of encouraging the user’s actions. In majority of cases psychological or emotional support is enough to increase the user’s motivation to do some complicated or necessary actions on site. Some of the techniques of encouragement were mentioned above and here are some others:

 

  • Reaction on action. Confirmation that the action was made correctly assures the user moves in right direction. The games use that command very often in form of dialogues, music of interface
  • Microanimation. The action can be followed by awarding
  • Rewards or scoring

Rewarding of action in Trello with a nice little animation - is a good example of game mechanics, applied in SaaS apps

In fact even those who are not keen on gaining scores, still like getting them. That is an easy and spontaneous achievement, and everyone of us likes to get medals and win from time to time. This became the basics of the most well-known promo actions Wrapped from Spotify, where the site greets any musical preferences made by the user. That method can be implemented by bank applications or online shops (where you buy your 10th pair of sneakers). We made some thinking and found out that we can also praise our users in FlowMapp app, and what can be rewarded is the amount of sitemap pages or a number of prototypes created.

 

Some of the most important principles in game development:

1. Total testing principle

A good game should be totally well-planned. Absolutely every little thing - starting with prototyping and up to several steps of testing. For that reason the process can take up to 50% of the entire time of the product development:

 

  • prototyping of game mechanics for their check-ups on “real people”
  • prototypes of levels
  • creating of real prototypes of clothes and weapons, for better understanding of their features and acting mechanisms
  • primary testing
  • secondary testing
  • final testing
  • testing on real gamers
  • limited release
  • opening announcement and launching the game

Funny compilation of bugs in the primary release of Cyberpunk 2077. The developers were pushed to finalize the game in order to launch it earlier than planned which caused big reputational losses to the company. It took longer than one year to fix all the bugs and restore the good name of this truly genius game

Gaming industry also shows what can happen if the process of prototyping and testing is given less time that needed. A good example is the Cyberpunk developers, who incurred significant losses by having launched the unfinished version of the game, whose bugs became memes in no time and damaged the company’s reputation.

 

The errors and failures that appear in web-projects are not so popular to become memes of course, but what needs to be considered is that every bug leads to losses of income and users. In our competitive environment it is easier for the customer to forever give up the idea of using your website or service while there are dozens of similar ones at hand.

 

2. Don’t waste time for useless design

Is an important cost effective principle, more visible in game industry, for every pixel has its comparatively high price. To recoup the costs for game production one should not only follow the mentioned principles, but also direct the costs of development more effectively. That is why the game world gets optimized - no resources are wasted for something that a gamer will never notice.

Metro Exodus. The game is a first-person narration, and the main character is literally headless. That is reasonable - why would the designers waste time for creating the head, while nobody will ever see it? The same optimization works with many other scenes where the characters appear in the screen - the developers can avoid creating some problematic parts by focusing the camera on other objects

Summary

It’s great to find inspiration exclusively within your industry, but sometimes it’s also useful to borrow and exchange elements from other spheres for the benefit of both sides. For example, the UI designer may require a good gaming console, likewise the game creator may gladly apply the aesthetics of the UI designers for better interaction with the users thus making the game more attractive visually. Finding new sources in order to upgrade your experience and expertise can be a way to create absolutely exceptional projects, that will inspire others.

People also Like