UX Movement http://uxmovement.com User Experience Movement Sun, 14 Jan 2018 02:59:05 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.19 Stop Misusing Ghost Buttonshttp://uxmovement.com/buttons/stop-misusing-ghost-buttons/ http://uxmovement.com/buttons/stop-misusing-ghost-buttons/#comments Tue, 19 Dec 2017 18:45:10 +0000 http://uxmovement.com/?p=10559

A ghost button is a button that has an outline but no solid fill. They’re a popular trend across the web, but many designers are misusing them.


Lower Click Through Rate

Ghost buttons are popular among designers because they exude a modern, minimalist look and feel. It’s not loud, dominant and doesn’t call out to the user. But that’s exactly the problem when you use them as a call to action.


A call to action button needs a strong visual cue that attracts the user’s attention and calls them to click it. A ghost button’s minimal appearance lacks a strong visual cue, which results in a lower click through rate.

A low click through rate means most users are overlooking ghost buttons, which leaves them less engaged with a site. Several different studies have found that users recognize solid buttons a lot quicker and easier than ghost buttons. This was concluded in an A/B test, click test, and visual attention test.

The click through rate difference between a solid and ghost button is significant. One company’s study shows how much their email newsletter click through rate increased by switching to solid buttons. For every email opened, the solid button outperformed the ghost button by 7%.

It’s foolish for designers to sacrifice their click through rate to follow a stylish trend. Users will get more utility from a site with clear visual cues than one without. And designers will get more user engagement that can lead to conversions.

When to Use Ghost Buttons

Ghost buttons are only a problem when they’re used in the wrong contexts. When used in the right context, they can clarify the priority of an action and increase task efficiency.

When users see two buttons together, they need to think about which button to click. They’ll read the text labels to decide, but putting visual cues on the buttons can help them decide quicker. A solid button for your main action and a ghost button for your secondary action will accelerate the user’s decision-making.


In the “bad” example above, you can see how the outline of a ghost button gets lost with the lines of text when it’s by itself. If you were scanning the page, you could easily miss the button.

In the “good” example, the solid button carries so much visual weight that it’s hard to miss it. Your attention is drawn to the main action even though its surrounded by text and another button. The secondary action is still visible by its close proximity, but it does not take attention away from the main action.


Visual Cues Shouldn’t Disappear

Designers are misusing ghost buttons without realizing the consequences it has on their users. They assume the outline around a ghost button is a strong enough cue for a call to action. They assume it’s okay to use ghost buttons for its style because other sites do the same. But studies show this is not the right approach to using them.

Visual cues are disappearing from buttons and users don’t appreciate that. Designers may like the minimalist style of a ghost button, but the function of a button is for action, not aesthetics. The context in which you use a ghost button matters. Use it in the wrong context and your button’s visual cue will disappear like a ghost.


Please visit our monthly sponsor

http://uxmovement.com/buttons/stop-misusing-ghost-buttons/feed/ 5
PorkBun: Get a Free .design Domain Namehttp://uxmovement.com/sponsors/porkbun-get-a-free-design-domain-name/ http://uxmovement.com/sponsors/porkbun-get-a-free-design-domain-name/#comments Tue, 12 Dec 2017 13:05:48 +0000 http://uxmovement.com/?p=10548

.design is a new domain name extension that’s geared towards websites focused on design. What better way to brand yourself or your company with a domain name that exudes what you do. People will know and remember exactly what you do when they hear your domain name.


Companies like Facebook, Uber and Airbnb have already taken advantage of this and have gotten theirs. It’s time to get yours before it’s gone.

Free .design Domain

PorkBun is giving away .design domain names free for 1 year. Along with the domain name you’ll get WHOIS privacy, email hosting, SSL certificates for security, and a Weebly website builder.

Get Your .design Domain ›



http://uxmovement.com/sponsors/porkbun-get-a-free-design-domain-name/feed/ 3
Why the Email Confirmation Field Must Diehttp://uxmovement.com/forms/why-the-email-confirmation-field-must-die/ http://uxmovement.com/forms/why-the-email-confirmation-field-must-die/#comments Tue, 03 Oct 2017 15:20:32 +0000 http://uxmovement.com/?p=10488

The email address is one of the most corrected form fields. It’s easy to mistype because the input contains a long string of various characters. This can lead to users submitting an incorrect email address.

The Email Confirmation Problem

Designers believe they can prevent this by adding an email confirmation field. This may prevent some incorrect submissions, but not all, and at a cost.


Many users tend to copy and paste their email field input into the confirmation field. This defeats the purpose of the confirmation field because users can end up pasting an incorrect email. The confirmation field does nothing to prevent them from mistyping their email.

One research study discovered that “60% of the test subjects consistently copy/pasted their e-mail when they retyped it in a confirmation field”. Users copy and paste their email often because retyping it is too much work. The users also didn’t believe that they would mistype their email but were surprised when they did.

The email confirmation field does not solve the incorrect submission problem. Not only that, but it forces users to do more work than they’d rather do. Users can end up making typing errors in both fields. This will cause them to spend more time correcting their input which can frustrate them.

Redesigning the Email Field

