[EPIC] Facelift — Touch multiple visual features of the mod for a fresh look

[kvakvs]

UI Facelift Ideas

Follow a list of suggestions below, apply changes to make the mod look better and fix some usability issues. This should take short time and produce outstanding visual improvements without major changes to the code:

• Main panel
  • Larger buttons, square
  • Larger icons
  • Color coding buttons for 🟥TL, 🟦junction control, 🟩traffic types control
  • Clear/despawn buttons - replace with some visually distinct controls also color coded 🟪
  • The free space under Despawn button can be used by a ⚙ button which opens Options
• Priority tool (investigate: improvements without overhaul)
• Junction restrictions tool (investigate: improvements without overhaul)
• Lane arrows tool: Larger arrows on buttons, without overhaul
• Speed Limits UI: tweak numbers to make it more compact
• Lane Connectors tool has terrible curve visibility especially when cars are on the crossing. Update it to render a contrast thicker curve first and then colored thinner curve over it for better visibility. (in [Facelift] Lane Connectors now have contrast outlines #526)
• When route connectors, custom arrows, speed limits? prio signs and limits are destroyed as a part of road UPGRADE (not bulldoze), show floating text above the cursor.
• Toggle Traffic Lights tool now displays junction statuses (in [Facelift] Toggle Traffic Lights show junction status #527)
• Use different color groups for traffic, public transport, emergency in Vehicle Type Restriction icons

[originalfoo]

I think we should also consider removing two buttons from the main menu bar:

• Toggle despawn
  • The despawn option is more of a gameplay thing, not a tool. There's already an option on Gameplay tab in mod options to toggle it.
• Clear traffic
  • Clear traffic is more of a maintenance thing, it would be better as a button on the Maintenance Tab.

[kvakvs]

Toggle despawn is popular with streamers though. Clear traffic does indeed belong to options.

[kvakvs]

[originalfoo]

Looking a lot cleaner. I assume we'll be using a grey texture background that can be colorised in-game (eg. setting .color panel components colorizes the texture) so we can fiddle a bit with the tile colors?

Freaking love the lane arrows icon.

Suggestion: For priority signs, just have the yield triangle as that seems valid for both US and rest of world and will make the button much more clean and distinct.

I think we also need something a lot cleaner looking for the junction restrictions icon. For inspiration:

[kvakvs]

Facelifted the previous facelifted version a bit

Also might use black for inactive.

[originalfoo]

Icons look great! Background colors are grim :)

If we use color panel behind icons, which we can set color in code (and later add accessibility features), we can just make background color brighter when tool is active. This would also reduce number of sprites used by 50%.

[originalfoo]

Can you upload the icons as 50% grey on transparent background (so they can be easily colorised in-game) and I can work on getting the UI done.

[kvakvs]

[kvakvs]

Adding another note to facelift EPIC above
The icons used for traffic type restrictions are all red/white and can be oriented left-right or right-left, i.e. when not paying attention and for example clicking only last and one before last, it is very easy to edit an rotated road segment and click wrong icons.

Suggestion:
Use different color groups for traffic, public transport, emergency.
OR a thick color border under the current red signs.
OR a color background and the signs become white when activated, and black when deactivated. Similar to the proposed main menu style above.

[originalfoo]

From user perspective, my needs are:

1. Clear, distinct and disambiguated icons
2. Clear distinction between 'allow' and 'disallow' states
3. Visual feedback showing which lane is being edited
4. Smaller footprint (particularly to avoid overlap with overlay icons on nearby roads)

Some ideas...

Glyphs:

• Taxi looks almost identical to car icon, but could also be mistaken for a police car (is that a flashing light on top?)
  • first concept - calling for a taxi, but would be too disruptive visually
  • second concept - hailing / "flagging down" a taxi, but visually heavy
  • third concept - traveller hailing a taxi, clean and extremely disambiguous
    • suitcase looks naff, maybe mashup with this one?
• SOS is too wide and not emotive enough; and does it mean anything in asian cultures? Also the restriction only applies when responding to emergency calls, right? When the lights are flashing...
  • first concept
  • second concept
  • third concept

Background:

Remove the red/green border - wastes space and obfuscates glyphs.

Charcoal color (eg: #999) background, then:

• Off-white (eg. #ccc) glyph = disallowed
• Colored glyph (relevant to service, eg. yellow for taxi) = allowed
  • Would need more than just color to distinguish - maybe a thin line under or around the glyph or something?

Could we depict it a bit like a narrow toolbar? Might be too visually cumbersome though?

Lane feedback:

Making buttons / toolbar (whatever) follow the curvature of road would look bad and impair usability. So maybe just the tried and tested 'lane sausages' as per #391 ?

If we take toolbar approach with background, then we'd have single consistent mouse-over/out areas with which to show/hide the lane sausages.

Smaller footprint:

Glyphs could be about 75% of their current size maybe?

Removal of the red/green border lines will save a lot of space.

[kvakvs]

Toolbar approach is bad because we do not want to rotate it, remember the experiment with rotating lane arrows panel, which worked great but was confusing for some. And then if we do not rotate, it becomes just as confusing as lane arrows.
I will play with icons and colors and try making something
For lane feedback, that would include large changes to the UI, including complete rewrite to a state machine. Not like its bad, it is good, but an intensive and massive change. I'd want to postpone UI rework until we're happy with icons and deliver these changes.

[originalfoo]

For background color what about the charcoal color that is used in some parts of Blender, like background of main part of this panel:

[kvakvs]

Doesn't bother me, that is a fine colour to use.
We need to create the palette for the UI. I will also be using it in all new forms.
And style guidelines, but noone taught me how to do that, I'd just follow something pre-existing like Material design (by Google, Android) https://material.io/design/

[kianzarrin]

@kvakvs Where is your branch? I want to use this for my UI in #542

[kvakvs]

You should not use it, as it is experimental and will be dropped and reworked.