1

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. enter image description here

enter image description here enter image description here

Link1: https://xd.adobe.com/view/f1dd2756-5e0c-4323-7b84-f8c012d90a50-87ec/ Link2: https://xd.adobe.com/view/b2fa40c8-ec8b-4898-711f-b423212283a0-c4cb/

Improve this question
7
  • please try to post inline gifs or mocks for the sake of the community. If the link to your prototype goes dead, then we lose the context of the answers members may provide.
    – Mike M
    Oct 24, 2018 at 13:05
  • Hi, can you upload a screenshot? A link may at some point become stale. This makes sure that the question and answer is still useful to other people in a few years time.
    – Franchesca
    Oct 24, 2018 at 13:05
  • sure, I can add the screenshots here
    – gm1995
    Oct 24, 2018 at 13:11
  • Can you explain why the info needs to be hidden/visible? If it is to save space, this visibility toggle is not worth the space. The button takes up the same height as the content being hidden.
    – jhurley
    Oct 24, 2018 at 14:10
  • yes, it is because of the visibility of the content.
    – gm1995
    Oct 25, 2018 at 9:08

3 Answers 3

Reset to default
1

Site Hierarchy

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.

Recommendation

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.

Execution

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)

enter image description here

Improve this answer
2
  • what if we have longer names as study name?
    – gm1995
    Oct 25, 2018 at 9:08
  • and also your button jumps to the right side In my proposal it jumps less
    – gm1995
    Oct 25, 2018 at 10:07
0

You may consider this feature automated. As a user scrolls down, he is no more interested in the details and the data can go hidden. As he scrolls back, the details can appear. You can validate for senarios and tweak the implementation.

Improve this answer
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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