Interacting with mobile applications
By interaction, we mean how users work with an application, which includes the following:
- Change from mouse to finger interaction, that is, from click to tap
- New mobile data input methods including popup keyboards
- The need to provide user interaction feedback
Next, we will cover these interaction differences in a little more detail.
From clickable to tappable
The following screenshot illustrates the Smartphone ArcGIS finger interactions that we just discussed:
Smartphone ArcGIS finger interaction
Traditional web development is focused on mouse interaction, where a mouse is a high-precision device. Mobile web development is quite different, as it relies on touch or finger interaction instead. This is very low precision, particularly since we all have different sized fingers. Tapping a button can be problematic and requires that the selectable on-screen items be larger to ensure a good user experience. Map interaction is driven by a finger slide for pan and a pinch to zoom. Zoom sliders are often included in mobile ArcGIS apps and they also provide zoom functionality.
New data input and collection methods
Data input relies on a screen-based, touch-driven keyboard. Usually, multiple keyboards are available; these are for character input, phone or numeric input, and date input, respectively. Voice is another potential source of data input for a mobile device. This provides new and interesting possibilities for mobile web developers.
Mobile device input types
For ArcGIS developers, the built-in GPS that is present on most devices means that current location, or geolocation, is a valuable new data source for use in any mobile application. Similarly, built-in cameras provide both video and still imagery, and these can help to enrich the data used or collected in an application.
Providing interaction feedback
Any interaction should provide users with obvious feedback. When a user taps a button or link, it is good if the item changes state.
Note
Feedback is particularly important to help guide mobile users, when they use your application.
For example, as shown in the following screenshots, a green-colored button with the label, 'Online', changes to red and the label changes to 'Offline' after a user tap:
Button changes color and label based on user interaction
Another good feedback mechanism is a loading animation. This is particularly helpful when loading maps:
Map loading animation
