1


I am working on a Summary table.
The data can be huge (may be 5000 or more records to show).
User should be able to:

1. scan and manipulate the data
2. Find the records
3. Take actions like, View details (Read only mode), Add new record, Delete record, Edit record. In later stage, we will be adding export (CSV, EXCEL) and print.

The current UX design given following solution for the summary table, in Tile View and List View. Which, I think not usable and fails to meet user requirement or may need few more steps to perform the actions associated with the records.

Following is the solution by UX team with Tile View:
enter image description here



Following is the solution by UX team with list view: enter image description here



And this is my solution:
In next version we will be making provision for export in CSV, Excel format and download.
Apart from that the Edit button, which is now next to delete button will reside in individual row.
Add button will follow, CTA, like from "Add" to "Add New Record"

Please give your thoughts/suggestions on all three options

My Solution:
enter image description here

3
  • Please also let me know which design/solution you will vote Oct 1, 2018 at 9:49
  • What does scan/manipulate the data involve? If you can specify some use cases it will be easier to think about how the design will be fit for purpose.
    – Michael Lai
    Oct 1, 2018 at 11:32
  • In our case its not more than sorting, filtering the records. I'll like to add one more thing and that is the action i missed here. User can also do bulk delete and bulk authorization Oct 3, 2018 at 5:21

2 Answers 2

2

Thoughts on the table:
The table makes it easier to compare items by their values. Scanning columns can be quick, but it can sometimes be not so easy to see at once which values in a row are connected. I see you already thought of that with different odd/even row colors, but that only helps just a bit and will make the table look full or cluttered. Large tables are not easy to translate to smaller screens.

Thoughts on the tile view:
If users are mostly using search or filters and the result is usually a few items, a well designed card (tile) can help identify the right one quicker than a row in a table. Also tiles are better suited for different screen sizes like for mobile.

Thoughts on the list view:
This is just a table with one column, or just a card/tile that takes up the whole width. Doesn't make sense to me.

Conclusion:
Unless users are just interested in a single item for each task they want to perform. And unless the user is keen on searching and filtering and you have evidence that that's the way they work... The tile concept might work best if it is well designed.

But, from the information you gave, I guess the table is the best option. It allows scanning and sorting columns and is better suited for comparing and finding items in a large data set.

Or switch between a table for bigger screen resolutions to tiles for smaller screen resolutions. It's just an idea.

0

tile view

  • this switch tile / table in the upper right corner should have both icons available (recognition over recall rule)
  • authorized vs unauthorized icon and text, on card, can be designed with different color also
  • pagination numbers and this option to insert page number on the right, should reverse positions. standard pagination 1 - 2 - 3 will be more often used
  • unaothorized, open icons.. i would move this up, and leave this space for future actions (view, delete, download, export or whatever youll have).. this is standard place on card design for that

list item by ux team

  • consider improving your team

your list item

  • fair enough, lot of small details to improve
  • editing you can solve with menu icon (3 vertical dots) that are at the end of the each row. once clicked they open small popover menu with edit / delete options. is more intuitive than this with checkin and actions down

Your Answer

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

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