This article discusses strategies for attracting players’ attention through effective UI/UX design. The author, Anna Pisarevskaia, UI Designer at Belka Games, emphasizes the importance of understanding human perception and how it shapes our interaction with video games.
This material will be useful for both UI/UX designers and game developers, as well as for game marketers and producers.
Information processing follows specific patterns. By leveraging object placement, shapes, color schemes and design principles, we can guide users’ emotional responses. In this article, I’ll show you how to use UI/UX to direct players on the desired journey and ensure they have a rewarding experience.
The Way We Perceive Information Is The Key
To truly guide a player, we must understand their mindset. Hermann von Helmholtz pioneered the study of visual perception, suggesting that our brains create images based on past experiences and expectations. British scientist Richard Gregory expanded on this, proposing that our brain constructs a complete image from tiny details. So, when we see something, we might not get the full picture—our brain fills in the gaps with what it assumes should be there.
Here’s what we need to remember about human perception:
- Sense Making: We constantly interpret what we experience through our five senses
- Flawed Views: Our mental image of the world isn’t perfect; our perceptions are colored by our beliefs
- Thinking’s Role: Cognition, or our thinking processes, helps us understand and navigate our surroundings
- Diverse Views: The same scene can look different to different people
- Attention Limits: We have a limited attention span, usually tuned into what matters most to us at the moment
Sensory Processing and Sensory Input
Perception is how we give meaning to the world around us, shaped by our past experiences. We can divide it into:
- Sensory Processing: How we interpret things based on past memories.
- Sensory Input: What we directly sense and feel.
Are you a UI designer?
Belka Games has a job opportunity for you!
Lead UI Designer (R&D)
Remote or Relocation to Cyprus, Georgia, Lithuania, Montenegro, Ukraine
Sensory Processing
We all see the world through a unique lens crafted by our beliefs and personal experiences, often referred to as ‘Mental Models.’ These models help us recognize and understand everyday objects and ideas, like instantly knowing a pencil can draw.
Everyone has a vast collection of these mental models, even about video games. Great interface designers tap into these widely-accepted models for a seamless user experience. For instance, if you’re adding an email feature to your game, would you use a familiar envelope icon or a unique new design? The envelope is the obvious choice because it’s so deeply rooted in our collective understanding. We recognize it without thinking.
Most video games have shared elements, not because of a lack of originality, but because these familiar touchpoints resonate with players. It’s about building on what players already know so they can quickly dive into the game. The trick is to take something familiar, like a standard feature, and add a unique twist to make it memorable.
But for completely new features, our strategy changes. We deconstruct how players might interact with it, taking small steps and relying on broad mental models. This way, we can innovate while still making the game intuitive.
Remember, our ingrained habits even influence how we absorb information. For example, in many regions, people read left to right. A popular example of this is the Gutenberg diagram, which outlines our eye movement patterns across a page. Key areas, like the top left and bottom right corners, get the most attention. These insights are invaluable when designing game interfaces.
Sensory Input: Size, Color, Shape
In today’s world, users face a constant flood of information. To keep pace, people are adopting what we call ‘clip thinking,’ focusing on quick sound and visual bites to assess whether they like something or not. As a result, modern information consumers often struggle to deeply analyze or reflect on content. Emotions take the lead. This leads us smoothly to our second point: Sensory Input. To seize attention, leverage the user’s emotions.
An efficient UI should connect with the user on an emotional level, triggering feelings. In the digital domain, two senses come into play–vision and hearing–which are influenced by the following elements:
- Color
- Size
- Position
Let’s delve into each parameter.
Color
Colors play a pivotal role in setting the mood and guiding emotions. The right color choice can enhance an atmosphere, while a poor match can lead to visual chaos. Think of colors as visual cues that can lead users through an interface and elicit specific feelings.
Remember those mental models we talked about? They come in handy when choosing colors. For instance:
- Red grabs attention, signaling caution or importance.
- Green, linked to prosperity and freshness, is a go-to for “play” buttons.
- Blue, representing calmness and trustworthiness, is perfect for standard icons like settings or mail.
- Purple exudes luxury, mystery, and occasional whimsy, ideal for special or less-frequent interfaces.
The power of color in affecting emotions can’t be overstated. A rich, vibrant palette can uplift users, while a more monochrome setup offers tranquility. However, choosing a color isn’t enough. It’s crucial to consider aspects like brightness, contrast and tonality.
Let’s say you want to spotlight the main prize and points in a window. Then the central area should be the brightest. A helpful tip? Turn it to grayscale to check the tones. Decorative elements shouldn’t overshadow the main content, so keep their contrast low.
Lastly, if you want to direct players to a specific action, brighten that button. It’s all about using colors not just to beautify, but to guide and evoke the right emotions.
Size
Next, let’s dive into the size and shape of our interface elements. Every main interface piece should stand out and be easily recalled by players. A great trick is skeuomorphism – designing objects to mirror real-world items. This way, players instantly know a backpack means inventory and a gear signifies settings.
Shapes register faster in our brains than color shades or intricate details, so keep interface objects straightforward. Overcomplicating with intricate designs can confuse players. Remember, the simpler the icon, the quicker a player gets it. The best icons? Ones players recognize instantly, understanding their function even without labels. For instance, in the picture above, we’ve swapped heavy black lines for color-matched ones, reinforcing the object’s unity.
Steer clear of cramming too many elements into a silhouette. From afar, they’ll just blur together. When creating icons and objects, keep in mind players often view them from a distance. So, prioritize bold shapes and broad strokes over tiny details and textures. ForIn the picture above we also tweaked an icon to enhance visibility by lightening its dark areas, clarifying its volume.
Sometimes, it helps to exaggerate certain features, especially smaller ones. Our eyes can’t focus on too many details simultaneously. This means we need areas with fewer details, giving our eyes a break. Take the Taco icon for instance; instead of overcrowding it with tiny tomatoes, we’ve opted for fewer, larger details to make its essence clear. Similarly, the “porridge with worms” example didn’t hit the mark – it was actually pumpkin porridge, but all we see are the “worms”.
The golden rule for UI? Keep it clean and easy to grasp.
Position
One crucial aspect is object placement. It’s vital to organize interface elements into recognizable shapes like rectangles or lines. Our brains naturally spot these geometric shapes and piece them together. So, during design, always draw lines mentally or actually to ensure your window elements strike a balanced composition.
It’s also essential for users to easily shift their focus between object groups; they should seamlessly blend together, establishing a visual flow that’s intuitive and enjoyable (you can see it in the picture above). This is about mastering the spacing between information layers. If items are close, we perceive them as one; if they’re apart, they’re distinct.
How else can we accentuate information layers? Playing with volume is a good strategy. Set some ground rules – decide which layers should stand out and why. For instance, in one design, the button was paramount, so we amplified its size. We followed this by giving clickable elements a distinct volume, guiding the player’s navigation. Remember, too-flat design layers can turn off users, making their experience tedious and mentally taxing.
One effective method to steer the user’s attention is using guiding vectors. Originally a drawing concept, vectors direct the viewer’s gaze and help organize a canvas into a clear grid. They highlight key focal points in a composition. For instance, in one design, we aim to draw users to a ‘golden ticket’ button. To make it pop, we might add an arrow pointing towards it and sprinkle in some light animation for added flair.
In another design, we use guiding elements like lightning bolts from the header to spotlight the main object. The entire window layout can drive attention towards featured items. And don’t forget character interactions – a character’s gaze within the window can also subtly shift a user’s focus to a showcased item.
Last But Not Least: How To Implement Everything We’ve Just Learned
Let’s dive in and apply what we’ve learned, focusing on a game’s crucial component: offers. Here, we’re comparing two offers that market the same item. Spot the difference?
In the first offer on the left:
- A cluttered background competes with the item.
- A large character steals the show and doesn’t even look towards the item.
- An over-the-top, intricate title introduces visual distractions.
- There’s a confusing text about energy—is it 20 energy or 5 sets of 20?
- A detailed exit button tempts a click, but not for the right reason.
- It’s unclear what the player truly gains from this purchase.
Now, the redesigned offer:
- We’ve pared down the background to some atmospheric plants.
- We nixed the character — it wasn’t adding value.
- We’ve highlighted the main item and enhanced it with animated lightning bolts, directing focus to the purchase.
- The title and exit button got a minimalist makeover.
- We added a purchase sticker strategically near the exit, capturing attention every time a player’s eyes drift there.
Never forget: Your game’s interface is pivotal. Design it well, and players will engage more—boosting conversion rates and revenue.
