Menu

WB 4X Game - Main HUD Navigation

Home / Portfolio

ixd user flow

Player’s Journey Map

WARNER BROS 4X GAME - MAIN HUD NAVIGATION


IXD | INFO-ARCHITECTURE | UX CHALLANGES | USER FLOW | PROTOTYPING | DESIGN SYSTEM | ACCESSIBILITY



My Role

Senior UX UI Designer - Warner Bros Discovery.

Tools Used

  • Figma
  • Adobe Illustrator
  • QuickTime Player
  • Confluence

Industry

Design for a mobile Strategy 4X Game

Warner Bros Discovery

  • “Lord of the Rings”
  • “Game of Thrones”
  • “House of Dragon”

Overview:

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.


Competitive Analysis and Brainstorming

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.



IXD - Features & Screens I was involved in:



Information Architecture


information-architecture


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.


UX Goals and Challenges




User Flow


user-flow


information-architecture




Wireframes & Prototype

hud wireframe

UX - Wireframes proposal for 4X Main HUD Navigation


hud wireframe

UX - Wireframes proposal for Sub-Section

hud wireframe

UX - Wireframes proposal for Dragon Collection


hud wireframe

UX - Wireframes proposal for Sub-Section


Breakdown

Main Header Navigation - Top Bar


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:

topbar

The components of the Topp-Bar header - sub-section:

topbar

Close Button and Go Back Arrow:


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.


The Map & Info Panels


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.


info panel

info 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.

info panel




Figma - Components and Design System

component


Color Coded Breakdown


colour breakdown

colour breakdown colour breakdown colour breakdown colour breakdown colour breakdown




Accessibility

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.’

touch target

The ideal target size for most users is around 48-50px in width and height. The minimum target size for a mobile screen button (for players using an index finger) should be at least 45x45px in width and height. But for some, this size might cover the visibility of the entire target. For players who are using their Thumb, 72px is the target area.



Not Accessible

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.

dont

Not accessible example; don’t create actions and icons that are too small or too close to each other.


Good Examples

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.


dont

Elements on the side of the screen should be considered as a larger tappable area for thumb-sized fingers and placed within the safety-marked area.

dont

Icons in the middle of the screen could be designed smaller for index-size finger.

dont

Bottom side buttons should be adapted for maximum thumb-finger size tap.


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.

safety

Elements on the side of the screen should be considered as a larger tappable area for thumb-sized fingers and placed within the safety-marked area.


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 - How important are they !?

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.

Textures and Accessibility

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.


Other projects: