large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2rFS9hS">UX Power Tools &#8211; Medium</a> | Jon Moore </p>
<h4>Tiny Tutorials</h4>
<h4>Hurry…learn something…quick!</h4>
<blockquote><p>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!</p></blockquote>
<p><img alt="" src="http://ift.tt/2sqckh2"></p>
<h4>What are we designing?</h4>
<p>A pre-formatted text box for things like phone numbers and credit cards.</p>
<h4><strong>When are they used?</strong></h4>
<p>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.</p>
<h4>Why do they work?</h4>
<p><em>Never</em> 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. 😍</p>
<h4>Applications</h4>
<blockquote><p><strong><em>Phone Numbers: </em></strong><em>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.</em></p></blockquote>
<p><img alt="" src="http://ift.tt/2rGbKyz"></p>
<blockquote><p><strong><em>Credit Cards: </em></strong><em>Users begin typing their credit card number, and the system starts validating after two digits (</em><a href="http://ift.tt/2sqfQHY"><em>validation rules here</em></a><em>). 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.</em></p></blockquote>
<p><img alt="" src="http://ift.tt/2rGitIM"></p>
<h4>What’s the UI recipe?</h4>
<p>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:</p>
<ul>
<li><strong>Icon: </strong>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 <a href="http://ift.tt/2pDNg30">Nucleo Icon Set</a>.</li>
<li><strong>Type: </strong>Use a text symbol so that you can swap the text style to show different states of the text box (placeholder, default, etc).</li>
<li><strong>Container: </strong>Create different container symbols so that you can swap in the inspector panel to show various states (default, focused, error).</li>
</ul>
<p><img alt="" src="http://ift.tt/2sqrUcp">Sorry, I couldn’t find a flag with 51 stars on it.<img alt="" src="http://ift.tt/2rGj7FU">These are the nested symbols that make changing state a breeze.</p>
<h4>Try it yourself!</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgumroad.com%2Fl%2FAJUjJ%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fgumroad.com%2Fl%2Fpreformatted-text-boxes&#038;image=https%3A%2F%2Fstatic-2.gumroad.com%2Fres%2Fgumroad%2F2350960978385%2Fasset_previews%2F7e09c48b50539e9373ae0d8d4ec259bc%2Fretina%2FToilet_20Tuts_20-_20Pre-Formatted_20Text_20Boxes.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=gumroad" width="670" height="670" frameborder="0"><a href="http://ift.tt/2sqwKWU">http://ift.tt/2sqwKWU</a></iframe></p>
<h4>Summary</h4>
<p>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.</p>
<p><strong>Before you leave, don’t forget to:</strong></p>
<ul>
<li>Download the freebie above!</li>
<li>Check out the <a href="http://ift.tt/2pDNg30">Nucleo Icon Set</a> for flags of every country, and all kinds of payment methods</li>
<li>Grab the <a href="http://ift.tt/2cz5Jet">UX Power Tools</a> design system to use this component and tons of others just like it.</li>
<li>Share this tiny tutorial with your friends on social media!</li>
</ul>
<p><em>When I’m not </em><strong><em>formatting phone numbers</em></strong><em>, I’m working on Sketch design tools at </em><a href="http://ift.tt/2cz5Jet"><em>UX Power Tools</em></a><em> to make you a better, more efficient designer.</em></p>
<p><a href="https://www.twitter.com/uxpowertools"><em>Follow UX Power Tools on Twitter</em></a><em><br /></em><a href="https://www.twitter.com/thejmoore"><em>Follow me on Twitter</em></a></p>
<p><img src="http://ift.tt/2rFTvJo" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2sqEb0j">Design a Pre-Formatted Text Box for Phone Numbers and Credit Cards</a> was originally published in <a href="http://ift.tt/2mDvnUK">UX Power Tools</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Design a Pre-Formatted Text Box for Phone Numbers and Credit Cards

Design a Pre-Formatted Text Box for Phone Numbers and Credit Cards

Tiny Tutorials

Hurry…learn something…quick!

Top Stories