Touchscreen UI
Guardiaris builds simulation systems for military training, ranging from vehicle simulators to LED wall environments where soldiers practice combat scenarios. Before each training session, the instructor needs to configure the entire exercise: choose a scenario, assign physical simulator hardware, assign soldiers to those simulators, configure weapons and equipment for each one, and verify everything is ready for launch.
My challenge was to design a touchscreen interface that makes this multi-step process fast, error-resistant, and clear enough so that the instructor never loses track of the current state. Based on interdependent data, the simulators determine how many soldiers can be assigned. The soldier assignments determine what configuration options appear.
My approach was to structure the flow as a five-step wizard. Each step has a single clear task, and the interface prevents advancing until that task is complete, but going back is allowed. This was a deliberate choice; in a sequential setup, the process becomes quick and mnemonic. It also allows for each step to have full screen real-estate available to display information and settings instead of compressing using submenus or hidden subsections.
Design principles that guided the work:
-
Prevention Over Correction. Disabled buttons, capacity counters, greyed-out assignments prevent errors before they happen. The instructor never sees an error message in the entire flow.
- Progressive Disclosure. Complexity is revealed when needed. Advanced functions are not needed for established procedures and are therefore tucked away ready to be available when needed. Configuration options appear only for the active simulator type. The personnel roster starts read-only and becomes interactive on demand.
- Continuous State Visibility. The footer always reflects the current state. Badges update in real time. The sidebar shows progress which is back-traceable. At any point, the instructor can answer “where I am and what I need to do” without reading instructions.
Scenario Selection
Fast access to frequently used and preset scenarios ensure that exercises with larger units can be ran in a serial, fast-paced manner. They also provide repeatable, egalitarian circumstances for the soldiers where performance is closely monitored and evaluated.
Every first step also allows for a completely custom exercise; loading a tailor-made scenario from a file.
Additional functionality, which was not implemented, was to have options for the instructor to change time of day, climate, weather, and ground conditions in configuration stage, which would also allow to trigger custom events during the exercise.
Scenario Selection
Showing a state when a scenario is selected. The metadata provides a fast way to load information into the screen and adds an additional way for the instructor to check if the scenario is appropriate for the upcoming exercise, without loading the full file.
Loading of the full file is done in the background once the instructor proceeds to the next step.
Simulator Assignment
Showing all simulators (including unavailable ones) in a single list with a clear status differentiation. Depicted here are two currently chosen simulators.
The list gives the instructor awareness of the facility’s current state.
The “IN USE” badge with a greyed-out Assign button provides multiple ways of communicating availability status.
Assignment is toggle-based which is optimized for a touch-based interface. A single tap is faster and less error-prone than dragging. The running counter in the header (”Assigned 2/4”) gives the instructor information without a need to count (if circumstances demand for certain limits or larger number of simulators needed).
Personnel Assignment
This was the most complex interaction problem in the flow. As depicted in the example, 10 soldiers need to be assigned to two simulators with different capacities.
The interface needs to prevent double-assignment, enforce capacity limits, and keep the instructor oriented at all times.
My decision was to use a mode-based selection pattern. The roster is read-only by default and only becomes interactive when the instructor explicitly targets a simulator by pressing “Assign Personnel”.
Personnel Assignment
Image shows Selection Mode for the given simulator card.
Triggered by tapping “Assign Personnel” on a specific simulator card, the checkboxes appear, showing a “SELECTING” status badge, and a capacity counter. The footer at the bottom updates with instructors.
The assigned soldiers on the list are instantaneously given corresponding information in the table so that the instructor can sort the list by criteria dynamically updated.
The capacity counter (”4/4 Selected”) enforces limits at the point of selection. Once the vehicle is full, additional taps do nothing. No error messages needed.
Personnel Assignment
Image shows Selection Mode for the second simulator card once the first has been filled.
Note that the soldiers on the list already selected for the first simulator have greyed-out checkboxes which prevents double-assignment, but also allows for additional filtering of the list based on their Simulator they are assigned to, Status or Role. This becomes helpful when the roster of soldiers becomes very large.
The first simulator card, now closed, shows confirmation of selected soldiers along with their ranks.
The instructor can cancel the selection at any time by tapping “Cancel” which resets without any side effects.
Simulator Configuration
Master-detail layout facilitated by aforementioned three-column screen layout.
Vehicle and infantry simulators have fundamentally different configuration models. Personnel roles are based on vehicle seating arrangement, while infantry simulators need more individual person settings. This was solved by having the simulator selected on the left and context-specific configuration on the right.
Simulator Configuration
Here I’d like to show a key interaction detail: the template system.
The “Apply Template to All Soldiers” feature dynamically tracks which soldier was last edited. When the instructor changes any dropdown on any soldier’s row, that soldier’s name appears in the template description.
Tapping “Apply to All” copies that soldier’s complete loadout to everyone else.
This optimizes for the common case (all infantry soldiers get the same equipment). If one or more soldiers have just one type of equipment different from the other, the instructor only needs to change that particular drop down option.
Summary and Launch
A four-panel dashboard summarizing all configuration, with a launch banner that surfaces warnings without blocking the instructor. The banner provides a shortcut link so that the instructor can go back to the problem section.
Different kinds of errors not necessarily need to prevent launch. The instructor may have a valid reason to proceed without a working heart-rate sensor, or any other equipment deficiency for that matter. The goal is to simulate war environments where trainees must sometimes make-do in less-than-ideal circumstances.