747917 - Give feedback to forum contributors about their impact on the forum

Status: RESOLVED FIXED

(support.mozilla.org :: Questions, task, P1)

Description

[Kadir Topal [:atopal]]

Feedback is important in motivation. People want to see the effect of their own actions. This feature updates them with the current status of our success in replying to threads and their own impact on that.

On top of the forum listing there is a field that says: xx% of the questions in the last 3 days have a reply. When the bar reaches 100% it lights up green, otherwise it’s orange. It also states the number of open questions. This part is clickable and leads to a listing of those questions. 

Detailed description is here:
https://wiki.mozilla.org/Support/Kitsune/Features/Forum-Feedback

Comment 1

[Bram Pitoyo [:bram]]

Attachment: Mockup with big text

1 of 3 design variations.

Issue: what to do when the percentage is low? The two text fields will collide.

Comment 2

[Bram Pitoyo [:bram]]

Attachment: Mockup with medium text

2 of 3 design variations.

The percentage point is a right-aligned text element on top of the orange-background div.

Comment 3

[Bram Pitoyo [:bram]]

Attachment: Mockup with small text

3 of 3 design variations.

The caption text explaining the data is now separated from the percentage and put in line with the “total questions” field, but left aligned. It is now a static text element.

I like this design the best, because:
* It gives plenty of room for long explanation text (the caption can be pretty long if we want it to be)
* It contains no redundant information — the percentage is only seen once, not twice — so the visual weight is lighter
* It avoids any collision of text element

Comment 4

[Bram Pitoyo [:bram]]

Attachment: Mockup with small text - left aligned elements

If it is hard to make the “Answered: x” and the percentage text elements to follow along the orange bar, it is possible to left-align these texts, even though it would make less sense.

This might be a good first-phase implementation. We can make the texts follow the orange bar later.

Comment 5

[Bram Pitoyo [:bram]]

Attachment: Mockup with small text - low value

This shows you what happens when the value is low — at, say, between 1-10%. It is impossible to make the percentage text fit the orange bar accurately. But we can set a min-width value to the bar, so the text will always fit.

Of course, the graphic will not be representative to the data, but the text will still fit and convey the information needed (the number is what matters, rather than the accuracy of the graphic), and I hope that we won’t ever get to this level of contribution!

Comment 6

[Bram Pitoyo [:bram]]

Attachment: Mockup with small text - completed

Note how the bar turns green when the progress is complete (the color value is exactly the same to our green button), and how the link changes to a congratulatory message.

Comment 7

[Bram Pitoyo [:bram]]

Question:
Should it be enclosed in a light-blue background similar to the forum post list or the sidebar?

Additional CSS information:

Small texts, used to set captions:
13px

Medium texts, used to set links and informations:
18px

Large texts, used to set numbers:
58px

Orange bar background:
background: -moz-linear-gradient(#FFC900,#F09609) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear,left top,left bottom,from(#FFC900),to(#F09609))
background: #F09609;

Orange bar height:
Between 22–26px (not hard and fast)

Orange bar width:
650px (not hard and fast. It should fit within the light blue background if it ever needs to, so I didn’t make it too long in the first place to allow for plenty of side margins)

Orange bar border-radius:
50px, 100px (can be high, to make sure that it stays rounded on all height)

Comment 8

[Bram Pitoyo [:bram]]

More CSS info:

Gray bar background:
background: -moz-linear-gradient(#DDD,#F8F8F8) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear,left top,left bottom,from(#DDD),to(#F8F8F8));
background: #DDD;

Comment 9

[Bram Pitoyo [:bram]]

Attachment: Mockup with very small text

Comment 10

[Bram Pitoyo [:bram]]

Attachment: Mockup with small text - all blue links

Note the removal of link text below. It has been integrated directly into the caption, and makes this progress bar take even less space.

This mockup shows you what happens if all the links are colored blue.

Comment 11

[Bram Pitoyo [:bram]]

Attachment: Mockup with small text - some blue, some black links

This shows you what happen when some of the link texts are made black, while the call to action “Help solve them!” remains blue.

Regardless of which implementation we choose, the whole text should be clickable, and not just the blue-colored words.

Comment 12

[Ricky Rosario [:rrosario, :r1cky]]

Taking this from bram to start implementing.

Comment 13

[Bram Pitoyo [:bram]]

Wording:
x questions from the last 3 days have no reply. Help solve them!

What to bold and make as links:
x questions
Help solve them!

The rest can be grayed out (color:#AAA;)

But everything on that <p> should be clickable.

Comment 14

[Ricky Rosario [:rrosario, :r1cky]]

Making this a 2.

Comment 15

[Ricky Rosario [:rrosario, :r1cky]]

Thanks bram

Comment 16

[Ricky Rosario [:rrosario, :r1cky]]

Landed in prod. Looks hot!

https://github.com/mozilla/kitsune/commit/aadb5b279fc7f10ddd71a31066628e5a3bda9af1