Collecting proposals? Don't get burned! Watch our FREE Webinar Training Learn More

Questions? Call us at (970) 668-0709
Schedule a free Strategy Session Get It Now

 

These “Helpful” Website Tips Will Actually Hurt Your Website

By Erin  |   Business Website Tips | Website Improvement

Mexican Resturant

Helpful tips that aren’t helpful

We all appreciate great tips that make our lives better, right?

Like when we our friend shares with us the name of that tiny, hole-in-the-wall, but oh-so-amazing authentic Mexican restaurant. Or when we happen upon a great tips article online that shares 3 (genuinely) easy tweaks we can make to improve the quality of our sleep. 

But when Aunt Sue starts sharing tips about how to find a spouse (because we really should be married by now, shouldn’t we) or when a nosy neighbor swings by with unsolicited tips on how to take better care of the garden he sees us working on every weekend….well, these tips aren’t appreciated quite as much.  

Some website forms give tips, too

We constantly bump into tips when interacting with websites each day, and often don’t even realize it.

Here’s something that you’ll recognize. It’s a typical form field from a typical website form. You probably fill out many of these every day.

Form Field Showing Labels and Placeholders

Let’s quickly take a look at 2 parts of the image above. And stay with me here; in a moment I’ll explain which part of the image could be hurting your website.

Labels are always positioned outside of a form field. They tell you what information you need to type into the field.  In the example above, the label says “Password” and (obviously) lets you know you need to type your password into the form field.

Placeholder text, on the other hand, is located inside the form field. Not all forms use placeholder text In the example above, it’s the gray text. When a website offers placeholder text, it’s usually done so with good intentions—it’s supposed to give you an additional hint as to what you should type into a form field. 

Here’s a real-life example from an Amazon checkout screen.  Notice the label that reads “Gift cards & promotional codes” along with the placeholder text circled in red.

Amazon Checkout Screen with Placeholder Text Circled

Here’s what can negatively impact your website

Placeholder text isn’t always used in online forms, but if you keep your eyes open, you may notice more and more forms using it these days.

In fact, a current trend among web designers (yes, even our very own Denver website designers here at Followbright) is the complete removal of labels from online forms, requiring a total reliance on placeholder text. This trend saves space, reduces clutter, and can make forms appear more visually appealing.  

Unfortunately, placeholder text has been shown to negatively impact website users’ experiences by increasing the amount of effort required for them to complete forms.

If your website uses forms, you should focus on making sure it’s as easy as possible for users to complete them and contact you (or purchase). Because placeholder text makes completing forms more difficult, we encourage you to reconsider using this type of “helpful hint” in your website.

Curious how helpful tips provided by placeholder text could negatively impact your website’s users? 

Four key reasons to give placeholder text the boot:

  1. Disappearing text strains our short-term memory.  When you’re filling out long forms and you’ve typed over the textual hint of placeholder text and get distracted, you must delete the text you already entered or click away from the field to reveal that placeholder text again. This also makes it tough to check your work and address error messages before submitting a form.
  2. Users’ eyes are drawn to empty fields. Studies prove it’s hard for users to locate a text-filled field, especially one with no label.
  3. Auto-fill data gets confused with placeholder text. We often don’t realize we can type over the placeholder text, or we confuse it with incorrect auto-fill text. This wastes time and causes confusion.
  4. Difficult accessibility for users with visual, cognitive, and motor impairment. Light gray text is difficult for many website users to see, and the confusion caused by disappearing text becomes magnified.

Great news! There’s a (very) easy solution…

The fix is extremely simple. Use labels and put textual hints outside your form fields, like this:

Form Field with Label and Placeholder Text Outside

Improving your website’s effectiveness and increasing the likelihood of your users completing your site’s forms is truly that easy.

Get an email when our next post comes out! Sign up now

Comments

|

 RETURN TO BLOG MAIN PAGE