Tiny Tutorials
Design a Pre-Formatted Text Box for Phone Numbers and Credit Cards
Hurry…learn something…quick!
This is part of a series of short tutorials about specific elements, components, or interactions. We’ll cover the UX, the UI, and the construction inside of Sketch. Plus, there’s a freebie for you at the end!
What are we designing?
A pre-formatted text box for things like phone numbers and credit cards.
When are they used?
To collect data that requires high levels of precision, or when you want to make sure you’re sending the database clean records in a consistent format.
Why do they work?
Never expect the user to follow instructions. Instead, enforce formatting within the control itself. It’s a lot harder for users to screw up, and the data you get will always look beautiful. 😍
Applications
Phone Numbers: Users choose their country from the dropdown. The field uses masked formatting to show the expected appearance of the number. As they type, the field will automatically format their entry with the appropriate parentheses, hyphens, and spaces.
Credit Cards: Users begin typing their credit card number, and the system starts validating after two digits (validation rules here). When a format is recognized, the associated credit card symbol will appear on the right. It’s best practice to mask the user’s input after the field loses focus so that the wandering eyes of strangers can’t see it and go on an Apple shopping spree.
What’s the UI recipe?
A pre-formatted text box is pretty simple to build with Sketch’s nested symbols. There are a couple tricks you can use so they’re ⚡️ fast to design with:
- Icon: This should be on the left for phone numbers, and on the right for credit cards. Make your flag and payment icons symbols so that you can quickly swap them in the inspector panel. I couldn’t be bothered to create hundreds of flags myself, so I use the ones from the Nucleo Icon Set.
- Type: Use a text symbol so that you can swap the text style to show different states of the text box (placeholder, default, etc).
- Container: Create different container symbols so that you can swap in the inspector panel to show various states (default, focused, error).
Try it yourself!
Summary
Pre-formatted text boxes aren’t particularly difficult to design, but there are some tricks you can use (like nested symbols and overrides) to make your life a little easier during the process.
Before you leave, don’t forget to:
- Download the freebie above!
- Check out the Nucleo Icon Set for flags of every country, and all kinds of payment methods
- Grab the UX Power Tools design system to use this component and tons of others just like it.
- Share this tiny tutorial with your friends on social media!
When I’m not formatting phone numbers, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.
