4

I'm working on an interface to do transcription of a collection of handwritten index cards... a lot of index cards, something like tens of thousands of them.

I'm building a site where several people can transcribe any given card, in any order. I'd like to add some sort of visualization of how much has been done, and how much remains to be done. One thought that occurred to me was a scatterplot where one pixel corresponded to a single card -- if I made such a plot in a 100x100 <canvas> tag, say, I could capture 10,000 status points. The portion of the canvas that was colored would at least give some visual idea of how much had been transcribed.

But in order to render such a <canvas> tag I'd have to send the data too, and that would probably be too much data. (Maybe I could render the plot on the server periodically and send it as an image.) Or would it?

Does anyone have any suggestions?

Improve this question

7 Answers 7

Reset to default
5

A standard progress bar and number of cards probably would be sufficient. However, I feel this is something you could be a bit creative on: The effect of a scatter plot could be nice, you could also make the pixels newest pixels brightest and fade the older ones.

Performancewise, if you store the generated pixelplot, so it wouldn't have to be calculated every time it is viewed, this should really not be a problem. I think I wouldn't use the canvas-tag but rather a serverside generated image. The update action itself shouldn't be too complicated: you only have to get the image you already have, and get the last update (or updates since last rendering the image) and modify those exact pixels. Or, if you want to fade them according to time, first fade the image you already have, and then add the newest - store timestamp of the fading action so you do this only once a day or once per hour or whatever. (You could also do it every step.)

Now it's something far more complex than needed for just providing progress information.. but it could be a very nice feature and interesting to build! And I think it is very feasible to implement it in a way that it won't stretch your resources.

Improve this answer
3
  • +1, I think the scatterplot is much more engaging than a simple progress bar (I wonder why - maybe it's because you know one of these pixels is "yours"), and you outline a robust implementation.
    – peterchen
    Dec 22, 2010 at 22:10
  • 2
    Using a scatterplot, you will never have 1 pixel = 1 card as you create a canvas of arbitrary size that doesn't match the number of cards. The result is again a kind of percentage, so you only get a new progress bar design.
    – Mart
    Dec 22, 2010 at 23:08
  • I would like to second Mart's comment. There simply isn't enough real-estate in pixels to plot it properly.
    – ThomPete
    Dec 23, 2010 at 10:36
3

I like the scatter plot idea. But don't render it on the client with canvas, do it on the server side. I don't know what your server language setup is, but it would be pretty trivial to dynamically generate a PNG image from the data using PHP and the built in image libraries.

You could do some fun things to make this game like to motivate people to finish cards by having the mask slowly unveil a picture. Like each completed card is a puzzle piece placed. Let players zoom in and choose any empty space (pixel) they'd like. People would naturally be inclined to "finish" parts of the underlying puzzle to make new items visible.

Improve this answer
2

I don’t understand the point of a scatter plot unless the X and Y dimensions represent some user-significant attributes of the cards. Then users could sense roughly not only how many cards remain, but what kinds of cards remain.

But otherwise, just give the number and/or percent done. Even a progress bar is only a good idea if it grows in real time, or if amount done is so important to the user that you want to direct attention or provide visual interest. Otherwise, progress bars are good when there is no clear, linear, or intuitive metric of progress (such as when installing software), but that’s not your case here.

What is the purpose of showing cards completed? So users can estimate when they’ll be done? Do you want to motivate users to work to completion? Maybe you should show a cumulative plot of cards completed over time, so users can also see the rate of completion (and if they’re starting to slack off). Maybe you should also show how the number or proportion of cards the user personally completed compares to the average number completed so users can see if they’re doing their fair share (assuming it’s in the interest of all users for everyone to pitch in).

Improve this answer
1
  • The goal was primarily motivation, yes. More specifically, it was my hope that the team could get some sense of whether they're "over the hump" or not. I'm not really sure that a simple textual percentage, as some have suggested here, has the same motivational oomph. I like the rate-charting suggestion, I'll have to think about that. The code-commit graphs on github.com come to mind (e.g., github.com/rails ). Thanks!
    – pat
    Dec 23, 2010 at 10:14
2

Considering that the progress is very slow, any kind of scatterplot or progress bar is useless as their animation will be invisible unless a user stares at them.

Choose a significant amount of time (let's take a day if the transcription spans over multiple days) and represent the work achieved in each day in a different color on a progress bar. You can also use a histogram with a bar for each day.

This way the current progress is more visible (only looking at the last day) and can be compared to the other days.

Improve this answer
1

Using a scatterplot would not be more precise than a standard progress bar, because the user is unable to make the difference between 5642 and 5643 colored pixels.

If you need to give a feedback on the exact number of processed cards, use a standard progress bar but instead of displaying the percentage done (which is visually given by the progress bar) display the number of processed cards, for example "5642 / 16254".

Improve this answer
0

It would not be very clear see progress on a scatterplot. A progress bar showing the percentage complete would be a lot clearer.

You could make the progress bar a design feature. It could be across the top of the screen or perhaps down the side.

Improve this answer
0

You could have a progress bar just like how Linkedin do it. And then have both percentual and actual numbers shown.

There is a lot of evidence that this is a good motivational booster (by applying a little stress to the situtaion)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.