ItemTable Responsive UI Research

[campb303]

The current ItemTable does not work on mobile because it requires side scrolling and does not reflow for screen sizes. We should implemented a responsive UI that allows card-like Item metadata view that is still filterable on mobile.

See: #13

Example: github.com/ArsenyYankovsky/react-responsive-cards-table

[wrigh393]

After completing some research on mobile UX for tables that have large data set we've created some design mockups for the mobile view of the ItemTable.

Mobile Row(Card)

The UI for sorting could be implemented using a component similar to the queue selector that allows users to select what columns they want to use to sort and the direction for them to be sorted by with a list of options for how the table can be sorted.

Sort Input Mockup

Filtering the table would be more difficult to input as we can't set defined values for users to filter by. We also have to take into account the possibility of users needing to filter the data with multiple values. I'm currently working on a viable way to implement filtering. One example that might work is how mui-datatables implements filtering for their mobile view. The problem with this approach is that the table would be cover with the UI for filtering, blocking users from being able to see how the data in the table changes as the input the filter value.

mui-datatables mobile filtering example

[wrigh393]

Here is a list of articles that I used to come to the conclusions in the comment above

• Mobile Tables: Comparisons and Other Data Tables
• Designing a complex table for mobile consumption (nom)
• Designing Mobile Tables

These articles talk about how we should approach the mobile experience for the table. They talk about the importance of presenting the user with only relevant information. The next step that we plan to take is to get feedback from ECN staff on what is the most relevant information in the table so we can present them with that information. Based on the feedback we get we will make changes to the UI mockups.

[campb303]

Need to make survey for what info is most important to see in a card view.

[campb303]

Initial data gathering for this is inconclusive. Not enough data to draw patterns. UI mockups should be pursued and AB testing used to determine the best information.