If you want to increase correct email submissions, you need to redesign your email field. You’ll need to change your email field’s placement, sizing and labeling.

Place the Email Field First

Filling out forms is a mundane task. Users tend to rush through them because they want to move on to their next task. But when users rush they’re more likely to make typing errors.

Placing the email field first can prevent this. This is because it’s the start of the form and they don’t feel the need to rush. Placing the email field in the middle or at the end of your form is not ideal because that’s when users get tired of typing and are most eager to finish.


Increase the Size of the Field Input

The email field is the most mistyped field on sign up forms. One study illustrates this in their data table at the bottom. It’s important to increase the size of the email field to help users notice their typing errors.

Many forms use too small of a font size for their email field input. If users make a typing error, it’s harder to notice. When the font size of your field input is larger, users are able to identify specific characters easier. This will help them spot typing errors at a glance when they check their input.

You can make your email field larger than the others but that may give your fields inconsistent styling. Instead, you should make the email field expand when the user selects it. The font size of the input should also appear larger. When the user unselects the email field it should return to its normal size.

Here’s an example of what this looks like.


Emphasize Input Accuracy in the Field Label

Most designers label their email field “Email”. While this is short and straightforward, it doesn’t emphasize the importance of input accuracy. If you want users to double check their input, your field label should stress that.

A field label such as “Email (make sure it’s correct)” reminds users to check their input after they type it. This is important to emphasize because most users don’t believe they’ll mistype their email, so they don’t bother checking their input.


All You Need Is Clarity

Not all form data have the same level of complexity. The email field deserves special treatment because its input is more complex than other fields. It contains alphanumeric characters and symbols that make it easier to mistype.

It’s time to take a new approach on how you design the email field. The solution is not another field to fill out, but to give clarity to the existing field. Prominent placement, larger input size and a specific label are what you need. Make this change and kill the email confirmation field once and for all.


Please visit our monthly sponsor

http://uxmovement.com/forms/why-the-email-confirmation-field-must-die/feed/ 19
Stockio: Your Free Portfolio of Design Resourceshttp://uxmovement.com/sponsors/stockio-your-free-portfolio-of-design-resources/ http://uxmovement.com/sponsors/stockio-your-free-portfolio-of-design-resources/#comments Tue, 26 Sep 2017 14:38:04 +0000 http://uxmovement.com/?p=10455

User experience is not only about ease of use but also aesthetic appeal. The more appealing your site looks the more users will perceive it as easy to use. This is known as the aesthetic-usability effect.

Stockio is a library of design resources that can give your site the aesthetic appeal it needs. They offer free icons, designer fonts, vector patterns and photo/video backgrounds. And they’re all free for personal and commercial use.

Use their photo/video backgrounds for an immersive homepage or hero image.


Use their designer fonts and icons to make a professional logo for your site.


Sign up for Stockio to build your own portfolio of design resources. You’ll be able to keep track of your downloaded files and favorited items for future use. Stockio is so useful that you’re not only going to use it once, but you’ll use it for many projects.


sponsored article

http://uxmovement.com/sponsors/stockio-your-free-portfolio-of-design-resources/feed/ 0
User Experience T-Shirts for the Communityhttp://uxmovement.com/products/user-experience-t-shirts-for-the-community/ http://uxmovement.com/products/user-experience-t-shirts-for-the-community/#comments Tue, 25 Jul 2017 16:04:53 +0000 http://uxmovement.com/?p=10392

You may have a fashionable wardrobe, but you don’t have shirts that show off what you do. If you’re proud of your field and profession you should. These user experience T-shirts are a great way for you to express yourself.
They’re all personally designed by me. I’ve partnered with Teespring for screen printing and delivery. The material is 100% combed ringspun cotton and feels softer than your regular, run-of-the-mill T-shirts. All proceeds will help support UX Movement.


There’s often confusion between UX and UI. This shirt depicts the difference through iconography. UX and UI are part of the same circle, but not the same side.

The shirt represents this with UX on one side of a circle and UI on the other side. The icons along the periphery each symbolize a facet of their respective discipline.

Wearing this shirt means you understand the difference and can explain it to people who ask.



Trust Me, I’m a User Experience Designer

Trust is a key factor when it comes to user experience design. It’s needed to sway your clients and team to follow your design recommendations. But others can’t trust you if you don’t trust yourself first.

This shirt empowers you to trust your design skills and experience. The icons around the words represent UX and are common to user interfaces.

Wearing this shirt means you trust yourself as a designer and that others should trust you too.



I Love UX

The “I Love NY” shirts are iconic. But this shirt is for those who love user experience more than New York. The letters “UX” are the perfect substitute for “NY” to capture your love in a classic design.

Wearing this shirt means you’re passionate about what you do which is rare. This will help you stand out from the crowd in a positive way.



Your Website vs My Website

What’s the key difference between a good and bad website? It’s the simplicity and clarity of the content layout. This shirt illustrates that with wireframes.

One overwhelms users with carousel slides, dropdown menus, buttons, links and text. The other displays content in a clear and deferential way.

Wearing this shirt means that you believe good user experience is what makes a good website.



http://uxmovement.com/products/user-experience-t-shirts-for-the-community/feed/ 0