News:

Want to praise Simutrans?
Your feedback is important for us ;D.

Icon standardization - RFC

Started by VS, January 05, 2013, 07:44:12 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

VS

Currently we have a lot of infrastructure like ways, stops and extensions. Their toolbar button uses little icons to show what is what, since these can not be distinguished from their picture alone.

So far, a few "standards" exist - cargo icons are shared across paksets, and Fabio introduced speed and waytype icons. These are mostly used in an internally consistent way.

I would like to use this topic for discussion about the few pieces missing to a general guideline, usable at least for pak128.




My proposal loosely follows the already existing practice, and is the following:

1) The object is placed on a diagonal such that top left and bottom right corner are left less visually "used".

2) Bottom right is used for indication of WHAT & WHERE - fundamental way or building type: normal, bridge, elevated, tunnel | stop, extension, depot, dock

3) Top left is used for indication of VALUE:
  a) for ways, speed - black number on white in red circle
  b) for stops and extensions, cargo - standard icons
  c) "specials" - currently only control tower (I think)

Can you tell what each of these will build?





As you can see, there are some conflicting points.

Control towers are just weird - would they be better signalized as special building type? (I am talking only about the icon, not function!)
Do docks need their own type of icon?
What pictogram would be best for depots?
Is there some better way to hint that an item is for underground?

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

Zeno

For underground, maybe the ground line could be painted in top of the station's roof, or just put that pictogram upside down.

Sarlock

Perhaps the icon background could be a dirt colour to indicate that it belongs underground?
Current projects: Pak128 Trees, blender graphics

Fabio

Depots could use vehicle pictogram (from line management dialog) with a roof above and maybe two pillars.

Underground stations and tools can use tunnel pictogram, maybe smaller and in top right corner, or in the bottom right coupled with station pictogram.

I would also like to think of a different icon background (the button itself), as present one is good but a bit outdated in style (win98/xp legacy). Think of how MS Word toolbars changed over time.
Changing all icons could be a massive work, but easily automated with Imagemagick.

greenling

VS
Your Idea it very goodi like it.
Opening hours 20:00 - 23:00
(In Night from friday on saturday and saturday on sunday it possibly that i be keep longer in Forum.)
I am The Assistant from Pakfilearcheologist!
Working on a big Problem!

prissi

I think some building icons (especially the human, letter and good and maybe also undergroud are probably best done by the program, as it know about it and prevents mistakes ... ) Also the key could be added than automagically.

For best result, one would of course want to seperate the icon content and the background image. ANy further rescinning would be much easier, and even icon resizing could be semi-automatical.

VS

That sounds great! Separating at least the background and cargo would help a lot. At the same time, it will be a bit hard without blending and alpha channel, which usually helps when composing the icons a lot...

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

dennosius

#7
Icon design should be approached from usability aspects first and then from the aesthetic aspects.

My 2 cents on it: When I open up the railway menu, the main information I need is not that I'm building railway tracks, because that's what I know. So the actual tracks don't have to be so much in the focus. What is important is the type of track (regular/tunnel/bridge/elevated) and the speed limit. So in my view, the track image could be slightly smaller and the sub-icons for type and speed bigger than currently. This applies to tracks/ways, it's again different with stops, where I usually know what I want to built and how that looks like, so identification works through the image.

On the other hand - there should also be a clear optical difference between railway, road etc., because if there are several toolbars open, it's currently not very intuitive to find the right one. But also here, I think, images of the actual tracks are not the best solution, as they are not different enough at the first glance (especially if sub-icons for type and speed become larger). This could be done by colours instead. I'm not thinking of full coloured buttons (would be too colourful), but something like a thin line in the icon background (like blue for canals/ships, yellow for roads etc.).

