Graphical progress display

[benzado]

Show progress from 1-30 graphically

[leom]

I've started poking around on this, and I had an idea. What if, for the profile page, instead of the "Today is [date] and [name] has written [x] sketches", we do a type of gauge or thermometer?

Something like what's here: http://750words.com/one_month/running . If you're unfamiliar with 750 words, the idea is very similar to naskewrimo... every day, you login and write 3 pages of free form. The idea's taken from this book called The Artist's Way, but that's beside the point.

Alternatively, we could just flat out rip off - er, be inspired from - that page, and use it whole hog, with a wall of shame, wall of awesome to let the competitive juices start flowing on the site.

Anyway, I'm bringing it up because that byline to start the site is kinda long, and at the very least I'd like to trim it down for the ios view.

[benzado]

Thoughts:

• I like the idea of a graphical representation.
• I also like that sentence: "Today is [date] and [x] has written [y] sketches." It's clear and direct. It's not mutually exclusive with a graphic.
• I don't like the word "shame"; if you sign up for NaSkeWriMo and you write four sketches, and that's four more than you would have written otherwise, that's still a success for you. This is about competing against yourself, not others. I know that's kind of a hippie attitude and having it on a public website sort of contradicts that, but I hope that makes sense.
• Maybe because it's the beginning of the month, but the horse race chart looks kind of monotonous, since the number of horses far outnumbers the number of positions they could be in.
• A bar chart on the individual's user's page would be cool, maybe not one on the home page.
• I was already thinking of taking the "Most Prolific" set on the home page and grouping it, see Issue Compact leaderboard #15

This has strayed pretty far from "mobile stylesheet"; I'm going to edit this issue and open a new one

[benzado]

Mobile stylesheet is now Issue #25

[leom]

• The only reason I wanted to trim the "Today is..." line is because it wrapped in the iphone view. I like that line a lot too, it just seemed wordy - but you're right - it's extremely clear and direct. I'll play around with the font size tomorrow, and see if I can make it stand out without being overwhelming.
• Yeah, after suggesting "Wall of Shame" I felt like that went against what the site is supposed to be. I'm with you on not having that, and just highlighting successes. I am also a hippie, the kind that believes in the power of the human spirit - aka the worst kind.
• The major drawback of that horses chart is that most people who do the challenge end up completing it, so you have all the horses all in a dead heat the entire way through. I only brought it up because, quite frankly, I have no freaking clue what the graphical representation should look like (for both the individual progress and the most prolific). Data visualization? Not this hippie's cup of tea.

For rendering the graphs, it looks like NFSN doesn't support ImageMagick or the like, so I'm thinking Raphael?

[benzado]

I think a horizontal bar, like the horse chart, on the individual profile page would be cool, so you can see distance to 30. I wouldn't use them on the front page.

If we just want a horizontal bar, can't we do it all in plain ol' HTML/CSS, by setting up a <div> as wide as the screen, then another one inside it with a width based on user progress? Give them background colors and voila, bar chart!

[leom]

Oh yeah, if it's just a horizontal bar then HTML/CSS is def the way to go. I've done that kind of progress bar, and it's actually kind of easy. I only proposed Raphael in case you had something ornate planned for the profile page (which you don't, thankfully!)

Another alternative is something like 30 boxes across the top, and an X inside each day that you post a sketch. It's simpler than the bar, and also provides instant "how many days in a row did I miss" feedback. In addition, we can make each X'd box clickable, so people can jump to whatever sketch they wrote for that day.

On Sep 4, 2011, at 10:24 PM, benzado wrote:

I think a horizontal bar, like the horse chart, on the individual profile page would be cool, so you can see distance to 30. I wouldn't use them on the front page.

If we just want a horizontal bar, can't we do it all in plain ol' HTML/CSS, by setting up a

as wide as the screen, then another one inside it with a width based on user progress? Give them background colors and voila, bar chart!

Reply to this email directly or view it on GitHub:
#14 (comment)