Improve user experience defensive programming

Improve user experience

Page rendering + Detail oriented interaction design + Perfect accessibility + performance = Good user experience

• The user experience can be improved , And it's not hard
• Good user experience design , It is the result of joint efforts in every aspect of the product
• Improving the user experience can not be achieved overnight , Force in different details Many a little make a mickle

Defensive programming

The main idea of defensive programming is ： Subroutines should not be corrupted by incoming bad data , Even the wrong data generated by other subroutines . The idea is to limit the impact of possible errors within a limited range .

Text super long processing

A single line of text exceeds the ellipsis

  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

Multiline text beyond ellipsis

  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

Reserved protection boundary

Consider the handling of various abnormal situations , Use min-width But it doesn't take into account that the button is too long

Add... To the button

padding-left :16px;
padding-right:16px;

Pictures show -- Set the width and height at the same time

Set the width and height of the picture as much as possible Prevent layout disorder

img{
    
    width:150px;
    height:100px;
}

Specifying the height and width can also cause problems , For example, the picture is stretched

It is possible that the size of the image uploaded by the customer does not conform to the existing configuration

//  utilize object-fit :cover, Make the content of the picture fill the whole content box of the element while maintaining its aspect ratio  img{
    
    width:150px;
    height:100px;
    object-fit:cover;
}

Responsive picture -- Adaptations are different DPR

Attributes provided by the tag srcset Let's adapt to different DPR, Give different DPR The screen provides the most suitable picture

<img src='[email protected]' srcset='[email protected] 1x,[email protected] 2x,[email protected] 3x' />

<img src='photo.png' sizes='(min-width:600px) 600px, 300px ' srcset='[email protected] 300w,[email protected] 600w,[email protected] 1200w' />

stay css in , There are multiple graph requirements , You can also use image-set Multiple image adaptation of labels provides the most suitable pictures :

.box {
    
    background-image: image-set(url('[email protected]') 1x, url('[email protected]')2x,url('[email protected]')3x);
}

The picture is missing Show the bottom picture and description information at the same time

practice

1. Failed to load with image , Trigger the onerror event , Add a new style class to the element that failed to load
2. Use the new style class , Pseudo elements of mating elements , While showing the default map , Can also show elements together alt Information

<img src='test.png' alt=' Picture description ' οnerrοr='this.classList.add('error')'
     
 img.error {
     position:relateive;
     display: inline-block;
 }
img.error::before {
     content: "";
     background: url(error-default.png)
     }     
 img.error::after{
     content:attr(alt)
     }

Animation is fast enough

The slow animation produces unnecessary pauses

Keep transition animation short Because users often see them Keep the animation duration at 300ms Or shorter

Convenient operation Click area optimization

Without changing the original size of the button , Add the click hot area of the button Make user's operation more convenient

btn{
    
    border: 10px solid transparent;
} // Using transparent  border // Using pseudo elements  btn:: before{
    
    content:'';
    position: absolute;
    top:-10px;
    right:-10px;
    bottom:-10px;
    left:-10px;
}

Convenient operation – Choose... Quickly

In some scenes that need to be copied and pasted , utilize user-select: all Quickly select a paragraph of text

Selection optimization -- No choice

utilize user-select:none style Set the unselectable element to unselectable

Button jump optimization

Let the mouse support right clicking to open a new page

Rational use :focus-visible

:focus-visible: It can effectively according to the user's input mode ( mouse vs keyboard ) Show different forms of focus

button: active{
    
    background: #eee
}
button:focus{
    
    outine: 2px solid green;
}
button:focus-visible{
    
    outline: 2px solid red;
}
// focus-visible  Compatibility writing  button:focus:not(:focus-visible) {
    
    outline:none;
}

div And other non coke elements simulate coke elements

Use div simulation button Elements

Use ul Simulation drop-down list select wait

Its behavior does not conform to button select etc. Properties of focusable elements

Be able to extract the semantics of elements

Can be focused , There is a focused style

Can pass Tab Switch

WAI-ARIA standard

Simply speaking It provides some properties Enhance the semantics and behavior of tags

• have access to tabindex Attributes control whether an element can focus , And whether it is / Where to participate in sequential keyboard navigation
• have access to role attribute To express the semantics and functions of elements
• And a lot of aria-* attribute , Represents the attribute or state of an element , Help us to further identify and realize the semantics of elements , Optimize accessibility