I think we also need a sub-icon for ground level to distinguish stops that can be built in tunnels and on ground from those only in tunnels. For extensions, I'd rather not add a sub-icon at the lower right, but a plus (+) in front (or behind?) of the pax/mail/cargo icons on the upper left. That way, we wouldn't need any special sub-icon for stops and extensions, everything that has pax/mail/cargo in the upper left corner, had to to with stops (I know this doesn't work with the control tower, but one special case should not be considered too much for the design, as also airports are not built often).

I don't like the red circle around the speed limit very much. Circle outlines take a lot of space (if they are bold enough to look nice and like the traffic sign) and the red colour attracts too much optical attention. Also, this speed limit sign is mainly an European thing, and even in Europe, it indicates a regulatory limit and not a technical limit, and is used in road traffic only.

Quote from: Fabio on January 05, 2013, 10:32:41 PM
I would also like to think of a different icon background (the button itself), as present one is good but a bit outdated in style (win98/xp legacy). Think of how MS Word toolbars changed over time.

That's right. But modern icon style makes, for it's usability, use of 3D mouseover effects that we can't have in Simutrans (or can we?).

kierongreen

In Britain the red circle white background is used on roads and railways.

mEGa

Quote from: dennosius on January 11, 2013, 11:06:33 PM
Icon design should be approached from usability aspects first and then from the aesthetic aspects.
...
That's right. But modern icon style makes, for it's usability, use of 3D mouseover effects that we can't have in Simutrans (or can we?).
Yes I agree. If we can't get 3D effects, new icons will have hardly utility.
I'm trying to accordate "web 3.0 aspect" designed icons with 2D main aspect of pak128... And I mean it's too hard.
But it's really good idea to create a rule for design icon. principe sketched by VS is good for me and if we can as Prissi said cover automatically static element (way, tracks, boat...), it's wonderful .
Current projects in progress : improvements of few designed french paks

VS

Absolutely agreed about waytype (road/rail/...) not needed in the icon as a prominent part. The way type I meant is actually internally called "system" I think, and means elevated/bridge/...

Plus for extensions is good idea.

I have some real tests, I'll show them later.

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

dennosius

This is just to illustrate the idea, if rail was 'green'.

For the extention, I assumed it can be built on ground and in tunnels (I know that this extension can't and probably extensions can never be built in tunnels, it's just to illustrate the ground/tunnel combination for stations and the extension + at the same time).

I'm not happy with the look of mail/pax icons and the + sign, those may need some kind of background box, but again, just to illustrate the idea. Also, the green bar may not be needed/useful for buildings.

mEGa

Finally I decided to show you my test to create button with 3D aspect... It isn't successful, I admit it.
Just to say, we can also decide to show each element with one tonal color theme which will be the background color of button.

Current projects in progress : improvements of few designed french paks

Markohs

If hover effects are desired by the community, wr can implement them for sure. shoudn't be hard to code

prissi

To get this into a constructive realms, lets summarize what possibly go into overlay, and what is part of the supplied icon graphics:

Overlay:
pass, mail, freight, tunnel, overground, extension, electricity, command key (bold one not existing yet)

Underlay:
default button graphic(s if different buttons like stops, track/bridge/tunnel and stops/extensions will get different backgrounds.

Icon:
Just the graphics, probably wil a color scheme and maybe a speed symbol for ways

VS

#15
I can see the following criterion hierarchy (not always related to actual class inheritance).


If the whole thing is to be composed of 3 layers, a natural question is, what goes up and what goes down? Personally, I could see the things on the right side [of the graph] as underlay (some?) and the rest as overlay, detecting cases with star for their own icon. The goods concept is actually somewhat tangential to this scheme.



Let's forget about special cases. There could even be a dat-file option to indicate that overlay is included in icon, true by default in compatibility code so that old stuff breaks only a bit.

(PS: Personally I would like a graphic for no goods allowed, too. But that's not really important now.)




edit: Well, if I remove the signs, the list gets less overwhelming! Attached my suggestions (not decisive at all!), and the freemind map.

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

dennosius

Surface/underground and station/extension can't go into the same corner, as we need to indicate both for stations (and theoretically for depots and extensions?).

What stations and ways have in common is the information where we (can) build it, so this should be at the same place (lower right preferably, as upper left is for speed limit or pax/mail/goods now and I don't see a reason to change this).

VS

I think you interpreted just the text without looking at pictures ;) I meant the items on the right side of the chart, not right side of icon.

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

sdog

Extension buildings  a "plus-sign and a house", since they can only be added to stations.

The symbol for platforms is not very identifiable. Perhaps a frontal view of the edge of the platform (rotatet 'L') and a train next to it? Or something showing the function of loading/unloading: _ -> [] (empty platform, arrow, box/crossection)

For all waytypes a symbol of the waytype would be sufficient, a picture of the actual structure isn't needed. Thus they could all be generated automatically.

You might also think about leaving some space for maximum weight or a similar concept. Firstly because it might get added to simutrans at a point, secondly as it's already in experimental.

ӔO

#19
If colours are used, I would suggest white text on blue.

red/black is not distinguishable for most colour blind users.

what I worked on previously...
I think the icons for indicating bridge vs. elevated are slightly more obvious in this.
The tunnel is a matter of preference, I think.



For station extensions for passengers, something like the outline of this would be a bit more obvious:
This has a welcoming? entrance and shelters on the side.




For the warehouse, the roofs could be less pointy and flatter. shallow angles gives the impression that it is a large structure.
kind of like the one shown, in the middle left, here:
My Sketchup open project sources
various projects rolled up: http://dl.dropbox.com/u/17111233/Roll_up.rar

Colour safe chart:

mEGa

#20
Well very interesting. I mean we do not have to forget that size of buttons is 32x32 p. So icons and pictos have to be very precise because they are small !
@VS : good analyse. Priority is to define element of layers :
- background button : choice of color for each category ?
- background over button = little representation of objet/item
- corner left top = special parameter (like speed max for way for exemple... Or passengers/messages for extension station...)
- corner right bottom : pictos of type of category (as you designed it: bridge, elevated way, way or tracks, depot...)

EDIT : example to show result :
Current projects in progress : improvements of few designed french paks

VS

Yes, the small size is really limiting. I chose strong contrast with as few details as possible. AEO's concepts look great, but need so much space...

AEO's point about warehouse roof is good one, my "flat way" icon sucks (mEGa's is way better but needs blending), and the station/stop symbol is too railway oriented.


My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

ӔO

@mEGA

In menuconf.tab, icon_width and icon_height can be given a higher number to make the icons larger

48x48 or maybe 64x48 would not be bad.
My Sketchup open project sources
various projects rolled up: http://dl.dropbox.com/u/17111233/Roll_up.rar

Colour safe chart:

greenling

AEO
I think 48x48 or 64x48 are too borad for some old computer.
Opening hours 20:00 - 23:00
(In Night from friday on saturday and saturday on sunday it possibly that i be keep longer in Forum.)
I am The Assistant from Pakfilearcheologist!
Working on a big Problem!

dennosius

The icon bars take a lot of space  already even on a 1920x1200 display, just due to the large amount of icons (I tend to have railway and road menu open almost all the time).

So let's see what we need to indicate for what (besides of waytype, which we I think agree to indicate by button background color):

Ways

  • Max. Speed
  • Where (surface, underground, elevated, bridge)
  • Max weight?

Stations and Extensions

  • Freight (pax/mail/cargo)
  • Extension if applicable (by + sign)
  • Where (surface or underground)?
  • IMHO we do not need to indicate that it is a station/extension as such, because freight icons are used for nothing else

Electrification

  • Max. speed
  • Electrification as such (maybe as the main thing? Identification by the actual image is not helpful for electrification IMHO)

Depots

  • Depot as such
  • Could there be different depots for surface/underground? If yes, 'where'-Icon.

Signals
Do we need to indicate anything at all or are the signal images self-explaining? They are not for rising bollards, if that is considered to be a signal, and they are neither for the elevated train (I mean that trains hanging on the elevated monorail - what's the correct description for them? That's a type different from those driving on a monorail, isn't it?). So icons could be useful, especially if we choose to introduce special signals for trams or narrow gauge some day.

DirrrtyDirk

Quote from: dennosius on January 16, 2013, 03:05:22 PM
Signals
So icons could be useful, especially if we choose to introduce special signals for trams or narrow gauge some day.

Actually narrowgauge needs a complete signal set of its own, and these would be part of the separate narrowgauge menu, so no need for any special markings there (apart from overall background color or whatever is decided for the whole waytypes). Special tram signals should become part of the tram menu, so no need there either, IMHO. As of now, one can already create signals for tram in the dats and they already appear in the tram menu... unfortunately they don't work then. But I'd think as long a track and tram are compatible systems, it shouldn't be hard to code into the game, that tram signals work exactly like track signals, just be part of the other (=tram) menu...?
  
***** PAK128 Dev Team - semi-retired*****

sdog

QuoteThe icon bars take a lot of space  already even on a 1920x1200 display, just due to the large amount of icons (I tend to have railway and road menu open almost all the time).
Yes, i think there needs to be some method to make it more compact:

Show only one of each type, way, elevated way, bridge, platform, etc
A right click (or ctrl-left for 1 button mac-mouse) opens a pulldown with all other versions of the way. Example:

only 30km/h road is shown,
  right click on it, one can chose 30, 50, 100 m/h roads, by clicking left on one,
    clicking right on one option makes this one active, but does not change the default. (this is important eg if players build lots of signals, and want exactly one pre-signal)

It would be good to show the currently active build tool as an icon in the top left hand corner, perhaps at double the size.

Station extensions would become a button on the menubar aswell, opening a new toolbar with all the station extensions. This would allow us to have more different station extensions without cluttering the toolbars too much.

Optionally allow the old mode to be set in the options menu. Pakset chooses the default (it is important for pak64 and pak128, but eg pak192comic wouldn't need it)


ps: if there's enough interest, i'll write it up as an extension request.

dennosius

Quote from: DirrrtyDirk on January 16, 2013, 04:08:50 PM
Actually narrowgauge needs a complete signal set of its own, and these would be part of the separate narrowgauge menu, so no need for any special markings there (apart from overall background color or whatever is decided for the whole waytypes). Special tram signals should become part of the tram menu, so no need there either, IMHO.

I know they'd go into different waytype menus. Still, the functionality of the same signals is the same (a narrow-gauge one-way-signal works just as a tram one-way signal). So if the functionality of the signal is not clear from the signal image, an icon would IMHO be useful to easier identify the type of signal. So it's not to identify whether it's a tram or narrow-gauge signal, but to identify whether it's a one-way, platform-selection or regular signal. If we decide to introduce different looking signals for different waytypes, this would make sense IMHO.

QuoteAs of now, one can already create signals for tram in the dats and they already appear in the tram menu... unfortunately they don't work then. But I'd think as long a track and tram are compatible systems, it shouldn't be hard to code into the game, that tram signals work exactly like track signals, just be part of the other (=tram) menu...?

Isn't it possible to put signals defined as railway signals into the tram menu? They'd still work work for railways (and the other way round), but it would at least be possible to build different signals.

prissi

I do not think we need icons for stations versus extensions, as the graphics quite easily tell you what a station is (some way is visible) and what an extensions is (and both will show the pas, mail, good symbols too). Same for depots or signals, those are obvious from the graphics.

If you want symbols for depots, halt, halt extensions, elevated ways, and so one, those can be also generated by a script from the actual source of the icon prior to paking, since these will never change during game (while pas, mail, goods depend on the simuconf.tab setting, as well as the command key).

An overground/underground symbol needs to be shown only in sliced mode, since otherwise the icon will be not shown anyway. That will reduce the clutter of icons a lot for most situations. Thus this need also handling by the program.

What is the ramp symbols in the lower left of VS proposal?

DirrrtyDirk

Quote from: dennosius on January 17, 2013, 10:25:32 AM
I know they'd go into different waytype menus. Still, the functionality of the same signals is the same (a narrow-gauge one-way-signal works just as a tram one-way signal). So if the functionality of the signal is not clear from the signal image, an icon would IMHO be useful to easier identify the type of signal. So it's not to identify whether it's a tram or narrow-gauge signal, but to identify whether it's a one-way, platform-selection or regular signal. If we decide to introduce different looking signals for different waytypes, this would make sense IMHO.

Ok, as long as we're talking about the differences between normal signal, 2-block-signal, choosesignal, etc. (for all waytypes, e.g. track, narrowgauge, monorail, maglev, tram) I'm with you there. To me it sounded like you'd want different type-overlays for icons even for normal signals just because one is for track and the other is for narrowgauge.

Quote from: dennosius on January 17, 2013, 10:25:32 AM
Isn't it possible to put signals defined as railway signals into the tram menu? They'd still work work for railways (and the other way round), but it would at least be possible to build different signals.

Sure you can. But so far you can only add all of the railsignals there... or none of them*. And that's not really what I'd want in the end, since it would be the identical list as displayed in the track menu already. I'd prefer signals specially painted for tram that show up only in the tram menu (just like tram tracks, catenaries, depots and stations already do) - even if they could be placed and used on normal tracks (and vice versa) as well - or not. Whatever is easier to code.

*) as long as you're planning to keep the menuconf.tab automatically showing all new signals as soon as they are added without having to add each one specifically to the menu (and I haven't yet tried if that is even possible)
  
***** PAK128 Dev Team - semi-retired*****

arroyoc


VS

I think we all agree that button background and cargo icons would be good... Once that is in place, other parts can be added once we agree again ;)

Quote from: prissi on January 17, 2013, 10:52:28 AM
An overground/underground symbol needs to be shown only in sliced mode, since otherwise the icon will be not shown anyway.
That's actually true... Why didn't I think of that?

Quote from: prissi on January 17, 2013, 10:52:28 AM
What is the ramp symbols in the lower left of VS proposal?
Maybe plain way? I am not sure which you mean...

My projects... Tools for messing with Simutrans graphics. Graphic archive - templates and some other stuff for painters. Development logs for most recent information on what is going on. And of course pak128!

DirrrtyDirk

Quote from: prissi on January 17, 2013, 10:52:28 AM
What is the ramp symbols in the lower left of VS proposal?

To me it looks like iso-view of a normal piece of road, not a ramp...
  
***** PAK128 Dev Team - semi-retired*****

dennosius

#33
Quote from: prissi on January 17, 2013, 10:52:28 AM
I do not think we need icons for stations versus extensions, as the graphics quite easily tell you what a station is (some way is visible) and what an extensions is (and both will show the pas, mail, good symbols too).

You think so? I can hardly recognize that already for the current passenger train station. In 32x32, the way can become so small that it's hard to see  if the building is rather large.

QuoteIf you want symbols for depots, halt, halt extensions, elevated ways, and so one, those can be also generated by a script from the actual source of the icon prior to paking, since these will never change during game (while pas, mail, goods depend on the simuconf.tab setting, as well as the command key).

How does pax/mail/goods depend on the simuconf settings? Even if the game is played without exclusive station capacities, it still needs one station/extension element to enable pax/mail/goods for the stations. Or is there another simuconf setting that allows to load/deliver pax to a station that has no pax element?

Quote
An overground/underground symbol needs to be shown only in sliced mode, since otherwise the icon will be not shown anyway. That will reduce the clutter of icons a lot for most
situations. Thus this need also handling by the program.

That's technically right, but I don't think that changing icons for the same things between surface/underground and sliced mode is ergonomic. If the icon isn't shown, it isn't shown, but if it's shown, it should always look the same IMHO. Also, the information represented by the subicons is not completely useless: If a station icon carries surface and underground subicons in surface view, that at least tells the user that the station could also be built underground.

Quote
What is the ramp symbols in the lower left of VS proposal?

I also see it as an isometric view of a piece of road. I don't think that's a perfect illustration for a regular way, but we'd rather not discuss design at the current stage (although there are some very good things among the proposals).

Back to the general discussion:

What should be the colours for the waytypes?


  • Waterways: Should be blue, this is a pretty clear connotation.
  • Road: I propose yellow.
  • Rail: I propose red
  • Tram: I propose orange, as it's a mixture of yellow and red
  • Air: I propose white. Airplanes are usually white, also white has some 'light' and 'flying' connotation
  • Monorail, Maglev, Narrow Gauge: any ideas? I wonder whether it's good to use colours similiar to red (as those are railway variations), on the other hand, it may be more ergonomic to use colours mire different from red in order to avoid them being confused with railway
  • General Icons: Should be grey.

ӔO

^ shapes would be better, compared to colours.

Colour blind users may find coloured icons to be confusing if they are not chosen correctly.

Use of red ought to be avoided completely and what you will be left with are shades of blue and yellow.
My Sketchup open project sources
various projects rolled up: http://dl.dropbox.com/u/17111233/Roll_up.rar

Colour safe chart: