Thứ Hai, 17 tháng 1, 2022

UX Optimization: 10 Basic Standards to Improve User Experience

Implementing SEO campaigns  for hundreds of websites in the past year has given me the opportunity to access extremely valuable data sources.

And recently, this data source shows:

UX (user experience)  is accounting for a huge success rate in SEO!

Especially when you have implemented all the traditional SEO techniques but the results are still not improving!

In this article, I will help you:

  • What is UX and Why is it Important for SEO

  • 10 Standards to ensure to improve UX

  • Detailed instructions on how to optimize each standard

See now!

What is UX?

UX (User Experience) is also known as user experience. UX refers to a person's feelings and attitudes when experiencing a product, website or service. User experience includes many different aspects such as: experience, emotions, interactions between users and computers, product ownership.

user experience

What is user experience?

UX often focuses on:

  • User traffic flow

  • Their journey on the website

  • Website structure,…

When it comes to UX, most think  of website design  so that it catches the eye of the user,...

However, you are greatly mistaken.

Eye-catching web design is just one of the factors affecting  user experience .

This element is the subsection “Visual Design” in the chart below.

UX optimization, what is ux?

8 Elements to optimize in UX

In addition, to provide the  best user experience , you also have to pay attention to: Content strategy  , usability, user interface, website functionality, ....

Basically, you have to understand the problem each customer is facing, so you can bring the best experience to them.

Implement these 10 super-simple standards that will help you optimize the user experience on your site:

10 USER EXPERIENCE FACTORS

#1: Use white spaces:

Many people often think that my website has too much white space, why not use it to insert service ads? Does that increase profits more?

Actually, do I have my own intentions?

Because spaces are essential for design.

Well first of all, let me make it clear to you:

Whitespace is divided into 2 types:

  • Active white space: a space intentionally created in the design model to expand the website and  emphasize  an element.

  • Passive whitespace : The space around between lines and text due to the layout process does not show the design intent.

For users, these 2 types of spaces will help them easily absorb the content in question.

See two examples below:

ui optimized ux

complicated ui

Looking at the two images above, which website do you think you'll understand faster?

Of course it's picture 1, right?

If a website tries to insert a bunch of text into the same space, users will inevitably get confused.

According to Crazy Egg, white space between words and titles can  increase user attention  by up to 20%.

For websites, white space can help make the web interface more neat and professional.

optimized design ux

Sara Dunn's website interface

You can refer to Sara Dunn's website Sara Does SEO, which has a lot of white space at the top of the page. This draws you to focus on the most important, easy-to-grasp content the page is talking about.

good ux design

Eye-catching parts stand out more

However, for the exception…

You want to provide a lot of content on the same page (users can read all the content without having to scroll down).

Inserting more spaces will replace some of the important content you want to provide to users. This is not good at all!

So what's the solution?

  • Bringing important content to the top

  • Insert extra white space around

#2: Optimize page loading speed

One of the most frustrating things for users is waiting too long for a page to load.

With the explosion of mobile devices today, users are accessing the world of information on many different platforms: Laptop, mobile phone, tablet, ...

They surf the web looking for information with the expectation of having their questions answered as quickly as possible. Users do not have time to wait for you while there are millions of other sources of information in front of them.

Optimize page loading speed

Slow page load speed creates a disadvantage

Research shows  that a page load time exceeding 5 seconds  can increase Bounce Rate by more than 20%. Wow!

What is the solution for you?

Try Google's  PageSpeed ​​Insights  , a free tool that tests your page's loading speed and suggests  a fix  for each issue on both mobile and desktop.

However, the simplest way to improve page load speed, you need to  optimize images  before uploading to the website.

Assuming you have finished designing an image, here are 4 steps to optimize images before uploading to the web:

Step 1: Resize the image to fit the interface of the website

Similar to Facebook, for each different location on the web interface, the image needs to be of a different size.

