A good way to improve the user experience: Provide help elements

When designing a website, the most important thing is to make the website as convenient and easy as possible. If some of the design of a website may cause confusion to the user, it is better to add some help elements. The help element has many different shapes and sizes: An entire page, a suggestion box, or a small hint. However, these same types of help elements have a common point, in addition to their common purpose to help users a common point: Help elements to provide users with more convenience, so that the site's ease of use is better and more popular.

Now, as there are many specific forms of search and other navigation elements on the Web site, users are occasionally confused when they are used. providing help elements in as many places as possible is a good way to improve the user experience. The better the user experience, the more likely they are to buy your product, visit the site again, or whatever you want to achieve.

Here's a good example of the actual use of the help elements I've gathered to help you choose to use them at the right time, while demonstrating these excellent help element designs.

When to use help elements

Convenience is the key to a website, it is valuable to spend some time to make the website more convenient. The help pages and other help elements can be more convenient for users, but when do users really need these help elements?

1. Form

For some people, the form will bring some confusion, for the user, some objects, input content of the purpose is ambiguous, so some suggestions and examples can bring a lot of help to users. A token is another form element.

2. Login and Registration

You want more users to register on your site, so be as simple as possible. There are several ways to make logon and registration operations easier to use, and providing help elements is one of them, and first, as mentioned earlier, you should add help elements to the registration form.

The following form is a good design, clean, and every element of the form

All have a good explanation, and overall it's an easy-to-use form with enough help elements.

3. Checkout
Similar to forms, some designs in the checkout interface can confuse some users. The checkout process is directly linked to money, so you have to let the user in the process without any doubt of the possibility.

4. Search
The search box is not complicated at all, but you can search through the search box for What is not clear to every user, so it is a good idea to provide some search examples and suggestions. Instant Search Advice (live auto-suggest) is another good search feature.

Included in the content

What the help element contains depends on the type of help and where it is used, but the following guidelines can make the help element more useful.

To avoid those obvious things.
If you're going to add some help elements, make sure that the content is really useful, rather than adding them in order to add them.

Quick Tips
One of the help elements is hints (tips). It is often a good idea to provide tips to help users navigate the content. Tips and suggestions boxes are especially useful for new users.

Here's a tip from Google Reader, in this case, to remind the user of a recent design change, a link to the user with more information, which can be a great help for new users who are not comfortable with the new design.

This is another excellent example of Google Reader, which provides hints and shortcuts to make the user experience better.

Example

In the form, providing examples can provide a great help for users to fill out information, such as providing a username, an email address example, and so on.

Search Tips and Suggestions

For search, many sites offer convenient search advice, giving users some basic information that makes the search function easier for them to use.

Looking at the side of the Apple search box, there is an option to expand the display of useful search suggestions to help users search for product support topics. At the same time, we can see that the link to rip the list of hints is not support to help users search, but to help users directly and conveniently reach the corresponding content of the page.

Password strength indication and user name detection

In the registration form, the password strength indicates whether the user name is available for detection only 2 small designs, but it can greatly improve the ease of use of the form.

Mark

Tagging is a way to further improve the ease of use of your form, explaining the information you need to enter in the form as much as possible.

Ease of use is the key

In the design of all Web sites, the higher the ease of use, the usability is a key factor in the success of a Web site, Ease-of-use is to make all the design for the user is more easily used-the help element is born for this. But what about the ease of use of these help elements themselves?

Don't confuse users

Confusing the user against the purpose of the help element, so try to avoid it. Just putting the right stuff in the help element, how you organize it also affects usability , and if the Help element contains a lot of content, use lists and highlighted keywords to make it easier for users to scan and read quickly.

Maximum position impact

In web design , the location of different content is the first focus of ease of use, the same, the location of help elements will also affect the ease of use.

Designers make small help elements so that they don't interfere with the site's main content, a mistake many designers make, and this design makes it difficult for users to find these help elements. Of course, the help element is small enough to keep more space for the main content, but it does not help the confusing user. So find a balance between "small" and "easy to find".

It must also be remembered that the help element is optional to the user, not the necessary content, allowing the user to ask for help when needed, rather than always displaying it.

Look at the following form, there is a small question mark icon on the right side of an input box, and a click will pop up a description of the input. This icon is very clean, the location is very good, do not interfere with the user fill out the form.

Avoid too many clicks, avoid pop-up boxes

The worst kind of design is to force the user to switch between the help element and the original page, making the functionality that was originally intended to help the user completely without usability .

Use graphics, icons to make analogies

It's confusing to use icons and other graphics in Web design because the meaning of icons is easily misunderstood by users because you understand that the meaning of icons does not mean that your users understand them. Icons that are easily understood by the user are very effective in the help element, and the icon itself is a help element. Graphics can be used to explain some things, such as charts, graphs, and directions. Make sure that users can easily understand these graphics and icons.

Excellent help element Show

The help element is available on many websites, but you don't notice them as much as you normally do. Here are some helpful elements designed for Web site usability .

help elements in a form

The following forms have handy, easy-to-use help elements that give examples and explanations to help users enter information.

Search element, suggest

Here are some features that improve ease of use, and they give examples and suggestions to help users finish their search more easily.

Login and Registration

Finally, a set of help elements during the logon and registration process.