4

There is one grid-view in our web application. But as you can see, group and category are eating up the space. enter image description here Is there any better ideas for such layouts? Even if there is total change in the layout, that will be fine. I tried to search for better alternatives but I couldn't find.

9

I think you should also try a card layout. For example:

Card layout example

This layout provides multiple benefits:

  • Aids quick scanning
    • Cards are easier to scan compared to tables.
  • Easily adapt to small screens
    • Cards will work better on mobile/smaller devices in this case compared to tables, as they can be organized to scroll in a single column.
  • Edit/delete buttons are positioned close to the items they modify
  • Removes Icon cluster
    • You don't have to show the icons in multiple rows. Using cards, icons can be shown (or emphasized) on hover and directly where they are needed.
  • 3
    Can you provide some reasoning? Why is this a better option? What does it solve that were issues in the original? – JonW Nov 24 '17 at 11:49
2

You may try a tree hierachy style organization. Something like this :

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.