I am pretty much new to designing layouts for pages. I am looking for suggestions whether my approach is right.

Here is the sample layout of my page. http://plnkr.co/edit/BNHvqb?p=preview

Basically the page is divided into 3 sections - Options, Summary and Details. On page load the data for the default radio button and dropdown item will be fetched and filled in the respective sections. Based on the options selected the data for the 3 sections in the Summary will be updated. But the Details section will have data of the 1st summary section by default.

My questions

  • how to relate the data between the summary section and the details section. i.e. how to visually represent that the details sections is showing particular summary section
  • how to let the user know that the other 2 sections are clickable and data for the details will change accordingly

Right now my approach is to highlight the section-1 by giving a background color and have the Title for details as 'Section -1 Details' and decrease the opacity for section 2 and 3 a little bit and show the hand symbol when hovering over those sections.

But i feel i am diluting the data for Summary sections 2 and 3 by reducing the opacity.

Please let me know whether my idea is fine or some other better approach to resolve this.

Thanks in advance.

  • Could you add the sample layout as a picture to your question for easier comparison of layout and explanation? – locationunknown Aug 11 '15 at 7:41
  • Hey Ashvin, your description of your design approach doesn't really explain the problem. Try describing the specifications of the page: what kind of information does the page need to show, what are the relationships between the blocks of information, what kind of controls does each block of information need and how the page needs to be connected to other pages. – Zoe K Aug 13 '15 at 14:21
  • A image will be very helpful. – Kristiyan Lukanov Mar 8 '16 at 14:19
  • You can put the master data in tabs? – liwston Nov 4 '16 at 2:29

I would say Tab structure would really solve your problem.I Added a Sample Image how it should done with my understanding to look elegant and with minimum clicks for the user to complete his job / what ever.

On top this jab Structure you can name default selected radio option and dropdown so that it gives a basic understanding to the user what user selected and need to select. enter image description here


Have you considered a more web friendly layout. Such as a menu usage to split the data in separate pages instead of one page with a filtering system.


Colour code the summary section to relate to the details section. For example.


Use a downward chevron to trigger more information.

Hope this helps


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.