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.
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.
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.
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.
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
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:
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:
The essential technique applied by programmers is learning while using. Given this there are a few pieces of advice for the UI designers:
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
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:
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.
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:
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.
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
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.