The other day, Anders Monsen and I were prototyping a custom iPad app to help a stage company manage work crews for large arena events. Each event has multiple shifts (7am, 7:45am, 8:30am, etc.). At the start of each shift, several employees need to clock-in quickly and receive their work assignments.
We researched two ways to identify an employee with an ID card: scanning a barcode and reading a magnetic stripe. We found three apps in the App Store that can integrate with FileMaker Go, two for scanning barcodes and one for reading a magnetic stripe using a third-party card reader.
I really enjoy exploring the usability of a solution during prototyping. In this article, I will share some of my observations for this use case. Anders will explain the technical side of integrating FileMaker Go and iOS apps with URL scripting in a separate articles.
For the prototype, we created a simple layout with two buttons, Scan and Swipe. The purpose of each button is to switch to the companion iOS app, perform the scan/swipe, and return the data to a text field in FileMaker Go.
Some of my preliminary observations include:
- Holding the iPhone – I am right-handed so I visualize the user holding the device in his left hand and the ID card with his right. I liked cradling the iPhone in my left palm (portrait orientation), allowing my thumb to tap the buttons.
- Holding the iPad – With the iPad, weight is the determining factor. I liked balancing it with my hand halfway between the top and bottom edges (portrait orientation). Again, my thumb was available to tap the buttons.
- Button Design – Larger buttons that are easier to tap. I made the button height 50 points for the iPhone and 72 points for the iPad. To tap a button with a thumb, I made the buttons extremely wide, 75% of the iPhone screen and 85% of the iPad screen.
- iPhone Case – For this app, a case cannot block the camera, which scans the barcode, or the dock connector, which connects to the third-party card reader. A thin case like the Fitted for iPhone 4 from Speck works nicely.
- iPad Case – Besides working with the camera and dock connector, a case will need to help the user grip the iPad. A thin case with a rubber texture like the NGP Semi-Rigid Shell from Incipio is a good match.
- Camera – For scanning a barcode, the device needs a good auto-focus camera. For this solution, we need either an iPhone 4/4S/5 or Retina display iPad. Of course, reading a magnetic stripe does not have the same requirement.
- Barcode App – For scanning barcodes, we tested pic2Shop (free) and CNS Barcode ($9.99). I selected CNS Barcode because it is designed for FileMaker Go, scans more accurately, and supports scanning several barcodes in rapid succession.
- Mag Stripe App – Reading a magnetic strip requires an app that can communicate with an external card reader and supports URL scripting. CardSwipe ($15.99) is designed for FileMaker Go and is the only app we found that meets these requirements.
- Card Reader – The iMag Pro MagStripe Reader ($60-$70) is the only card reader that CardSwipe supports. It plugs into the dock connector on the iPhone and iPad. So far, my only concern is it can become slightly unseated when aggressively swiping a card, especially with the iPhone.
In the end, our customer decided to scan barcodes with CNS Barcode. And, now we have knowledge of using magnetic stripes for future projects.