Guiding users through updating generated content

Question

I have a page that lets a user generate a comment for students in a class, based on their performance during the year. For the most part, each student will have the same score in all areas, and will not need to be updated.

The refresh button to the right allows the user to regenerate the comment with the same settings, should they not be happy with it. Should the user decide that a student has performed very well in a particular area, then clicking [edit] brings up the following instead.

Once the user has adjusted the values for this student, clicking update will bring him back to the original view, with the graph and comment updated to match the new values, as shown.

(edit: apparently I can't post more than two images at a time).

My question is, what is the most appropriate layout of the page above, both in terms of buttons used, and physical positioning of content and controls, that would make this as intuitive as possible for users to navigate through. The functionality is all there (or can be adjusted to suit if necessary), but more expert eyes than mine in the UX department would be appreciated. Is there a way of minimising the controls used, where the user can intuitively go through the process from start to finish without tooltips or other explanations as to how to do so?

Answer 1

Doing one field at a time is the best and most easily explainable way of collecting data. However, In this case, I'd suggest allocating the majority screen area for the form rather than to text will make things easier for the user.

Just like a regular form, the update should be the right focused call to action button and reset should be left, secondary button.

Displaying that data has been updated can be done using status bars (Information bar with indication of successful action)

Now, to help any further - I'd have to actually design (wireframe to say least) the page layout and that's not what stack-exchange is for. So I guess this is where my explanation ends.

Cheers

Answer 2

Make the graphs into sliders, so they can be both viewed and edited at the same time.

Here's a really ugly slider, but you get the idea... it conveys both knowledge (amount) the steps available, and that it's editable:

Answer 3

Thanks to everybody for taking the time out to answer, and I've certainly taken your advice onboard.

I like the idea of using sliders, and had considered it prior to posting, but I had issues with having so many sliders so close together. In the end I removed the settings panel, and instead exploded the bar graph out, when the user wants to update.

Any changes made to the graph are highlighted, until the user accepts the changes, at which point the graph is imploded again and the updates accepted.

It's still very much a work in progress so far, so excuse the roughness of the layout, but hopefully it's clearer for users to follow, with less jumping between different modes.

Thanks once again for your feedback.