Cities: Skylines

Cities: Skylines

[UI] Silicon Skin V1.0
leftbehind 21 Apr, 2015 @ 8:23am
Biiig chunk of UX/UI feedback
(Apologies for starting new thread, I didn't want to pollute the main UI/UX thread with the large amount of feedback below)...

TL;DR: Right-click buttons for info panels, micro-graphs in buttons, useful hover tooltips, allow me to rearrange assets in build menus, filter assets by size, etc.

Active toolbar buttons...

When a button is clicked, causing it's build menu (darker bar filled with icons of things I can build) to appear, it's not very obvious which button the build menu corresponds to. I know the active button's icon remains coloured - but this is too subtle IMHO.

Some possible ways to make it clearer which button is associated with the currently displayed build menu:

a) Change background and/or border of button to some other colour; or...

b) Fade out (color or alpha?) the other toolbar buttonss slightly so the active button stands out more on the toolbar; or...

c) Have the build menu's darker background extend downwards to form a "bottom tab" that goes under the button it's associated with. This darker background bottom tab would make the active button stand out more from the others and clearly associate the build menu with the button that opened it.

Pulsing icons...

If some aspect of my city management is struggling, gently & slowly pulse or throb the icon in the button that's associated with it. (If there's lots of problems I wouldn't want the button bar looking like a techno party hence the effect should be fairly subtle)

For example, if my energy supply is critically low or overstretched, the power button's icon would gently pulse/throb to alert me to this fact. This kind of UI feedback is completely missing from the game UI and it would be great to see skins overcome this shortfall.

Smile graphs...

Couldn't think of a better name for these, but wanted to introduce the concept here as I'll be referring to it repeatedly later on.

Other than the zone demand graph, the game UI doesn't give me any clue as to my city's vital statistics (energy supply, etc). It would be nice if Sapphire skins could resolve this issue in a stylish manner (this would also remove the need for bulky/ugly statistic overlay mods).

The graph would appear as an arc within the buton border (at the bottom), making it look like a "smile". The arc background would be 3 pixels wide and same colour/alpha as the button background. The graph would be 1 pixel wide, and same colour as button border.

The centre bottom is the origin of the graph representing 0%. As the statistic value increases, the graph arcs outwards either side - a bit like how an old thermometer works, with the 'fluid' filling the capillary tube. At 100% the smile would be completely filled.

In cases where two stats are being depicted for a button, two half-arcs would be displayed with a small gap between them.

The result would be a minimalist graph, but something that allows me at a glance to get a rough idea of how particular aspects of city management are doing.

When updating, the graph arcs would tween (easeInOutBounce style?) to their new value. There should be a lag between each graph updating if possible, don't want the smiles "shimmering" all the time.

Button order...

I think there would be some merit in reordering/grouping the buttons on the toolbar:

Bulldozer
-
Roads
Public Transport
Zones
Districts
-
Electricity
Water
Trash
-
Health
Fire
Police
Education
-
Parks
Uniques
Monuments
-
Budget
Policies

Toolbar button feedback...

Edit: Hover tooltips could perhaps show info panels instead (but without the full info view map modes)?

Bulldozer:
+ Right-click: "Ground value" info view
+ Smile graph: land value?

Roads:
+ Right-click: "City traffic" info view
+ Hover tooltip: <monthly cost> (<budget>%)
+ 3rd party mod: Toggle traffic lights not using custom icon
+ 3rd party mod: Extended road upgrade mod icons not showing (transient issue?)

With respect to budget display in hover tooltip, it would be awesome if I could edit the budget from within the tooltip. Same applies to other buttons that show budget in hover tooltip.

Also, in the sub-buttons, IMHO any toggle buttons (like toggle snapping) should be squares with round corners to differentiate that they are not part of a radio button group. This applies to any other checkbox-style sub-buttons elsewhere.

Public transport:
+ Right-click: "Transportation" info view
+ Hover tooltip (a list/grid): cost & budget of each type in turn

Zones:
+ Icon: Replace with demand graph :)
+ Right-click: "Commodities" info view
+ Hover tooltip: the tooltip associate with the current most in-demand zone (eg. if industry is in more demand than the other two, tooltip would be something like "There is weak/moderate/strong demand for industry" - whatever the vanilla game would be displaying for that demand bar)

The graph would be like your existing demand graph, but with a 1px rectangle border around each bar stack. This ensures that even if there is zero demand the button still has content. A 1px padding between border and the bar stack inside it. Bars in the stacks should be 1px high IMHO, make them look cleaner and higher-res. When not lit, the bars should be a darkish grey?

