Usability Research of Web design: 9 ways to improve user experience design

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.

The following are some of the most common usability issues that 9 Web sites face , along with recommended solutions for these issues. You may also be interested in the following article:

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.

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:

4. Difficult to scan content

To ensure that your site is easy to use, you need not only a good design, but also a good copy(copy). Copy (copy) is a term used to describe all text content on a Web site. Yes, good design can guide your visitors through your site, focus their attention on important things, help them understand chunks of information, but visitors still need to read the text to process the information. This means that copy is an important part of your overall website design.

Before you can write a good copy, you need to know how people actually browse your site. Don't assume that your visitors will read all the text from beginning to end. That would be nice, but unfortunately that's not the case. People are bombarded by information on the web, and most of us are trying to digest that information. This leads to a very crazy browsing behavior: We jump from one piece of content to another and jump from site to next. people tend not to read a website from cover to cover; they start with the first piece of content that attracts their attention, and then move on to the next place where they can capture their interest. This pattern looks a bit like this:

The basecamp arrival page.

The red circle represents the area where the visitor's gaze is focused, and the numbers indicate the order in which they look at those elements. The user's view jumps between points of interest on the page, and to make the most of this messy browsing pattern, you need to organize your copywriting in a specific way. Here are a few highlights:

• Set up several "concerns" (Points of Focus). These parts attract the attention of the visitor, and you can use bold, high-contrast colors and larger fonts to achieve this goal. You can also use pictures, such as icons, to put icons next to Text , and to bring more visual appeal to the area.
• Each "attention point" should be accompanied by a descriptive title. Visitors can learn a little about the content before reading the copy further. Do not be "title Party", the title should be simple and clear . People want to get information quickly, hiding it will only annoy them.
• Any text should be short and easy to digest. Just provide the gist and delete the rest. In most cases, text writers who want to add a point of view only add to the load on the site. People will read only small chunks of text, and ignore large paragraphs of the article. cut your copy down to the point where it can't be reduced.

"Why should you use the OpenOffice ;;; "The Web page can certainly be improved. There is no clear "attention point" in addition to the large banner at the top, and it is difficult to read when the copy is gathered together into a big lump.

things software features pages, each feature is a small piece of text, contains a own icon and title. This makes the list very easy to scan. To make the copy more impressive, list the actual benefits rather than the name of the function.

5. No way to get in touch

If you want to build a successful community, it is very important for users to participate, and if you want to build a successful website or social networking software, the community is very important. Moreover, if you want to have a loyal user, it is also important that users participate . Answering users ' questions quickly and fixing their problems doesn't just mean you have good customer service- It means you care about them , and your users and visitors will appreciate that.

But many websites still do not give visitors a convenient channel and company to get in touch. Some websites don't even have email addresses or contact options.

When you click the "Contact Us" link on the Coca-Cola Coca-Cola website. Displayed page, no email, no phone number. Most of the links point to "FAQ", the feedback form needs your address and age, and a 500-character limit; the "submit an idea" form is two pages long and contains a whole bunch of articles. It seems that Coca-Cola really don't want you to contact them.