When developing
marketing
using a website, “transition” is one of the very important elements. When designing or reviewing a website to increase
, it is necessary to decipher the conversion rate using web analysis tools and utilize that data.
In this article, we will explain the “transition” of websites and pages, as well as thoroughly explain how to check the transition and measures to increase the transition rate. If you want to know about website transition rates, are worried about low transition rates, or want to know how to deal with it, please refer to this article.
What is a transition?
The transition will be explained below.
How to read “transition” and its general meaning
“Transition” is pronounced “seni” and means “transition” or “transition.” It can also be used to mean “transition” or “transfer.” Originally, the word “transition” itself has the meaning of “to leave one’s original place and move to another place” or “to move elsewhere.”
What is transition on the web?
Transition on the Web refers to the act of moving from page to page within a website by following
links
posted on the page. It is often expressed as “page transition” and is a term used in a wide range of web-related genres.
By learning about page transitions, you can deepen your understanding of website user analysis, which will help you create better websites and increase conversions.
How to transition pages using HTML
There are various methods for page transition, but here we will explain the method using
HTML
.
How to use the a tag
By specifying the path in the href attribute of the a
tag
, you can transition to another web page. However, please keep in mind that you cannot use it for submission forms or buttons to proceed to the next page.
| When specifying an absolute path |
| <a href=”https://domain name/”>Text link (click here to go to destination)</a> |
| When specifying a relative path |
| <a href=”Hierarchy/domain name/folder name/file name”>Text link (click here to move to destination)</a> |
How to use input tags
The input tag is an element that primarily creates form parts to receive data from the user. Use this input tag to configure settings such as submission forms and buttons to proceed to the next page that cannot be used with the a tag mentioned above.
For example, by writing “input type=”button”, you can make it function as a button that allows you to transition to another web page. Also, you can create a single-line input field by writing “input type=”text”. There are various other types such as “checkbox”, “color”, and “email”. Below, we will introduce sample code to create a button to transition to another web page.
| Description in input tag |
| <input type=”button” onclick=”location.href=’●●●.html’” value=”Click here to go to ●●●.html”> |
There are similar functions such as “submit” that allows you to create a form submission button using the input tag, but since there are limitations to the design of CSS, we recommend using “button”, which has a higher degree of freedom in design.
How to use the button tag
The button tag is a tag that creates a button on a web page. The button tag has a closing tag, so it can have child elements. Therefore, you have more freedom in design than buttons created with input tags that do not have a closing tag.
You can create a wide variety of buttons, including buttons for transitioning to other web pages, as well as buttons for submitting input to forms such as inquiries and applications. Below we will introduce sample code for creating a button on a web page.
| Description in button tag |
| <button type=”attribute” name=”name” value=”value”><font>Character to put in button</font></button> |
*
- Attribute = “submit” “reset” “button”
- Name = Specify the name of the button
- Value = Specify the value to be assigned to the button (specify the string to be sent)
Difference between transition and other words
When learning about page transitions, it is important to understand and distinguish not only “transition” but also related terms. The meanings of words related to transition and related words are listed below.
When creating a website, understanding and being aware of the transition rate and circulation rate will increase the number of views and make it easier to achieve your goals. I will explain each in turn.
What is transition rate?
Transition rate is a term that indicates the percentage of users who viewed a given web page and followed the links posted on that page to another page. If you can create a web page with a high conversion rate, it means that users are interested in that web page, and that will lead to conversions.
In other words, the higher the percentage of users viewing a web page who backtrack and exit (leave the page), the lower the transition rate.
What is the circulation rate?
Visit rate refers to the average number of PVs (page views) viewed by users per visit across the entire website. The circulation rate can be calculated using the formula: “Number of PVs ÷ Number of visits.”
A website with a high visitation rate is one that has a large number of PVs relative to the number of visits. This means that users do not leave on one page, but instead move from page to page, viewing various pages in a single visit.
It is believed that the higher the website traffic rate, the more appealing the website is to users, and the higher the probability of conversion.
Other words related to transition
The following words are important to know in order to understand web transitions.
conversion
“Conversion = CV” is a noun that means conversion, conversion, or switching when translated into Japanese. In
web marketing
, it is often used to mean “results.” It is used in this way because it imagines that user actions are converted into results.
Achievement means the achievement of a goal on the relevant web page, and each company has a different way of understanding goal achievement. Some companies set their results to be sales of products and services, while others set their results to be downloads of materials and samples.
In addition, some companies only make inquiries or promise interviews. Since each company has different results, a uniform metric called CV is used.
conductor wire
A route is a route that guides users to a destination. For example, in a “LP (landing page)”, the path from the entrance to the goal (landing point) is treated as a single line, and the content is placed along that line in a story-like manner to prevent users from leaving midway through the landing page. I will guide you to the location.
This is a method called storytelling, which draws the user into the story and unconsciously guides the user to the goal. These routes that guide users are called leads.
What is the average website conversion rate?
The average website conversion rate varies greatly depending on the industry, products handled, site type, etc. The table below can give you an idea of the approximate bounce rate (for one-page sessions) by industry.
| industry | average bounce rate |
| real estate | 44.50% |
| shopping | 45.68% |
| finance | 51.71% |
| IT related/services | 62.24% |
| Eating and drinking | 65.62% |
Source:
Bounce Rate Benchmarks: What’s a Good Bounce Rate, Anyway?
This table shows that bounce rates vary considerably by industry. For example, in the case of websites in the food and beverage industry, once users find the menu or store information they are looking for, they will leave the site, so they will not change pages and the circulation rate will be low.
On the other hand, websites in industries such as real estate and shopping that require users to gather all kinds of information for consumption tend to have a higher probability of page transitions and lower bounce and exit rates. is.
Based on the above, consider the nature of page transitions in each industry, set a rough target for the transition rate of your website, and devise a flow path for each page.
Why is website transition important?
When designing a website, it is very important to think about transitions. The reason is as follows.
I will explain each in detail.
Sales will not increase unless the page transitions to a page that converts.
The most important purpose of a website is to lead to conversions such as purchases, contracts, and inquiries.
No matter how many visitors you have, if you don’t lead users to a page that converts, you may not make any sales. In order to lead users to the page that will convert them, you need to improve the page flow and enrich the content to draw in users and increase the conversion rate.
Because a high transition rate (migration rate) is evaluated in SEO
This can also be said about the conversion rate, but websites and pages with a high conversion rate are more likely to be evaluated in
SEO
(easier to be ranked high in
search engines
).
If your site is highly evaluated in SEO, it will lead to an increase in various numbers including PV and sessions, which will lead to an increase in the number of users. The more visibility you have, the more likely you are to get a conversion.
How can I check the website transition?
Use Google Analytics to check web page transitions. To check the transition rate using Google Analytics, follow the steps below.
1. Open Google Analytics navigation summary
2. Check the transition for each page
We will explain each item in detail.
1. Open the Google Analytics navigation summary
First, open the Google Analytics item “Navigation Summary”. If you select “Site Content” → “All Content” from the “Behavior” item, you can check the transition rate for all pages of the website.
In the navigation summary section, you can see not only the transition rate but also important numbers for website management, such as the number of page views and exit rate, so be sure to check other numbers as well.
2. Check the transition for each page
In the navigation summary, you can check the transition from page to page. An important point to consider is “What is the transition rate to the conversion page?”
If the transition rate to the conversion page is low, there may be factors such as “poor flow between pages” or “poor quality of content.” If you are not satisfied with the transition rate shown in the navigation summary, you may need to redesign or review your site and pages.
Causes of low website transition rate
A possible reason for the poor transition rate is that users do not see the benefit of viewing the destination page.
For example, if the UI such as link text or link buttons is difficult to understand, the title or wording of the link does not make the user want to tap or click, or the page is not appealing and does not arouse the user’s interest, etc., users will leave the site. It is necessary to review whether there are any factors causing this.
Knowing that the transition rate is low but not taking any measures is a bad move. If you can identify and improve the factors that cause the conversion rate to be low, the probability of conversion will increase. If you feel that the conversion rate is not responding, be sure to think about the cause and review your website.
How to increase your website’s conversion rate
If the transition rate is low, it is necessary to take some measures. However, it is difficult to decipher the numbers presented by Google Analytics to understand exactly what is causing the low transition rate and how to increase the transition rate.
Therefore, you need to try all the ways to increase the conversion rate of your website. Examples of ways to increase your website’s conversion rate include:
I will explain each in turn.
Review the wording of internal links
First, review the wording that links to other pages on your site. It is very important to ensure that the text of the link is related to the page the user is viewing.
If you write link text that makes users think that this is a page they want to see or read, it will lead to taps and clicks, increasing the possibility of improving the conversion rate.
Prepare a cushion page that leads to conversion
If you suddenly post a link to a page that converts on every page, users may feel like they are missing information.
Rather than immediately leading to a page that converts, it is necessary to sufficiently prove how attractive a product or material is to users and how much it benefits users by using other web pages. .
Therefore, prepare a cushion page with useful content and information to increase user satisfaction. If you can use cushion pages to satisfy and trust users, the chances of them converting will increase.
Create a new article, dig deep into users’ problems, and solve them.
If your website lacks content, it will be difficult to increase trust in the products and materials you sell, and your overall website satisfaction will not improve.
So, create a new article and enrich your content. By increasing the persuasiveness of your products and materials through content and satisfying users’ curiosity, you can improve the conversion rate and increase the probability of conversion.
Additionally, by digging deeper into user concerns and resolving them, you can proactively prevent factors that prevent users from converting. When creating a new article, review the links to related articles to increase the conversion rate.
Review the conductor
It is also effective to review the conductors as a measure to increase the transition rate. One of the reasons for high user drop-off rates on websites is “difficult-to-understand website structure.” In other words, the website is not organized as a whole, and it is difficult to know where and what kind of content is located.
In such cases, users get lost on the website and are unable to find the content they are looking for. These websites often do not have a secure flow path and tend to have poor usability.
For this reason, organizing the website and creating a flow path for the content is an effective measure to increase the conversion rate.
To increase the number of transitions, create a conversion system with low hurdles.
There are various types of conversions, such as product purchases, inquiries, and document downloads, but it is best to avoid setting up conversions that are difficult for users to overcome.
For example, if the only conversion is a phone consultation, many users will find it difficult to call, which will increase the loss of contact opportunities and reduce the number of page transitions. On the other hand, requesting information or making inquiries using an email form is easier than making inquiries by phone, so it can be said that it is easier to convert.
As mentioned above, by increasing the types of conversions and providing conversions with low hurdles, you can increase the possibility of improving the page transition rate.
Let’s improve page transitions with animations
We will explain the advantages and disadvantages of using animations for page transitions, and the types of animations.
Advantages of using animation for page transitions
The benefits of using animation for page transitions include:
Effective in attracting users
Animation is displayed when a web page transitions, creating an effect that attracts users. And even if the transition takes a little time, you can expect to have the effect of keeping the abandonment rate low by having the user focus on the animation.
Can be used to promote your own products and services
If you can show your company’s products and services to users as animations during page transitions, you can expect advertising effects.
In addition, if you are dealing with a branded product such as cosmetics, jewelry, or bags whose worldview or image is important, you can create a unique presentation by linking it with the website design.
Disadvantages of using animation for page transitions
Web page display speed may be slow
Incorporating animations into page transitions increases space and can slow down page loading speed. There is a 3-second rule regarding the display speed of web pages, and it is known that users will feel stressed after 3 seconds have passed after accessing a page, and the chances of them leaving the page will increase.
Reference:
Nippon Telegraph and Telephone Users Association (Public Interest Incorporated Foundation) Leading your business to success through ICT utilization/telephone handling training
You need to be careful not to end up with the goal of showing the animation to the user, which results in a slow display speed that increases the dropout rate.
If you include too much content, it will be difficult to convey your intent.
Animations are displayed for only a short time during page transitions. Therefore, if you include too much content, not only will it not be displayed until the end, but it will also become complicated and it will be difficult to convey the intent of the animation to the user.
When incorporating animation into page transitions, you need to carefully select the content you want to display and create a simple structure.
Types of page transition animations
There are the following types of page transition animations:
fade in
Fade-in is a technique that creates a sense of anticipation by gradually changing from a dark screen to a bright screen. Mainly used at the beginning of an animation.
fade out
Fade-out is the opposite of fade-in, and is a method of predicting the end by gradually fading the screen from a bright screen to a dark screen, or by gradually fading the content on the screen. Mainly used at the end of animation.
slide in
Slide-in is a method of sliding an image onto the screen. Slide it up, down, left, right, or diagonally to display it.
Video insertion
Video insertion is a method of embedding a video within a transition screen. You can create a professional look by embedding videos within the animation.
However, there is a high possibility that the capacity will increase, and the display speed may decrease significantly. When implementing this method, you will need to test it several times to ensure that the display speed does not decrease.
How to create page transition animation
Here are some ways to create page transition animations:
How to use CSS
CSS
is a great way to create simple animations. For example, you may want to add simple movements, such as changing the size or color of the text, displaying multiple backgrounds alternately, or changing the location or arrangement.
How to use JavaScript
JavaScript
, on the other hand, is a great way to create fancy animations. For example, you may want to control the animation in detail, such as making a person or object move, adjusting the movement or speed, stopping or rewinding the animation.
summary
In this article, we explained the transitions on the website. In order to increase the conversion rate of your website, you need to review whether it is easy to navigate through the website and whether it has content that leads to conversion.
At that time, by being aware of the transition rate and exit rate, you can understand whether the website’s navigation is appropriate and whether it is appealing to users.
By using Google Analytics to see how many users are moving to pages that convert, you can use it to improve your website as a whole. Please refer to this article and work hard to create a website that generates many conversions.