3

I have a system where the tabular data is send via email and looks like the attachment. The table may have more than 50 rows in single email. Are there any solutions for this table view and use any smart solution?

Solution should consider responsive design for this email. Also, it should support older email clients too. Attachment

  • Show only what the user needs, instead of throwing everything at them and making them sort it out. – Evil Closet Monkey Dec 13 '16 at 4:26
  • Boss needs everything in this table! – Sushan Dec 13 '16 at 5:17
  • 1
    For what purpose? What does he or she intend to do with this information? Why is it important that the table is in the body of the email rather than, say, a PDF attachment? – calum_b Dec 13 '16 at 15:56
  • 3
    Sounds like your boss isn't really concerned about usability. – Evil Closet Monkey Dec 13 '16 at 18:35
  • 1
    It's not likely the user needs every last bit of this information immediately at any given moment. There is some workflow or analysis which will naturally heighten the importance of some data over other data, at least at various points in time. Is deadline most important? Category? Age? Publisher? Everything cannot be equally important. If you can provide some description of how the data is used, better input can be provided. – Eric Stoltz Dec 13 '16 at 19:06
3

You can try two different UX behaviors: 1. What we call "Information rows or cards" with information hierarchy defined with client by a simple card sorting. The information cards can contain several data with a more usable approach. Here is a quick example:

Information Card

In this example you have 5 columns (Typo of Information and Icon, Number of Policy, Expire date, remaining time and more info) simplified in only 3 leves of information and, by gestalt laws, only 2 visual groups to understand. This card is stackable with other above and below, teaching to the user that the easy scan any of the information structure through all the records.

The second approach is a "hidden complexity" method where you save by user the columns to be displayed on the workspace and with a simple "gear" icon let the user select them. Here you can say that the interface are "tailored" to different preferences BY USER (a selling gag).

Here an screenshot of this approach that I applied to a client (in spanish):

Columns visibility managar

Hopes this helps :)

Best wishes.

1

For starters, tabular data laid out in tables is, inherently, not responsive. That's not necessarily a bad thing if the data makes the most sense staying in a large table. Sometimes panning and zooming in and out of a large table is actually the best way to digest the data.

But usually, the solution is to not use a table in the first place if you want a responsive layout.

  • Do you suggest that either use a table for both desktop and mobile or not at all? A table for desktop + different solution for mobile wouldn't be better? – Alvaro Jan 13 '17 at 22:44
0

If you are asking about the development of this kind of responsive email, then you can ask it on Stack Overflow.

Regarding the design of this table, You can make it more friendly to the reader maybe in the following ways.

  1. Align the text of the entries to the left (titles can be center aligned).
  2. Instead of 2016-12-04, you can use Dec 04, 2016 format keeping in mind that there are a lot of numbers(*e.g. 2017-01-03 12:00) in a really small space.
  3. I wonder if the thumbnail for the Details View is of any help. It is way too small(ref rows 5,6,7,8)

If you are sure that your end design is the best solution, you will have to convince your boss about it.

0

For wide displays, perhaps you can include the table in full view. Setting the <table> width to 100% and letting the columns size themselves should display similar to your screenshot above in most clients.

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td>Content</td>
        <td>Longer Content</td>
        <td>Even Longer Content Can Go Here</td>
    </tr>
</table>

For mobile displays, you could try adding a horizontal scroll to a <div> that wraps the <table>. This way the table stays intact and stays large enough to read. overflow has decent support in mobile email clients.

<div style="overflow-x: scroll;">
  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
       <tr>
           <td>Content</td>
           <td>Longer Content</td>
           <td>Even Longer Content Can Go Here</td>
       </tr>
   </table>
</div>

enter image description here

0

Sounds like 2 separate problems.

  1. The boss doesn't understand the purpose of email or the concept of User Experience. See other questions and answers for that, e.g. How do you persuade an organization to value UX

  2. Responsive datatables. There are two main options: the layout as you describe, and the card UI design as Juan has pointed out. (Scrolling using overflow doesn't work on many email clients, and automatically hiding columns relies on JavaScript, which obviously doesn't work.)

Traditional datatable: no

Emails on mobile can comfortably display up to about 5-6 thin columns, so your layout is never going to be responsive unless you hide most of the columns on the email, and allow them to click through for more information (on a website, where you can use JavaScript solutions).

Card UI Design

Essentially, this pulls the data out of a table completely, opting for a 'card' which enables you to use multiple rows for a single entry. Then, you complement this with graphical hierarchy to create a pleasing display that responds to screen width naturally. There are tricks to make it more accessible and durable too, as I describe in my post: Responsive DataTables through Card UI Design for Email

You may end up with something like this, which just uses simple tables (no media queries, no hiding, fully and totally compatible with every email client). It reduced 6 columns to 3, and grouped together the data which goes together, making it much easier to read:

Before:

Traditional datatable

Card UI Design makeover:

Multiple cards, one for each row, and a total card

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.