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.

enter image description here

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.

enter image description here

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?

  • is this a mouse or touchscreen product?
    – Confused
    Commented Oct 4, 2016 at 15:41
  • It's a mouse product - with the content in question, it wouldn't really be feasible to input data on a tablet.
    – mike
    Commented Oct 4, 2016 at 17:51

3 Answers 3


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.


  • Thank you for the feedback - it's much appreciated. I'm not looking for somebody to design the layout fro me (apologies if my initial post gave that impression) - just looking for advice regarding button layouts, or the use of a minimal amount of buttons in order to guide users from one end to the other without any confusion. I do like the idea of displaying to the user that data has been updated, and I will be implementing that idea.
    – mike
    Commented Oct 4, 2016 at 17:55

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:

enter image description here

  • It's a good answer. Could you elaborate?
    – Mayo
    Commented Oct 4, 2016 at 18:53
  • Which sliders are you familiar with?
    – Confused
    Commented Oct 4, 2016 at 19:01
  • @Mayo see update...
    – Confused
    Commented Oct 4, 2016 at 19:08

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.

Values Changed

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.

Your Answer

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

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