Discussion on the way to open website hyperlinks

Discussion on the way to open website hyperlinks

A new window opens. Advantages: When the user clicks a link, the currently browsed content will not be replaced, and there is no need to go forward or backward to view the content that has been viewed. Disadvantages: After a while of access, a large number of windows will be generated, occupying resources. Each window needs to be closed manually.
one. Link opening method
    Advantages of opening in a new window: When users click on a link, the currently browsed content will not be replaced, and there is no need to go back or forward to view the content they have viewed.
    Disadvantages: After a while of access, a large number of windows will be generated, occupying resources. Each window needs to be closed manually; Advantages of opening the current window: You can always view content in one window without opening many windows and taking up too many resources. There is only one window, which is easy to close;
    Disadvantages: It is very troublesome when users need to view the contents of several pages or need to compare them. Or you must hold down SHIFT to click the link, but few people know and use this operation; Advantages of selectively using new windows and current windows: It can solve the inconvenience caused by the above two methods in a more humane way. The number of windows will not increase significantly, and users can also switch between multiple windows to read;
    Disadvantage: The user’s needs when clicking a link may not be exactly the same as what the designer has in mind. Users cannot be sure whether the link is opened in a new window or in the current window, which causes a certain amount of psychological "pressure" to users.

2. How to choose the link opening method
    For the same type of information, use the same link opening method; Chinese people are more accepting of links opening in new windows; Use new windows to open in the following situations:
    Channel content links, navigation links, links for extended reading within articles, links to related content in articles, and when users need to compare products of the same type; Use the current window to open in the following situations:
    Pagination tags for articles, page turning tags for lists, links to the previous/next article, linear tasks (user registration, posting information, etc.), and when the links are required for linear reading/operation by users.

3. Link availability design guidelines
    Use meaningful, easy-to-understand, and recognizable link labels; Ensure that link labels match the titles of the pages they link to; Do not mislead users into clicking on text or images that are not links; Repeat important links; Use text as link labels whenever possible; Use different colors to distinguish between links that users have not used/used; Provide consistent link labels; Use a "pointing-and-clicking" approach to allow users to open links; Use an appropriate link length, with a link label of no more than one line; Tell users which links are internal and which are external; If there is an image on the page that is linked, then make sure that all images on the page are clickable.

Four. New perspectives
    Let users choose how to open links. For example, the designer provides users with a query-box (a small check-box) to let users decide how to open the link. Some websites use icons to describe and direct you to the nature of a link. For example, external links on Wikipedia are distinguished from links within the site by using small arrows.

5. How to open links on typical domestic websites
1. Online shopping

Current window 0
New window 1
Channel Switching
List
Detail
From the category, search for internal product images to enter the company/store
Alibaba
0
1
1
1
1
1
HC
0
1
1
1
1
1
Made-in-China.com
0
0
0
0
0
0
Global Sources
0
0
0
0
0
none
Pat
0
1
0
1
1
0
Taobao
0
1
1
1
1
1
Joyo Amazon
0
0
0
0
0
none
*For channel switching, all websites are opened on the current page, and other link operations are mostly opened in new windows
2. Comprehensive portal

Current window 0
New window 1
Channel switch homepage/links within the channel
Sina
0
1
Sohu
0
1
Yahoo China
0
1
NetEase
1
1
Tencent
1
1
China.com
1
1
3. Comprehensive search

Current window 0
New window 1
Channel switch homepage/links within the channel
Google
0
1
Baidu
0
1
Yahoo
0
1
Sogou
0
1
Tencent Soso
0
1
*For channel switching, the method of opening in the current page is adopted, and for operations on other pages, the method of opening in a new window is adopted .<br />Therefore, for channel switching, the method of opening in the current page is recommended; for operations on other pages, the method of opening in a new window is recommended. There are also a lot of unreasonable window opening methods on Alipay’s website. I hope the above discussion will be of some help to everyone in designing window opening methods.

<<:  Vue computed properties

>>:  Learn how to use the supervisor watchdog in 3 minutes

Recommend

React useMemo and useCallback usage scenarios

Table of contents useMemo useCallback useMemo We ...

Summary of some points to note when registering Tomcat as a service

Here are some points to note when registering Tom...

MySQL NULL data conversion method (must read)

When using MySQL to query the database and execut...

What are the differences between xHTML and HTML tags?

All tags must be lowercase In XHTML, all tags must...

Basic principles of MySQL scalable design

Table of contents Preface 1. What is scalability?...

Linux type version memory disk query command introduction

1. First, let’s have a general introduction to th...

Common writing examples for MySQL and Oracle batch insert SQL

Table of contents For example: General writing: S...

Core skills that web front-end development engineers need to master

The content involved in Web front-end development...

Example of how to implement master-slave hot standby using Docker+keepalived+nginx

Preface To solve the single point of failure, we ...

Calendar effect based on jQuery

This article example shares the specific code of ...

How to Choose the Perfect Aloe Vera Gel? Perfect Aloe Vera Gel How to Identify Authenticity and Fakeness

The latest Perfect Aloe Vera Gel packaging box ha...

Hide HTML elements through display or visibility

Sometimes we need to control whether HTML elements...

vue+elementui implements the complete code of adding and modifying a shared bullet box

Table of contents 1. New II. Modification element...

Introduction to the process of extending the boot partition in Kylin 4.0.2 (Ubuntu)

Table of contents Preface 1. Prepare new partitio...

Several methods and advantages and disadvantages of implementing three-column layout with CSS

Preface The three-column layout, as the name sugg...