small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

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

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="http://ift.tt/2mrT55A">Speckyboy Web Design Magazine</a> | Stephen Moyers </p>
<p>Your forms are one of the most important elements on your website, both for your users and the company. At their best, forms interact with visitors and are user-friendly. A good form encourages visitors to fill them out for feedback, subscriptions, bookings, and registration.</p>
<p>At their worst, forms are clunky, hard to navigate, and detract from the overall feel of your page. How do we create intuitive and efficient website forms, and how do they drive business value?</p>
<p>You might also like to read <a href="http://ift.tt/2d9Kr4v">10 Methods for Optimizing Your Forms for Mobile Devices</a>.</p>
<h2>Taking Cues from Google</h2>
<p>Our favorite search engine has seen a lot of algorithm updates over the past few years, all in the name of making it easier for users to find what they’re looking for with ease.</p>
<p>Most recently, Google has attempted to make searching more like speaking to a friend. Users now expect to get what they’re looking for by using everyday language. This has spilled over to web design, and visitors expect a human factor in coding and machine learning.</p>
<p>This led to a rise in natural language user interfaces and natural language forms that aim to get user information in a more human and engaging way. Companies seek to reflect a user’s mental processes, rather than the traditional (and stiff) presentation of traditional forms.</p>
<p><a href="http://ift.tt/2jLZu8i">Customizable templates</a> and <a href="http://ift.tt/1XbPQKO">pre-built plugins</a> make this easier than ever. While intuitive forms take much of the grunt work out of <a href="http://ift.tt/2n50nZU">form design</a>, best practices still dictate how, when, and where users see forms on your website.</p>
<h2>The Best Practices for Form Use</h2>
<p>Where and how do we present forms in a way that are most useful to a user (and for your company)? Follow these guidelines:</p>
<h3>1. Ask for Required Information Only and Follow a Logical Format</h3>
<p>The best forms are not demands for information, but a conversation, as natural language processing illustrates. As with any logical conversation, it should follow a communication between your user and your app (or website). Achieve this by:</p>
<ul>
<li>Asking questions in sequence, from a user’s perspective. This includes presenting information in a meaningful and logical way (as we would in a conversation). If there is no meaningful order, order options alphabetically.</li>
<li>When creating a form, ask why you’re asking each question and what you plan to do with the information. This helps eliminate unnecessary questions and increases the likelihood of retaining user attention. Reducing user effort is the most important step in increasing your completion rates.</li>
</ul>
<h3>2. Use a Single-Column Format</h3>
<p>Your form should contain required information only, which should make it short enough to use a single-column format. Horizontally adjacent fields require a user to scan in a “Z” shape, which slows comprehension and creates user attention lags. The best forms have a clear path to completion – straight down the page.</p>
<p style="text-align:center;"><img src="http://ift.tt/2mrSu3F" width="750" height="350" alt=""><br /><small><em><a href="http://ift.tt/2n4CHoO">Booking Form</a> by Wen Tong.</em></small></p>
<h3>3. Minimize Typing Effort</h3>
<p>Make every effort to minimize the number of input field and your user’s required typing effort, particularly on mobile. Drop down menus, check boxes, and radio buttons not only minimize the amount of effort for your users, it also addresses the amount of errors inherent in typing, especially on mobile.</p>
<h3>4. Field Size and Input Data</h3>
<p>Take steps to ensure the field size is proportionate to the data you’re requesting. A recent study of eCommerce stores found that 79 percent of all users <a href="http://ift.tt/2h1v6s3">abandon their carts at checkout</a>.</p>
<p>One of the reasons? Confusion about field size. The study showed that if a field was too long or too short for the amount of required information, users wondered if they were appropriately completing the form. This was especially true for Card Verification Code fields. Be sure your information can fit comfortably within the given field – not too big, not too small.</p>
<p style="text-align:center;"><img src="http://ift.tt/2n4VbFz" width="750" height="350" alt=""><br /><small><em><a href="http://ift.tt/2mrPKDL">Payment Checkout Form</a> by Black Flag Creative.</em></small></p>
<h3>5. Format with Flexibility</h3>
<p>Some forms require that data with different correct presentations. For example, a phone number can be 123-456-7890, or (123) 456-7890. Make your formatting accept any presentation of a phone number.</p>
<p>The same goes for birthdays and booking dates (which you could present as a drop-down menu calendar). The goal is to provide as many flexible options as possible for your user’s convenience.</p>
<p style="text-align:center;"><img src="http://ift.tt/2n4FhLB" width="750" height="350" alt=""><br /><small><em><a href="http://ift.tt/2mrMo3v">Form Field</a> by Lacey Ankenman.</em></small></p>
<h3>6. Optional Versus Required Fields</h3>
<p>Ideally, every data input on your form will be required (since you’re only asking for necessary information). If you must include an optional input (an example might be a building unit or apartment number in an address form), be sure to label it as such.</p>
<p>Red asterisks next to required information are common practice. If you are including optional fields, limit them to one or two.</p>
<h3>8. Get Rid of Reset Error</h3>
<p>There used to be a convention for adding reset buttons to forms, but we advise against this practice. Imagine the frustration of completing a form, only to accidently hit reset and lose all your work!</p>
<p>Would you fill out the form again or just close the window? We thought so. Avoid this scenario by leaving the reset button off your form – it does more harm than good.</p>
<h3>9. Entice Your Users to Fill Out a Form</h3>
<p>One of the keys to getting your users to fill out a form is to make them <em>want</em> to do it. Here are some examples of how your website can entice users to fill out your form:</p>
<ul>
<li>Provide a list of user benefits for form completion. This may be a list of benefits, features, or ways you help your customers. It may even be a promo code for a future purchase upon completion.</li>
<li>Build your brand’s credibility by providing social proof, for example, client testimonials or showcases around your form. This shows that people rely on you to provide an essential product or service. This also helps create a human connection to the brand – include pictures to drive it home.</li>
<li>Tell users in explicit terms that you value their privacy and they won’t be getting any spam.</li>
</ul>
<p style="text-align:center;"><img src="http://ift.tt/2n4ZgcT" width="750" height="350" alt=""><br /><small><em><a href="http://ift.tt/2mrUuJv">Multi Step Form</a> by Michael But.</em></small></p>
<h3>10. Create a Compelling CTA</h3>
<p>The importance of your call to action cannot be understated, as it’s the first step in the conversion process and will compel users to hit that sign-up button. Let a user know what you do, why they need you, and what sets you apart – and do it quickly. It sounds like a tall order, but these tips will help:</p>
<ul>
<li>Put yourself into your customer’s shoes. Change one word in your CTA content: Take your “You” and turn it into “My.” A recent study found this simple switch <a href="http://ift.tt/16ScMGA">increased conversion by 90 percent.</a></li>
<li>Be bold. Use color, shapes, fonts, words, and placement that draw a user’s eye and capture their attention. Select a bold and contrasting color that clearly communicates an action to your visitor.</li>
<li>Consider placing your CTA in the main navigation or footer, so it’s visible across your site.</li>
</ul>
<h2>An Intuitive Form Creates Business Value</h2>
<p>Forms that can entice your visitor and are easy to complete create increased time spent on your webpage and ultimately drive more customers to your product or service. The importance of a good form is impossible to overstate.</p>
<p>Draw your users to your form with a compelling CTA and make your form easy to navigate, with natural language. This will entice your users to complete your form, which will lead to more business in the future.</p>
<p>The post <a href="http://ift.tt/2mrT55A">Ten Steps to Intuitive Forms in Website Design</a> appeared first on <a href="https://speckyboy.com">Speckyboy Design Magazine</a>.</p>
<div>
<p>No related posts.</p>
</div>
<div>
<a href="http://ift.tt/2n4Aycz"><img src="http://ift.tt/omVRGL" alt="speckboy-design-magazine?d=yIl2AUoC8zA"></a> <a href="http://ift.tt/2mrPLrj"><img src="http://ift.tt/2n4MM4R" alt="speckboy-design-magazine?i=DVlwQBd-ctE:h"></a> <a href="http://ift.tt/2mrWMs6"><img src="http://ift.tt/2n50m8i" alt="speckboy-design-magazine?i=DVlwQBd-ctE:h"></a> <a href="http://ift.tt/2mrOK2h"><img src="http://ift.tt/2n4V3WE" alt="speckboy-design-magazine?i=DVlwQBd-ctE:h"></a> <a href="http://ift.tt/2mrT6X0"><img src="http://ift.tt/pJOCDH" alt="speckboy-design-magazine?d=qj6IDK7rITs"></a> <a href="http://ift.tt/2n4GnqG"><img src="http://ift.tt/2mrMnwt" alt="speckboy-design-magazine?i=DVlwQBd-ctE:h"></a>
</div>
<p><img src="http://ift.tt/2n4WPqE" height="1" width="1" alt=""></p>


Ten Steps to Intuitive Forms in Website Design

Ten Steps to Intuitive Forms in Website Design

Top Stories