Senior UX UI Designer - Warner Bros Discovery.
Tools Used
Design for a mobile Strategy 4X Game
Warner Bros Discovery
While working in WB Games, I was involved in exploring Main HUD Navigation for a 4X strategy game.
Working with cross-functional team members to research and develop user flows, info-architecture, wireframes, mockups, and prototypes.
In this type of strategy game, the focus involves managing and growing an empire, exploring a game world, and making strategic decisions to achieve victory.
I was gathering feedback and brainstorming with other team members, including Game Designers, Art and Production. Playing Strategy 4x Games and collecting comprehensive data on competitors. Exploring game features, interactions, UI and visual design elements.
Main HUD and Navigation
Tile Map - where players can see the entire game world and explore different tiles, castles and armies.
Informational UI elements and navigation with interactions for:
Selecting a tile.
Researching and exploring ownership.
Acting to improve resource management and expanding an empire.
Dragon Collection Resources and Empire Managemen, like food production, manage their city, dragons and make other strategic decisions.
Queast and Objective system - where a player can see a list of their objectives and interact, taking steps in progress throughout the game. Designing a mini version** and full screen version of a Quest system, with interaction and visualization to get real-time feedback and a list that helps to progress throughout the game.
Combat Screen - where players can engage in battles with other dragons, manage their resources, and make tactical decisions.
Victory or Defeat Screen - where players can view their progress towards victory conditions and see which dragons are leading the game.
Chat widget - where players can interact with other players and engage in diplomacy and trade.
This map was created for a logical and easy-to-follow structure that allows players to access different sections efficiently. Exploring other game HUDs and looking to simplify Navigation to help players quickly locate the information they need and understand the game space they’re in.
Top Bar focuses on the player, allowing the player to explore their character and see who they are in the gameplay. Also, explore the world beyond the map and set up their game settings. The left side focuses on the player’s goals, while on the right, where the player can take action. In my design consideration, the essential elements/links are located on the sides of the screen and are adapted for maximum thumb-finger size tap.
Simplifying Complexity
4X games present unique challenges with complex systems while managing many features and data simultaneously. I’ve come to understand that one of the common challenges in such complex games is the need to present a vast amount of information within the constraints of a small mobile screen.
Solution
Working with a team to prioritize essential information. Use collapsible menus, tooltips, and context-sensitive UI elements to manage information efficiently with visual hierarchy to ensure critical details stand out.
Progressive Complexity
Another challenge is how to delicate balance to gradually introduce game mechanics and features, especially in the early stages of the game.
Avoid overwhelming the player with too much information all at once.
Solution
While there was a dedicated Game Designer to research new player experiences, I supported the UX/UI exploration for a well-crafted system that introduces concepts progressively. By offering interactive tutorials and tooltips to educate players as they play. And provide optional complexity levels for experienced and beginner players.
Aiming to all Levels
Striking to engage different player knowledge and levels. This balance becomes even more critical as it aims to both players who appreciate the complexity and those who prefer a more straightforward puzzle gaming experience.
Solution
Learning from user tests, the pain points, and uncertain areas of complexity. Working to simplify the navigation, combining elements, and with intuitive HUD navigation and consideration for a future proof design that can incorporate dificulty level settings and progressive discovery of information.
Intuitive Data and straightforward User interface (UI)
How to organized UI that organizes information about each of the screens and offers easy Navigation throughout the game.
With UI that allows players to explore and guides players in understanding key game element, like: what is a tile on a map? Who is the owner, and how do you own a tile? How to manage their resources and City/Castle?
Solution
I was experimenting and sharing my recommendation with the team to develop an intuitive and visually appealing UI that provides clear information, organized HUD and easy navigation through the Map. To find solutions that work, I was hands-on in creating wireframes and interactive prototypes to test the experience. Experiment with components, tooltips, icons, and color-coding elements for quick comprehension. Incorporating guides and documentation to explain core concepts.
Explore and test accessibility
The challenge of displaying a large amount of information that needs to appear on a small mobile map, gameplay. Readability, text size, icons, touch target for actions, and spacing can all affect the accessibility and usability of an interface.
Solution
I took the time to create guidelines and templates that can be followed to ensure optimal touch target usability. Text, images, icons, and other elements are clear and straightforward with considerable leveraging and ‘white space.’ With information that effectively convey critical details and exciting messages to engage the player.
The HUD consists of a top bar with elements that are persistent. While the location of the top bar remains static, its content is customizable and will change slightly based on the specific screen or section the player interacts with.
The header (top bar) on the Tile Map will include the below links and information:
The components of the Topp-Bar header - sub-section:
Go Back to the map to provide a straightforward and intuitive way for users to return to the previous screen they were viewing.
Page Title: the header should indicate the current location or purpose of the local navigation panel. It should provide a clear and descriptive label to help players understand where they are within the overall navigation structure.
Back Arrow - to allow easy Navigation for players and consistency - the back arrow should appear in any full-screen layout to provide a simple and intuitive behavior for players to go back.
Close Button or Tap Outside - should be used to dismiss or close a specific element, small pop-outs, overly screens, or information panels. By incorporating these basic navigation rules, we ensure clear and intuitive Navigation between the different screens. And provide users with the necessary means to navigate, interact, and recover from potential navigational challenges.
It is recommended to position the global navigation elements on the edges of the screen within the visibility area, as suggested by the below UX/UI Size Guide Templates.
This placement allows for efficient access to the Navigation while leaving the center of the screen open for the player to interact with the map and observe ongoing interactions.
The information panel opens a tooltip to show territory ownership and offer CTA.
Players can tap outside to close the panel.
Chat Drawer -
Players can see a preview of the latest active chat. Players can open a full slider screen to interact with the chat. Players can hide the chat preview if they do not like to see running text reminders.
Accessibility has a significant impact on the user experience of players. Readability, text size, icons, touch target for actions, and spacing can affect the accessibility and usability of an interface. The challenge of displaying a large amount of information that needs to appear on a small mobile map, gameplay, means Navigation needs to be simplified and clear from their layout and assessability. Therefore, I took the time to create guidelines and templates that can be followed to ensure optimal touch target usability. Text, images, icons, and other elements are clear and straightforward with considerable leveraging and ‘white space.’
Don’t create actions and icons that are too small or close to each other. The distance and spacing between targets depend on the designed area, but consider the largest finger size to prevent accidental touch. By using smaller icons, consider more spacing to avoid accidental touch.
Elements that need to touch each other need to take into consideration the surrounding touch area.
Elements have to be placed within the safety-marked area.
The design should be adapted for optimal screen size. Make sure actions are large enough and spaced out for reliable interaction. Different screen sizes may have convenient and hard-to-reach areas for tapping. This is why bottom side buttons should be adapted for maximum thumb-finger size tap. Targets that are frequently used or critical to the functionality should be placed within easy reach and should be larger than less important targets.
The ideal tappable action menu size is 48px plus 24px (minimum) space to get a 72px finger target area. The essential actions are located on the side adapted for thumb size 72x72px.
Bottom menu action items on a tile map should display not more than 3-4 most important actions, plus two larger side actions. Calculation of maximum elements that could fit into the screen and its placement.
But of course, it is also all about being smart about the implementation of code to ensure a responsive design that can adapt to different screen sizes and optimize its layout, text, and icons dynamically based on the screen size and orientation of the device being used. Taking the time to talk with developers about the technical solutions for Utilizing flexible layouts and considering elements to be inside the visual area of the screen.
Labels help organize content, making it easier for users to locate specific information or navigate through. Consistent Navigation with labels may be helpful. With easy-to-read and clear-to-understand contextual visualization, cues can help users understand where they are and where they can go next.
Labels next to buttons and icons describe their functions explicitly. This is beneficial for all users, including those with cognitive impairments or those who are not familiar with certain symbols or iconography.
Also, labels provide essential information to screen readers and assistive technologies, enabling users with visual impairments to understand and interact with digital content. When elements are appropriately labeled, screen readers can announce the labels aloud, allowing users to navigate and access the content effectively.
Without labels, users may struggle to understand what information is expected in each field, leading to errors and frustration.
Labels play a role in providing clear error messages when something goes wrong. This is crucial for users to identify the problem and take appropriate action to correct it.
I learned that incorporating labels is an essential aspect of accessible design, regardless of the user’s abilities or disabilities. Labels contribute to a more inclusive and user-friendly experience, making it easier for everyone to access and engage with digital interfaces and information.
It’s important to strike a balance between aesthetics and usability.
When designing for Map territories, Textures can indeed play a crucial role in accessibility and easy identification, especially when it comes to color blindness.
Using textures with the right visual contrast, patterns, or gradients can provide tactile feedback to users with visual impairments. On a map, it can help identify different territories or regions.
For example, a rough texture could represent mountains, while a smooth texture could represent plains.
Also, consistent textures can represent different types of territories across various screens or components.
Users can quickly learn to associate specific textures with specific regions, making the map more intuitive and familiar to navigate.