When we set out to redesign our mobile drop-in product, one of the design goals was improving the accuracy of card data provided by end-users. We reached our goal by providing a "No Error" experience while entering card data.
Instead of displaying lengthy error messages on mobile devices that required users to spend precious time reading, we opted to assist the input of properly formatted data the first time. When considering expiration dates, there were two common practice UI components we considered: select menus and a number input — neither option was good enough.
• Allowed users to enter valid dates (not in the past)
• Scrolling months and years takes a long time
• The input rhythm breaks because everything else is text input
• Kept the input rhythm
• Allowed users to enter invalid dates (in the past) - BIG NO NO
...So what now?
Our solution was to create our own input method that in essence was the best of both worlds. Users could ONLY enter valid expiration dates in the present or future and preserved the input rhythm of virtual keyboard taps. As an added bonus, we were able to provide a valid data in 2 taps instead of 4-6!
You can learn more about Braintree's mobile drop-in at the following links:
Drop-In for iOS
Drop-In for Android
Mobile Drop-In Update Announcement
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2018 Dribbble. All rights reserved.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.