What is the best approach of presenting a tabular data with search options in android?

Question

We've developed a POS system that is in use by multiple retail stores which we'd like to port to an Android version. I am wondering what the best approach for displaying tabular data with search options given the limitations of a mobile platform, mainly much smaller screen size.

Here's a crude depiction of our "View Sales" form from our POS system. (I apologize for not actually posting a working screenshot, due to NDA concerns)

It's probably not necessary to show all of the columns, but for the sake of the argument, let's say we do.

For tabular data, I've considered the following approaches:

1. Allow users to scroll in both horizontal and vertical direction.
2. Only allow vertical direction scrolling and display data in a grouped-box row fashion.

But either option will take a huge amount of space just for the tabular data alone. I'm not certain on how to design the search options (Button to show a popup perhaps?)

I'd appreciate any guidelines on this.

Answer 1

Here are a few guidelines to follow (without having to see your specific type of tabular data)

1. Focus on one task at a time (Search, Tabular Scan, Record Details)

There is only so much screen real estate on a mobile device so I would completely separate the search options from the tabular data in such a way that the user can quickly toggle between the two modes.

2. Show only the most relevant search options up top

If most people search for a certain Brand then put that up top. It helps reduce cognitive friction by only showing the top couple search filters and then a collapsible link to Show additional search options at the bottom of the search view.

3. Show only the most vital columns in the table

Limit the tabular data to just a few columns and only scroll in a single direction. This greatly reduces cognitive friction for the user allowing them to more easily scan the tabular data.

Place key information such as Product Name in the first column and avoid columns where all the values are similar to one another. The idea is to show the minimum amount of information which uniquely identifies each row.

Once a user finds the record they are looking for then allow them a link to a more detailed view of just that one record listing the values for every column in a vertical fashion again with the most pertinent data up top.

4. If you run out of screen real estate then scroll vertically

Mobile devices and even mouse wheels on a desktop environment have people trained to scroll vertically when there is more data than will fit on the screen. This

Answer 2

Display one record at a time and swipe left and right to go to the next record. Each screen can be something like:

CUSTOMER NAME

• Sale Date
• Order Number
• Product Number
• Product Name
• Order Type
• Etc.