1

I have the necessity of using a Table view to show the contents, including an image. Clicking on a row would display the detail view with all the text elements in a Form layout.

Functionally, I am successfully able to achieve that but the outcome looks horrendous. I am way off when it comes to UI and I am more of a backend programmer who does not have provisions to post any mockups, hence posting the real screenshot.

enter image description here

It would help me a great deal if I am able to get a few suggestions on:

  • How to structure the data differently in this case, constrained to a Tabular form?
  • What else can be done to improve the UX of this view?
Improve this question

1 Answer 1

Reset to default
2

Table header You can make your table header more prominent by increasing its font weight, giving it a darker background color than the rows.

Scroll bar I can see a horizontal scroll bar, which doesn't give a good look to the table.In case you have more number of columns, then have an arrow to display additional columns or reduce the column width and on hover give the full values.

Detailed view And for displaying your detailed view how about taking the user to another page.I feel that would be better.In case you want to have all details in this page only then may be you can make the rows expandable,provided you don't have too many fields.In case you are giving an option to edit then you can place the details in form inside text boxes, If it is read only then removing text boxes would be better.

Improve this answer
1
  • thanks prasanna, yes the fields are editable - that infact was the main requirement to go for a master detail view. Any ideas on how can I change the placement of the image?
    – StoopidDonut
    Apr 16, 2014 at 5:46

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