{"id":288,"date":"2022-03-10T19:24:49","date_gmt":"2022-03-10T19:24:49","guid":{"rendered":"https:\/\/www.mirobin.com\/blog\/?p=288"},"modified":"2022-03-10T20:01:07","modified_gmt":"2022-03-10T20:01:07","slug":"designing-data-table-for-mobile","status":"publish","type":"post","link":"https:\/\/www.mirobin.com\/blog\/designing-data-table-for-mobile\/","title":{"rendered":"Designing data table for mobile"},"content":{"rendered":"\n

The table comes in handy when we need to show big data set. It is the most effective way to see the big picture and to do comparative analysis on categorical objects.<\/p>\n\n\n\n

Most tables consist of a large amount of data in rows and columns which are effectively readable in desktop view nevertheless the problem occurs when trying to give a similar experience on a mobile phone. On a small screen, if there are too many columns in a table, the user needs to swipe a lot to see the data. And as a designer, we struggle to solve this problem.<\/p>\n\n\n\n

When we have no option, a common solution we provide is the horizontal scroll. But including that, there are a couple of other solutions we can use in our next project.<\/p>\n\n\n\n

Let’s get started with the usual one.<\/p>\n\n\n\n

Allow Horizontal Scrolling<\/h2>\n\n\n\n

Horizontal Scrolling is probably the most common thing we usually do because it takes no effort to design. But it is a bad experience because we push oversized data into a small mobile screen. Of course, dual-axis scrolling is confusing because it’s a table where our eyes go from top to bottom or left to right, not a mobile map application where dual-axis scrolling is completely normal when we see it in mobile’s map app.
However, if you still need to use it on a table, try to fix column headers or row headers to provide some sense of place.<\/p>\n\n\n\n

Amazon used it very wisely.<\/p>\n\n\n\n

\"\"
Amazon<\/figcaption><\/figure><\/div>\n\n\n\n

Responsive Tables<\/h2>\n\n\n\n

Another common approach we often see is a responsive tables view where each row becomes a small table consisting of two columns. One column is the header another is the value. This method is widely loved by developers because of its easy implementation. Just a few CSS codes and boom! It’s done.<\/p>\n\n\n\n

Here is the code link<\/a> in case you came to this blog to get the job done. \ud83d\ude04<\/p>\n\n\n\n

But the problem is it doesn’t serve the purpose of a table anymore. <\/p>\n\n\n\n

The table is for efficiently doing a comparative analysis on categorical objects.<\/strong><\/p><\/blockquote>\n\n\n\n

Since this is not a table anymore user can’t do the analysis. Even if users want, they need to scroll many times which is painful too.<\/p>\n\n\n\n

\"\"
Mobile responsive table<\/a> by Zlatko Najdenovski<\/figcaption><\/figure><\/div>\n\n\n\n

Another example: <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Carousel Columns for mobile view<\/h2>\n\n\n\n

This solution I found from Anthony in UX movement where he mentioned how we can utilize data comparing the method to make it better responsive. As mentioned in the article, user wants to compare the first column (Key ID value) with the rest of the column (Attribute Values).<\/p>\n\n\n\n

\"\"
UX Movement<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

The solution is simple – we will fix the “Key ID Value” and put all the “attribute values” in the carousel. The carousel will have navigation arrow keys to swap the column.<\/p>\n\n\n\n

\"\"
UX Movement<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

Accordion based table<\/h2>\n\n\n\n

When you need to display too much content in too little screen space, accordions are one of the most useful design elements. In this method, the table will only consist of 2\/3 columns and the rest of the column information will be inside the pane. This approach is also useful for desktop versions when you have too many columns and you want to avoid horizontal scroll. Check out Kendo UI to learn more. wpDataTables<\/a> also introduced this approach.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Credit: Viktoria Vass<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

Removing unnecessary column<\/h2>\n\n\n\n

This one is understandable but the hardest one to apply. As a designer, it is a common rule to show only the necessary information but not always successful to convince the product owner to cut off less important information. They want to show all of it. But when it comes to showing on such a small screen it is better to consider omitting unnecessary information.<\/p>\n\n\n\n

\"\"
Bloomberg<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

To conclude, choosing the right solution completely depends on what kind of data you want to show. Keep in mind how information is consumed by the users. It also depends on how cooperative the development team is in building it.<\/p>\n","protected":false},"excerpt":{"rendered":"

The table comes in handy when we need to show big data set. It is the most effective way to see the big picture and to do comparative analysis.<\/p>\n","protected":false},"author":1,"featured_media":299,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[11],"tags":[38,36,37,31,29],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/288"}],"collection":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":16,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/posts\/288\/revisions\/317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/media\/299"}],"wp:attachment":[{"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/categories?post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mirobin.com\/blog\/wp-json\/wp\/v2\/tags?post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}