JavaScript and jQuery for Data Analysis and Visualization (2015)
PART II Working with JavaScript for Analysis
Chapter 5 Acquiring Data Interactively
What's in This Chapter
· Techniques to improve the usability of forms for a better user experience and improved conversion rate
· HTML5 form controls—interactive widgets that reduce data segmentation
· Mobile form best practices—contextual keyboards, mobile styling, and mobile form widgets.
Most data visualizations leverage existing data on the server or from some external application programming interface (API). However, there are times you want to incorporate data directly from the user into your charts. This chapter explores some best practices for harvesting data from web forms, which can then be used for data visualization. With these techniques, you can create a sustainable data ecosystem, which crowd-sources and displays data autonomously.
Using HTML5 Form Controls
The widespread adoption of HTML5 forms has revolutionized the way we build forms on the web. Instead of having to rely on plug-ins or user interface (UI) libraries, you can now create rich interactive forms using native HTML5 elements. Skipping the third-party plug-ins does more than improve performance; these native elements are also more reliable. You can count on them to be supported by browsers both today and into the distant future.
Introducing HTML5 Input Types
Back in the days of HTML4, developers had only a handful of input types, such as
<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">
HTML5 adds a variety of new types to this list: email, url, number, and date, to name a few. These inputs indicate a more specific type of data for the form, which has a variety of important usability and functionality implications:
· Input types build special widgets, such as a calendar widget or color picker.
· On mobile devices, input types provide a more optimized keyboard, such as a numeric keypad for phone numbers (read more about this later this chapter).
· When the user clicks or taps Submit, HTML5 form validation leverages these input types to verify the data types—for instance, testing a properly formed e-mail address (more about this in Chapter 6).
Best of all, you don't have to worry about backward compatibility when it comes to HTML5 input types. Older browsers default to a standard text input if they don't understand the HTML5 input type. Although that might not provide the richer functionality you've intended, it still provides a form that is completely usable across the board.
NOTE Special input types are also great for future-proofing. Although it's difficult to foresee how browsers will leverage these input types in the future, indicating a specific data type will utilize any enhancements moving forward.
Form Widgets and Data Formatting
On the surface, HTML5 form widgets create an elegant form experience for the user. But beyond usability, these widgets have important implications for the data in your app. Namely, they ensure that the data the user enters is properly formatted before reaching the logic of your app.
For example, you could allow users to enter dates manually in a standard text input. But this could yield any number of results, such as the following:
· February 4, 1986
· 4 Feb 1986
· 02-04-86
· 4/2/86
· 2 / 4 / 1986
As you can see, open-ended text input can quickly cause data segmentation according to the user's region and preferences (and this is by no means an exhaustive list).
However, if you use the HTML5 calendar widget, it ensures that the data entered by the user remains properly formatted behind the scenes. In these cases, the widget always returns the date in the format 1986-02-04.
That said, support for form widgets can be somewhat limited, even among some A-list browsers. As discussed earlier, if the browser doesn't support the particular form widget, it reverts to a standard text input (with all the data segmentation headaches attached). So make sure to include JavaScript polyfills to fill any gaps in the browser widgets.
Polyfills mimic native browser features for backward compatibility, and there are a variety of options for HTML5 forms. In particular, the html5forms polyfill handles a wide range of HTML5 form features. (You can read more athttp://www.useragentman.com/blog/2010/07/27/creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2/.)
Maximizing Mobile Forms
HTML5 also introduces a number of elements that have special implications for mobile devices. Namely, there are a number of input elements that provide a special contextual keyboard depending on the type of data you are requesting. For instance, when asking a user for her e-mail address, you can display a more targeted keyboard that includes default buttons for the @ symbol and dot, as shown in Figure 5.1.
Figure 5.1 E-mail inputs on iOS display this unique keyboard.
Although it may seem somewhat trivial, maximizing these contextual keyboards is extremely important for usability. Phone keyboards are notoriously cumbersome, so any improvements to the experience will be met with higher conversion rates.
Using Contextual Keyboards
Fortunately, leveraging contextual keyboards couldn't be easier. Simply set the type attribute of an input element like so:
<input type="email" placeholder="Email">
Here, the email input type produces the keyboard shown in Figure 5.1 (or a similar keyboard on a non-iOS device).
Besides e-mail inputs, there is also a special keyboard for phone numbers, as shown in Figure 5.2. Similarly, you can leverage this keyboard by setting the input type to tel:
<input type="tel" placeholder="Phone number">
NOTE There are also contextual keyboards for url and number data types.
Figure 5.2 A contextual keyboard for phone number inputs on iOS.
Styling Mobile Forms for Usability
Functionality aside, you can improve the usability of your form by following some simple styling rules. Mainly, it's a good idea to ensure the form is both readable and tappable on the tiny mobile interface.
In general, mobile form designs are “chunkier,” using larger input boxes to make it easier to tap in the intended field, even if the user “fat-fingers” it. So make sure to add some extra padding to all your input fields, and also increase the font size a bit so it's not only more legible but also larger on the touchscreen.
When it comes to mobile usability, upping the size of your form fields is one of the lowest hanging fruits. But this is just the tip of the iceberg for mobile form optimization. If you'd like to learn more, try out LukeW's classic book Web Form Design (Rosenfeld Media, 2008), as well as his blog, www.lukew.com.
Form Widgets for Mobile
In addition to the native HTML5 form widgets, there are also a number of third-party plug-ins for forms, many of which are geared specifically to mobile devices. Some are designed to bridge the gaps between desktop and mobile browsers whereas others are built to extend existing mobile paradigms. There are a variety of options out there; in particular, jQuery Mobile provides some quality form widgets for mobile (visit http://api.jquerymobile.com/category/widgets/ for more information).
Summary
In this chapter you learned techniques for using forms to acquire data from the user.
First, you learned how to leverage HTML5 form controls to create interactive widgets and reduce data segmentation. You then explored mobile form optimization techniques, using the same HTML5 form controls to call contextual keyboards, which streamline user input on mobile devices. You also learned some basics about mobile form styling and mobile form widgets.
In the next chapter, you dive deeper into HTML5 data types, leveraging them for validation and better data formatting.