I want to ask you for suggestions about expanding and collapsing some details from a document. I have a link for the prototype, just press show details/ hide details. Do you have any better idea for this action to hide and show details, instead of using a button? I already have 2 more buttons with reports and ... screenshots also attached.
Site Hierarchy is very important to inform users of layout relationships. Your show details button to me is not not very well connected to the extra detail it reveals. When going through your prototype I have to click this button really fast to find out what was actually changing because you moved the layouts to accommodate for the extra detail.
I would recommend to keep the button closer to the area in which the content will change. make the content change underneath the button, not above. As a user I have already skimmed and memorized this area, for you to change it on me builds a bit of a cognitive overload.
As per execution, your giving the same weight (site hierarchy) to the details button as your are the reports. I would argue that details is not a primary call to action, as such this should be presented differently to the user.
From what I see there was enough from for this information as is. Perhaps if your doing this to reduce cognitive load, allow the user to dig deep into data by using a tooltip (unless this is going to be used on tablets or phones).
Option (Not necessarily the best)
I would say you could reconstruct the view. Rather than having 2 rows with 2 columns, Have 1 row with 1 column showing the Study Name- which is the most important.
Then on the next row, you can split the row into 3 columns to accommodate the 3 other details but in much smaller font sizes to optimize visual hierarchy.
You have a lot of width space so fitting the other details into 1 row below the Study name will look just perfect.