Improving the effect of hyperlinks in web design and production
|
Hyperlinks enable people to jump instantly from page to page, or site to site. Such power can create anxiety. Hyperlinks allow visitors to jump from one page to another, or from one site to another. However, this frequent jumping can cause people to feel anxious. To help users browse with confidence, links should be absolutely clear and explicit. In order to facilitate users to browse the page better, the hyperlink must be absolutely concise and clear. Principles law 1. Text hyperlinks should be clearly distinguishable from normal text. Hyperlink text must be distinguished from normal content text 2. Any mouseover behavior should have a highlighting effect. When the mouse moves over a hyperlink, it must be highlighted. 3.Hyperlink content should be as short as possible, yet long enough to identify either: The specific content of the hyperlink must be concise (short and concise): <!--[if !supportLists]--> · <!--[endif]--> Where you'll go [ jump address ] <!--[if !supportLists]--> · <!--[endif]--> What you'll get [What you want to get ] <!--[if !supportLists]--> · What you want to happen 4. Hyperlinks with different targets should be clearly distinguishable. Hyperlinks to different destinations must be clearly distinguishable 5. Hyperlinks should give an indication of any unanticipated consequences, eg: Explain any special situations that may occur after clicking a hyperlink, such as: <!--[if !supportLists]--> · <!--[endif]--> Links to files [ Link to a file ] <!--[if !supportLists]--> · <!--[endif]--> Links that open or close windows [Clicking on a link will open or close a window ] What do you make a link? Consider the purpose of making this hyperlink Hyperlink content example: Amapproved.com Example of hyperlink content: Amapproved.com A site for locating approved Aston Martins, and it's good on the whole. This is the search results screen. Guess how you get from search results to see the details on a particular vehicle? The only link is the vehicle model (in the Vehicle summary column). In this case, it's the website for Aston Martins cars . It can be said that its overall appearance design is classic. This is a search results display page. Now, imagine how you can view detailed information about a vehicle through search results. The only hyperlink here is to the " vehicle model " in the " Vehicle summary column " . The first, and biggest problem, is that you can't distinguish the hyperlinks, breaking Principle 1. You don't know where to click to get more information: you have to guess. The first biggest problem is that you cannot distinguish which is a hyperlink. This violates Rule 1 , which states that you don't know where to click to get more information, so you have to think about it first.  The second problem is: The links look the same although they point to completely different targets (each one is a different used Aston Martin). This breaks Principle 4. Because all the links on this page have the same content (the vehicle model), it's even less obvious that they might be the link. The second problem is that although these links point to completely different targets (each different link uses the name " Aston Martin "), they look almost identical, which violates Rule 4 above ; plus all the links contain the same content. ( vehicle model [vehicle type ] ), which makes the hyperlink less obvious. If I click on "Aston Martin DB7 GT", I would expect to get general information about the Aston Martin DB7 GT car. This breaks Principle 3, because the link is not accurately describing what I'll get if I click it. If I click on the link " Aston Martin DB7 GT ", I expect to get general information about the car type " Aston Martin DB7 GT ". However, I found that the information I finally obtained was inconsistent with the description of the link. This then violates Rule 3 . What should they do? How can the website be improved? The "thing you get" is the information about a particular car. The thing that represents the particular car is the entire table row. There is no other unique identifier for the car (mileage, price etc. aren't necessarily unique). Therefore, the whole row should be the clickable hyperlink. (It would also be helpful if the row changed colour/tone on mouseover). The " thing you get " should be information related to a car. The information representing the specific model should occupy the entire table column. Also, because there is no confirmation object containing specific model information (such as mileage, price, etc.), the entire table column must be a clickable hyperlink object. (It would be easier to identify if the color of the hyperlink changed when you moved the mouse over it). Expressing size in hyperlinks Describes the size of the hyperlink object It's quite common to find computers putting out this kind of information to set user's expectations when linking to a file: When linking to a file, we often find that the hyperlink includes a description of the file size, which helps users decide whether to click on the file link. For example: PDF (46,764 bytes) Thinking about the user's goals, what they need is to know roughly how long the download will take: will it be a few seconds, or minutes? That's generally as accurate as it needs to be. Think about what your users’ goals are. Typically, they need to know how long the download will take: a few seconds or a few minutes? Therefore, we should describe it as accurately as possible. What should it be? How should the above file size be described? There's no benefit at all in showing more than two significant figures in file sizes. Above should be 47KB. Also, only ever use kilobytes or megabytes for file sizes online. (Good, useful file sizes to 2 significant figures run: 4.7KB, 47KB, 470KB, 4.7MB etc.) It is best not to use more than two significant figures when describing the file size. The above file size should be written as 47KB . Therefore, on the Internet, files should be described using kilobytes ( kb ) or megabytes ( mb ) whenever possible. (We recommend the following 2 -digit descriptions: 4.7KB, 47KB, 470KB, 4.7MB , etc.) Formatting hyperlinks Define format for hyperlinks If we have to differentiate text hyperlinks from other text, should this be done with colour or formatting such as underlining/emboldening? If we need to distinguish different text links in a text, we should use a different color for the hyperlink part than for the normal text, or underline or bold the hyperlink text. The de facto convention has been that hyperlinks are rendered in blue with underlines, that they turn red when clicked, and that visited links are purple. The color changes corresponding to the default hyperlink action are: initially, the hyperlink is blue and underlined; when clicked, it will turn red; visited hyperlinks will be displayed in purple. The most readable way to render most text is black on a white background, and making text hyperlinks blue (# The most common method to increase the readability of hyperlinks is to use black text on a white background and blue text hyperlinks ( # Hyperlinks can be gray instead of blue, with or without an underline.  It's appropriate to ask if differentiating by colour alone will work for people who are colourblind. The image above is a screen capture of this page, totally desaturated. It shows that, even without colour, there is sufficient tonal difference between black and blue to make the hyperlink clear. The underlined version is a little bit clearer, but showing underline on hover would serve a similar purpose. At the same time, you also have to consider that if you only rely on color changes to distinguish the hyperlink status, will it be acceptable to people with color blindness? It would be best to ask them if they can identify the colors. The picture above is a screenshot of the page. From the picture above, you can see that even without using the color change effect of the hyperlink, the hyperlink can be clearly identified using only black and blue. Underlining hyperlinks will help users recognize them more easily; or making the underline appear when the mouse moves over the hyperlink will achieve the same effect. Do hyperlinks need to be underlined?  Underlining works okay for occasional inline links. Infrequently used built-in hyperlinks can be underlined. It makes the link stand out a little more than colour alone. Underlining a hyperlink (as opposed to just changing its color) can make it stand out more. In this example, the underlining works well to distinguish article titles from the sub-title. In this case, the underline clearly distinguishes the primary and secondary headings. I think underlining becomes unhelpful when there are numerous inline links in paragraphs, in lists of links, and when there are lots of sets of links on a page. If there are too many hyperlinks in a paragraph, a list of links, or a page, underlining them will not make them stand out. The following is a comparison of the effects of two sets of hyperlinks. The hyperlink on the left is underlined, while the one on the right is not, as follows:     Notice how it's quicker and easier to read the non-underlined blocks of text. Note: If you have a list of links like the one above, it will be easier to read without underscores. In this second example, I have also adjusted the line spacing to make the related words clearer. In the second case, I also adjusted the spacing between words to make it look clearer. Consistency consistency It is important that hyperlink formats behave consistently across pages. Another important point is that the hyperlink format of all pages should be consistent. Obviously, where some text links are on different backgrounds, such as in navigation bars, they may need to use special colours or treatments. Obviously, when the hyperlink is on a different background, such as in a navigation bar, we will use special colors and effects for it.  The above snippets are taken from the Guardian Online homepage The above clip is from the front page of Guardian Online . While most links look similar (#036, mainly not underlined, there are several very different styles applied on the hover, when the mouse pointer moves over the active link. The hyperlink formats above look basically the same (font color #036 , hyperlinks are basically not underlined, and the effects produced when the mouse moves over the hyperlink are different). The psychological effect is disconcerting: you are left doubting whether all links will do similar things (ie go to another page on this site), or whether you might be taken unexpectedly somewhere else. I think that this schizophrenic behaviour weakens the brand experience, as well as diminishing usability. Psychologically, this effect can be disconcerting; you'll have doubts about whether all the links you use are like this (including other pages) or whether they link to somewhere unexpected. I believe that this schizophrenic approach will weaken the user's impression of the site's brand and greatly reduce the usability of the site. There is no good reason to treat all the hyperlinks differently. The third example also breaks the second principle, because its colour change makes it weaker, less noticeable, which is not 'highlighting'. We cannot use different effects for all hyperlinks. The third example above violates the second rule; the different color changes make the super-focusless and fail to stand out at all. Conclusion in conclusion On balance, it seems that the predominant convention in the industry is to keep # In summary, the most characteristic hyperlink color effect change is: use # I think that this provides the best balance of functionality when applied consistently to inline hyperlinks and grouped hyperlinks. I think using the same effect variation for all built-in and grouped hyperlinks maintains the best balance of functionality. |
<<: js to implement file upload style details
>>: Detailed explanation of how to enter and exit the Docker container
Recommend
Detailed explanation of Getter usage in vuex
Preface Vuex allows us to define "getters&qu...
React native ScrollView pull down refresh effect
This article shares the specific code of the pull...
W3C Tutorial (8): W3C XML Schema Activities
XML Schema is an XML-based alternative to DTD. XM...
Method for comparing the size of varchar type numbers in MySQL database
Create a test table -- --------------------------...
Detailed explanation of MySQL stored procedures, cursors, and transaction examples
Detailed explanation of MySQL stored procedures, ...
Nginx configuration PC site mobile site separation to achieve redirection
Use nginx to configure the separation of PC site ...
Vue3+script setup+ts+Vite+Volar project
Table of contents Create a vue + ts project using...
Example of assigning values to ActiveX control properties by param name in a web page
Copy code The code is as follows: <HTML> &l...
Automatically install the Linux system based on cobbler
1. Install components yum install epel-rpm-macros...
How much data can be stored in a MySQL table?
Programmers must deal with MySQL a lot, and it ca...
Solve the problem of forgetting password in MySQL 5.7 under Linux
1. Problem Forgot password for mysql5.7 under lin...
Example code for implementing dotted border scrolling effect with CSS
We often see a cool effect where the mouse hovers...
How to distribute two buttons on the left and right sides of the same parent tag using CSS
This article mainly introduces the method of CSS ...
Causes and solutions for MySQL too many connections error
Table of contents Brief summary At noon today, th...
It's the end of the year, is your MySQL password safe?
Preface: It’s the end of the year, isn’t it time ...