Developing and Visualization of Military Symbols as UI and UX Icons Using a FM 1-02.2 Military Symbol Frame Approach
There are many military symbols that exist today and viewing and understanding those symbols can seem overwhelming at times. To help simplify the usage of military symbols using frames, in reference to the Military Framing Guide FM 1-02.2 Military Symbols, I will demonstrate how I was able to use military symbol frames to construct UI components that can be placed on the user's UI or as an interactable object within our virtual world. Below are some key concepts to be aware of when using military symbols.
- There are four types of frame symbols that this effort will focus on and that includes Units, Equipment, Installations, and Activities
- Three things to consider when choosing an appropriate symbol
- Standard
- Physical Domain
- Status
As you see the results of the development of these UI and UX icons we focused more on standard identity with the addition of other visuals components. A more detailed table can be found in FM1-02.2 Military Symbols.
Initially you may be wondering why is this guy wanting to visualize military symbols. In a later project you will get a better picture of how this approach can be used to support mission planning, understanding the mission route, threat identification, providing a high level view of the threat neutralization process, military symbol familiarization and usage, and much more. With this content the user experience can be made as detailed as needed with emphasis on functionality and capabilities added to best support the experience or goal. Sample images and video will be shown to demonstrate how I started the process to plan an entire mission route with the ability to be aware of friendly, hostile, neutral, and unknown entities within a virtual landscape. The hope would be to use this as training assistance to promote readiness among our warfighters. Being ready and aware has an enormous impact in whether a soldier returns from the battlefield and makes it home to his/her love ones.
It is also important to note that these created UI icons were used in a research study conducted by the Data and Analysis Center located in Huntsville AL, which already demonstrated one applicable use of the symbology with the addition of other functionality. The initial use case explored defining a few standard frames to be representative of friendly, hostile, neutral, and unknown entities.
Standard Frames
Each frame was made using references from military symbology and using art tools to create the imagery to bring the icons into Unreal Engine. Keep in mind that these symbols are adapted to present information to the user in an informative context and used in conjunction with the UI to effectively communicate that concept through the user experience. The primary take away here is that I am able to make any type of representative imagery needed to effectively communicate the frame symbology. The images below are what I labeled as standard-general frames to be able to reference the components when needed later.
Friendly
Hostile
Neutral
Unknown
Additional UI Component/Icons
The first step to creating the UI components that will be used to later enhance the user mission/route planning experience was getting the above imagery for the standard frames. Next steps involved the addition of more visually appropriate icons to help the user comprehend information quickly when visualized in the virtual environment. Below are some of the other icons used that varied in combination with the standard frames.
In these samples both blue and red forces, notably representing friendly and hostile forces, were used in conjunction with other icons that may represent locations of interest or other UI components. UI components were created with reusability in mind and that allowed for added functionality to enable change between blue, red, or any other forces with setting initial pre-mission parameters as needed prior to execution. It also supported the ability to easily migrate these components to any project; opening the door to provide support for other use cases or approaches as they relate to the usage of military symbology.
For communication of multiple units/equipment of a specific type values were generated indicating the total number of units/equipment. If the icon appeared with no value it indicated one of that specific type.
I also added interactive components that indicated some type of actions visually. They are a threat dome (center), hostile communication icon (top left), unknown/neutral communication (top right), hostile threat eliminated (bottom left), and friendly communication icon (bottom right). These UI components can dynamically change during the mission simulation depending on how they were categorized as friendly, hostile, neutral, unknown, or if actions taken during the mission changed a UI component's current state. Event triggers were also used with these interactive icons that demonstrated relevant animation within the virtual environment depicting blue/red force communication, blue/red force threat neutralization, blue/red force additional units spawned or detected, etc.
Creating the UI Component
Four initial key things to consider when creating any UI design or component are the following:
- What is the purpose of the UI design/component?
- Does the component properly represent or convey the proper messaging for the user?
- Is this a static or dynamic UI design/component?
- How is the content going to be displayed on screen?
These four key things are general, but they promote a good start to building out your UI components to support your UI design and user experience (UX). They will give rise to and span across additional questions and comments that will lead to the refinement of your components to get to the desired result. Gain an understanding of why the component is being created and making sure that it conveys the proper message that provides benefit as a result of the user seeing it. Also narrowing down if it will be static or dynamic helps. You will have to consider how to bring in uniform imagery that continues to fit your UI design but has the ability to be adjusted as needed. Another important concept to apply is to avoid screen clutter and remember too much information isn't always good information. Effectively using your screen space and presenting optimized information shown to best benefit the user at that moment can make the user experience much better.
In my case, I aim to optimize or promote efficiency. I also wanted to develop or design a UI component that would be easy for me to change that presented a simple hierarchy that was able to support complex functionality beneath a good quality image. That led to the dynamic reusable design seen above where it allowed for automated updating of the symbology based on triggered events during the mission simulation.
Design of the UI Supporting the User Experience
The overall goal here was to develop the military symbology to support a virtual environment that looked at providing a user experience representative of the following key points.
- Allowing a user to travel a mission path flying a pre-planned route
- Provide the ability to gain situational awareness and readiness through using military related symbols
- Providing a repeatable, modern, and dynamic platform or medium for military symbology familiarization
- Develop a simulated environment that promoted a mission route planning activity and preparation
- Develop an application that supports both desktop usage and immersive virtual reality (VR) headset approaches
In this design I did integrate additional functionality including a overhead minimap view, UAS/UAV integrated cameras with customized object targeting, event trigger volumes to promote mission activity, on screen text, etc. Also note that the initial imagery and video represent an initial development and deployment of the application supporting the CCDC Data and Analysis Center in Huntsville, AL. Content was adjusted to meet their needs, and the level of fidelity shown here can increase with additional requirements and virtual environment integrations. I will also demonstrate the same symbology in a different environment to allow you to see the ability to reuse the UI component as well as a change in the graphical and visual layout of the environment.
Mission Environment General View
Usage of real world terrain elevation data to represent the terrain, an unknown threat, and designated flight path and zones are shown in the image below.
Additional UI content was added to satisfy the requirements of initial context of the mission, as well as providing the ability to have an overhead view, UAS/UAV camera views, and distance from objects to promote situational awareness.
This is an example of a friendly blue forces mortar team identifying the unknown threat as a launcher and the effective range associated with the threat dome can be updated. Notice the darker blue ring around the mortar team's icon indicating that they are communicating the information. Compared to the icon representing two transport trucks not having that darker ring indicating that it is not communicating.
To summarize this content, I am providing a video showing clip of the mission simulation running as well as imagery and/or video of the military symbols being displayed in a different virtual environment with a change in environment graphical and visual fidelity.
Virtual Mission Demonstration
The concept of this virtual mission demonstration was to show the dynamics of configuring a mission planning environment with interactable components including blinking icons showing communication, target neutralized, dynamic UI components that avoids blocking the user's view, etc. The final demonstration showed real world terrain taken out of New Mexico with virtual entities placed in specific locations with corresponding icons and event triggers as pilots navigate the real world terrain. In the "Displaying the Military Symbology UI Components in Different Virtual Environments" section shows how easily the modular functionality can be applied to different projects with their standalone modular design.
Displaying the Military Symbology UI Components in Different Virtual Environments
This shows how easily the UI content can be moved into different projects or virtual environment maps. In the images below you see that the UI symbol is changed for the helicopter to various military symbols. I also integrated the ability to quickly change the mesh as well, which is represented by the image with the tank (bottom left). There is also the ability to change the background of the icon, but for now I left it in a friendly themed UI component background. Additionally, I brought in a random image that also displayed easily and correctly on the icon (top right).
The below images show a completely different map/level/environment that the models were easily placed into with the current functionality.
If you have any questions or need any assistance please feel free to reach out. Thank you and I hope this gave some insight on how to generate a user experience using UI component that reflect designing military symbology.
Additional Content:
