4

We are developing a web tool to allow users to combine different HTML templates to project variants. Each template has specific settings that can be combined with the project variant.

Our current design

The table design doesn't seem to be intuitive at the moment and we are not sure how to improve this. The check boxes contain settings of the template and the columns are the project variants. The project variant and settings have the same name in this screenshot but they don't need to. The first line means: "The template Text has the setting XML for the project variant HTML and no setting for the project variant XML".

I'd be happy for any hint or tip how we can improve this design.

Edit on August 15th: I improved the design as said in the comments to this one:

new design

|improve this question
  • For me, the biggest problem is scanning from extreme left (to see the subheading names) to extreme right (to get to the fields) because of the long Navigation Second Level (not selected) title. Have you considered breaking it into two lines? – msanford Aug 14 '12 at 19:25
  • Yes, I thought about this but then the table row will have a different height than those above. Maybe it looks better if I double the current row height. – Hilmar Bunjes Aug 15 '12 at 16:16
  • I'd put the HTML / XML columns to the left of the headings / labels so that they are nearer and it's easier to tell which row they are on. – Sam Hasler Oct 25 '12 at 16:35
1

I would remove the color of your subheaders and emphasize this sections by a bold font style and little much more vertical space between sections.

|improve this answer
1

I would say that the styling of a fieldset would be my preferred approach in this design. A box surrounding each section would give a nice separator and along with the legend could have a subtle title. This would give off a minimal approach and would reduce page size which I believe would work well since each section is rather small, but this would allow for expansion without losing the main headers.

|improve this answer
0

Something as simple as wrapping header and content in a box could make the visual linking a lot easier for the users. Make the different sections stand out with background, border, round corners or what you see fit. What's important is to show your users in a simple way what belongs to what.

Also instead of using the same color of all headers you could experiment with different colors to make each section stand out from the other ones.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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