Strategies for loading large datasets on mobile devices

[jyoung]

What strategies do you use to load large datasets onto mobile devices?

I have a situation that I got to work, but I am wondering if there is a better way.

We have a responsive web page that will primarily be used on an iPad. We need to present the user with a list of "things". Currently there are about 1000 of these things. In addition to displaying all the things we offer a simple name search for things and allow the list of things to be sorted by name and number.

If I load all the data upfront (its only 1000 records) it works really well on a desktop browser. On the iPad however it is really slow. I know it is not the fetching of data from the server module as I've measured it and and it is a few hundred milliseconds. I think the problem is presenting all those things onto a list for the user. I am pretty confident that is the case as I've pulled all 1000 things down and then limited it to only adding 50 things at a time to the list and it is MUCH faster on the iPad.

This means however, that I have to manage the sorting, searching and scrolling of that data. I do by sorting and searching the downloaded list, clear the list control and add 50 items back to the list control. When the user scrolls near the end of the list, I add more items to the list control from the downloaded list. This is a bit tricky as you can imagine.

Are there better ways to do this?
I've thought about moving all the paging (scrolling), sorting and searching to the server module but that opens up other issues.

Thanks,
Joe

[Stewart Marshall]

Hi Joe

The basic problem that we all face is that effective UI designs for the desktop are not necessarily a good fit for smaller touch devices, and vice versa. Flowing text and images like a typical news website are OK, but data driven applications are a very different matter. Combine that with vastly reduced processing power of an iPad compared to PC, and we very quickly get to a point where "one size fits all" becomes untenable. Worth noting too, that a mouse is an accurate tool, while a handheld device and a finger often result in a little less accuracy.

So a few basic ideas

1 - Pare the first page back to the bare essentials. Do you REALLY need a spreadsheet like list? If so, limit the visible columns. Perhaps show only ID, description and a couple of other important bits of data. Also, increase the row height. 40 pixels is about as small as I ever make for a touch environment

2 - As you only have 1000 records you can download the lot and store it in a working list

3 - Improve searching so that only small sets of data are returned. e.g. As you can have the data locally, you can make a Google like search that can easily run through the list finding entries that contains the entered value. This could also provide a "search type" dropdown to give the user a more accurate tool.

4 - Searching of local data lends itself to an "autocomplete" facility too. As a value is entered, you can complete it with the first matching value.

5 - As the app will be used on an iPad, the user probably won't want to type if possible. It's cumbersome with only one hand. You'll get a far better response if you make it possible for them to get to the detail they want with little more that a few clicks and a little scrolling.

6 - Think about sorting differently. Instead of letting the user click a column heading, why not present a few common views of the data.

7 - Determine a few common data sets within the data and present a tree grouped accordingly. Then load the items when the branch is expanded. This idea works well for numeric data, descriptions, dates, product groups, states, or whatever data sets you can identify

8 - If you have a relatively small set of natural groups of data and you want a more touch-centric, visual approach, you could use a Tile. When clicked, show a second panel with the next level of data and so on.


UI design for touch is all small data sets and simple navigation. These ideas are simply those I've borrowed from using things like store locators at the mall or self scan in a supermarket.

Regards

[MarkD]

What's the iPad model number?

[Stewart Marshall]

I was thinking about comparative iPad performance as well.

I have two at home. On is an original iPad2 and the other a mini from a couple of years ago. The performance difference is startling.

This is a graphic from the October 2014 shows why

iPad-Air-2.002-640x470.png (65.43 KiB) Viewed 13838 times

[appbuilder]

We have pretty much resolved that if you have any complex application on the tablet, you require at least an iPad 2 Air. The iPad Pros are even more realistic and will be productive much longer if you are buying new devices. Surface devices are also excellent device for mobile applications and their performance is screamingly fast.

[jyoung]

I think the model number is A1458 (I think that is an iPad 4).

Stewart,
I have some of those ideas and applied them such as reducing the result set to a bare minimum, the only data that is returned and is displayed is a number and name. Since I do have all the data on the client, I am doing the sorting and scrolling on the client but I was not doing the search that way. What would be the best way to do client based searching?

Essentially I have a

Code: Select all

def_list name(#MyList) fields(#MyNumber #MyName) type(*Working) entrys(*Max) 

and I need to search on the #MyName field. I was looking for something like a "StartsWith" on a string type but am not finding that in the string intrinsic functions, though the LeftMost may work.

[jyoung]

I ended up doing the client search using LeftMost.

Code: Select all

define field(#length) type(*INT)

clr_list named(#ListOffices)

#length := #searchValue.CurChars

selectlist named(#FindResultList) where(#OFOFIN.UpperCase.LeftMost( #length ) = #searchValue.UpperCase)
add_entry to_list(#ListOffices)
endselect

Its working pretty well.

[Stewart Marshall]

This would work too. There's no need for the additional #Length variable

Code: Select all

selectlist named(#FindResultList) where(#OFOFIN.UpperCase.LeftMost( #searchValue.CurChars ) = #searchValue.UpperCase)
add_entry to_list(#ListOffices)
endselect

For client side searching, I typically use Contains. This allows words in the middle of the description to be found as well. It gives it a more Google like feel.

Regards