Make statistics menu less sad - more interesting display of data (colours? patterns?)

[matkoniecz]

related: #3230 proposing to show how statistics changed as user enters the screen

Right now statistics menu has gray circles

It would be nice to experiment with

• colours, especially for highly ranked stats
• some extra decoration - maybe great blobs can sprout some leaves or
  flowers?
• maybe graphs? Some people are absurdly motivated by graphs and like
  graphs of everything (yes, I describe myself)

I am planning to do something with that, but not right now ( https://github.com/streetcomplete/StreetComplete/issues/assigned/matkoniecz ). So if someone is interested, feel free to steal ideas from this.

PS I though also about sounds but I have quite significant aversion to apps having sounds of any kind, so I am not fan of adding anything of this kind. Also, have no idea where to find suitable sounds on a suitable license or how to produce them.

[westnordost]

Ideas:

• well, better display of statistics, show how things changed #3230. Or even kind of make them stick out with an animation (like when tapping on an achievement) while counting up
• integrate stats from HDYC or provide direct link to it
• tapping on circles makes them wobble (animate smalle,r than bigger, than normal again)
• sounds: https://freesound.org/
• yeah, just colors on the circles may be nice. Or, make them look like medals or coins

[biketeur]

Ich würde es auch begrüßen, in den Statistiken die Punkte der mapper vor und hinter mir zu sehen (absolut oder relativ zu meinen Punkten)

[matkoniecz]

I fiddled around with the technical part and it seems that I managed to get styling

Now the next step would be making something that is actually pretty or at least interesting.

I have an idea of ornamental leaves/flower growing around circle as its success increases. And with color of circle going from gray to green. Though I am not entirely sure that I can actually do this.

Godawful, not even a bit refactored/cleaned code is at https://github.com/streetcomplete/StreetComplete/compare/master...matkoniecz:achieve_more?expand=1

[westnordost]

Flower pattern? Hmm, like that? https://www.google.com/search?q=flower+pattern&source=lnms&tbm=isch&sa=X&dpr=1
I don't know about that...

There is also not that much space to have a lot of graphics around the icon. I can't imagine how that would look good - that they grow behind the bubble somehow.

What you did there really - giving it some kind of pretty frame - looks to be the best approach. Slowly fading grey to green - I don't think it would look good - for most it would be a muddy dark-green then.

Here are some more ideas:

• instead of grey bubbles, use a dedicated background image for each category. For example, a coin / medal for ranks, a shape that resembles an achievement frame for achievement levels, something else for days-active (e.g. a heart shape or whatever)
• additionally to the count-up animation as I proposed earlier, there could also be a "celebration" animation, i.e. confetti of various colors exploding and fading out. This is certainly realizable by spawning a lot of one-colored views and moving them around, but it is easier with a custom view or even actually with a custom drawable that implements the Animatable interface. Would be quite exiting to implement, and I predict: Really little code. Look at StreetParkingDrawable for an example of a custom drawable.

[matkoniecz]

I thought about something closer to https://www.google.com/search?q=leaf+pattern+circle&source=lnms&tbm=isch&sa=X - with more leaves growing as number gets better (from sapling to leaves circling around entire counter, maybe with flower or two)

What you did there really - giving it some kind of pretty frame - looks to be the best approach. Slowly fading grey to green - I don't think it would look good - for most it would be a muddy dark-green then.

I made HTML for quick experimenting, initial attempt produced something like that (shown in backgrounds used by day and night modes)

I tried dark->brown->green but that had many ugly shades

[westnordost]

Okay, that actually looks not as bad as I imagined, but my other comments remain.

[smichel17]

Q: How to decide when to change the color? The rank means a different thing depending on the number of people mapping in the country (and the number of active mappers, but that is too big a discussion to include here, I think).

[matkoniecz]

Very experimental, just spraying dingbats from https://commons.wikimedia.org/wiki/File:Leaves_Ring_Ornament_Colored.svg across circle.

Ideally there would be a more consistency (leaves growing from one stem) but that would be quite time consuming.

Personally I quite like this result - though obviously it would be necessary to do it properly. (properly fit inner circle, one circle has too many leaves, one not enough, better match SC style)

But in principle, what you think about something along this lines?

If that seems really ugly and not wanted then likely investing time into this would not be a good idea.

Q: How to decide when to change the color? The rank means a different thing depending on the number of people mapping in the country (and the number of active mappers, but that is too big a discussion to include here, I think).

Some sort of vague eyeballing. Yes, in Germany mapper will have lower rank and decoration than person with the same amount of edits in Cyprus.

instead of grey bubbles, use a dedicated background image for each category. For example, a coin / medal for ranks, a shape that resembles an achievement frame for achievement levels, something else for days-active (e.g. a heart shape or whatever)

I wanted something that would show progression and change as user is active for longer.

[smichel17]

@westnordost I presume it would be easy for the SC statistics server to return a count of the number of mappers per region?

Then we could make the color correspond to a percentage. Of course, I know there are many mappers who only did a few quests, so anyone who is regularly active would be in a high %, but I think this is probably a good thing (that active mappers will not be stuck in gray tones for too long).

@matkoniecz I like your idea for the "days active" and "achievement levels", where you're not competing with anyone.

For the ranks, I think a laurel wreath design would be more appropriate. It reminds me of film festival awards that movie trailers always seem to advertise. https://duckduckgo.com/?q=award+laurel+wreath+film+festival&iax=images&ia=images

I am imagining something like this (numbers may need tweaking):

• Bottom 80%: Use the shades of green, as discussed above. Gradually add leaves, starting at the bottom; the laurel wreath should be complete when you reach the 80th percentile.
• 80-90%: Full wreath, with bronze background
• 90-95%: Full wreath, silver background
• 95%-first place: Full wreath, gold background.

[matkoniecz]

For the ranks, I think a laurel wreath design would be more appropriate.

I wanted progression with design that can build up, but still pretty at low ranks. And half of laurel wreath looks a bit silly and definitely incomplete - and noone will be top ranked everywhere.

Though different colors may be viable.

[westnordost]

Well, in the mockup picture, the "global rank" picture looks a bit odd with those few leaves floating around the circle

[smichel17]

And half of laurel wreath looks a bit silly and definitely incomplete

Start at the bottom and alternate sides (or use bigger steps and always add a leaf to both sides at once).

It might look silly when there's just 1 or two leaves (but no different than your suggestion, I think), but there are definitely wreath images with just a few leaves at the bottom. In the bottom left of your image, for example. I think by the time you hit the 40th percentile, it would look like that.

I suspect— although it needs to be confirmed with data —that you would reach the 40th percentile everywhere with just 100-200 quests (because I suspect that 25% or more solve 10 or some low number of quests and then forget about the app). So I think it would be fine.

[smichel17]

@matkoniecz One detail that would change how silly it looks: the wreath should "grow naturally", meaning leaves added at the bottom (and the rest shifted up). Hard to explain in words, easier with an image.

If the first image is the full wreath, then 35% completion should look like the second image, not the third.

(not using this precise image, which is not freely licensed)

[matkoniecz]

Well, in the mockup picture, the "global rank" picture looks a bit odd with those few leaves floating around the circle

Te plan was to start with sapling or single leaf and add more as user collects more quests.

If the first image is the full wreath, then 35% completion should look like the second image, not the third.

ooo, that looks really nice - better than I expected

[mnalis]

Yes, I think the percentage-of-SC-mapper-in-that-country is a good idea for delineating ranks.

While we're brainstorming, another idea might be some kind of designed arc above the rank circle (or a diagonal stripe across top-right part of the circle, à la Fork me on github), like https://i.pinimg.com/originals/ce/1f/67/ce1f671072e5db10c384728d88137db6.jpg as it would allow for about a dozen different rank pictures.

Probably not the (copyrighted) Star Trek ones, though.

[matkoniecz]

it is definitely not ready but seems quite promising (there is some weird asymmetry for start):

placeholders are there only to show multiple stylings in one go, this is not my main account

[rugk]

Hmm given the other style of SC this indeed looks kinda sad.

What about a complete new idea: some of the awesome illustrations @westnordost did e.g. in the presentation or other parts of the app. So maybe one could include a "fullscreen" illustration somehow (which should be responsive, so needs to consist of multiple layers/different illustrations that work together BTW) where you embed the numbers somewhere clever.
That would feel way more "vivid" and support the awesome illustrations somewhere else in the app (I guess the illustration style works perfectly for something like that).
What it shows in general, I have no idea, maybe a "typical scene of mapping"? City? Or indoors… or somehow abstract?

So maybe someone looking at a globe for "global rank" (the number being next to it) and calendar (days active), the flag of the country somewhere ("rank in [country]") etc.
Just as an idea for something completely new…