Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
6 of 14 tasks
kvakvs opened this issue Sep 11, 2019 · 15 comments · May be fixed by #1525
Open
6 of 14 tasks

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

kvakvs opened this issue Sep 11, 2019 · 15 comments · May be fixed by #1525
Assignees
Labels
11 ALPHA TM:PE v11 alpha edition EPIC Collation of related issues feature A new distinct feature investigating Issue currently under investigation LABS TM:PE LABS branch Toolbar The main TMPE toolbar UI User interface updates

Comments

@kvakvs
Copy link
Collaborator

kvakvs commented Sep 11, 2019

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
@kvakvs kvakvs added feature A new distinct feature investigating Issue currently under investigation triage Awaiting issue categorisation LABS TM:PE LABS branch UI User interface updates 11 ALPHA TM:PE v11 alpha edition labels Sep 11, 2019
@originalfoo
Copy link
Member

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
Copy link
Collaborator Author

kvakvs commented Sep 11, 2019

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

@kvakvs
Copy link
Collaborator Author

kvakvs commented Sep 12, 2019

image

@kvakvs kvakvs added this to In progress in Make TM:PE Great Sep 12, 2019
@originalfoo
Copy link
Member

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:

screen-8

@kvakvs
Copy link
Collaborator Author

kvakvs commented Sep 12, 2019

Facelifted the previous facelifted version a bit

image

Also might use black for inactive.

image

@originalfoo
Copy link
Member

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
Copy link
Member

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
Copy link
Collaborator Author

kvakvs commented Sep 14, 2019

Frame

@kvakvs kvakvs changed the title [Facelift] Touch multiple visual features of the mod for a fresh look [EPIC] Facelift — Touch multiple visual features of the mod for a fresh look Sep 15, 2019
@kvakvs kvakvs added the EPIC Collation of related issues label Sep 15, 2019
@kvakvs
Copy link
Collaborator Author

kvakvs commented Oct 1, 2019

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.

image

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
Copy link
Member

originalfoo commented Oct 4, 2019

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
  • 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...

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
Copy link
Collaborator Author

kvakvs commented Oct 4, 2019

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.

image
image

@originalfoo
Copy link
Member

originalfoo commented Oct 4, 2019

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

image

@kvakvs
Copy link
Collaborator Author

kvakvs commented Oct 4, 2019

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
Copy link
Collaborator

kianzarrin commented Jan 23, 2020

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

@kvakvs
Copy link
Collaborator Author

kvakvs commented Jan 23, 2020

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

@originalfoo originalfoo added the Toolbar The main TMPE toolbar label Apr 11, 2020
@originalfoo originalfoo removed the triage Awaiting issue categorisation label Apr 21, 2020
@kvakvs kvakvs moved this from In progress to To do in Make TM:PE Great Dec 19, 2021
@originalfoo originalfoo linked a pull request Apr 9, 2022 that will close this issue
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
11 ALPHA TM:PE v11 alpha edition EPIC Collation of related issues feature A new distinct feature investigating Issue currently under investigation LABS TM:PE LABS branch Toolbar The main TMPE toolbar UI User interface updates
Projects
New UI
Awaiting triage
Development

Successfully merging a pull request may close this issue.

4 participants