Choosing the right image size to display not only makes the image look clear, but also doesn't take up too much space.

Never set a desktop wallpaper of 1920 x 1080px just to be the avatar thumbnail!

Some image sizes that I am applying for GTV SEO you can refer to:

  • Size of blog feature image: 1200 x 628px

  • Banner/slider landing page size: 1360 x 540px

  • Size of the illustration on the blog article: 700 x 400px

  • Product image size on category page (e-commerce): 300 x 300 or 300 x 400px

At GTV, I often use  Canva  as an image editing software & choose the right size for me.

Step 2: Reduce image size

Image compression (Reduce size) here is different from image size reduction! This helps you reduce the size and bandwidth of your website, thereby making the page load speed faster.

For an original image, you can compress up to 70 or even 80% of the image size with almost no change in image quality to the naked eye.

Hint:  There are many tools that support instant image compression on the market, like Compressor.io for example:

compress imagesCompressor.io tool supports image compression

What is bounce rate?

>> What is bounce rate?

ux index, what is ux index

>> 10 Basic Standards to Enhance User Experience

Step 3: Upload to the website

After resizing and compressing the image, you just need to upload it to the website ^^!

#3. Use an engaging CTA:

This is an important first step in your user-to-customer conversion phase.

If there is no CTA or the CTA is not prominent, it is very difficult to keep users on your website.

Create a prominent CTA button that can easily direct users to exactly what they are looking for.

But how to  create CTAs that attract  users to click?

Let me guide you in detail…

There are  2 factors  to keep in mind when creating a CTA button for your website:

3.1. CTA button color

You need to consider colors and their meanings according to psychology.

Different colors can reveal different messages.

color influence ux

Different colors bring different experiences

For example: Red often creates feelings of strength, dynamism, urgency, etc., which increases the viewer's heart rate.

Therefore, you often see sales and discounts often use red tones or red CTA buttons to urge users to click to buy.

Hoặc tông màu xanh lá tạo cảm giác dễ chịu đối với mắt người dùng. Đó là một trong những lý do các spa hoặc những dịch vụ nghỉ dưỡng thường sử dụng màu xanh lá tạo cảm giác thoải mái nơi khách hàng.

HubSpot nghiên cứu thấy rằng đối với website của mình, nút màu đỏ mang lại kết quả chuyển đổi tốt hơn nút màu xanh.

chroma cta increases ux

HubSpot đổi màu các nút tương tác của họ

Do vậy, hãy suy nghĩ về mục đích của bạn khi thực hiện CTA.

Bạn muốn khơi gợi cảm xúc gì ở người dùng (sự tin cậy hay sự trải nghiệm thư giãn, ….)? Từ đó hãy lựa chọn màu sắc một cách khôn ngoan.

Tips: Tạo độ tương phản giữa màu nền và màu nút CTA để thu hút sự chú ý của người dùng.

Bạn có thể chọn 2 màu đối diện nhau trên Bánh xe màu sắc bên dưới để có được cặp màu tương phản nhanh chóng.

After choosing the color you like, all you need to do is use color coding software like ColorPix to design and choose the color for the CTA button and the background for your website!

optimize color increase ux

Great color scheme for website design

3.2. Words used

To create a powerful and attractive Call-To-Action, choosing the right words to use and good content is extremely important. 

Do you call them to act on your wishes, that is an art.

I will reveal it to you.

3S Principles  for Call-To-Action:

  • Simple  : Make it simple and easy to understand. Don't confuse users. You should directly request user action (e.g. Register, make a purchase, get a document, leave an email, ...)

  • Specific  : Give the user the feeling that the CTA is written specifically for them and no one else. Sounds difficult right? Put yourself in the position of the user to understand their psychology, know what they need and want.

  • Strong  : Use strong verbs to urge users to take action (eg adjectives like “today”, “totally”, “totally”,…)

If the CTA doesn't evoke emotions in the user, no action will take place.

