UI Concept: Military Tank Encyclopedia – Adaptive Navigation Design

Hi everyone! This is my first post here. I’ve been following this amazing community and the inspiring work shared here for a long time, so I’m thrilled to finally join in and share something of my own for feedback.

I’m currently in the pre-development phase of a comprehensive Military Tank Encyclopedia. Before beginning the technical build in Articulate Storyline, I’ve designed this high-fidelity mockup to balance a high volume of data with a clear user experience:

 

The Logic: Managing Cognitive Load in High-Density UI

1. Adaptive Learning Path:

The Question Bar (1–6) at the top serves as a pre-evaluation. Based on the results, the interface dynamically unlocks one of three "clearance levels," determining the technical depth of the content available to the user.

2. Information Hierarchy & Visual Tracking:

To prevent cognitive overload, the UI uses a dual-track logic:

• The Center/Main Frame: Dedicated to the specific tank model and its primary variable data.

• Side Display Windows (Circular/Rectangular): These are strategically placed to show general, secondary-level information that follows a separate, global path. By decoupling this from the main model-specific content, I aim to maintain visual stability, reduce eye-tracking fatigue, and provide a clear lane for complementary general knowledge.

Current State:

All text, titles, and button labels are currently placeholders while the final technical content is being mapped to the structure.

Feedback Requested:

1. Given the high information density, does the separation of "Global Data" (side windows) and "Variable Data" (center) feel like an effective way to manage cognitive load?

2. Does the visual hierarchy clearly distinguish between the assessment area and the encyclopedia navigation?

 

Thank you for your welcome and for your objective feedback!