Additional usability enhancements

On this page:	Download:
Navigating large recordsets | Providing access to the desktop experience | Summary

This section describes additional usability enhancements that were implemented or considered during the development of Mileage Stats Mobile.

Navigating large recordsets

When developing data-intensive apps it’s important to consider the impact of large datasets on the user experience. The user benefits from continuing to use the Mileage Stats app over time, so it's wise to expect that the dataset will grow as large numbers of fill-ups and reminders are added. The following enhancements were designed to improve the browsing of these datasets.

• Lists of fill-ups and reminders are grouped to improve usability. Fill-ups are grouped by month and displayed in descending order, while reminders are grouped based on their status: pending, overdue or fulfilled.
• To save space, these groups are enclosed within expandable containers. Certain containers, such as those containing urgent overdue reminders are designed to load in an expanded state. Others load in a collapsed state to save space. In cases where large numbers of collapsible items exist, it’s also best practice to include a toggle enabling users to expand or collapse all containers at once.
• A final recommendation would be to implement some level of pagination. Pagination is particularly important on mobile due to lack of screen real estate and the need to manage latency. In this case, we might expect to see multiple types of latency. Simultaneously loading hundreds of records into one view would require a long download time, but users might also experience latency when scrolling (or expanding and collapsing) such a large number of elements.

Proposed content groupings and expandable containers

Providing access to the desktop experience

When developing an explicitly mobile experience, it’s a best practice to provide users with an easily discoverable link to the original desktop web app. This is useful for several reasons:

• Mobile devices are typically small, so it’s not always possible to include the same content and features that were found in the desktop version. Users may therefore be looking for something quite specific from the original app and it’s important to provide them a means of accessing it.
• Despite your best efforts, the mobile optimized version may not be suitable for a user’s device. It’s unlikely the (typically far heavier and more complex) desktop app will perform any better, but as mobile devices vary greatly in their capabilities, access to the desktop version may be useful to certain users.
• Many explicitly mobile experiences are accessed using a subdomain or different URL (e.g. m.domain.com, domain.com/mobile). Users on blogs or social networks may share this URL and it’s therefore possible users will reach your mobile site accidentally after clicking such a link. Successfully detecting and rerouting these users may not always be possible, so it’s important to have this link in place.

Note

Once this link has been implemented, it should be thoroughly tested on target browsers to ensure there is a clear and latency-free path from one app to the other. It’s not uncommon to discover sites that provide such a link, but don’t appropriately adjust their server-side detection. Users who click the link are therefore intercepted before they reach the desktop domain and redirected back to the mobile experience they just came from.

As we tested this "Switch to desktop site" pathway on Mileage Stats Mobile, we quickly realized that our desktop web app was in fact nearly unusable on many mobile devices. The desktop web app made extensive use of transitions during navigation, and relied heavily on desktop-optimized JavaScript libraries that were unsuitable for more resource-constrained environments. We therefore decided to implement an interim page warning users that the desktop app would—in most cases—be useless to them, and providing them with an opportunity to turn back before incurring the heavy download.

The Switch to desktop site link, shown outlined in red

Summary

Building for highly-constrained devices such as smartphones and tablets forces us to deal with many usability concerns. However, even devices without heavy constraints benefit from these improvements. When dealing with large datasets, keep in mind how these will affect a user. It’s best to use pagination when possible. In cases where your mobile site is distinct from your desktop site, it’s a good idea to provide users with a back door to the desktop version in case functionality is missing from the mobile one.

Next Topic | Previous Topic | Home | Community

Last built: June 5, 2012