What can product designers learn from UI artists?
Techniques to make your app’s UX/UI be more engaging
I’ve been working in UX/UI for 9+ years. Most of this time I had a chance to focus on designing mobile apps, websites, services, and products. Last year my main focus switched to mobile games and I realized one thing — while being so close — the design of mobile apps and mobile games — these two fields are separate and do not intersect much. If future UX/UI designers /UI artists are following the classic path of developing their skills then there is a high chance they are studying different disciplines one of which is focusing on the product side while the other is about video games only.
Working on mobile apps and websites, I hardly ever read the reviews where the mobile games were mentioned as examples of UX flow. Certainly, the flows are different, and this is something I want to compare in this article. And yes, there’s a gamification element — this you might meet from time to time, but is it the only thing in common?
The same comes to the mobile game industry — joining this club I see that it doesn’t intersect with the classical UX/UI. And that could be fine in some aspects like user flow or UI. Though when it comes to work processes like prototyping, testing features, or paying attention to the small details of UI elements — these are what UI artists could learn from their brothers from another mother.
Learn from games and UI artists
UI | Use of color
Being a UI artist your skill in using color is more than highly demanding and has to be on a really good level. Most of the games are full of color — this instantly brings a strong positive emotion which is at a core of a game.
Also working on the UI of the games you face the challenge — there are multiple elements like different currencies, rewards, icons, gauges, and buttons — how to keep having all of them bright on the same screen? The common approach is to use a dark stroke. It helps all the elements to stand out from the bright background and be visible enough.
For product designers, I would recommend challenging themselves with working on game UI with extensive use of color. That’s a great way to train your color perception.
UX | Reward feeling
Games are created to make you feel good and thus, you often get big and small rewards while playing.
During this flow each detail matter — like in the following example from Gold and Goblins there’s not only the emphasis on already opened chess. First, you’re attracted by the bright green color and “gratuit/free” sign. Then, you see a little shining animation that kinda invites you to make the following action — open the chest. When opening, another animation is happening to indicate the positive action.
Recreating a similar flow in, let’s say, service on renting a car or booking a hotel could be a bit extra. But thinking about adding rewards of a smaller scale in such flows could be a good thing to make a user flow more engaging.
Playfulness
Ok, so working on the app design you might still stick to more common UI patterns but how about adding playfulness on top of it?
You can see many apps having it in detail such as rounded corners, big bold text, bright colors, and illustrations. Even when the app is rather minimalistic and follows quite a straight-to-the-point idea as Uber does. A not long time ago they’ve added illustrations on the home page and this instantly makes the page look alive. This is one of the first things you see entering the app and it makes the overall UI look less strict and more engaging.
Checking the Headspace app you’ll see even more playfulness. Again, the basic UI elements such as the tab bar, search, and settings are simple. But things like the chapters of the app or the profile’s pic and background are bright and stand out. In this particular example, colorful images really match the idea behind the app since its’ goal is to keep users in bon état d’esprit.
Gamification
Gamification is an element of app&web UI design you might have heard about. The basic of this word is “a game” so it’s pretty easy to get the idea behind it — it’s a design technique of using certain elements from games in product design in order to enhance user engagement and bring the joy of using the app.
As a good example, I’d like to mention the Booking.com app. At the core of UX, they implemented Genius rewards — a system that gives you additional discounts once you passed a certain number of booked stays. But that’s not all, it also has a progression — different levels that give you a feeling of accomplishment right as they do it in games.
Take a look at the Merge Mansion game, all of the gameplay consists of progressions and goals/rewards to reach next. The same mechanism happens in the Booking.com app — you see you’ve progressed already and you got your reward, the discounts, and exclusive offers. All of these motivate and encourage you to keep on using the service, and that’s a good UX solution.
Hints on what to do next
Once you’re playing the game, you’re often guided on which action to do next. And this happens not only during FTUE (first-time user experience).
Many games are designed to make people feel relaxed unless it’s some hard-core games where you really spend lots of time getting to know the idea of that imaginary world and the actions you have to do. When these are casual, hyper-casual, or puzzle games they don’t have such complicated mechanics.
Providing a hint for example as a subtle animation emphasizing which action to choose next, we’re helping users to facilitate their choice and make the user flow feel easier to use.
In my next article, I might share with you the opposite processes — what UI artists should learn from product designers. Stay tuned!
Find more articles to read
5 UX tips I learned working in Gamedev by Julia Dzyubina;
Introduction to UX in Game Design by Alex Harbuzinski;
What is Gamification? by the Interaction Design Foundation;
And few of my articles related to this topic:
