Checking for Technical Requirements in a Sign-up Process

As mentioned in my last post on feature detection vs. user agent sniffing, we do use feature detection for some of our Coursera features, and I wanted to talk here about one particularly interesting usage.

A month ago, we launched a new product called "Signature Track." We created it because we wanted to give students a way to verify that they really are who they say they are, and that they are the ones that are actually doing the assessments. That will give their certificates and accomplishments more meaning.

To verify their identity, we ask them to give us a typing pattern (on a hard keyboard, where biometrics algorithms works best) and to take a photo of themselves (from their webcam, so that they can't just upload a photo). They have to do that both when they register for Signature Track and after each assessment they do.

That means that there are a few technical requirements for them to be in Signature Track: they need a hard keyboard, they need a webcam, and they need the Flash plugin (it is possible to access the webcam via HTML5 getUserMedia, but it is a bit buggy, so we're starting with Flash only access). Since the Signature Track signup process is multi-step, we wanted to warn users ahead of time about all the requirements, so that they didn't go through one step and then be frustrated to discover they couldn't complete the next step. Here's how we checked for support (or tried to) for each of our requirements:

Hard Keyboard

As far as I know, there's no actual way to query if the user is on a device with a hard keyboard. You can query whether the device supports touch events, and that's what we started off with doing by checking for the existence of document.ontouchstart, but then we found out that several browsers may start exposing Touch APIs on non-touch devices, so that seemed not very future-safe. Paul Kinlan had a good idea that we good monitor the sequence of events while a user is typing - if the keypress came before a touch event, they are likely using a physical keyboard. However, we can only do that check once the user has actually started the process, and we wanted to give users a heads up before they even dove in.

So, for now, we are no longer using feature detection - we are instead doing a check on the user agent to see if a user is on a known mobile device:

 function isMobileDevice() {
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    return (/iPhone|iPod|iPad|Android|BlackBerry|Opera Mini|IEMobile/).test(ua);
  }

If they are on a mobile device, they'll be brought to a page letting them know what we've detected, and we track in our analytics how many users get to that page:

We will likely add in the physical keyboard check based on events in the actual typing phase and warn users when they appear to be on a soft keyboard. Or, we improve the algorithms so that users can match their patterns even when typing from soft keyboards.

Flash Plugin

I typically go to Modernizr for my straightforward feature detection needs, but unfortunately, they do not include a check for Flash. I looked through their issue threads on it and did some Googling, and after trying a few options, I decided that the SWFObject library was the most straightforward option.

After including that library, our check is simply:

swfobject.hasFlashPlayerVersion("8")

If they don't pass that check, they'll be brought to a page letting them know what we've detected, and we track in our analytics how many users get to that page:

Webcam

As with the physical keyboard, the browser does not give any indication whether a user has a webcam. We would have loved if it did while we were brainstorming this product, because we wanted to figure out how many users would even have a webcam available, but alas! The only way to know if a user has a webcam is to use Flash or getUserMedia to ask for permission to use their webcam. If they don't have one, you'll get an error in response.

So, unfortunately, we can't warn users ahead of time about lack of a webcam, but we do try to message that via a modal at the very beginning, along with other reminders:

If you have a product with technical requirements, what do you do to check for them in the sign-up process? I'd love to hear more in the comments.