If you haven’t heard, we released an iPad app. It’s pretty good too. We were confronted with quite a few interesting and unique challenges in bringing our iPhone app to the much larger screen of the iPad. Just blowing everything up so that the existing phone app used the entirety of the iPad’s screen wasn’t good enough. We needed to start with a blank slate and rebuild everything from scratch to make a true iPad experience that we could be proud of.
One area that received quite a bit of attention was the interface for entering and selecting a credit card to use during a booking. Since we sell a physical good (a hotel room reservation), we don’t use the in-app purchase frameworks that Apple provides for allowing upgrades and other purchases in the other apps you love.
The problem with credit card input is that no one enjoys doing it. It’s a utilitarian chore entering a string of numbers, an expiration date and a CVV whether you’re on the desktop or mobile. Our primary goal with creating this new card entry experience was to make it not only easy to use, but also fun.
For comparisons sake, this is what we started with on the iPhone:
Certainly a serviceable UI, but not something that we wanted to just import into the iPad UI. For one, having a full size table view in the middle of our booking workflow would look strangely out of place. Second, we tried really hard to minimize the number of popovers in the interface. Popovers are useful for supplemental information, but providing them as part of the main workflow in the app wouldn’t be a fit for the experience we were trying to provide our users.
Before we went down the path of building our own card implementation, we spent some time downloading different mobile apps and seeing how they did credit card entry. The first place to look of course is at our friends at Square. A company built around taking mobile payments is an easy place to look. We also were incredibly impressed by our same day booking buddies at WillCall. Their entire app is impressive, but their card entry UI is what caught our eye the most.
What both Square and WillCall have in common is the single-line entry paradigm. Once you enter a credit card number, your cursor automatically shifts to the next field, followed by the next until you’re ready to submit. There is inline validation along the way to ensure the user isn’t hitting the authentication servers with obviously bad data such as an expired card or an invalid card number.
What We Ended Up With
For the first version of HotelTonight for iPad, this is what we shipped:
There are three states to our card selection user interface:
- The card entry state (above)
- The card validation state (below)
- The card selection state (the screenshot below that).
The card entry state has two fields: the card number and card expiration. The card number field is just a vanilla
UITextField, but we do a bit of massaging of the input as the user types. Most noteably, we have a
UITextFieldTextDidChangeNotification handler attached that does three things:
- Ensure that we have a valid length card number
- Ensure that the card number matches the type of cards we support: Visa, MasterCard, American Express and Discover.
- Ensure the card passes a luhn validation
If the card number is validated, we automatically transition the user to the expiration date field so they can continue typing. No need to tap a next button or manually tap on the expiration field. Upon entering a successful expiration date, we transition to the validation state.
The validation state transition is where we highlight what type of card the user has entered as well as providing the last four digits of their card number. Tapping on either of those transitions back to the card entry state. The user can also backspace from the CVV field to get back there. More on that later.
Once a card is entered, it shows in in our credit card tray.
The currently selected card has a full-color treatment while the others are desaturated. If you have more than a few cards, the picker turns into a scrollable control that lets you choose between the different ones.
The Little Details
We obsess over the little details at HT. The first time we played with a functional implementation of the card picker control, we were annoyed that deleting the last character in a text field didn’t push back to the previous text field or picker state. It turns out this isn’t as easy as we had hoped.
Whenever you make a change to a
UITextField, you have the opportunity to perform an action using the
- textField:shouldChangeCharactersInRange:replacementString: delegate method. Unfortunately it is not called if there are no characters in a text field. To work around this, we decided to insert a zero width space (\u200B for the Unicode fans in the house) at the beginning of each text field.
UITextField won’t render the space, but it is capable of being deleted, and subsequently firing our delegate method. We then check if the delete key is being pressed while the text field only contains that zero width space. If it is, we transition to the previous field.
Things We Waffled Over
In the run-up to shipping our shiny new iPad app, we gave everyone in the office an opportunity to test out the application. Tests like this are always eye opening because developer eyes tend to glaze over after staring at the same piece of functionality for days and weeks on end. We miss stuff, or assume other things are more obvious than they really are.
The first thing our user tests uncovered was that people didn’t know what to do with the card picker in its default selection state if they didn’t have any cards already associated with their account. To alleviate this, we default to showing the picker to the user in its card entry state if there are no credit cards associated with the currently logged in user.
We also decided to add a bit of help text underneath each the entry fields to further guide the user along. Each text field has placeholder text, but in the case of fields like CVV we were concerned some users might not know what a CVV was. The help text offers a bit of guidance.
As with all things software, we have a few ideas of how we want to enhance the card picker going forward. For one, users can’t currently edit or delete cards. There are also some additional treatments and animations we’d like to add to the card tray as you transition from the selection state into the new card input.
You can check out the card picker in action by downloading our new iPad app on the App Store.
Interested in building something great?
Join us in building the worlds most loved hotel app.
View our open engineering positions.