I'm a programmer, and I have this basic UI for displaying user's information and reports that they have accrued.

Here is an example of one such user with a report. Right now, the report part should output their score for two parts of the test, and have a delete button, and a download full report button. It is cluttered, and I'm looking to make it cleaner and more user-friendly. Would you be so kind as to offer advice on how to re-organize this and/or other sites that I can glean knowledge from. Even another Q&A board would be helpful. alt text

  • Here's an update: http://img337.imageshack.us/img337/84/screenshot20110107at508.png KevinBrown over 8 years ago
  • Dribbble is a great place for this type of feedback http://dribbble.com/ Andy Ford over 8 years ago
  • Except I need an invite for dribbble...you wanna invite me?! KevinBrown over 8 years ago

3 answers


I agree with Trevor on the Created text part.

I would also add a little space below the number 0 in the Report area to clearly separate the two different reports.

To really streamline it, I think having two titles for Reports is redundant. You could remove the white Reports and line and leave the larger Report title. It stands out on its own since its bigger and with a different background.

In the Report box, make sure your padding is the same on all sides. Right now the Delete button is a lot closer to the right than the space between the text and the left of the box. I think I would also experiment with moving the Delete button down to the same line as Download Full Report.

Answered over 8 years ago by Artistic Abode
  • I disagree about moving the delete button to the same line as download button. I can see how this would make it a little more pleasing to the eye, but there is much less chance of the delete button being clicked accidentally in its current location. See this page for clarification: http://www.codinghorror.com/blog/2010/03/the-opposite-of-fitts-law.html danwellman over 8 years ago
Yunus 5

First of all thats great attention to detail for a programmer, loved it :)

Commenting on your 2nd draft..

Percentages below bars are kind of messing up, they are too big and are too far from attached bars, a smaller and closer to related bars position will make them more readable..

Agree with Trevor about created area, smaller font and a lighter shade of grey (e3e3e3 or ccc maybe) would be nice. (this is valid if you still have top part)

Date font size would be smaller if you want to minimize the space usage, (if you will have 4-5 reports, page will be a long one..)

And paddings inside light gray boxes are kind of out of tune for me, left-right padding would be less.

Answered over 8 years ago by Yunus

The created text is a little difficult to read. Try using a lighter gray. Also, you could use short date "Dec" to fit the entire date on one line.

Answered over 8 years ago by Trevor Landau