Review app for low data, lower-spec device users

[fancyham]

Does app work with challenging data situations and with our target user's minimum specs?

We need to check on this and confirm our web app is fast, stable, and uses as little data as possible.

We should do this periodically and when we roll out major updates that our app works for our users who may have limited data.

Discussion:

Our target users may be on spotty wifi or have cellular data plan limits. Plus reducing page load sizes makes the app more responsive.

By optimizing for lower-end devices and data plans, we make the app better for everyone.

How to test:

• Measure data transferred in developer console on a web browser.

Nice to have:

• Some web browsers have a 'responsive' mode for developers to simulate a smaller screen. Some also have bandwidth controls to simulate slow networks. That in combination with a bandwidth limiter app may help simulate.

Optional:

• Test on phones our users may be using and measure data use and responsiveness. Phones may be a bit older and have smaller screens.
• Try it somewhere with bad wifi or set your phone to 3G.
• Partner with an organization that works with our target audience and ask them to test it.

For throttling, see: https://blog.bam.tech/developer-news/simulate-poor-network-test-mobile-apps-device and https://www.google.com/search?q=throttle+bandwidth+simulate+phone+performance

• [x] Audit site with target users, those devices, or via simulation
• [ ] (if possible) Try to identify target user's device and bandwidth specs (desk research of literature, surveys?)
• [ ] (if possible) Try to identify current user population's device and bandwidth specs (via analytics?)

[fancyham]

If anyone is curious about California lifeline phones, check out this link. The comments are great - gruff but helpful. Also gives you a sense of the issues people have with their phones.

TL;DR: One per household no matter how many in household, most have limited data with many in 3-5GB range, all are smartphones now.

https://www.freegovernmentcellphones.net/states/california-government-cell-phone-providers

thanks for the link, @wanderingspoon

[fancyham]

Use the responsive simulation mode (in Safari: Developer > Enter Responsive Design Mode) to simulate different devices and use the web inspector > Network to get bandwidth used and time elapsed.

Create a spreadsheet:

Title: Put the date, your name, what browser and computer you're using, your location

Columns: Landing page with URL, first map, organization detail, About Us, FAQ, etc. Rows: Device and screens size (use developer responsive mode) or at Food Oasis screen-size breakpoints. Please look up accessibility guidelines if you can. Cells: Amount of data needed to load the entire page, and optionally, the time it took to load (use the developer console)

Be sure to clear the cache for each new device/screen size.

2021-11-03, Mac Safari 15.1, Hawaii

Device	Landing page with URL	list only	first map	organization detail	org detail via deep link	About Us	FAQ	etc.
Mobile phone (various sizes)	.76MB 1.8s	1.41MB 2.69s
Tablet Portrait (iPad) : 768 x 1024		n/a
Tablet Landscape (iPad) : 1024 x 768		n/a
Laptop: 1366 x 768		n/a
High-res laptop or desktop: 1920 x 1080		n/a

We'll look at this spreadsheet to make sure the website loads quickly and with minimal data use (because folks have limited data plans)

[staceyrebekahscott]

Check in with Slack channels: UI-UX, Data-Science, Developers Ask about HfLA guides or frameworks for testing And check the Community of Practice kanbans for issues.

[fancyham]

Just realized that this issue is really only about data transferred — instructions for how to do it are above, but for Accessibility, please see issue #1355

This very much is part of DEI (diversity, equity and inclusion) but from a technical angle.

[fancyham]

Please try to add screenshots of the list of files being transferred so that we can identify which items are using the most data and to see if we're still needing those items. (i.e. hotjar.com)

[jnaito777]

List of file names transferred. The first two screenshots show the full list of files being transferred. The last screen shot is sorted by transfer size.

[jnaito777]

Attached the results and created a guide to be able to recreate this simulation in the future. This accessibility bench mark covered various devices (mobile, tablet, laptop) with various sizes via responsive mode, and measured resource size, transfer size, and load time. Also performed a simulation benchmark on how long (theoretically) it takes for a user to navigate the website in various network connections.

Through my research, users who have poor network connections have significantly longer load times.

UX Accessibility Benchmarking on Safari Guide.pdf (Google Doc)

UX Accessibility Benchmarking.pdf (Google Doc)

Google drive links: https://drive.google.com/drive/u/0/folders/1Rm_-ozUl_ZOmeDy9sG51w1SzbiwYr2R5

[fancyham]

One thing I noticed here are that we have a hotjar.com script (it records clicks and movements) but I don’t think we have access to that account any more. That would be something to remove.

• Added a note about this to an existing issue that reviews the analytics we have now https://github.com/hackforla/food-oasis/issues/1127#issuecomment-1272426272

[jnaito777]

In summary, I utilized Safari's responsive mode and web inspector to simulate low data settings for various devices and screen sizes to determine whether or not FOLA is accessible to our food seekers. From this UX benchmarking, we learned the following:

• The bottleneck is not the device of the user, but the network speed that makes the biggest difference.
• Food seekers with the slowest speeds need to wait up to 5 mins(edge/slowest connection) and 2 mins(very bad network/spotty connection) to access the organization detail page.
• Pages with the longest load time are: about us, donate, and FAQ. This is because of the images (and the size) that was being used.

Recommendations:

• Reduce (or eliminate) the size of images
• Potentially use a progress bar to provide feedback to the user that the page is loading
• Ensure there are no unnecessary scripts that slow page load speed

[fancyham]

@jnaito777, I added some screenshots of your results for easy reference above

Created issues:

• 1394

• 1395

• 1396