Designing UI for Multi-Character Games: A Comprehensive Guide

Ever since Spiderman 2 came out I have been mesmerized by the UI changes based on whether I’m playing as Spiderman or Miles. Being able to design comprehensive UI within a game, keeping in mind the UX of the game all the while making sure it looks and feels great is a unique challenge in UI design for games.

This article dives into what to keep in mind when designing UI for multi-character games by using lots of Spiderman 2 examples and a few other classics.

1. Distinct Visual Identity for Each Character

Each character should have a unique visual identity, reflecting their personality, abilities, or background. This can be achieved through:

• Color Schemes: Each character can have a specific color, like the unique HUD colors for the protagonists in “Grand Theft Auto V”.
• Iconography: Icons related to specific abilities or resources should be tailored to each character. This ensures the player quickly identifies which character they’re controlling.
• Typography: Using different fonts or font styles can highlight the uniqueness of characters, especially in dialogue or menu screens.
• Theme-Based UI Elements: Design elements related to a character’s background story, culture, or environment. Like in Spiderman, where Miles is so into DJ’ing that his UI and mechanics are electric. You can see this in several UI elements including a special DJ quest.
• Personal Emblems or Symbols: Characters can have personal badges, symbols, or icons associated with their past or abilities.

Miles DJ quest in Spiderman 2

The abilities as seen in Spiderman 2 are also distinctly different whether you are playing as Spiderman or as Miles.

2. Consistency Across the UI

While each character’s UI can be unique, maintaining some level of consistency is key. This ensures that the player doesn’t feel lost when switching between characters.

• Common Elements: Elements like health bars, maps, or inventory systems should be consistently positioned and function similarly across characters.
• Maintain a Unified Color Palette: While each character can have a distinct color, ensure these colors belong to a cohesive palette to maintain visual harmony.
• Standardize Interactivity: Ensure that buttons or interactive elements respond similarly across all characters to prevent confusion.
• Use a Consistent Layout: Elements such as health bars, energy meters, or mission objectives should be in the same location for each character.

Spiderman 2 does this consistency really well, where both health bars are found in the top left of the screen but both with their own UI coloring. The abilities are used and shown in the same location but with the theming of the character that the player is playing.

Spiderman 2: The health bar of Spiderman is classic and mature

Spiderman 2: Where Miles’ health bar is electronic and bright, its young and fitting Miles’ character

3. Seamless Transitions

Games like “Batman: Arkham Knight”, “Dead or Alive”, “Final Fantasy”, and “Kingdom hearts” allow for seamless character switching during combat. This requires the UI to transition smoothly as well.

• Transition Animations: Smooth animations can guide the player’s eyes from one UI setup to another, minimizing disorientation.
• Use Blended Animations: If the UI elements are animating, ensure the animations blend well without abrupt changes.
• Maintain Context: When switching, ensure that the player is provided context, such as the location or mission objective, so they aren’t disoriented.
• Consider Overlay Transitions: Brief overlay messages or visuals can help transition from one character to another, especially if the change is sudden.

Dead or Alive 5 Tag Team — showing seamless transition when character switching

4. Contextual UI Elements

Depending on the narrative or gameplay scenario, the UI might need to change, even for the same character.

• Dynamic UI: Elements can appear, disappear, or change based on the character’s current situation or environment. For example, in “Kingdom Hearts”, the UI changes based on the world you have arrived in.
• Adaptive UI: The UI could adapt based on the character’s health, status, or environment. E.g., a character’s UI might turn icy when in a snowy region.
• Scenario-Specific Tools: If a character has tools or abilities that are only usable in specific scenarios, only show those in the UI when relevant.
• Avoid Redundancy: Don’t display information that’s not currently useful. This helps keep the player focused on the task at hand.

Kingdom Hearts UI changes based on the world

5. Feedback and Affordance

Especially in fast-paced scenarios, players should instantly know which character they’re controlling and their abilities.

• Audio-Visual Feedback: Sounds or visual cues when switching characters can provide immediate feedback.
• Affordance: Icons or buttons should suggest their functionality. For example, a grappling icon for a character with grappling abilities.
• Vibrations and Haptic Feedback: For platforms that support it, vibrations can provide immediate feedback upon character switch.
• Use of Shadows and Glow: Elements can have shadows or a soft glow to indicate interactivity or importance.
• Descriptive Tooltips: Hovering over or focusing on a UI element can reveal a brief description of its function.

The tooltips as seen in Spiderman 2 also have a clear distinction in UI, allowing you to immediately see which character you are playing.

Spiderman 2: A clear, classic and mature tooltip indicating you are playing as Spiderman

Spiderman 2: The same tooltip but now for Miles, with its bright and young coloring indicating immediately to the player that they are playing as Miles.

6. Minimizing Cognitive Load

Having multiple characters can sometimes mean a lot of information to process.

• Layered Information: Information can be presented in layers, with the most crucial information being the most prominent. Secondary information can be revealed on demand.
• Grouping Similar Information: Group related elements together, e.g., all combat-related info in one section of the screen.
• Use Expandable Menus: Core information can be visible by default, with additional info accessible through expandable menus.
• Prioritize Information: Based on the gameplay moment, prioritize which UI elements are most crucial and make them more prominent.

Here you can see how the UI is grouped in specific locations on the screen, minimizing cognitive load for the player.

7. Tutorial and Learning Curve

Introducing players to multiple UI setups can be daunting.

• Staggered Introduction: Introduce each character’s UI elements gradually. This avoids overwhelming the player and allows them to get comfortable with one setup before moving to the next.
• Interactive Tutorials: Allow players to interact with the UI in a controlled environment to learn its intricacies.
• Use of Contextual Prompts: Initially, provide prompts or hints guiding players on how to use specific UI elements.
• Allow Customization: Let players rearrange or customize the UI to their liking, which can help them feel more comfortable.

8. Testing and Iteration

Finally, regular testing with actual players is crucial.

• Feedback Loop: Observing players can provide insights into which UI elements work and which ones confuse or frustrate.
• Diverse Testing Groups: Ensure your testing group is diverse to account for various perspectives, skills, and experiences.
• Use Heatmaps and/or eye-tracking: Analyze where players most frequently look or click to optimize UI placement and interactivity.
• Allow for Feedback: Create avenues for players to provide feedback about the UI. Collecting and acting on this feedback can lead to a more refined design.

Conclusion

Designing UI for multi-character games is a challenge but also an opportunity to enhance immersion and gameplay experience. A well-crafted UI can help players effortlessly switch between characters, ensuring they’re fully engaged in the diverse perspectives the game has to offer.