Best way of displaying table data on ipad - grid vs list

Question

I am struggling with a option for displaying tabular data on an Ipad

I've split the right hand side into the options:

Top, normal table layout. Advantages: can fit lots of rows into view. Can spot groups of data. Cons: smaller target sizes.

Bottom: IOS list view. Advantages: cleaner layout, more white space. Cons: cant display as many objects in vertical space.

Notes. The app is to display large numbers of defects a site contractor might log while working on a building project. Each object lists type, action needed, the defect name, who its assigned to, when its due and links to the defect itself and any other information.

My question:

Which will be the better option for the best assimilation and management of a large number of objects within the project? Why is it different on ipad to desktop? Are there issues aside from target sizes?

Answer 1

Why grids

Tabular data arrangement is a raw dump that expects the viewer to carry the full burden of analysis and interpretation. This makes sense when the software can’t be expected to anticipate how the user may choose to evaluate the information.

Tables are good when:

1. All data columns are of equal or unknown importance.
2. Horizontal space is not a limitation.

Tables are a fallback when you have no reasonable control over the data points being displayed, ie the user can assemble their own table from a grab bag.

Why lists

Opinionated data arrangement (that’s what I call your lists) establishes a hierarchy of data and makes more flexible use of space. What we now widely refer to as “cards”, made famous by Google Now, is one example of opinionated arrangement. In this case, users are looking for a known structure and priority of information and the presentation can aid their evaluation.

“Lists” are appropriate when:

1. You know what will be displayed.
2. There is a useful hierarchy to the data.

Arranged presentations can accommodate a limited set of user configurable data points. The trick is to set up a framework for what types of data will go where. You still need to understand the potential variations in hierarchy.

Sorting is not an issue

The concern of sorting a non-tabular presentation is a pattern that has been solved successfully in plenty of ways. Look around for filter and sort patterns. Just a few solutions available:

• Limited sets of sort options can be presented as buttons for quick switching.
• A combo box / drop down solution works for long lists.
• An exposed list in a left or right column can coexist with a filter controls.

If there is any added weight to the sorting process, the assumption is that an ordered presentation of data makes up for the cost.

Answer 2

I think you are already on the right track with your design. A tip I would add is to have the left pane shelve out when needed, but hide it when a user is scrolling the table.

To answer your question:

I would go with the table over the list. Lists have always seemed horrible for tabular data to me. Sorting them on the different data dimensions almost always requires an 'extra click', whereas a table is readily sortable by a single click, if you need such. Even from your question the pro of a list is whitespace, which is a good thing but I think your table can gain some whitespace if you hide the left pane and pad the data cells a little bit more.

On the section of the list, you could add a 'preview' pane instead where you display more details of objects if a user clicks on them. You can hide this preview pane too to make up real estate and give your table more whitespace. Just be cautious with too many things sliding in and out of view, they can be a little annoying.

The difference between ipad and desktop is that desktop is resizable but ipad is not. Tables are not well suited for a responsive design. If a user shrinks the screen on desktop then you are left with the decision of how to handle such, check this. A list on the other hand can respond well to screen size changes, see this short youtube video for an example.

Answer 3

"The app is to display large numbers of defects a site contractor might log while working on a building project."

Given this information, think about the workflow of who is using it. What are his/hers immediate goals? I am going to make an assumption that the person using this primarily wants to see a list of issues associated with each project. So give them that.

Your list design seems very suitable. You have crafted a visual hierarchy that would be easy to scroll through and read just the titles of each issue.

"Each object lists type, action needed, the defect name, who its assigned to, when its due and links to the defect itself." Again, go back to the workflow. Are each of these equally as important? I would weight them and display them accordingly(like you have done, but maybe an area to tune). Especially since you can tap for more information.