Elemental Echo Dev Blog_4: UI Flow and Player Onboarding Experience (Mar 31, 2025)

 

1. Designing for Clarity in a Complex System

As Elemental Echo evolved into a multi-layered tactical game—with distinct elemental classes, a scoring-based Crown system, and destructible bases—ensuring UI clarity became a top priority.

In this sprint, I focused on designing the player flow from game launch to post-match, and planning the combat HUD layout to support moment-to-moment decisions without overwhelming the player.

Our goals:

  • Lower the barrier for new players to understand the game

  • Communicate real-time battle conditions clearly

  • Visually support the tension and pacing of competitive play

2. Overall User Flow: From Menu to Match

We mapped out the complete player journey, which includes:

  1. Main Menu

    • Player profile, tutorial access, settings, lobby creation

  2. Tutorial Mode (auto-launch on first login)

    • Teaches movement, attacks, Crown control, elemental reactions

  3. Room Setup / Matchmaking

    • Select team, configure match rules, ready up

  4. In-Game HUD and Match

  5. Post-Match Summary

    • Stats, rewards, XP, and rematch options

Each stage was designed with intuitive progression and modular visuals, so we can adapt for future modes.

UI Flow

3. Combat HUD Structure

The in-game HUD is divided into four key zones:

SectionContent
Top BarTeam scores, base HP, kill feed
Bottom LeftPlayer portrait, current elemental role, skill cooldowns
Bottom CenterPlayer HP, status effects, Crown possession indicator
Bottom RightMovement ability (Shift), Throwable (E), Ultimate (Q)

This structure prioritizes eye-movement efficiency: Players can track key information without losing sight of the action. For example:

  • Skill icons include both cooldown and input label (e.g., "Q", "E")

  • Crown state uses a glow frame effect around the HP bar

  • Respawn timers for teammates appear as fading portraits above the team UI

4. Tutorial Mode: Teaching Mechanics with Intent

Because Elemental Echo is a competitive game with original mechanics, we created a guided tutorial flow that covers:

  • Movement and aiming

  • Using each skill input (left click, right click, E, Shift, Q)

  • Crown contest logic and scoring rules

  • Elemental reaction basics (e.g., Fire + Wind = Flame Tornado)

  • Win/loss conditions and respawn mechanics

All tutorial stages use highlighted UI overlays, slow-motion demonstrations, and short narrative voice lines for immersive learning.

5. Feedback and Player Communication

To support situational awareness and real-time feedback, we introduced several UI and audio alerts:

  • Crown captured / dropped (with unique icon pulse and sound)

  • Base under attack warning (flashes red + audio cue)

  • Elemental zone activated (floating icon + minimap ping)

  • Low health glow and pulsing HP bar

  • Ultimate ready notification (animation and sound effect)

These subtle, layered cues allow players to interpret battle momentum without relying on complex text prompts or menus.

6. Design Reflection

A key takeaway from this phase was the importance of hierarchical information design. We constantly asked:

  • What should the player always see?

  • What needs to appear only under specific conditions?

  • What can be conveyed through motion or color, not words?

By approaching UI like a combat support system, rather than just decoration, we ensure that it reinforces—not distracts from—our core gameplay.

7. Next Steps

In the coming sprint, I will:

  • Finalize HUD asset proportions and layout margins for Unity implementation

  • Create alternate layouts for testing: Minimalist HUD vs. Detail-Rich HUD

  • Begin prototyping the cloak achievement screen and match summary interface

8. References

  • Respawn Entertainment. (2019). Apex Legends — HUD layering and ping system

  • Riot Games. (2021). Valorant — Skill clarity and minimalism

  • Jesse Schell. (2008). The Art of Game Design — Chapters on Interface Design

评论

发表评论

此博客中的热门博文

Elemental Echo Dev Blog_5: Combat Feedback and Tuning the Feel of the Fight

图片
  1. Why Combat Feedback Matters No matter how well-designed the mechanics are on paper, players only feel the gameplay through feedback— visuals, sounds, and rhythm . This sprint, I worked on aligning our skill system with the moment-to-moment impact of battle, ensuring that each action feels powerful, readable, and responsive. Our goal is to strike a balance between clarity and intensity . The combat in Elemental Echo should feel fast and thrilling—but never chaotic or confusing. 2. Skill Feedback: Visual Priorities Each skill in the game is represented by a combination of: VFX (visual effects) : For elemental identity and spatial clarity Animation timing : To establish anticipation, impact, and recovery Hit response (on target) : Includes flinch, knockback, or AoE indication Visual goals by element: Element Visual Theme Design Focus Fire Explosive, radiant High-intensity bursts, AoE splash radius Water Flowing, cleansing Soft pulses, healing auras, impact ri...
阅读全文

Elemental Echo Dev Blog_1: Concept Development and Core Gameplay Design

图片
1. Project Background and Design Intent For this semester’s Connected Games group project, our team is developing a 2v2 third-person multiplayer combat game titled Elemental Echo . As the game designer on this project, I am responsible for gameplay mechanics, system structure , and supporting the coordination between design and technical implementation . The design foundation stems from a key question: “What happens if victory in a team-based game doesn’t rely solely on kills, but on control, support, and strategic survival?” To explore this, we are building a layered battle system that combines area control, support mechanics, and base destruction , all within a world of clashing elemental mages. 2. Gameplay Prototype: “Crown Control” as the Core Mechanic The central mechanic in Elemental Echo is Crown Control : A powerful object—the Crown—spawns periodically at the center of the map. The team holding the Crown gains 1 point every 5 seconds. The first team to reach the target score w...
阅读全文

Elemental Echo Dev Blog_3: Map Design and Tactical Flow in Elemental Echo

图片
  1. The Purpose of the Arena In Elemental Echo, every mechanic—Crown Control, base defense, elemental synergy—is shaped by the map structure . This sprint, I focused on designing the Elemental Arena , the central battleground where all matches unfold. The challenge was to physically structure tension : between control and vulnerability, between central power and peripheral disruption. The arena is more than a backdrop; it’s a mechanical enabler . 2. Layout Goals We identified four key goals for the map layout: Create a high-conflict central zone for Crown control Encourage coordinated flanks for base assault or support rotation Introduce verticality for tactical variation and role expression Integrate environmental reaction zones for strategic ability use The final design adopts a radially symmetrical structure , balancing fair access with diverse tactical options. 3. Map Overview and Zones The Elemental Arena is composed of three key regions: Zone Functi...
阅读全文