By the time people install Silicon, they'll know what the zone demand graph is so there's no need for the usual tooltips that explain what each bar stack means. There would be no need for the existing zone graph (above the city date) or the grey lip beneath it; makes UI look cleaner and frees up space for more toolbar buttons.

Districts:

Make smaller and place next to territory button as the two are related? (maybe as a config option?) In fact, you could probably do same with policies button (as policies has geographical element to it).

+ Icon: Just use ore symbol? Current icon is a bit meh.
+ Right-click: "Resources" info panel
+ Hover tooltip: List of districts, choose one to center camera

Electricity:
+ Icon: Would it look cleaner without the lighting bolt?
+ Right-click: "Power" info view
+ Hover tooltip: cost & budget
+ Smile graph: energy availability (0% = maxed out, 50% = budget>100%, 100% = budget<=100% and still have spare power)

So if I have half a smile, it means I'm over budget but still have remaining capacity. This same approach would apply to all subsequent budget-related smile graphs.

Water:
+ Right-click: "Water/sewage" info view
+ Hover tooltip: Cost & budget for water & sewage
+Smile graph: (left) water availability, (right) sewage processing availabiltiy

Trash:
+ Right-click: "Garbage" info view
+ Hover tooltip: Cost & budget for garbage and incineration
+ Smile graph: (left) garbage (right) incineration

Maybe right-click should open "Pollution" info panel instead? Whatever people use more frequently.

Health:
+ Icon: Remove the circle and make the cross bit bigger?
+ Right-click: "Health" info view
+ Hover tooltip: Cost & budget for healthcare and deathcare
+ Smile graph: (left) healthcare (right) deathcare)

Fire:
+ Right-click: "Fire threat" info view
+ Hover tooltip: Cost & budget
+ Smile graph: fire

Police:
+ Right-click: "Crime" info view
+ Hover tooltip: Cost & budget
+ Smile graph: crime?

Education:
+ Right-click: "Education" info view
+ Hover tooltip: Cost & budget
+ Smile graph: education

Parks:
+ Icon: Would something like this be cleaner? https://thenounproject.com/term/park/13130/
+ Right-click: "Recreation" info view
+ Hover tooltip: Cost & budget

Uniques:
+ Icon: Would something like this be better? https://thenounproject.com/term/museum/3129/
+ Right click: Scrollable list of all uniques built so far, click one to centre map on it
+ Hover tooltip: <num> built, <num> remaining

Monuments:

Note: I've not actually had a city big enough yet to build monuments, so I have no idea how they work or what they do etc. I'm just guessing here lol. I'm going to assume they're a statue version of uniques?

+ Icon: Would something like this be better? https://thenounproject.com/term/monument/95211/
+ Right-click: Scrollable list of monuments, click to view
+ Hover tooltip: <num> built, <num> remaining

Budget:
+ Right-click: Same as left-click
+ Hover tooltip:
+ Smile graph: 0% = ±0/mo, 100% = >±10k/mo; red graph = negative cashflow, green graph = positive cashflow

I'm wondering if it would be better to just remove the budget button, and instead make budget panel appear by clicking on the money stats lozenge in the grey bar at bottom of screen? Maybe there could be a config option to hide budget button?

Policies:
+ Right-click: Same as left-click (if not yet reached districts milestone), otherwise list of districts - choose one to edit district policy
+ Hover tooltip: Policy cost

Other UI elements...

Info button (top left of screen):
+ Icon: https://thenounproject.com/term/information/16301/

When clicked, would be nice if the info toolbar slides out from the left of the screen (much like policies panel slides out from the right), or maybe even slide down from top of screen (horizonal bar for info buttons instead of vertical?).

Milestone button:

I rarely use it, and the padlock icon seems worthless to me (I know why it's there, but by time I install a UI skin I'm past caring). IMHO, remove it and enhance the territory button...

Territory button:
+ Icon: Pulse/throb when there are terroritories availale for purchase.
+ Right click: "Milestone" panel (what left-clicking milestone button would have done)
+ Hover tooltip: <num> territories, <num> available for purchase
+ Smile graph: Progress to next milestone

Maybe icon should more clearly depict territories? Something like this (but with base of box removed)? https://thenounproject.com/term/box/39950/

Happiness indicator:
+ Style as a small button next to territory button
+ Right-click: "Happiness" info view
+ Left-click: Same as right-click
+ Hover tooltip: ?
+ Smile graph: happiness

