Reduce visual clutter and improve focus on key elements; UI redesign.

[NexNot]

Looking at the current NI FRC Driver Station and the FIRST Driver Station applications, a clear visual contrast is immediately apparent. Compare that to the FTC Robot Controller application and the outlier remains the FIRST DS, which is crammed with info, and not in a good way. While the intention of this redesign should not be to copy the existing FRC Driver Station or FTC Robot Controller applications, a more consistent design language should be applied. In its current state, the FIRST DS appears to focus on functionality rather than competition usability.

FRC Driver Station and FIRST Driver Station applications side by side

The FTC Robot Controller application

Relating to the use of visual hierarchy to communicate information ( #8 ), the current icons do little to show their actual function. For example, the NI application used a letter icon to communicate the idea of "messages/logs," while the FIRST application uses a dashed lines icon that more closely communicates the idea of "menu". Further, these icons should be restructured to come closer to existing applications to ease the transition: the button to access logs should be above the button to access charts.

The FRC DS logs icon

The FIRST DS logs icon

Similarly, the top left "Control" icon communicates absolutely nothing about its purpose. The steering wheel on the original NI FRC DS is much clearer. The "Reporting" icon is for CAN/Power/Diag is slightly better but still not great. The icons on the right sidebar should be significantly shrunk to fit the "exit" button where it is in the NI FRC DS and where users will naturally expect it to be as every application on Windows has the "exit" X in the top right corner. It is unclear upon first glance where the exit button is and it should not be front and center in the area of the UI being clicked the most. The icon for FMS Ping should be more representative of a "field" and instead of the 3 dots in the rectangle could look more like a simplified basketball court (ex. below). ( #10 )

Example field icon

Additionally, the current color scheme is not colorblind friendly ( #4 ), however, nor is it NON-colorblind friendly -- in a competition environment where red, green, and yellow clearly communicate "good, bad, warning," these colors should NEVER be used as the "icon selected" color (in some cases excepting yellow, but if yellow can be avoided, it should). It detracts from the Robot Ping and Robot Code status indicators and makes their colors look like just part of the theme. Color should also be used to indicate battery status: in both the NI FRC DS and FTC Robot Controller, the background color of the battery area indicates its charge, in addition to the specific voltage being written in text. At least the portion with the voltage text could change color with the graph's line color to be more immediately apparent that voltage is dropping. Icons for the status areas also need a clear demarcation when they are red/green as brought up in ( #8 ).

To reduce UI clutter & improve usability:

• The "Ping" and "Status" displays should be widened to fit text as well as stacked vertically to conserve room. They are important and should be placed next to the chart/logs on the right side of the screen so that diagnostic information is not spread across the entire area and is instead concentrated to one, easier to see area.
• The match timer should be significantly larger ( Larger Match Timer #13 ) as this is another key element of the DS. It can go to the right of the Op Mode selectors, and above the team number.
• Tele/Auto/Util/Match should be in a row/bar rather than a box. This row should go above the Current Status indicator (the one that says "No Radio Connection or Autonomous Disabled etc"), which can share space with the Station selector. That should go above the Enable/Disable controls.
• Change the enable/disable controls to only show color on the selected control: I.e. Enable green when selected, Disable red when selected. Both should not be colored simultaneously. When both colors are active, this has the effect of making it difficult for non-colorblind people to see which is active on a glance, but near impossible for colorblind people to distinguish.
• Completely overhaul the controller buttons display as shown.
• Relegate the "Renew DCHP License" refresh button to the Settings menu
• Delineate the CPU being measured on the graph as SystemCore CPU and change the graph colors to not be green/red.
• Bring back the sidebars having selected color on the sides, not the full icon.
• Add a blue/purple colorblind mode

Here is my proposed redesign, incorporating what I have seen as input across Chief Delphi and GitHub Issues, created in Figma. The icons used are from Google Fonts' Material Symbols library. I hope that at least the UI portion of the app can be open sourced and or someone can implement at least some of these changes. I will continue to add to this Issue with my proposed redesign for the other pages of the app as I did not have the time to fully finish their designs yet.

The last two are of a potential "colorblind mode" where purple represents green and blue red. The toggle would be in settings.

[ThadHouse]

One thing this is going to break is the DriverHub layout. That one one of the reasons for the design being the way it was. The DS is split into 3 sections. 2 tab views and an always on view. Having the a-stop button moved to the left means its now a part of that tab, which isn't great. So the split into 3 distinct sections is something that helped the Android design, that probably needs to stay.

Essentially, the driver hub view has room for 1 tab view with 8 tabs, taking up 240x400px. Then everything else has to fit around it, in a 550x330 total view space.

[ThadHouse]

Also, we shouldn't have both text and icons. That just causes more clutter. We should pick one. I personally like icons because they take up less space, and people will get used to where they are and remember them.

[NexNot]

Edited to add Driver Hub designs at link. I disagree that both text and icons are unnecessary (if space is available an effort should be made to include both), however, for the Driver Hub, it has to be just icons for space.

[bhall-ctre]

Also, we shouldn't have both text and icons. That just causes more clutter. We should pick one. I personally like icons because they take up less space, and people will get used to where they are and remember them.

At least for desktop, maybe there could also be tooltips for the icons? At least that's what we at CTRE do with Tuner X when we want to display icons without text. I agree that including both text and icons makes things more cluttered, and icons are preferred.

[ThadHouse]

Also, we shouldn't have both text and icons. That just causes more clutter. We should pick one. I personally like icons because they take up less space, and people will get used to where they are and remember them.

At least for desktop, maybe there could also be tooltips for the icons? At least that's what we at CTRE do with Tuner X when we want to display icons without text. I agree that including both text and icons makes things more cluttered, and icons are preferred.

Everything currently has tooltips, was something I tried hard to make sure to add. I do think some of the icons could be made better. If someone wants to help with that, find me Lucide icons (Thats the library used).

[NexNot]

@ThadHouse For icons, what about:

• Logs: Mail or Message w/ Text or Message w/ Code or Robot Message (personally i'm in favor of this last one but any of these would communicate the idea better than the current icon)
• Control: Rocket or House or Gauge (rocket? there are no good steering wheel Lucide icons)
• Reporting/Diag: ? Shield or Chevrons w/ Elipses

I think we should also consider switching icons for status & ping. The current icons for these are mostly fine but to improve colorblind/accessiblity icons should also communicate state. Plus, since space is a concern, the icons themselves could be used to communicate state, not colored bars next to them. Icons in an active state should be green. Icons in an inactive state should be red with a slash or other clear delineation through them for colorblind folks.
For example:

could become closer to this (all icons Lucide 1.5 weight ((1 for the UDP/TCP combo clouds))), the gamepad is from Material Icons

Even if you want to keep the colored bars, icons should still at least communicate state through the slash for accessibility. I like most of the original icons but most don't have clear corresponding off icons.

• Radio Ping: Consider switching to Radio and Radio Off
• Robot Ping: Current icon is fine, add Bot Off for visual communication of off state.
• FMS: Switch to Banknote and Banknote X (not perfect but it looks more like a "field")
• UDP/TCP: There arent many good Lucide icon choices but a combo of Cloud Upload Cloud Download might work? See my example image. The Cloud Off icon can be used for the off status. If you don't want to combine multiple icons, and are open to using Google's Material Icons for this one, Leak Add and Leak Remove work well together. Or, to be even closer to your original up/down arrows: Mobiledata Arrows and Mobiledata Arrows Off.
• Code: I considered Code and XML because the slash would make the design language consistent but it might be confusing since </> could easily be the on indicator as well. Square Code and Square Code Dashed could work? Personally I prefer Code/XML but I don't know how you feel about that. Search Code and the afformentioned Code could work together as well. Material UI has an okay combo of Code and Code Off, but I prefer the Code/XML combo still here.
• Gamepad: This one is really difficult and there are absolutely 0 good Lucide choices that have an off state. Again, if you used Material Icons for this one, you could use Videogame Asset and Videogame Asset Off I would also say change the gamepad icon in the side menu to be the same as whatever the status one ends up being for UI consistency.

Lucide is lacking for some of these icons, Material Icons are similar enough I would consider mixing and matching using Lucide as the primary. In my example I tried to use Lucide as much as possible even though for example for UDP/TCP i prefer the Mobiledata arrows from Material; I used Material for the gamepad though. Lucide is fine if you don't plan on incorporating the off states for accessibility, but in that case I would still change the Field, Logs, and Reporting icons.

[ThadHouse]

We can use Material icons. I got them added in. I'm not opposed to switching to Material. There does seem to be more icons.