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.The Ghost Button Problem
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...
.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 ›
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.Email Confirmation Problems
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 great 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.
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 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...
The way you use your mobile phone can affect your brain.
A research study has found that daily mobile phone users have a larger somatosensory cortex. That’s the region of the brain that controls the thumbs.
Further research has found that most users use their phones with one hand. When they hold their phone, they’ll use either their right or left thumb to interact with the screen. The thumb is like the user’s mouse but with limitations.The Thumb is the Mouse
On desktop devices, users use a mouse to interact with the screen. They can move their mouse to a navigation menu with ease. This is because the mouse does not constrain their wrist movement.
But when users hold a mobile phone, their thumb has a limited range of motion. There are certain areas of the screen they cannot reach. These areas will vary based on which hand they use to hold their phone and the size of the phone’s screen.(based on average hand size and grip span)
When you place a menu in a hard to reach area, users have to regrip their phone to move their thumb closer. Or, they have to use their other hand to interact with that area. This is extra work that can make navigating harder and slow down the user’s task.Large Vs. Small Screen Phones
The top areas are becoming harder to reach as more users opt for large screen phones. Large screen phones (more than
The navigation bar is one of the most important elements on a site. Users rely on it to find the information they need. When designers don’t design navigation bar buttons correctly they force more work on the user.
This can lead to users getting lost and not knowing where they are in the navigation flow. It can also make it hard for them to read the labels and click buttons.
Below are the 5 most common mistakes designers make on navigation bar buttons. If you’re making these mistakes, it’s time to fix your navigation bar.1. Not Highlighting the Selected Button
Many designers fail to highlight the selected button on their navigation bar. When users click on a button, they need visual feedback on what they selected.
Without it, they won’t know where they are in their task flow. They could mistake the page they’re on for another similar looking page.
Use both shape and color contrast to highlight the selected button. Using color only may make it hard for colorblind users to distinguish it.
The standard way to highlight with shape is to place a strong underline under the label. You could also place an outline around the label. But make sure it doesn’t compete with any call to action buttons in the bar.
The button label should also appear as the main page heading. But highlighting it in the navigation bar makes it extra clear to prevent any confusion.2. Low Color Contrast on Selected Button
Many sites use...