Date/speed lozenge:

IMHO the speed/date lozenge should be smaller and also separated from the city name lozenge.

No need for background on play button IMHO, by time someone installs skin they'll know it's a button.

Do we really need speed indicators button? Speed can be determined by how fast stuff is moving on map, and speed of progress bar under date.

Left click anywhere in the lozenge to toggle pause.

Right-clicking play button would change speed (and update icon of play button to suit). It would be great of Sapphire added a new speed to game: Slow (half normal speed).

Icons for play button:
+ Slow (0.5x): https://thenounproject.com/term/snail/113179/
+ Normal (1x): https://thenounproject.com/term/play/6506/
+ Fast (2x): https://thenounproject.com/term/fast-forward/6508/
+ Turbo (4x): https://thenounproject.com/term/speed/12193/

I appreciate some mods allow even faster speeds, but once pop reaches certain level game engine limits to 4x. If faster than 4x, just show turbo icon.

Right-clicking date toggles between game date (and progress bar) and real-world system time clock. Real clock would be white text, no progress bar.

I really don't care about the game date so most of the time I'd prefer to just have a normal system time clock showing.

City name lozenge:
+Left click to edit city name.
+Right click to show list of districts, click one to centre map on district.

When scrolling round the map, can you work out what district is in centre of map? If zoomed in at 50% or more, the text in the lozenge could show district name (text would change to white colour). If zoomed further out it would just show city name.

Money lozenge:
+ Right-click: "Building levels" info view?

Population lozenge:
+ Right-click: "Population" info view

Help button:
+ Right-click: Hide for remainder of this session :)

Toggle UI button:
+ Right-click: Toggle auto-hide of main toolbar

When auto-hidden move the mouse over grey bar at bottom of screen and toobar temporarily reappears.

Free camera button:
+ Icon: Camera lens doesn't really resonate with me, maybe use something more normal? https://thenounproject.com/term/camera/476/ or maybe https://thenounproject.com/term/eye/421/
+ Right-click: add bookmark of current camera position/angle
+ Hover: list of bookmarks (with ability to edit names, delete etc)

Sapphire button / Game menu button

IMHO merge them once skin is active.

+ Left click: game menu
+ Right click: sapphire menu

Building assets

For building assets, would be nice to show how many of a given building I've already built.

For unique buildings, instead show a tick to indicate if I've already built one.

Reordering assets

Like many, my parks menu is a nightmare. Something like 50 assets in there including dozens of car parks, alleyways, etc. In addition, asset authors sometimes do crazy things like putting a multi-storey car park building under the buses menu, or like failing to specify the correct tab for a unique building = blank tab in uniques menu. *annoying!*

So, here's the thing... I wish I could rearrange my build menus to get them better organised.

Each build menu would have a "+" tab to add a new tab (like in Google Chrome browser). When adding new tab there would be a small selection of icons to choose from based on common trends in the Steam Workshop.

Open a build menu, drag and drop an asset either on to a tab within the current menu, or on to one of the other toolbar buttons that has a build menu (it would go in to first tab of that button's menu).

It wouldn't change the asset, it would just use a relocation block in the config file (asset name = menu:tab)

There would be some limitations:

1) Roads must stay in the Roads menu
2) Only uniques can be in Uniqes menu; I can only reorder uniques that haven't been given a proper tab association by putting them in to an existing tab
3) Train track must stay in Transport > Trains tab
4) Special assets like bus/metro/train stops should stay where they are (but maybe allow reordering so I can put them as first item on their tab?)

Even when asset icons bug is fixed, being able to reorder assets this way will still be a major time saver for those of us with gazillions of assets.

Size filter tool

When placing assets - particularly parks -

A new button somewhere (near help button?) that will let me select/mark an area on the map and have all the build menus filtered to assets that will feasibly fit in that area.

Two ways to mark the area:

a) click and drag a bounds box on the map
b) click a zonable area on the map

Right-clicking the button clears the filter. When set, the button icon should pulse/throb.

================

Ok, that's way beyond enough feedback for one lifetime. It's lots of words, but I hope the fact that there are common themes to my feedback will make sense somehow; a certain thing will take time to implement, but then can be replicated to other buttons relatively painlessly.

I couldn't think of any decent shortcuts to access "building levels", "wind" and "noise" info views which is my only regret lol.

If you've made it this far, congratulations, you have too much free time to listen to the ramblings of a mad man.
Last edited by leftbehind; 21 Apr, 2015 @ 8:27am