Style the scale metrics

[equivalentideas]

Here's how this block currently appears:

[equivalentideas]

These stats (see #119 ) are meant to be:

demonstrating the scale of activity on morph.io to validate and reinforce that morph is awesome and they should give it a go or explore it.

I think that these currently appear too loud and in-your-face. Morph's character should be clear, simple, focuses on helping you do what you want, with a bit of fun thrown in. I think these stats should be salient enough that you see them and the numbers have their impact on you, but clearly supporting information.

I think turning them into a ribbon above the footer, maybe with colour to pop them out, and reducing their size quite a bit could be a good way to go. I'll sketch out some ideas around that.

[mlandauer]

@equivalentideas remember why those stats are there

[equivalentideas]

@mlandauer totally, I think we still want people to say 'wow that's awesome' but I think we can make them obvious without making them so big.

[mlandauer]

It's at a size that's in keeping with other elements on the landing page when you're not signed in. It seems strange to me to want to significantly reduce the size.

[equivalentideas]

I'll do a quick go at what I'm thinking, very happy to ditch it if it doesn't work ;)

[equivalentideas]

This is the kind of concept I was trying to describe:

[equivalentideas]

Type size is pretty similar actually.

[mlandauer]

@equivalentideas so you've mostly reduced the whitespace around the text, here? I'm surprised, you being a fan of whitespace and all. ;-)

[equivalentideas]

:P squished it in a bit, definitely can play around with that, maybe not bold for the numbers too?, but what do you think of the colour? I think still clear but less dominating.

[mlandauer]

@equivalentideas really not working for me. Looks jumbled up to me and too squished up to the footer.

Showing the numbers large with whitespace is about confidently saying to the user, look this is important and deserves your attention

If anything, I would suggest keeping the size and whitespace as is (they are big numbers after all and so deserve to be big), and tone it down a bit by reducing the contrast of the text.

Perhaps try thinking about some other approaches to visual flourishes? Graphic elements? Colour that isn't a solid block? Animations with the numbers?

[equivalentideas]

Ok cool, I'll try some other paths :+1:

[equivalentideas]

Here's lightening up the text a bit, which I quite like, it puts more focus on the numbers:

[mlandauer]

That's going in the right direction :-)

[equivalentideas]

Here's an idea referencing the green colour we use. I added a slight shadow to make the text clearer:

Without it it's a bit light I think:

Also having a think about how colour like this could help support the story in the numbers, from messy raw material to structured usable data.

[mlandauer]

Try a few more ideas. Maybe even go back to sketches for some of them. A little whimsy, thoughtfully applied, can be a wonderful thing ;-)

On Fri, May 22, 2015 at 12:20 PM, Luke Bacon notifications@github.com wrote:

Here's an idea referencing the green colour we use. I added a slight shadow to make the text clearer:

[image: screen shot 2015-05-22 at 12 18 01 pm] https://cloud.githubusercontent.com/assets/1239550/7762918/bec8a48e-007c-11e5-872d-dd602cc00ca4.png

Without it it's a bit light I think:

[image: screen shot 2015-05-22 at 12 19 36 pm] https://cloud.githubusercontent.com/assets/1239550/7762930/da62dbec-007c-11e5-972f-3204663feb93.png

Also having a think about how colour like this could help support the story in the numbers, from messy raw material to structured usable data.

— Reply to this email directly or view it on GitHub https://github.com/openaustralia/morph/issues/751#issuecomment-104478011 .

[equivalentideas]

I had an idea for a squiggly line illustration in the background that would become clean and sorted out as it moved across behind the numbers. But it's not really working for me.

I've got a couple of animation ideas:

• the numbers tick upwards (as in the number increases, like a car's Odometer), showing that this is constantly growing and alive, driving more data to people.
• some kind of visualisation of morph at work, the server working through all this stuff, lights blinking/data moving across the screen.

Something a bit more photographic could be a nice screenshot of spreadsheet data in the background, the thing users came for (but this would be a change from the whitespace feel).

Any thoughts on this @mlandauer ? I quite like the odometer idea as it feels like a simple iteration, but also eye catching and reinforces the message that these are big numbers and it's happening right now.

[equivalentideas]

After chatting with @mlandauer , we're exploring the animation 'odometeresque' idea and would also like to add some colour to make it friendlier.

The talked about how the animation could make sense, what is it counting to if this is a total since a week ago? It doesn't really have to make too much sense, the animation is just there to give people a sense that things are moving and it's exciting. We want to keep the 'this week' concept because it makes it seem very present.

A couple options for how the animation could work:

1. When you see the numbers they are counting up from 0 and then stop when they hit the target, e.g. 811,840.
2. They are counting up from the cached count, as if since the start of the week there has been "811,840 pages scraped and counting".

I personally like the second option because you don't have to wait to see the big final number. You get that, plus the sense that it's increasing.

Either way, A couple of ways the counting animation could work are:

1. just the numbers being replaced by another number (no transition), like the counter on They Vote For You shares with counts up from 0 https://theyvoteforyou.org.au/policies/18
2. with a kind of slot machine or odemeter slide up transition http://codepen.io/vsync/pen/dlwgj

Prefer the no-transition style as it's a bit smarter I think (looks quite cool this way on the iphone stopwatch.)

[equivalentideas]

While we're thinking about that, here's some thoughts on colours.

I think colouring the numbers it the way to go, they're big and bold, and we want people to focus on them.

We currently have a green and a blue that are used on morph. I think if we use the blue people will try and click on these are links so we shouldn't use that. The green is a bit light (see above) but we could try a darker shade, or go for a new colour. I think the green could be familiar and friendly, but a red, orange or purple could be more exciting. I'll try and few and drop them in here.

[equivalentideas]

Here's some colour ideas.

I quite like the yellow, i think it's friendly and warm and goes well with the blue and green.

I like the concept of pink as it's bright, fun and an unusual choice for this kind of app, but I don't think that's quite the right one. I don't think it goes well with the green or blue unfortunately.

The purple and green feel like they don't stand out enough. The green is my second favourite after the yellow.

I also tried a red and a greeny-blue, but the red made it seem like this was bad news, like morph was over-heating, and the greeny-blue didn't go with the blue links very well.

[equivalentideas]

I think we should try yellow (I think the one above could be tweaked a bit as we go), with the greying back of the other text slightly like above, and with the numbers ticking up from there current starting position.

Does that sounds like a good path from here @mlandauer ?

[mlandauer]

Yes, I like the yellow one too. I think making the numbers count up is good too.

One thought with counting up from the large number in the case where the rate is realistic (as in some kind of average rate over the last week) the numbers are actually not going to go up so quickly. For example for something that counts up to 1,000,000 in one week that's only going up by one roughly every 0.6 seconds. For something going up to 50,000 in one week that will only tick over every 12 seconds or so.

So, given that I think it's still worth exploring counting up to the final value from some lower value. Makes it obvious that it's not trying to be realistic. It could also have an ease out to lengthen the animation time without it feeling too forced.

[equivalentideas]

Thanks for that @mlandauer . I'll do the colour first and then try a few things for the animation. I like that idea of them being different speeds, but I don't like people will look at this for 12 seconds to see it tick.

By 'ease out' do you mean slowing down the animation as it reaches the target?

[mlandauer]

Yes, ease out means slows down at the end. Look at some js animation libraries with support for easing. Experiment with the curve as it slows towards the end. Getting that right can make such a huge difference to how alive something feels.

On Wed, May 27, 2015 at 3:57 PM, Luke Bacon notifications@github.com wrote:

Thanks for that @mlandauer https://github.com/mlandauer . I'll do the colour first and then try a few things for the animation. I like that idea of them being different speeds, but I don't like people will look at this for 12 seconds to see it tick.

By 'ease out' do you mean slowing down the animation as it reaches the target?

— Reply to this email directly or view it on GitHub https://github.com/openaustralia/morph/issues/751#issuecomment-105766788 .

[equivalentideas]

I've got the animation running from 0 up, but now going to add the easing plugin https://github.com/CreateJS/TweenJS