money related SVG icons #1171
money related SVG icons #1171
Conversation
|
I again noticed problems with ways (e.g. http://www.openstreetmap.org/way/162607424) and duplicated icons. I'm still not sure why this occurs. It's in the TileMill rendering, but not in the exported PNG image.
|
|
I would still be in favour of generating base-files that are white on black with rounded corners, and than generating the negatives from that, so that other projects such as Potlatch 2 can also use our improvements to the icons. Any opinions on that? |
|
Shields are perfectly fine for me, but I would approach it the other way round. Start with the versions we need for this style first, and then make (or generate) other versions like inverted, w/o shield, w/o rounded corners etc. Why? Because it might be helpful to keep in mind that there might be no solid background in the end after designing the icon. But I don't know if it is more difficult to add or to remove something from a SVG file by scripting. Here is the inverted version of ATM, this was done in less than a minute from the other version: |
|
Hi, I find that the icons are quite 'dollar'-centric. What about this kind of drawing? |
What you're seeing is meta-tile boundary artifacts. By default the polygons are clipped to the meta-tile, so you get one marker for the part of the bank in one meta-tile, and a second marker for the other part of the bank in the other meta-tile. You don't see it on a png export since that just makes one big image. |
|
@gravitystorm That was the problem, thanks for explaining this. @althio Unfortunately your proposed icon is too complex for small sizes. But I'm also not too happy with the dollar sign and also not fully convinced with the icons I proposed. Bank and ATM seem to be difficult to represent in a easy to recognize way. I'll think some more about it. |
|
Another suggestion with a card instead of a banknote? Something similar to http://megaicons.net/iconspack-60/1044/ |
We need something for ATM and Bank - any thoughts for both? |
|
For bank? |
|
I tried again for ATM by prettying up my proposal and replacing the dollar by a 1 (atm-16.svg). I'm not sure if it is recognizable enough.
What do you think? update: I also updated the bank icon bank-16.svg |
|
Replacing the dollar sign "$" by the figure "1" was a good move but IMO it does not render well in this case. Maybe too small, maybe disturbing to read it turned at 90°. A two-figure number like "10" could stand out more. Also trying to stand back a little, I think the perspective on the banknote can be misleading. If I look at it with an fresh mind and look for a flat icon, I see something more like a tower or chimney. |
|
@althio re the pig, I'm not sure how widespread the concept of a "piggy bank" is worldwide (or indeed whether using a pig at all would be problematic in some cultures, in that it wouldn't immediately make people think "money"). |
|
I agree about the pig it is certainly a bad proposal. I had in mind the We are back to buildings, banknotes, credit/debit cards and coins. |
nebulon42
force-pushed
the
svg-icons-money
branch
from
89df826 to
48827cb
Compare
|
The debit card looks good graphically, but I'm afraid it could be confused with the ability to pay without cash (nowadays maybe not really noteworthy anymore). Personally I would prefer to reuse the core symbol for ATM and bank to see that they are related. So I'm sticking to the banknote for now and have updated my proposal. |
|
I like the I like the idea of the bank one - a stack of bills - but unfortunately the lower line with curves at the end just looks like a line shorter than the width of the stack at the low resolutions we're using. The lack of perspective really helps cut back on fuzzy edges |
|
Thanks. I don't think that the additional line is so bad, but I also thought about simply leaving it out. |
|
I really liked the roof of the old one. But money with a roof probably does not work... |
|
I liked the roof too, but I'm not sure a bill would fit within it |
|
Very nice. I'm happy that you succeeded in creating a clear icon without currency symbol. Perhaps it would look better if it's rendered slightly lighter / more grayish? |
|
Different gray versions: 333333 (current) 555555 777777 Maybe 555555 is the best? |
|
Yes, I also like 555555 the best. |
|
The ATM is excellent now. For the bank it is not so intuitive - would it help to give the banknote a gabled roof? Also it is good that your example has a post office next to it, we might use the same outer symbol for the post office and the bank, with different content. |
nebulon42
force-pushed
the
svg-icons-money
branch
from
48827cb to
80ca4f0
Compare
|
Updated the colour. Will look into the roof thing, but I doubt that it looks good. |
|
Does not have to be a roof, but something that can be made common for all such institutional building. |
|
Here a first try of the roof:
I think the bill is too wide for the roof to work. |
|
I originally wanted to make this comment on the toilet icon PR but it is actually a general remark on icon design and that was closed so i am mentioning it here. The problem is that creating a sharp and geometrically clear icon for low resolution rendering and creating one that is intuitively understandable are in most cases contradicting goals. In my opinion the second goal should have priority over the first, it seems to me however the recent attempts in creating new icons often put the first before the second. Specifically here i think the current icon proposal could also indicate something like a carpet shop (as well as probably many other things for people with different cultural background and socialization). The dollar sign - as biased as it might be - is quite universally understandable on the other hand. Also there is a risk of making the icons too sharp - you should be careful of not having too many pixel aligned vertical and horizontal edges - since those never occur in the map otherwise this can be quite irritating. Currently i think this is an issue here, in the museum and in the religion icon PR. |
|
ATM icon is not recognisable as an ATM, according to my small scale hallway testing. They also claimed that old icon is better. |
I try my best in producing sharp AND recognisable icons. You are assuming that the old icon was intuitively and universally recognisable, which can be the case but I seriously doubt it. You should not assume that the status quo is the best available option so far, even when leaving out the shortcomings of graphical display due to downsizing the icon.
I don't see this risk. IMO the sharpness is a big improvement.
Was the old icon recognizable as such and did you test that? Did you do a A/B testing? I neither have the resources nor time to approach this scientifically. If you want that you should contract a professional design agency and a market research company. I'm not saying that I provided the best available design so far, but what I'm getting very often (apart from lots of good feedback, thank you!) is 15 (contradicting) opinions from 10 persons. You cannot satisfy everyone. I'm also not implying that there shouldn't be serious consideration and discussion, but I guess we really need accepted features for icon design (which I tried to establish in #1165) and concrete suggestions for improvement. |
I am not saying anything about the quality of the current icons here - there are certainly a lot of things that can be improved about them - i saw this myself when creating new air transport icons. It is quite clear to me that a blurry icon can in some cases be better intuitively understandable than a sharp one. It is a good idea to keep that in mind i think.
You can best see this in the currently deployed style with the new wetland pattern (see #1158). This is perfectly pixel aligned meaning there are no partially covered pixels. This makes it stand out very strongly compared to other features in the map. I am not saying this should be avoided at all costs, i am just saying again you should be aware this can be an issue. Note i am making these general remarks not out of a general dislike of your work but because i am well aware that in design questions like this it is of very limited use to just mention an opinion on a specific proposal since there will always be diverging opinions. There is little use in design to just try to please others. Instead just try to do what you think is best and be reflective about your underlying thoughts and priorities. |
|
@imagico Thanks, I think I do now better understand what you meant. I didn't imply that you were attacking this work in general, I was just expressing the difficulty of dealing with a lot of diverging opinions. I also understand that changing established icons is not easy to do, of course you want to be sure that you don't make it worse. It would be best to have an A/B testing round with OSM users (thanks @mkoniecz for collecting opinions), but that is a lot of work and IMO out of scope. In design you sometimes have to be brave and step beyond the status quo. Of course, improvements are always possible later on. I personally like the use of icons in the HOT style, it works quite well IMO. These icons are very similar to those I'm proposing here. |
|
Good approach with the roof. Could you do the same with a letter for a post office? |
nebulon42
force-pushed
the
svg-icons-money
branch
from
80ca4f0 to
cae0271
Compare
|
I also tested this with someone unfamiliar to the icons - I can confirm that bank is recognisable, but ATM is not. Creating recognizable icons is hard, so I don't mind accepting icons of which users need to learn the meaning, but icons that are recognizable immediately are better of course. |
|
@math1985 for bank, did you test the stacked bills or the roof variant? |
|
For bank I tested the stacked bills. |
Another problem with the dollar sign is that at the sizes we need it's close to a blob anyways. Even fonts with hinting have problems. |
nebulon42
force-pushed
the
svg-icons-money
branch
from
cae0271 to
dac2ed5
Compare
nebulon42
force-pushed
the
svg-icons-money
branch
from
dac2ed5 to
93be349
Compare
Yes, also true. So maybe leave it like it is and change accordingly if there are problems?! |
|
Banknotes have different design in different countries. |
|
Is this ready to be merged? |
|
A little sum up from me: I'm not convinced of the roof approach. Coins are not bad, but I would like to reuse core symbology for bank and ATM, coins won't work for ATM. I don't really like the dollar sign, but I acknowledge that it is familiar. To be legible it has to be big, so simply adding it inside the center of the bill wouldn't work so well. There was the feedback that ATM isn't recognisable, but I don't have any better ideas at the moment. So I'd suggest to merge and to risk that ATM isn't that recognisable at the start. |
|
Thanks. If anyone has a better suggestion, we can consider, but this seems to be the best we can come up with for now. |
|
@mkoniecz I suspect the text-dy might need to be adapted (decreased, fortunately) to the new icons, could you check that? |
Implements part of #1165 and focuses on money related icons.
The original icons used stroke and fill so I had to change them. I also tried to reduce complexity a bit.
Following symbols are affected:
amenity=atm (atm-16.svg)
amenity=bank (bank-16.svg)
http://www.openstreetmap.org/#map=19/48.20196/16.39171
before:
after:
