3

I am designing a web application which has table row and tile view in dashboard screen. In terms of aesthetic and functionality achievement, I decided to put more (three dots as material design style) button in table rows where user can have expanded view clicking on it.

Normal table row view, enter image description here

Table row expanded view, enter image description here

Here is tile view of the same,

enter image description here

My problem is, when user switching table row view to tile view showing up additional information is bit of challenge. Initially I thought of popup window kind of UI, but that is not good enough to go with. Is there any better suggestion?

Thanks in advance.

|improve this question
  • 1
    Is there additional information displayed that would potentially make a user prefer tile view over list? I don't see that looking at your wireframes; I'm curious as to why you would offer it. In fact, there seems to be less info in the tile view (i.e., no date). – Nimrob Oct 25 '17 at 13:09
  • I don't see why you need a card view at this point, given the type of data you're displaying. See Card view vs Tabular view for a good breakdown. – Mike M Oct 25 '17 at 14:08
  • I think is the vertical ellipsis will confuse users. In a Material app (all of Google) the element tends to bring up a menu, not act as a toggle switch. Why is that the desire? For things like accordions, users would more familiar with that experience and expectation. The challenge with the ellipsis is valid and think it’s due to the result (show/hide) being disassociated from the action (clicking something). Why is the pop up or tool tip not good enough (is the data a fixed length?)? – Josh Bruce Oct 25 '17 at 19:54
2

Short Answer: Use a modified overlay with content cascading down from the bottom.

Long Answer: You may solve this problem democraticaly - or you can kick some serious butt.

Primary issues are that the 3-dot "material design" icon adds a layer of a mystery. I had no idea that it would be expanding the content UNTIL you explained it. You may want to swap that for a drop-down arrow icon and text that says "More" or "Details"

Second problem is the placement of the icon when in the Card view layout. It is too far from the item that it affects - proximity is an issue.

Kill every bird with one stone: 1. Allow the content to drop off from the bottom naturally. 2. Apply a modified overaly that makes it look like the card itself has risen up using z-index. 3. Play around with fixed heights for the card, then allow it to overflow at the bottom to reveal content gracefully.

Yes, you need to know your CSS and JavaScript to get this done.

So start with one card then, you can duplicate the interaction for all other cards.

enter image description here

|improve this answer
1

showing the extra content in a popup is a really bad idea with cards. cards can be expanded i.e., extended to accommodate additional content. you can find lot of interactions such as

windows 8 card resize.

https://dribbble.com/shots/1893589-Material-design-card-animation

you can find similar web interactions something similar as.

https://dribbble.com/shots/3506555-Country-Card

|improve this answer
  • Yes I understood that. But from aesthetic stand point, I couldn't able to visualize for tile view. As you can see, I have defined for row view. – Vasethvan Oct 25 '17 at 12:32
1

I may suggest using a masonry layout while switching to tile view in your application design. It eliminates the use of popups and also keeps the grid in place properly on a page by automatically placing elements in optimal position based on available vertical space

Check out the following example from Codepen, https://codepen.io/bharath-bhony/pen/oGKNjQ

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