This article was posted on Saturday, July 14, 2018 at 01:17 and is classified as web General. 496 times, 140 times today

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

First, the origin of the close button problem

Before, I posted a microblog about LuLu UI component of Amway. One of my colleagues asked this question about the popbox component:

Dude, this info type, why do you have an X

Why do you need a close button in the upper right corner of the type prompt?

Obviously there is a sure button, it seems that the fork button removed is nothing, is not a lot of people have similar questions?

I had this idea a long time ago, and I put it into practice. I removed the close button in the upper right corner of several prompt boxes, which was clean and clean, and functionally fine, and I was proud of it. Later, after continuous learning and accumulation, I found that my understanding of interaction design and user experience was very shallow at that time.

  1. First of all, the 1% visual reason, because the close button is in the bottom right, with the balance of the close elements, looks better visually, but this is in hindsight, without the close button, the elements are all fine in the center, so this reason can be ignored.
  2. Secondly, it lies in user habits. Most users come from Windows operating system. If we are careful enough, we will find that there is also a close button in the upper right corner of various Alert or confirm prompt boxes in our operating system, as shown in the following two screenshots:

    So, when a prompt appears, it’s very natural and very comfortable for the user to go to the top right corner and click close. If you remove this button, chances are, users who are used to clicking on and off will be confused.

    However, in my opinion, this reason is also superficial.

  3. Then, there is interaction consistency. Why do some boxes have a close button, while others do not? Inconsistent interaction will confuse users, also bring redundancy in engineering, and increase the complexity of code logic.
  4. Finally, and I think the most important and fundamental reason is the user experience, which is accessibility for different people in different situations.

2. Close button and user experience are further expanded

Just how important the close button is is something I discovered last year while researching accessibility.

There is a “Recently read” button on the homepage of QIdian Website M, and the effect is shown in the screenshot below:

For normal users, you can hide the floating layer by clicking the black layer behind or swiping your finger to the right. It is not difficult to get started with interaction. All development and testing are OK with it.

Then, when I opened VoiceOver to test accessibility, the implementation was shit!

Once VoiceOver is enabled, by default, you cannot close the layer by clicking on the black layer. Instead, you can directly click on the element below the layer, and the interaction disaster will occur. Also, once VoiceOver is turned on, the TouchMove interaction is cumbersome, requires a three-finger swipe, and, as I recall, only works for native scrolling.

In other words, for visually impaired users who started VoiceOver, once they clicked on the nearest reading float, they could never turn it off! Mom, back then, I wish there was an off button in the upper right corner! After experiencing this kind of pain, I deeply felt that the usual bullet frame, as well as the various floating layer in the upper right corner of the seemingly redundant close button is not redundant.

The solution here is not to add a close button in the upper right corner, butto make the float element clickable by setting role=”button” and setting the title description as follows:

< I id="asideOverlay" class="aside-overlay" role="button" title=" click close overlay" ></ I >Copy the code

Return to the original prompt:

For assistive devices, the semantics are understood based on the HTML content itself. Most developers are able-bodied and sighted, and we interact visually, which is — an “OK” button the size of this prompt box, a big button that can be seen 100 meters away, and a tiny “close” button in the upper right corner that needs wool?

But for the blind user, when he uses a screen reader to trigger a pop-up, does he know that there is a giant OK button in the bottom right corner? I don’t know. All he knows is that there’s a button there, and for them, the difference is yes and no, clickable or unclickable.

For a simple prompt, an “OK” button isn’t a disaster, at least users can turn it off. The most afraid component in the implementation, did not pay attention to the accessibility of HTML elements, I once saw a pop-up component in Tencent, its “confirm” and “cancel” buttons are directly simulated by

, even a tabindex is not set, simply can not pass the external device Focus. Imagine, at this point, if the alert box does not have a close button, how can it be closed through an auxiliary device (whether keyboard or screen reader)? Sorry, it can’t be closed completely. Once you open the pop-up box, the page is invalid and you can only refresh the page and start again.

3. Positive and negative case examples of special pop-up close button and user experience

Real cases are more revealing.

1. Positive case – View the larger picture on Sina Weibo

PC side, sina Weibo view the large picture, there is a non-standard floating shell frame, as shown in the screenshot below:

Click on the back translucent black mask to close the popbox, click on the upper right corner of a round close button can also close the popbox.

The close button is very important (although it is designed to close the browser several times). It uses the tag and has the href attribute, so it can be focused by the keyboard, so it can be closed by the keyboard or the TV remote control. As for the tag inside the content is a close character ×, in fact, not meaningful, special characters screen readers ignore, it is best to directly close Chinese. In this way, other screen reading devices will also be accessible. So, all kinds of scenes, all kinds of people, all kinds of devices can interact smoothly.

2. Negative case – read the official account at the bottom of the official website to see the larger picture

At the bottom of China Literature Review website, there is a button to view the large picture of China Literature Review official account, as shown in the screenshot below:

After clicking, an official account picture will appear:

Interactive nature and Sina Weibo similar, view pictures; The interaction is similar. Closing the back translucent black mask closes the popup. But there is one difference, that is, the effect of reading this public number two-dimensional code is not closed button.

99% of users have a mouse, and the interaction is fine, with a click anywhere on the screen to turn it off. However, if the user’s mouse is broken and can only be accessed by the keyboard, that’s the end, the float can never be closed and can only be restarted by F5 or Ctrl+R refreshing the page. For special interaction scenes, there is no close button, the experience and bad, the nature is very serious, the whole page interaction directly scrapped!

Fortunately, it is an official website project, but also a very obscure function, the impact is relatively small. If it is sina Weibo that kind of view the effect of the big picture this way, that thing is playing big.

// ZXX: Find the problem does not ignore the truth, next week to go to work immediately push your partner to add ESC shortcut key exit.

Four, why the frame or float layer must have a close button summary

To sum up, four reasons, I think the weight in turn is getting higher and higher!

1. Visual balance (only for frame); 2. In line with user habits; 3. Interaction consistency; 4. Improve barrier-free access (especially the special box of cancel button is not confirmed);

In particular, there is no confirmation of the cancel button special box; If there is no close button, for some users, it will be an access disaster, which is even more serious than the nature of the page JS hanging. And these experience problems must be difficult to find by test students. As developers, we need to understand and pay attention to them.

Now in fact, you can recall that when you implemented a certain function in the past, whether you also made similar mistakes, you can optimize it.

Close button with vision

For some of the more customized frame or float layer, the designer will remove the close button, because it is ugly. Now, how do we weigh that? Should you convince the designer to change the design, or compromise yourself? In fact, there is a way to achieve the best of both worlds, that is, you quietly put a close button in the upper right corner, the default opacity is 0, the keyboard focus transparency is 1. In this way, although the close button is invisible to the naked eye, the device can see it. No matter the reader or auxiliary devices such as the keyboard, they can be accessed barrier-free. The interaction between the frame and the floating layer will become smooth, and both the visual effect and barrier-free access can be achieved.

The above is some of my humble opinion, non-related field professionals, there may be inaccurate place, welcome to correct, exchange, discussion!

Thanks for reading!

CSS World
Click to display the purchase code

// Want a tip? Click here. Got something to say? Click here.

    focus
    tabindex
    interaction
    accessibility
    bounced
    button
    Web Accessibility Applications
    The keyboard