Overview: Over time, we have created certain conventions and practices that, in structure and scope, improve website usability. Yet when we do web programming, there are always some oversights and flaws. Here we summarize some common small errors in web programming and provide corresponding remedies, hoping to help improve website usability. As long as you avoid the following errors, the user experience of the website will be greatly enhanced.

Mistake 1: Form labels are not associated with the corresponding fields

143243sk09s9ft839z0kmx

Use the "for" attribute so that users can select the correct input field in the form by clicking the label. For checkboxes and radio fields, this provides a larger clickable area.

Mistake 2: The logo image is not linked to the homepage

143323kk6qy1gezvepk8t2

Linking the logo to the homepage is a very basic point. Also, most users naturally assume that the logo can return them to the homepage. The logo is best placed in the upper-left corner.

Mistake 3: The visited state of links is not shown

143356w81ru1dd6m7muiiw

Showing the visited state of links is often overlooked. It is important for users to see at a glance whether a link has been clicked before.

Mistake 4: The currently active form field is not indicated

143440503i9ea3jah10diy

You can use the "focus" selector or bind elements. But the most useful method is to use inputs and text areas to indicate that the field is active. Include some CSS styles, such as a highlighted border, or a slight change in background color.

Mistake 5: Images are not given descriptions

1435182nsilip1fz2stntv

Unless the image is purely decorative, the ALT attribute may be left empty; otherwise, remember to add a descriptive statement to the image. The benefit is that when the image is used as a link, entering the corresponding descriptive statement in a search will lead to the link. Mistake 6: Background images without a background color.

14355038uuyzrrzbqudpx8

Using a background image for a particular section of content is a very common practice. It is worth mentioning that if the user disables background images, the text in that section will be invisible. So it is best to also set a background color.

Mistake 7: Inconsistent interface design style

Excessive creativity can sometimes be counterproductive! Some designers easily make this mistake: each page in the same website has a different design. This is not just confusing for users; it's downright annoying! No matter how stunning a website is, it won't gain user recognition if the overall style is inconsistent. Suggestions:

  • Use templates.
  • The key is to keep it simple.

Mistake 8: Underlining non-link content

143643ehab5hi1b1beheeq

As everyone knows, content with an underline or shadow is likely to be a link. To avoid misleading users, it is best to use bold or other emphasis markers to indicate emphasized parts.

Original: http://www.evget.com/article/2014/12/23/21973.html