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

Change the pictograms used : to manage layers / change the map background #1165

Closed
Aurelie-Jallut opened this issue Jun 21, 2023 · 20 comments
Closed

Comments

@Aurelie-Jallut
Copy link

Aurelie-Jallut commented Jun 21, 2023

The two current pictograms are incomprehensible and do not represent their function.

I propose 2 more understandable pictograms

image

We'll have to see if the picto library we're using includes these:
map-fill
stack-fill

@yohanboniface
Copy link
Member

We are not using any library for UI pictograms (OSM fr uses pictos from Maki/Nori/Osmic for user to add in markers, though).

So either you have the rights to use those suggested pictograms, either you/I should redraw something similar :)

Our pictograms are in this directory, in *.svg, in 24/16px and black/white:

https://github.com/umap-project/umap/blob/master/umap/static/umap/img/

Exemple for the black 24 px ones:

https://github.com/umap-project/umap/blob/master/umap/static/umap/img/24.svg

Would you update those files or should I ? :)

@davidbgk
Copy link
Contributor

@Aurelie-Jallut we did not talk about it (yet!) but there is a proposal here about making labels more explicit too.

@Aurelie-Jallut
Copy link
Author

We can use those from the https://remixicon.com/ and see if they don't clash too much with the others.

image

@Aurelie-Jallut
Copy link
Author

We are not using any library for UI pictograms (OSM fr uses pictos from Maki/Nori/Osmic for user to add in markers, though).

So either you have the rights to use those suggested pictograms, either you/I should redraw something similar :)

Our pictograms are in this directory, in *.svg, in 24/16px and black/white:

https://github.com/umap-project/umap/blob/master/umap/static/umap/img/

Exemple for the black 24 px ones:

https://github.com/umap-project/umap/blob/master/umap/static/umap/img/24.svg

Would you update those files or should I ? :)
I can try :)

@yohanboniface
Copy link
Member

1

Screenshot from 2023-06-23 19-55-14

2

image

3

Screenshot from 2023-06-23 19-52-00

4

Screenshot from 2023-06-23 19-50-57

5

Screenshot from 2023-06-23 19-49-45

6

Screenshot from 2023-06-23 19-48-57

@Aurelie-Jallut about the "background layer icon", pick a number, or I can run the dice again! :)

@davidbgk
Copy link
Contributor

Icons can be pretty confusing, especially in uncommon contexts :)

What about buttons with readable labels: [Search], [Fullscreen], [Share], etc. 🙃

@yohanboniface
Copy link
Member

yohanboniface commented Jun 23, 2023

For datalayers:

image

(Retina icons needed…)

(Also better centering, but I'll do this in a later step, because all icons are concerned, due to bad sprit size.)

@yohanboniface
Copy link
Member

What about buttons with readable labels: [Search], [Fullscreen], [Share], etc.

Labels can be confusing too: https://fr.wikipedia.org/wiki/Facile_%C3%A0_lire_et_%C3%A0_comprendre ;)

@davidbgk
Copy link
Contributor

¿Por que no los dos? 🤷

@yohanboniface
Copy link
Member

؟ Porque es un otro ticketto :)

@davidbgk
Copy link
Contributor

More seriously, I can't see an icon representing “changing a map background” that would be explicit at first sight.

@yohanboniface
Copy link
Member

Sure!

Plus here we need to distinguish between "background layer" and "data layer", so for new comers it's a real challenge. I guess here the cultural habits should help (doing the same as other applications), and I understand that's what @Aurelie-Jallut is pushing.
I'm definitely ok to have some sort of label, but I'd say this should be done in a separate move. And I'll let Aurélie push her views on this :)

@yohanboniface
Copy link
Member

For the record, there is a label on hover, using the title attribute, but that indeed may not be enough :)

image

@Aurelie-Jallut
Copy link
Author

On the subject of the picto "change the map background"

After a tour of 4 online carto tools, each one does its own thing :

  • small map in a rounded rectangle
  • text
  • picto layer
  • picto layer with arrow

I tried it out

image

I like the last one, I could do a monochrome version

@yohanboniface
Copy link
Member

👍

Remember that we need it in SVG, and we need both a light and a dark version (if you need the grey tones, tell me, but I guess you don't :) ).

@davidbgk
Copy link
Contributor

I like the last one, I could do a monochrome version

Maybe the last one works because it has common layer colors?

@Aurelie-Jallut
Copy link
Author

image

@davidbgk
Copy link
Contributor

The one with colors looks more explicit to me.

@yohanboniface
Copy link
Member

Done in #1188

@virgile-dev
Copy link

On the subject of the picto "change the map background"

After a tour of 4 online carto tools, each one does its own thing :

* small map in a rounded rectangle

* text

* picto layer

* picto layer with arrow

I tried it out

image

I like the last one, I could do a monochrome version

Hey @Aurelie-Jallut, thanks for pointing out the issue.
It's awesome that icons are not pixelised anymore !
My preference goes to the one in the middle as the idea of switching map background is clearer. IMHO having a real map image in such a small icon is not really recognizable. I see the PR was already merged and live in production. I guess we'll see what users have to say ^^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants