9 Common usability issues for Web sites

by Dmitry Fadeyev

Now, the more cattle designers and developers are aware of the importance of usability in their work. A site with good usability can greatly improve the user experience, and a good user experience will make users happier. Use smart design decisions to please and satisfy your visitors, rather than obstruct and irritate them. Here are some of the most common usability issues for 9 Web sites and recommended solutions for these issues:

1. Too small link Click Area

The purpose of setting up hypertext links is to be clicked to make sure they are easy to click for meaningful purposes. The links in the following example are really too small; it's too difficult to click on them. These are the links in the comments, and Hacker News is a social news website. (Click the area to highlight in red):

The following examples contain the same interface elements, linked comments, but there is a large clickable area in this example:

newspondComments link.

Why do we need a larger click area? Very simple. Because we don't move the mouse very accurately. A large click area makes it easier to hover the mouse cursor over the link . How can I have a large click area? We can make the entire link larger, or use the CSS "padding" attribute to increase the space around the link. The code is as follows:

<a href= "http://www.examplesite.com" style= "padding:5px;" >example site<a>

To make the example simple, this CSS style is written directly in the code, but in real life you might add a style to your CSS file, give the link a class or an ID, and then point to it.

This article by the Web page Teaching network (http://www.webjx.com) to organize the release! Reprint please indicate the source, thank you!

On the 37signals, you can read more about the fill link to more suitable for the mouse click article, the article Cotton-padded link goal. The article argues that padding provides users with a "comfortable feeling." Really very easy to click on the link. The feeling link is like working with you, not with you. ”

2. Bad use of pagination

Pagination refers to dividing the content into several pages. If you need to display a long list of content, this is a common way on your site, such as a product in a store or a photo in a photo album. Because it makes sense to use pagination for this purpose, because too many items appear on one page will slow down the download and processing speed of the Web page.

Feedmyapp use pagination in the right way: Display a list of its massive application services in the right amount.

But now someone else is using pagination on the Web in a different way. Content pages, such as an article in a blog, are sometimes divided into pages. Why did you do that? What's the benefit? It is not likely that the article is too long, so need pagination; In most cases, this is done to increase the amount of page browsing. Because many blogs and magazines earn revenue by advertising, they get more page views (that is, the number of individual pages) to improve their browsing statistics so they can make more money on each ad.

Wired on the article "Google's logo" is divided into 8 pages, very difficult to read.

While this may seem like an easy way to squeeze more money out of an ad, it also poses two major problems.

First of all, it's really, really annoying. Reading an article has to load several pages is not fun. You have set a completely unnecessary barrier to your visitors.

The second reason is SEO (search engine optimization). The search engine uses the content on your Web page to understand what it is about and then index it accordingly. If the content is divided into several pages, the content is diluted, and each page is more difficult to understand and fewer keywords are associated with the topic. This may negatively affect the ranking of articles in search engines.

3. Duplicate page title

The headings on each page are very important. The page title is the HTML code <title> tag . Sometimes people write their site templates with a generic name-for example, the name of their site-and then reuse the same name throughout the site. This is wrong because there are several key benefits to setting up separate headers for each page.

The first advantage is that a good title can convey a lot of information to your visitors and explain what the content of the page is. People can quickly know if they are in the right place. Keep in mind that the title is displayed not only at the top of the browser window, but also on the search engine results page. When people see a list of search results on Google, they read the page titles to see what each page is about. Just because of this, you should also take some time to optimize your page title.

The second benefit is SEO. The search engine needs different information to sort the search results for a particular query. Page titles are one of the most important information they use to measure the relevance of your Web page to a particular search keyword . This doesn't mean you should add a lot of keywords to the title--which contradicts the first benefit--but you should make sure that each title succinctly describes the content of the page, including a few keywords that you think people will use to search for this article. Here is an example of a good page title. This is a smashing magazine page title browsing through Safari:

example, we can see the title of the article, the category and the site name of the article. Put the site name in the end, more emphasis on the content of the page itself , not the site's brand. Here's what the HTML code looks like in markup:

<title>vintage and Blues WordPress Themes  freebies  smashing magazine</title>

What this page looks like in google search results: