Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to quickly improve the principle of page usability". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn "how to quickly improve page usability principles"!

The great influence of small decisions

The daily work of many UX/ product designers is stacked by a series of small decisions that eventually accumulate to build a huge product. But the problems caused by many small decisions accumulate together, which can form huge obstacles to block some specific users.

What we need to do is to know where the hole is and how to get around it when making specific decisions, in other words, to make the right small decisions to improve the usability of users.

These minor problems usually affect every user, but for users with physical and cognitive impairment, the impact will be greater.

Make the right choice.

I have compiled eight design principles that will help us further improve the accessibility of our products. Using them well can not only improve accessibility, but also affect the usability of the entire product.

The W3C website has more detailed guidelines for usability design of Web content, and the eight principles I have summarized are an easier starting point.

Next, let's take a look at the details.

1. Always provide users with a large target area

If the area or interaction element set for the user is too small, and there is no prompt-triggered hover effect, the overall accessibility will be much worse.

Using the cursor to interact on a large screen usually requires precise operation, and if the target area is small and there is no interaction such as hovering trigger to assist, then it will be very troublesome for users with mobility disabilities, even a huge challenge.

By providing a larger target interaction area, you can rely less on surprise operations to locate and interact with page elements more easily.

When facing cursors and interactive goals, everyone will more or less overestimate or underestimate the efficiency of their interaction, but the vast majority of able-bodied users will quickly fine-tune and correct in the process to achieve interactive goals as quickly as possible, and this problem will be magnified on the part of users with behavioral and cognitive disorders. By expanding the interaction elements and goals, as well as the effect of hovering, we can allow users to reach the target elements as soon as possible and reduce uncertainty. These changes can make everyone faster, more confident and more accurate.

2. Use high-contrast colors

According to the W3C, a color contrast higher than 4.5: 1 can bring a clearer outline and make it easier for users to distinguish the boundaries of different elements and controls. There are many tools to ensure the correct color contrast, such as the WebAIM color contrast detection tool.

Users with poor vision, color blindness and low contrast sensitivity will find it more difficult to read and view low color contrast content. Improving contrast has a direct effect on reducing visual fatigue.

3. Don't rely solely on color to express meaning

Similarly, using only colors to convey meanings such as "forbidden" or "complete" is not clear enough in many cases, or even directly unrecognizable to specific users.

We can't assume that everyone has strong and clear color perception, your users may be weak, color-blind, amblyopic, or even completely blind, they may even be using screen readers to read the UI interface, at this time, color is completely invalid. Through clearer text and symbols, to help color complete the message, even when you remove the color, the content and text in the UI interface can also play a role, this is the most important.

Color needs to be explained, the meaning of color itself is given, part of it is established, but not everyone has a clear enough understanding, in different cultures and scenes, it may even represent the opposite meaning.

Therefore, we need to add supplementary instructions to the color to make the message of UI more clear and intuitive.

4. Add more instructive text tags to links and buttons

The corresponding text on buttons and links should not be simple whether, confirm, or cancel. In many contexts, these words can be understood in many ways and may lead to misunderstanding. Ideally, it is more clearly directed to help users understand the actual function and direction of the button.

This can solve some of the basic cognitive problems. But what's more important is that there is clearly directed and descriptive text that eliminates the need for visually impaired users using screen readers to guess. Using "Click here" at the link, or non-descriptive text such as "done" on the button, is too troublesome for such users to guess what they actually mean. So, the core meaning of modifying link text and button labels is here.

In addition, buttons and link text should also control the color contrast to ensure that users can notice them immediately when they scan quickly. Therefore, the core of improving accessibility is to modify it into descriptive text and optimize its color contrast.

5. Use meaningful titles and structures

For users, there is a threshold for the readability of long-winded texts, while structured texts are much stronger in this respect.

Even if the text is small and the segments are clear, subheadings with a clear summary of the topic always allow users to grasp the core information of the paragraph immediately so that they can't find the content when they are distracted. The use of a systematic subtitle system is also clearer for visually impaired users who use screen readers, allowing them to locate different content more quickly. At the same time, it is worth mentioning that in order to better match the use of screen readers, the title and text must be distinguished by different tags in order to work.

Similarly, in addition to the summary of the title, it is best to use declarative sentences to facilitate users to understand the function of the content and ensure that the relevance between the title and the content is high enough.

6. Demonstrate the content of the form with placeholders

Forms are also one of the most important interface components. In order to keep the interface clean and tidy, it is a common means to use placeholders to describe the content of the form. at present, in many designs, introduction text is used to identify what needs to be filled out, such as "email". Or "phone number", but in fact, these form fields are filled out in a detailed format.

When the user starts typing, the placeholder disappears, and the user may forget what to type or what style to use. Before starting typing, the user may have scanned quickly in a few tenths of a second and did not write down what was to be filled in at all. For users with dyslexia, they may not be able to understand the format of the text for a while.

In order to reduce the cognitive load, it is best to directly use the placeholder of the corresponding field format to show it to the user directly, and tell the user what the specific input field is through the determined text outside the field input box, so that no matter before, during or after the input, there will be no problem of not filling in clearly.

7. Use clear error reporting guidelines to help users

When filling out form fields, even with guidance and instructions, users still have a high probability that they will fill in errors. At this time, the error prompt is very important.

However, when writing the user's error prompt, there are still a lot of precautions. Users are sure to make mistakes in the process of filling out the form. at this time, first of all, make sure that the color contrast of the error prompt is strong enough for the user to locate it. At the same time, we also need to take into account users with cognitive impairment, use as simple words as possible, to tell users how to solve these errors, without the user to guess.

8. Use a high contrast focus indicator

Although the vast majority of users will use the mouse and trackpad to control, but there will still be some users are used to using the keyboard to operate. Some people are in pursuit of faster operation, while others are out of habit. When entering a multi-field form, it is indeed faster to switch quickly using keyboard Tab keys than to interact with a mouse.

When the user uses the keyboard to quickly switch, select the key and the focus indicator of the input box, need to use as clear a color as possible, so that the user can clearly know which control is selected. Without feeling confused or blurred.

Thank you for your reading. the above is the content of "how to quickly improve the principle of page usability". After the study of this article, I believe you have a deeper understanding of how to quickly improve the principle of page usability. Specific use also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.