Improving the usability of landing pages with animation
Today, many designers consider animation to be something that makes the design more beautiful and bright, and rarely use it to improve usability. To improve the usability of the landing…

Continue reading →

Cufon-custom font on the site
Cufon-non-standard font on the site. Sooner or later, when developing a layout, there is a need to use non-standard fonts on the site. For example, the customer wants the site…

Continue reading →

Web designers created the worst UI in history
Web design has come a long way over the years, but that doesn't mean it's perfect. We are constantly writing about how to make the UI better, how to fix…

Continue reading →

4 examples of bad onboarding that will destroy UX

The most effective tool for improving the user interface is onboarding. Start introducing the user to the site or app incorrectly and they will regret that they registered at all.

The problem occurs where there is “something wrong” between the program concept and user registration. And then users, instead of getting interested and excited about the site, just leave it and never come back. That’s why we have examined 4 bad examples of the user interface for onboarding and will show you how to fix it.

Annoying tooltips that hide information
Instead of directing new users to training videos, frequently asked questions, and other pages, more and more sites and apps are using the tooltip as a quick way to introduce their product to new users. Hints look like footnotes that show users how to use the product and where to find information. In this case, there are 2 options: active or inactive.

Active: Users need to perform the displayed actions to go to the next prompt.

Idle: Users don’t need to perform actions, but they can still follow the prompts step by step.

It’s best to use hints for information that you don’t need to go back to all the time. For example, hints are only needed where there is a “Create” or “Edit” button.

Despite all their advantages, tooltips can hinder the user when they are poorly designed and hide important information.


In this example, we see that the tooltip shows the user how to choose who will receive messages. The disadvantage is that the tooltip closes the text field. Imagine how annoying it is when users see a hint and want to take action, but can’t. This is especially frustrating if there is no explicit way to close the hint. Some hints don’t have an “X” to close them or a CTA (call to action / further instructions) button to go to another part of the page.

A discreet design is a must
Mark Schenker at Web Design Depot explains the design of the tooltip this way: “Good tooltips should be so discreet that you could swear they were never there… You will only miss them if they don’t suddenly pop up here to help you perform the necessary action.”

Effective design means that tooltips are discreet; they complement the product and do not interfere with its use. There are hints if the user needs them, but they are not distracting.

Read also: 10 examples of cool lettering: from the XIX century to today
Here are three elements to include in the design:

Copy: this element can be at the top of the text field. But it should be fast and easy to use.
Exit(s): let users know how to exit prompts. Enable the ” X “or” Next”or “End Tor” button to let users know how to close the tooltip.
Progress/status indicator: Give users an idea of how many prompts are in the sequence. Follow no more than four steps, and put “Step 1 of 4” or “1/4” at the bottom of the hint.
The combination of these elements will help create a flow that allows you to focus on the product and does not destroy the user interface.

New users can log in without registering
Let’s say you run a display ad on Facebook, members of your audience click on it, and they are taken to the registration page to create an account. Of course, short forms with multiple fields are more attractive to users than long complex forms. But users still don’t want to manually enter information. This is especially true for mobile device users who use quick clicks, quick views, and swipes.


The only thing missing from this registration page is the single sign-on option, where instead of manually entering information, users register using one of their social media profiles. This is convenient, because users can register in several services at once, but they still have to fill in a couple of fields.

Make registration very simple (in one click)
Simplicity is the key to attracting new users. To make it more likely that they will take the next step on the site to buy, create, or download something, make it as simple as possible. With single sign-on, users can get instant access to your product.


This is great for users because it doesn’t involve creating a new password or waiting for a confirmation email before they can use your product. But please note that even if you offer single sign-in, you can still allow users to register an account with an email address.

Single sign-on provides access to user data that is already tracked on social media accounts. For example, in addition to their email addresses, you can see their General preferences, their locations, birthdays, and their friends.

Read also: how to become a web designer in 10 days
Your welcome letter should not be robotic
By registering, users give permission to talk to them and learn more about what you have to offer. After the initial registration, the welcome email should contain information about what the user can expect. It knows that you have created an email campaign that sends an email at set intervals. But even if users are aware of this, it doesn’t mean that your emails should be robotic and impersonal. Users need to feel as if they are receiving an email from a live person.

This is why sending an email without a profile picture makes the content less personal.


In this email example, two items are correct:

The sender field contains the name of a real person.
The email address is real and not long.
But there is a drawback-the lack of a profile image. Most likely, this email is part of an automated sequence, but it doesn’t have to be.

It’s easy to fix this problem – just add an avatar (profile picture) to your email. This is a simple tactic, but look at the example below from Intercom. Email seems more personal when there is a photo of the sender.


Remember that the purpose of sending emails is to keep users informed and informed. Also use your emails to show your audience that they can reach you and trust you.

Greeting new users with an empty dashboard
Much attention is paid to onboarding. But what happens after users sign up, create an account, and finish browsing? Onboarding doesn’t end there. Let’s look at the initial parts of using the onboarding process.

Think about it: after users have gone through all the steps to get started and they are satisfied with everything, they will want to start using the site. But there may be some uncertainty if users are greeted by an empty dashboard, as for example in LinkedIn Groups.


As users enter the site for the first time, it is clear that they will feel discouraged by taking the time to go onboarding, only to be greeted with an empty space without a clear indication of what to do next.

In this example, the comment “unfortunately, there are currently no recommendations” does not provide information to users about what they should do to get recommendations. The menu at the top of the screen is clean and uncluttered, but it gives no indication of the next steps.

Read more: DeviantArt unveils new redesign
To get started, use the onboarding process to help users set up their account. For example, the task dashboard can show new users how to create a project, add content to it, and then share it.

Thus, when users log on to the site, they are waiting for a further action plan. The idea is to emphasize the importance of the product, show users this value in practice, and then provide a message with information about where to start.

Another option is to use the CTA button on the control panel to presumably let users know what to do next.

52 web design tools that will improve your performance in 2020 (p1)
Now there are a lot of great tools for web design. Regardless of what task you are trying to solve, most likely, a certain tool has already been developed for…


52 web design tools that will improve your performance in 2020 (p2)
23. Canva Canva is a popular tool for quickly creating images and infographics for social networks Do you want to quickly and easily create infographics for social networks? Then Lawrence…


Advantages and disadvantages of the online store
This article is for those who want to open their own online store. In it, I will tell you about the main pros and cons of this type of business.…


Creating websites for the masses
Let's talk about creating websites as a service that is becoming more accessible to the General population every day. So, creating websites is a process that may seem complicated at…