CTA writing tips:

  • The shorter the better

  • Capitalize, bold or change color (don't overdo it)

  • Putting user interests first

  • Simple language, easy to understand

Some examples of effective CTAs:

beautiful cta page

cta optimize ux

(Translation: 1 month free to join)

#4. Create Featured Hyperlink:

Hyperlink is a link from one page to another, maybe the same website or to another website.>> Explore 2 types of hyperlink: internal link and external link to understand the benefits of using them in SEO Website.

When you insert a link to link to any page, you definitely want to increase the likelihood of users clicking on it.

From there, help increase the user experience. They can search for information related to the issue they are looking for or dig deep into it.

So how to make the hyperlink stand out? The best solution for this is very simple.

Make it easy for users to recognize it as a hyperlink.

  • Bold, change color or underline to highlight hyperlink:

optimize ux via text

Hyperlink is more prominent when changing color

Here WordPress has set up the code to automatically change the text color when inserting a hyperlink.

  • Automatically underline (underline) for hyperlink line:

When you hover over the link, the text is automatically underlined and changed color. If your website has not been set up this feature, you can refer here. Because this part has a bit to do with the code.

Optimize the user experience link

Hyperlink is automatically underlined when hovering

Bold, change color or underline the hyperlink line to help users easily identify this as a link.

Surveys show that users automatically see blue and underlined text as a link and are more likely to click.

Simplify the problem. Do not "fool" users when making hyperlinks like regular text lines.

You also want users to click on the link, right?

Note:  Stop thinking too much about the length of the hyperlink. The longer the link, the clearer the explanation and the easier it is for users to understand the content you will mention in the upcoming article linked.

Refer to GTV SEO's SEO courses for detailed knowledge and regular updates. Register for a free trial online SEO course?Entity Mastermind today!

#5. List important information in bullet points:

Users have many different concerns. Therefore, after 5 seconds, they have not found the necessary information, they will exit immediately.

Bulleted asterisks make it easy for users to get the information they want in a short time.

  • Benefit

  • How to solve the problem/pain

  • Important information of products/services

More than just bullet points, with countless icons out there, you can get creative with your bullet points.

use optimized icons ux

Using icons also makes the article more interesting

Remember the white space element   I mentioned at the beginning of the article?

Here, the white space element is also fully utilized. The white space around the icon will direct the user's focus to the content.

This way helps users grasp the article content faster.

>>> Related article:  What is textlength error? 13 common SEO technical mistakes

#6. Smart image selection:

Users on the Internet are increasingly smart and quick to evaluate websites before accessing.

If they visit your website for the first time, they can easily see which of the free archive images (copyright-free, reusable images) they have seen before. somewhere.

This will reduce the credibility of your website. The image you can copy somewhere, your content is probably written by yourself, or copied a little here and there.

Not to mention, stock photos will not convey all the content you want to mention.

For example, when you use an image from an English website, it is likely that the text in the image is also written in English. But who is your target audience? If you use the knowledge from those lines, can they understand all the English words?

Or, the target customer you are targeting is Asian, you want to sell but you use the image of a white person.

There is a high chance that Asian users will ignore this image of you because they subconsciously feel that your product is only suitable for white people.

Although stock photos have high quality, eye-catching, but if you don't create a connection between users and businesses, you have failed.

What is the solution for this?

  • Use the "original" image, select the appropriate image.

  • Image content must be relevant.

These images can be infographics, images that summarize the information of the article or add additional information to clarify the meaning of the article.

For example, the infographic in the article 20 Advanced Onpage Optimization Standards 2020 below, for example:

optimize ux onpageInfographic is also quite good at optimizing UX

#7. Write and design attractive headlines (headlines):

Heading and content can target what the target customer is looking for.

Therefore, inserting keywords into the title is also very important to target your target and attract the right customer.

For example, your target customers are located in the Ho Chi Minh City area, of course your title must also mention Ho Chi Minh City to attract customers to click.

>>  How to write standard SEO articles that are loved by both users and Google

Search engines now give more importance to headings than other content.

So choosing the right heading and making it stand out can increase your website's visibility on search engines.

But more importantly, headings must help users easily find the right content they are looking for.

>>  See more  ways to optimize heading tags  to create relevance, targeting users.

Let me give you an example to make it easier to understand!

For example, headlines in the  Table of Contents  can help direct users to the right content they are looking for, instead of having to waste time scrolling through the entire article.

optimize ux toc

Table of contents makes navigating within the page easier

For example in this case, the user wants to find a way to write the Meta Description.

Instead of reading the entire article, searching for content to write an attractive Meta Description, you just need to write a title that highlights the content for users to quickly click.

In addition, the title also needs to stand out in size, color and properly describe the content.

user experience title

The title also needs to be optimized

#8. Create consistency across pages:

A website needs to be consistent across pages in terms of: title size, font style, color, CTA button type, spacing between sections, text, color pallets, etc.

To give your users the best experience as they walk around your website and still know they're on it.

Changes in design between pages can leave users “lost” and confused “where is this and who am I”.

Take the Moz.com website as an example.

optimize ux of moz

Moz articles are optimized according to common characteristics

When looking at blogs, there are pallets of pale tones, pastel styles (who specialize in design colors will understand this part), size, typeface, and structure of blog posts are the same.

Even if users browse the blogs on Moz.com, they will quickly realize “Ah! I'm still reading Moz's blog.”

#9. Fix 404 error (Page not found):

Maybe search engines won't penalize  a 404  (Page Not Found) technical error severely, but for users that's another matter!

optimize ux page 404

Error 404 brings frustration

When you can't find a website, it's easy to make users feel frustrated, even frustrated because it wastes time in vain.

Besides slow page load speed, 404 error is also the 2nd factor that annoys users because of interrupting web surfing time.

They often exit the web and rarely return to the previous page. Unless …

You create a fun interface that makes users laugh even if you get a 404 error on your website.

Check out some creative examples:

Interesting 404 landing page

At its 404 page, Blue Fountain Media sent its users the legendary Pacman game

seo ux page 404

(Translation: There's been a problem. 404: The page you're looking for is no longer here, but we still love you)

These 404 errors probably won't make users sad for long.

Use the Google Search Console tool (formerly Google Webmaster tool) to check if your website has this error or not!

Just one more simple tip. Scroll down to read more…

#ten. Create a mobile-friendly and responsive website:

Marketing Trends 2020 and a few years from now, mobile-friendly website interfaces will still be appreciated.

It is imperative that the website is mobile-friendly and easy for users to navigate no matter what device they use: desktop, mobile or tablet, etc.

Google has begun penalizing websites that are not optimized for mobile devices. Because Google always wants to bring the best experience to users.

So, if you want to avoid a penalty from Google, use this tool to see if your website is mobile-compatible right away.

>> There are a lot of people who misunderstand Google Panda – a Google penalty. Are you like them? Learn about Google Panda right away to avoid being "snooped" by Google.

In addition, you can refer to the following 2 UX articles to help improve the user experience better:

  • UX Index : A Guide to Choosing User Experience Index 2020

  • What is Bounce Rate? 11 magic tricks to optimize web bounce rate

Conclude:

These are all 10 extremely simple standards to help you deliver the best user experience.

I hope they give you some helpful hints to “renovate” your website without the expense of a website redesign.

In the process of implementing these 10 UX optimization standards, if you have any problems, please comment below this article!

Good luck!

#gtvseo #gtv_seo #toi_uu_ux

Thông tin liên hệ:

GTV SEO

Địa chỉ: Số 91, Đường số 6, Khu dân cư Cityland Park Hills, Phường 10, Quận Gò Vấp, TP. HCM

SĐT: 0919-009-319

Email: info@gtvseo.com

Không có nhận xét nào:

Đăng nhận xét