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.
- 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.