Design mobile UX

[nathanielrindlaub]

The mobile UX serves a slightly different audience with different needs than the desktop version. Based on initial conversations with field-based Animl users, the primary emphasis should be on making it easy to filter and view recent images, with a secondary emphasis on image review (might as well try to make it easy to validate/edit labels and add tags while they are there). Certain admin-related tasks like managing users and automation rules as well as data analysis/export features are less important. That said, there may be some Admin tasks, like registering wireless cameras or creating deployments that users may want to be able to do from the field while they are setting up cams.

Some real-world scenarios we want to support:

• a user gets an automated alert email flagging a species of concern on their phone. They should be able to click through the link, view the images, and validate/edit the label
• a pig eradication within a predator-proof fence is underway. Hunters in the field should be able to check for recent cameras for pig detection to inform their efforts.
• a user is setting up a new wireless camera in the field. They should be able to register it, see that images are coming through to their Project, and conceivably create a deployment for it if they have cell service.

Making the filters panel responsive seems straightforward enough; it essentially already works fine on small screens. The key question will be how to modify the ImagesTable and potentially the Loupe to deliver a smooth mobile UX.

One option is to disable the Loupe entirely and instead deliver an infinite-scroll, Instagram-like UI in which the ImagesTable collapses (or is replaced) by a a single column of full-width images, with rendered bounding boxes, and the metadata and image review toolbar(s) placed below each image.

The other would be to display a grid of thumbnails on smaller screens instead of the ImagesTable, and when users tap on an image, open the Loupe to display the larger image, it's metadata, and the review controls. This is more or less the approach that both the RidgeTec portal web app and the Reconyx Connect mobile app took.

Advantages include: being able to see more images at once in the grid view (this might be helpful as camera trap data often include a lot of not-interesting/relevant images, so making it easy to scroll past them would be smart), and the grid view would add value to the desktop experience too (the # of columns could be responsive and increase w/ screen size). Including the Loupe in the mobile UX would also allow us to use the same preFocusImage logic when users click through email alert links on their phones.

Disadvantages are that it requires and additional tap see the full-size image and interact with its annotations.

Next steps: meet with @lessej for a design session, get input from users, wireframe concepts and break implementation into smaller issues.