This article was first published on the wechat public account “Shopee Technical Team”.

preface

This article is based on Shopee supply chain team internal WMS (Warehouse Management System, Warehouse Management System) project overall reconstruction, summed up a Web user experience design to improve the guide.

Since it is a complete overturning and reconstruction of the existing project, we have been thinking about how to improve the experience and feelings of users as far as possible from the perspective of users through front-end design, so as to truly achieve the purpose and significance of reconstruction.

A Web page or an App may include but not limited to:

Rapid opening speed
Amazing UI design
Cool animation effects
Rich personalized Settings
Easy to use, friendly and convenient operation
Intimate details
Attention to people with disabilities, good accessibility
…

The so-called user experience design, is adhering to the idea of a user-centered design means, with user needs as the goal of the design. The design process focuses on the user, and the concept of user experience enters the whole process from the earliest stages of development and continues throughout.

Good user experience design is the result of the joint efforts of the team in every link of product development.

This article will focus on page presentation, interaction details and accessibility, and share some useful experience accumulated in the actual development process. Through this article, you will be able to:

Understand how some of the details affect the user experience;
Learn how to improve the user experience with minimal development changes;
Learn some good interaction design details;
Understand the meaning of basic accessibility and page accessibility;
Learn the basics of improving page accessibility.

1. Page rendering

In terms of the display of the whole page and the presentation of the page content, different display methods, the results are completely different.

There are a lot of remarkable details. The following is divided into several points for elaboration:

Adaptive layout
Layout design of key content
Compatible with different scenarios and abnormal rollback
Picture presentation and exception handling
Appropriate transitions and animations

1.1 Adaptive layout

Let’s start with some layout issues.

Layout, is the front-end in the process of page reconstruction need to plan and think in advance, generally should consider the following issues:

For PC, is the project a full-screen layout or a fixed-width layout? Are users still using Internet Explorer?
What is the minimum width that needs to be adapted for a full-screen layout?
For mobile layout, do you know the distribution of user devices? What is the least compatible version of Android? What is the iOS version?
How should the content be presented?

Today, there are a lot of different devices, and mobile screen sizes vary (the chart below is just the distribution of android screen sizes through 2019) :

However, our overall refactoring project is a PC-based ToB project, so we will focus on the PC side as an example.

For most PC projects, the first thing to consider is the outermost layer. Assume.g-app-wrapper.

<div class="g-app-wrapper">
    <! -- Internal content -->
</div>
Copy the code

First of all, for.g-app-wrapper, there are a few things we need to know before developing the project:

Is the project full-screen or fixed-width?
What is the minimum width that needs to be adapted for a full-screen layout?

For the fixed-width layout, it is more convenient, set the width to 1200px, then:

.g-app-wrapper {
    width: 1200px;
    margin: 0 auto;
}
Copy the code

Margin: 0 Auto is used to center the layout horizontally. When the screen width is greater than 1200px, leave both sides blank. When the screen width is less than 1200px, a scroll bar appears to keep the internal content in order.

Modern layouts are more full-screen layouts. In fact, this kind of layout is now advocated, which can be adapted to the size and capability of the user’s device.

An adaptive layout usually has two columns, with a fixed width on the left and an adaptive residual width on the right. There will also be a minimum width. So, it should look like this:

<div class="g-app-wrapper">
    <div class="g-sidebar"></div>
    <div class="g-main"></div>
</div>
Copy the code

.g-app-wrapper {
    display: flex;
    min-width: 1200px;
}
.g-sidebar {
    flex-basis: 250px;
    margin-right: 10px;
}
.g-main {
    flex-grow: 1;
}
Copy the code

Here we use flex-grow: 1 in the Flex layout to make.main stretch to fill the remaining space and min-width to ensure the minimum width of the entire container.

This is the most basic adaptive layout. For modern layouts, we should consider as many scenarios as possible. To do:

At the bottom of the footer

The following scenario is also very common:

A page has a footer section. If the content of the entire page is smaller than the height of the window, the footer is fixed at the bottom of the window. If the content of the entire page is larger than the height of the window, the footer flows normally (that is, you need to scroll to the bottom to see the footer).

Look at the results:

This requirement can be well addressed with context-content: space-between if flex is available. Similarly, using margin-top: auto is also very easy:

<div class="g-container">
    <div class="g-real-box">.</div>
    <div class="g-footer"></div>
</div>
Copy the code

.g-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.g-footer {
    margin-top: auto;
    flex-shrink: 0;
    height: 30px;
    background: deeppink;
}
Copy the code

Codepen Demo – sticky footer by flex margin auto

Of course, there are many ways to achieve this, but here is only one recommended solution.

1.2 Layout design of key contents

The following piece is about the presentation of the key content.

1.2.1 Display of important contents and functions

Bring the elements that capture the user’s attention to the front. If there is a core piece of information or form that the user needs to know and work with, try to put it at the top of the page to make it easier for the user to access this part of the information.

Show users the information they need, the important features, instead of hiding them.

Similar to navigation, search and other high-frequency operations, must not allow users to click multiple times to use.

1.2.2 Handling Dynamic Content: Text is too long

All interfaces that accept text presentation classes for backend interface fields need to be considered. The normal situation is as follows, there is no problem:

But are we taking into account the fact that the text will be too long? If it’s too long, will it fold or wrap?

For single-line text, single-line ellipsis is used:

{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
Copy the code

Of course, the compatibility is already very good for long ellipsis of multi-line text:

{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
Copy the code

1.2.3 Handling dynamic Content: Protect boundaries

For dynamic content, we often use min/max-width or min/max-height to control the height and width of the container.

There are also some details to consider when using them. For example, we often use min-width to control the minimum width of the button:

.btn{...min-width: 120px;
}
Copy the code

This is fine when the content is small, but if the content is long, it can cause problems. Here is a case where min-width is used without considering the length of the button:

This is where the padding comes in:

.btn{...min-width: 88px;
    padding: 0 16px
}
Copy the code

Use Min and Max Width/Height in CSS as an example:

1.3 Compatibility with Different Scenarios and Abnormal Rollback: Empty data is displayed

This module is compatible with different scenarios and exception fallbacks and is an area that is often overlooked.

Pages often have list searches and list displays. So, since there are normal cases of data, there are certainly cases where the results are not searched or the list has nothing to show.

In this case, pay attention to the design of empty data results pages; Also be aware that this is a great place to guide users. For empty data result pages, separate them clearly:

(1) Data is empty

User denied access – Inform the user of the reason for the denied access and the solution
Search with no results – Inform the user of search results with no data and recommend relevant content if necessary
Filter with no results – Generally tell the filter with no results directly
Pages have no data — Copywriting has several directions:
- Tell the user what data is going to be stored here
- Give users a reason to take the initiative to create data, for example, by talking to them
- If no data on the page will cause confusion to users, you can explain the reason to eliminate the confusion of users

(2) Abnormal state

Network exception – Indicates that the current status is a network exception and provides a solution
Server Exception – Indicates that the current status is a server exception and provides a solution
Load failure – Load failure is mainly caused by network or server exceptions
Different cases may correspond to different empty data result pages, with different action guides

For example, if the network is abnormal, you can refresh the page:

Or indeed zero results, such as no order information, can lead the user to create an order (directed consumption) :

To sum up, this space has always been about the same thing: when developing, you should not only focus on normal phenomena, but also consider all kinds of anomalies, think comprehensively, and deal with all kinds of possible situations.

1.4 Picture presentation and exception handling

Images are very common in our business. But it’s not easy to perfect an image.

1.4.1 Set the height and width of the picture simultaneously

Sometimes the product and design will agree that only fixed size images can be used, and our layout may look like this:

Corresponding layout:

<ul class="g-container">
    <li>
        <img src="http://placehold.it/150x100">
        <p>Picture description</p>
    </li>
</ul>
Copy the code

ul li img {
    width: 150px;
}
Copy the code

The above unprotected layout would be problematic if an abnormally sized image appeared on the back-end interface:

So for images, we always recommend using both height and width to avoid layout problems caused by the wrong image size.

ul li img {
    width: 150px;
    height: 100px;
}
Copy the code

In addition, the tag is also written with the width and height to capture the image before it is loaded, avoiding the rearrangement problems caused by the image’s width and height changes from the unloaded state to the rendered state.

1.4.2 `object-fit`

Limiting the height and width can also cause problems, such as the image being stretched and ugly:

In this case we can use object-fit, which specifies how the content of the replaceable element (that is, the image) should fit into the height and width of its parent container.

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;
}
Copy the code

Use object-fit: Cover to fill the entire content box of an element while maintaining the aspect ratio of the image content.

Object-fit also has a supporting attribute object-position, which can control the position of the picture in its content box (similar to background-position). M defaults to Object-position: 50%, 50%. If you don’t want the image to be centered, you can use it to change where the image is actually displayed.

ul li img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    object-position: 50% 100%;
}
Copy the code

Like this, object-position: 100%, 50% indicates that the image should be displayed from the bottom.

Here’s a good Demo to help you understand Object-position:

CodePen Demo – Object position

1.4.3 Consider screen DPR: responsive images

Normally, the presentation of images should be fine, but we could do better.

On mobile devices or some high-definition PC screens (such as Apple’s Mac Book), the screen DPR may be greater than 1. In such cases, we may also need to consider using multiplograms to fit screens of different DPR.

As it happens, the tag provides the corresponding property srcset for us to manipulate.

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

However, this is an older notation, srcset adds a new w width descriptor that needs to be used with SIZES, so a better notation would be:

<img 
        src = "photo.png" 
        sizes = "(min - width: 600px) 600px.300px" 
        srcset = "[email protected] 300w.photo@2x.png 600w.photo@3x.png 1200w,
>
Copy the code

With SRCSet, we can provide the best images for different DPR screens.

1.4.4 Picture Loss

Ok, when the image link is ok, it’s done. Then you need to think about what to do when the image link dies.

There are many ways to deal with it. The best way to deal with it is what I saw in zhang Xinxu’s article “best practice of CSS style processing after image loading failure”. Here’s a brief explanation:

Using picture load failure, trigger<img>Elements of theonerrorEvent to load failed<img>Element adds a style class;
Use the new style class to match<img>The pseudo-element of the element, which displays the default bottom pocket chart, can also be displayed together<img>Elements of thealtInformation.

<img src="test.png" alt="Picture Description" onerror="this.classList.add('error');">
Copy the code

img.error {
    position: relative;
    display: inline-block;
}

img.error::before {
    content: "";
    /** Location code **/
    background: url(error-default.png);
}
 
img.error::after {
    content: attr(alt);
    /** Location code **/
}
Copy the code

We use the pseudo-element before to load the default error pocket graph, and the pseudo-element after to display the Alt information of the image:

At this point, the complete image processing is complete, the complete Demo you can poke here to see: CodePen Demo – image processing.

1.5 Appropriate transitions and animations

Good page rendering requires proper transitions and animations to make the overall interactive experience smoother. Add transitions and animations to make the user aware of the changes on the page. They have the following effects:

Reduced cognitive load
Prevent change blindness
Create a better impression of space
Keep the user interface alive

This piece of content can also be placed in the interaction design optimization, readers understand good friends.

1.5.1 Loading Waiting animation

Loading effects, which can be seen all over the page, are used to make the user feel that the page is loading or that something is being done.

1.5.2 Skeleton Screen Animation

The layout of the skeleton screen is consistent with the visual presentation of the page, guiding the user to focus on the location of interest and avoiding long waits.

1.5.3 Scrolling smooth: Enable`scroll-behavior: smooth`Make the rolling silky

Use scroll behavior: smooth to allow the scroll box to scroll smoothly rather than abruptly. To see the effect, assume the following structure:

<div class="g-container">
  <nav>
    <a href="# 1">1</a>
    <a href="# 2">2</a>
    <a href="# 3">3</a>
  </nav>
  <div class="scrolling-box">
    <section id="1">First section</section>
    <section id="2">Second section</section>
    <section id="3">Third section</section>
  </div>
</div>
Copy the code

Do not use scroll behavior: smooth, which is to abruptly jump switch:

To improve this, we can add scroll behavior: smooth to the scrollable container:

{
    scroll-behavior: smooth;
}
Copy the code

1.5.4 Viscous rolling: Use`scroll-snap-type`Optimize scrolling

Sroll-snap-type is perhaps the most central attribute style in the new rolling specification.

Scroll-snap-type: The property defines how a snap point in the scroll container is strictly enforced.

The definition is a little confusing, but in a nutshell, this property specifies whether a container captures internal scroll actions and how to handle the scroll end state. Let the element stop in its proper position after the scrolling operation is complete.

Here’s a simple example:

Of course, there are many uses of scrollsnap-type and many points that can be controlled and optimized, which cannot be expanded one by one due to space limitation.

1.5.5 Control scrolling levels to avoid massive page rearrangement

This optimization may be a little harder to understand. Knowledge of CSS rendering optimization is required.

Conclusion first, controlling the scrolling hierarchy means keeping the Z-index of the elements that need to be animated by CSS (either elements or containers) at the top of the page to avoid unnecessary GraphicsLayer creation by the browser, which is a good way to improve rendering performance.

How do you understand this? One of the elements that triggers the creation of a Graphics Layer is:

Element has a sibling element with a low Z-index that contains a composite layer.

Based on the above, we need to pay attention to two points when we optimize the rolling performance:

Generate an independent GraphicsLayer and use GPU acceleration to improve scrolling performance;
If there is no performance problem with scrolling itself, there is no need for a separate GraphicsLayer. It is also important to pay attention to the level of the scroll container, so as not to merge with other elements that created a GraphicsLayer because of the high level, and passively generate a GraphicsLayer, which affects the overall rendering performance of the page.

1.5.6 Transition animation

Transition animations come in handy when jumping from one module to another. It’s there to guide the eye to the right place at the right time.

Look at the following example:

In the process of clicking the button to pop up the popup window, the popup window does not appear abruptly, but zooms in from the clicked place to the middle of the window, which makes the experience more silky.

1.5.7 Animation operation

This is similar to loading. In case of time-consuming operations, such as downloading, we can customize a special animation to relieve users’ impatience and anxiety in waiting.

The above animation code you can swipe:

CodePen Demo – Download interaction By Milan Raring

Of course, in addition to downloading and waiting, we can also customize special animations in some important operation interactions, such as “like” and “follow”, to make the process more lively and interesting. Here is a thumbs-up animation from a website:

The code for the above like animation you can swipe:

CodePen Demo – Twitter likes animation

1.5.8 Mistakes in using transitions and animations

Use animation wisely to make your page look great, but avoid the following pitfalls:

Animation has no relevance
Animation for animation’s sake, there is no purpose
Too slow to interact
Not enough clear

Just a quick explanation. For example, animation correlation, the logic behind the correlation can help users understand what has just happened in the interface layout and what caused the change.

In the chart below, the left is poorly correlated and the right is well correlated:

Also, most animations should not be too long, they should be fast enough.

Slow animation creates unnecessary pauses. Transition animations should be kept short because users will see them frequently. Keep the animation duration at 300ms or less.

As you can see in the illustration below, the same transition animation can be triggered frequently, so keeping each animation as short as possible can save the user more time.

All in all, it is important to use animation and transitions properly and avoid animation for animation’s sake.

2. Optimization of interaction design

The next big part is some interaction details.

What is interaction design? Interaction Design (IXD) is a Design field that defines and designs the behavior of man-made systems. It defines the content and structure of communication between two or more interacting individuals, so that they can cooperate with each other to achieve a certain goal together.

2.1 Interaction mode on the Web

The Interaction on the Web side is centered on the computer and mainly involves the interaction of the keyboard and mouse.

Some of the more general guidelines for interaction design are:

Don ‘t make me think
Meet user habits and expectations
It is very convenient
Give appropriate reminders
Not forcing users

2.2 Don’t make me think

There’s a book called Don’t Make Me Think, and it’s all about making your product as highly usable as possible so that you can use it without thinking about it.

So how do we make our pages as highly available as possible?

2.2.1 Using Idioms

Use idioms. When designing a new page, the location, functionality, and visual elements of the page should be the same as they are used to, so that the user feels comfortable.

This is not to stifle your imagination and make every page look the same. Depending on the shape of the product and its audience, most pages are ill-suited to the wild imagination.

For example, with the following PC page structure, this layout is already very common. With this kind of page, the user can find the desired elements and information in the specified area very quickly:

This can be compared to our WMS refactored page, and the overall picture is very similar:

Using idiomatic Settings makes it easy to pick up new and unfamiliar pages or features.

2.2.2 Reduce visual noise

Another approach is to reduce visual noise and allow the user to focus quickly.

For example, the shadow and blur behind the popover are very good means to reduce visual noise.

This point is very well understood and is one of the common design methods, and our in-house library of related components and self-developed components has been well settled.

2.3 Conform to users’ habits and expectations

The next step is to conform to users’ habits and expectations. Its meaning is to reduce users’ thinking, conform to users’ habits, and make users’ experience more comfortable.

Which of the following popovers is a better choice?

The three popup buttons available for operation are:

Cancel and confirm in the lower right corner, while X in the upper right corner can close the popover;
Only cancel and confirm in the lower right corner;
Only the confirm button.

A better choice would be the first: both cancel and confirm buttons, and the X in the upper right corner closes the popover. Because this is the most consistent with the user’s customary expectations.

Take a look at this popover in Windows:

Most Windows pop-ups have cancel, confirm and X buttons in the upper right corner. The benefits of this popover are:

Visual reasons, element balance;
In line with user habits, most users are Windows operating system;
Interaction consistency, reduce user learning cost;
Improve page accessibility and accessibility.

2.3.1 Optimized gesture: It is applied differently in different scenarios`cursor`

It is best to give different cursor styles for different content. CSS natively provides a wide variety of commonly used gestures.

Using different mouse gestures in different scenarios is in line with users’ habits and expectations, which can greatly improve users’ interactive experience.

First, there are at least three types of cursors for buttons, which are clickable, unclickable, and waiting:

{
    cursor: pointer; / / clickcursor: not-allowed; // Unclickablecursor: wait;    // loading
}
Copy the code

There are other common uses: For Input boxes that can be typed, use cursor: text; For the Tips class, use cursor: help; Zoom-in, zoom-out and so on:

Some commonly used simple column a column:

Button can be clicked:cursor: pointer
Button is forbidden to click:cursor: not-allowed
Waiting Loading state:cursor: wait
Input box:cursor: text
Picture viewer can zoom in and out:cursor: zoom-in/ zoom-out
Tip:cursor: help

Of course, there are many different types of actual cursors. You can view the complete list in MDN or CodePen Demo: CodePen Demo – cursor Demo.

2.3.2 Click area optimization: pseudo-elements expand the click area

Buttons are an important part of our web design, and button design is closely related to user experience.

Consider the situation of being on a rickety train or operating a screen with one hand, and sometimes a button can’t be pressed.

Making it easier for users to click on a button is a great way to improve the user experience and make the page more accessible. Especially on mobile, buttons are usually very small, but due to the limitations of the design or the overall UI style, we can’t directly change the height and width of the button elements.

So, is there a way to increase the hot spot without changing the size of the button?

This is easy to implement with pseudo-elements. Pseudo elements can also respond to mouse interaction events on behalf of their host elements. We can write this:

.btn::before{
  content:"";
  position:absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}
Copy the code

Of course, this looks a little strange on the PC, but it works great on mobile devices with small click areas:

2.4 Convenient operation

A good system should operate smoothly. At the same time, it can impress users with small details.

2.4.1 Quick Selection optimization:`user-select: all`

The operating system or browser usually provides some quick text selection function. Take a look at the schematic below:

Click twice quickly to select a single word. Three quick clicks to select an entire row. But if the core content is separated by delimiters, or becomes part of a hidden line, it can be more difficult to select.

Using user-select: all, you can wrap the content that needs to be selected once. The user only needs to click once to select the information:

.g-select-all {
    user-select: all
}
Copy the code

Add this style to information that needs to be selected at once. This detail is useful for some copy-and-paste scenarios.

In many operation pages of WMS, we need to copy some basic information frequently from the table, such as the following Location ID, Cell Name, because the complete field uses the delimiter -, so one click can not select the whole information, but use user-select: All works well to address this pain point:

It’s not just the number of mouse clicks, but it’s the accumulation of these details that makes the user feel more thoughtful.

Codepen-user-select: all example

2.4.2 Selecting Style Optimization:`::selection`

CSS also provides a :: Selection pseudo-class that can control the selected text style (only color, background, and text-shadow) to further enhance the effect.

Codepen-user-select: all && ::selection controls the selection style

2.4.3 Adding Forbid Select:`user-select: none`

If there is a quick choice, there is also its opposite: no choice.

For some buttons that may be frequently operated, the following embarrassing scenarios may occur:

The quick click of the text button triggers the browser’s double click for quick selection, causing the text to be selected:

The quick click of the page turn button triggers the double click of the browser for quick selection:

For this scenario, we need to set unselectable elements to unselectable, which can be done quickly with CSS:

{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
Copy the code

This way, no matter how fast you click, there will be no awkward situation where the content is selected:

2.5 Jump Optimization

At present, Single Page Application is widely used, and frameworks such as Vue and React are popular. However, some common writing methods are also prone to minor problems.

For example, if you click a button and text to redirect, you’ll often see code like this:

<template>
    ...
    <button @click="gotoDetail">
        Detail
    </button>
    ...
<template>
...
gotoDetail() {
    this.$router.push({
      name: 'xxxxx'}); }Copy the code

The general logic is to add an event to the button, click it and jump to another route. Of course, this feature is fine in and of itself, but it doesn’t take into account the scenarios that users actually use.

In practice, users may want to keep the current page content while opening a new window. At this point, he will try to right click the mouse and choose to open the page in a new TAB. Unfortunately, the above method does not support the right mouse button to open a new page.

The reason is that the browser reads the href attribute of the tag to display options such as opening the page in a new TAB, which the browser does not recognize as a jump link. Here’s a simple diagram:

Therefore, for all route jump buttons, it is recommended to use the tag and the built-in href attribute to fill in the route address of the jump. The actual DOM rendered might look something like this:

<a href="/xx/detail">Detail</a>
Copy the code

In the actual WMS reconstruction process, we optimized all the buttons with page jump function, including but not limited to route menu, breadcrumb navigation, jump button, etc., to meet the different demands of users.

Route menu navigation:

Some of the buttons in the table jump:

2.6 Form interaction optimization

Input and selection is a high interaction cost operation for users. Here are some tips to reduce user input errors and improve the user experience.

2.6.1 Simplify forms as much as possible

Make the form simple to make sure users can get to the next step before they freak out (the more complex the form, the higher the churn rate) :

For input items that cannot be omitted, simplify user input as much as possible:

Smart default
Provide intelligent association when input
For selection boxes, keep the information about options as minimal as possible
Use radio options instead of drop-down menus

2.6.2 Timely verification

The form is verified in time, rather than the user fills in a bunch of information, submits it uniformly, and then tells the user that he or she has filled in a mistake:

2.6.3 Intimate details prompt, more tolerant calibration

There are also some useful suggestions that can effectively improve the user experience in the interaction process, which can be considered according to the actual situation:

Add some hints to the form to reduce the chance of errors
Try to make form input more forgiving and easier for users to fill in

2.7 Explore before you commit

This is very interesting. What do you mean explore before you commit? Is that we don’t force users to do things like log in in the first place. Consider some examples of popular websites:

Like Huya, Bilibili and other video sites, you can experience blu-ray first, after a certain viewing time will be required to log in;
E-commerce sites, only when it’s time to pay, you need to log in.

The above content of ease of use and exploration before statement is partly derived From “Learn From What Leading Companies A/B Test”, which is recommended reading.

2.8 Creative interactive animation combined with products

Due to the limitations of business types, we do not use this part much in practice, but it is also a very useful and important part to enhance user experience, which will be briefly discussed below.

This kind of interaction is the creative interactive animation combined with the product. Through customized, ritualistic interactions, brand value can be enhanced and users can be impressed.

Creative animation combined with products and business needs to be explored, polished and iterated. For example, the banner at the top of Bilibili’s official website is often accompanied by some interesting creative interactive animations in conjunction with some festivals and activities:

And this:

I’ve seen bilibili’s top banner animation discussed many times in different places, so it was a success. It is well combined with some festivals, current affairs and hot spots. As a relatively fixed product, it constantly brings forth new ideas and brings different experiences to users at different times.

2.9 Font Optimization

The choice and use of fonts is very particular.

During the REfactoring of the WMS project, the global font definition we used was: Roboto,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,”sans-serif”; .

Here, our designers have some strong restrictions on English fonts, the preferred font is Roboto, and the font package is provided in the system.

If the site is not forced to use certain fonts. The latest specification recommends that we use the system default font. Font family: system-UI keyword added in “CSS Fonts Module Level 4: Generic Font Families”. It can automatically select the default system font for the operating system.

Defaulting to the system font for a particular operating system can improve performance because the browser or WebView doesn’t have to download any font files and instead uses existing font files. The advantage of the system-ui font setting is that it matches the fonts currently in use by the operating system, so it can be displayed most appropriately for text content.

Here are two examples: Font definitions on Tmall and Github:

Tmall:font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
Making:font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;

In short, they generally follow the following basic principles:

2.9.1 Use the default font

The main reason for using the system default font is performance. The advantage of the system font is that it matches the current operating system, so it must be comfortable to display text.

2.9.2 Taking both Chinese and Western into consideration: Western language comes before Chinese language

Both Chinese and English (Spanish) should be taken into account. Because most Chinese fonts also have An English part, but the English part is not so beautiful, and most Of the English fonts do not contain Chinese. Therefore, we usually declare the English font first and choose the best English font, so as not to affect the selection of Chinese font.

2.9.3 Serving Multiple operating Systems

Consider multiple operating systems when choosing fonts. For example, many Chinese fonts in macOS are not pre-installed on Windows. To ensure user experience for Mac users, define Chinese fonts for Mac users first and then Windows users.

2.9.4 Taking Old oss Into Account: End with Serif and sans-serif font families

When working with very new fonts, it’s always a good idea to use serif and sans-Serif endings to consider backward compatibility, taking into account some very old operating systems.

3. Accessibility (A11Y)

Accessibility (also known as “A11Y”) is a very important part of a website, but most of the students ignore it.

3.1 What is accessibility

Traditionally we think of this as being about people with disabilities, but making the site more accessible can benefit other user groups (everyone) as well.

According to the Web Content Accessibility Guidelines (WCAG) 2.0), there are four basic principles for Web Accessibility.

(1) Perceivable

Replace non-text content with text
Multimedia subtitles and other substitutes
Content can be presented in many ways
Content is easier to see and listen to

(2) Operable

Functions can be accessed through the keyboard
Users have plenty of time to read and use content
Content should not induce seizures and physical reactions
Can users easily navigate, find content, and confirm where they are
Users can use different input methods in addition to the keyboard

(3) Understandable

The text is easy to read and understand
Content appears and operates in predictable ways
Users can get help to avoid and correct errors

(4) Robustness

Robust content and solid explanation
Content is compatible with current and future user tools
Correctly displayed across platforms and environments

I lurk in the barrier-free design team, a group, which contains a lot of barrier-free designers, and with a certain degree of visual, hearing, movement disorder of users, they often in group of express an opinion, is the domestic most of the Web site and App basic have not considered the use of people with disabilities (or accessibility do poorly). It’s very gut-wrenching.

Especially in some interactive and logical websites, we need to consider the user’s usage habits and usage scenarios from the perspective of high accessibility. For example: assuming that users do not have a mouse, only use the keyboard, can we use our website smoothly?

Assuming the user doesn’t have a mouse, this isn’t necessarily for the disabled. In many cases, the mouse hand may be doing something else, such as eating; Or in To B type of business, such as supermarket cashier, warehouse receipt, it is likely that the user with the hand of the mouse To operate other equipment (scan gun), etc.

This article won’t cover every aspect of accessibility design, but just a few of the accessibility details that I think front-end engineers need to focus on and can do well for a small amount of money. Remember, accessible design is friendlier for all.

3.2 Color Contrast

Color is also an attribute that we need to deal with every day. Most visually normal users are probably not that sensitive to the color of a page. But for a small number of color weak, color blind users, they will be more sensitive to the color of the website, bad design will bring them great inconvenience to visit the website.

3.2.1 What is Color contrast

Have you ever been concerned about the presentation of content and the use of appropriate colors? Can color-weak and color-blind users see the content properly? Good use of color is beneficial at all times, and not just for color-weak and color-blind users. When you use your phone outdoors and the sun is too bright to read, it’s easier to read high-definition, high-contrast text that meets accessibility standards.

A concept is introduced here — color contrast. What is the difference between two colors on the brightness scale? When applied to our pages, most cases are the contrast difference between background-color and content color.

“The WCAG AA specification, the most authoritative web accessibility specification, states that all important content needs to have a color contrast ratio of 4.5:1 or more (3:1 or more for font size larger than 18) to be readable.”

Take a look at the chart below:

Obviously, the contrast goes from low to high. The first two examples are already hard to see for normal users, let alone visually impaired users.

Of course, there will be some special cases, such as input box placeholder, button disabled state and so on. Therefore, in the process of web refactoring, we need to follow this specification as much as possible. But not blindly follow, resulting in no wiggle room.

3.2.2 Tools for checking color contrast

Chrome has long supported checking the color contrast of elements. Taking a Table Header from a WMS page as an example, we can check for some text that does not intuitively determine whether the standard is met:

Review elements to see the contrast between the current text and the background, respectively. The following results show that the contrast is fine:

Of course, there will also be breadcrumb navigation on our page:

As you can see, the areas where the color contrast is not up to standard are marked with yellow exclamation marks.

In addition to reviewing elements in the Style interface of the color picker, change the color, also can intuitively see the current color contrast:

3.2.3 Do not rely solely on color

To ensure accessibility accuracy, make sure you don’t rely entirely on color to display key information at different levels of the system.

Consider the following example:

We were expecting green and red to indicate right and wrong, but for some visually impaired users, they might not even notice.

Instead, use the necessary text and ICONS:

Therefore, in practical application, we need to use ICONS that can convey accurate information to express with text description, such as WMS login error page:

3.3 Focus response

Similar to the home page of Baidu and Google, the input box will get focus by default after entering the page:

Not all pages with input boxes need to be focused once they are on the page, but focus gives the user a very clear idea of where they are and what they need to do. Especially for users who can’t operate a mouse.

An element on a page that can be focused is called a focatable element, and an element that gets focus triggers a focus event for that element. Correspondingly, the element’s: Focus pseudo-class is also triggered.

Browsers typically use the element’s: Focus pseudo-class, which adds a border to the element to tell the user where the current focus element is.

We can use the Tab key on the keyboard to switch the focus. The focus element can tell the user the current focus position through the style of the element’s: Focus pseudo-class.

Of course, in addition to the Tab key, for some multi-input box, selection box form page, we should also think about how to simplify the user’s operation, for example, when the user presses the enter key automatically forward to the next field. In general, the fewer touches a user has to perform, the better the experience. 👍 🏻

The following screenshot is completely keyboard operated:

Through the element’s: Focus pseudo-class and the keyboard Tab key to switch the focus, users can smoothly switch and operate the focus of the page without the mouse.

However, in many reset.css, you can often see a CSS style code that removes the :focus pseudo-class from the focatable element for style uniformity:

:focus {
    outline: 0;
}
Copy the code

We give the code for the above operation. Also add this code, use the keyboard again throughout the operation:

In addition to the cursor prompt in the input box, when switching focus from Tab to Select or button, the user is confused as to where the focus of the page is now due to the absence of the: Focus style.

3.3.1 Ensure non-mouse user experience and reasonable use`:focus-visible`

One important reason for this is that the Focus pseudo-class fires whenever an element is in focus, whether the user is using a mouse or a keyboard.

The default style itself is not acceptable to the product or design, so many people will change the color of the border or other ways to replace or disable it when the focus element is triggered :focus pseudo class. This, from an accessibility perspective, is disastrous for non-mouse users.

For this reason, a very interesting addition has been made to the W3 CSS selectors specification: focus-Visible pseudo-classes. This selector can effectively display different forms of focus depending on the user’s type (mouse or keyboard).

With this pseudo-class, when the user uses the mouse to manipulate a focatable element, it is possible not to show :focus style or make it weak; And when the user uses the keyboard to operate the focus, use :focus-visible, so that the focal elements can obtain a strong presentation style.

Here’s a simple Demo:

<button>Test 1</button>
Copy the code

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}
Copy the code

Click with the mouse:

As you can see, a mouse click triggers both the :active pseudo-class and the: Focus pseudo-class of the element. Setting Outline: None would make the keyboard user’s experience worse. Try using the :focus-visible pseudo-class:

button:active {
  background: #eee;
}
button:focus {
  outline: 2px solid red;
}
button:focus:not(:focus-visible) {
  outline: none;
}
Copy the code

Click Button with mouse and click Button with keyboard:

CodePen Demo – :focus-visible example

Outline: 2px solid red will be used only when the focus element is operated by the keyboard and Tab is used to switch focus.

In this way, we can ensure both the click experience for normal users and the focus management experience for a group of users who can’t use the mouse.

It should be noted that some of you may be wondering why the word “not” is used instead of writing it like this:

button:focus {
  outline: unset;
}
button:focus-visible {
  outline: 2px solid red;
}
Copy the code

For compatibility does not support :focus-visible browser, when :focus-visible is not compatible, or need to have :focus pseudo class existence.

We try to keep this in place during the actual WMS refactoring, allowing users to use our pages as much as possible without using a mouse (just using the keyboard), with basic focus switches and carriage returns responding to events.

Here is a simple demo (just use the keyboard to navigate the page, know where the current focus is, and press enter to trigger a click) :

3.3.2 Semantic enhancement using WAI-ARIA specification:`div`Such non-focusable elements simulate focusable elements

There is another important point to note.

Nowadays, many front-end students like to use non-focusable elements to simulate focusable elements in the process of front-end development, such as:

usedivsimulationbuttonThe element
useulSimulate a drop-down listselect, etc.

Many component libraries do this today, such as Element-UI and Ant-Design.

When using non-focusable elements to simulate focusable elements, we must pay attention to that not only the appearance is finished, but also the behavior should conform to the nature of the original focusable elements such as Button and SELECT, which can reflect the semantics of elements, can be focused, can be switched by Tab and so on.

Based on a large number of similar scenarios, there is the WAI-ARIA standard. It is a technical specification for providing barrier-free access to dynamic, interactive Web content for people with disabilities and others.

In short, WAI-aria provides attributes that enhance the semantics and behavior of tags:

You can usetabindexProperty controls whether an element can be focused and whether/where it participates in sequential keyboard navigation
You can useroleAttribute to identify the semantics and functions of the element, such as use<div id="saveChanges" tabindex="0" role="button">Save</div>To simulate a button
And there are tons ofaria-*Attribute, which represents the attribute or state of an element, helps us further identify and realize the semantematization of elements and optimize the barrier-free experience

3.4 Viewing label Semantics Using the Tool

Let’s take a look at how a Github page defines a button. Take the Edit button on the Github Issues page for example:

This section clearly describes some of the accessibility related features of the button. For example, Contrast (color Contrast) and Name (description of buttons) are for screen readers. The Role identifier is an attribute of this element, which is a button, and the Keyboard focusable indicates whether it can be captured by the Keyboard’s Tab button.

3.5 Analyze buttons simulated with non-focusable elements

Here is a random selection of a scene in our business using the SPAN simulation button, which is a breadcrumb navigation, click to jump to:

HTML code:

<span class="ssc-breadcrumb-item-link"> Inbound </span>
Copy the code

Basically, accessibility is zero. As a button, it can’t be focused, can’t be selected by keyboard users, has no specific semantics, and the color contrast is too low for visually impaired users to see. And, as a page-hopping button, it has no tag and no href attribute.

For breadcrumb navigation, we don’t need to transform it into a tag, but we need to do some basic accessibility modifications:

<span role="button" aria-label="goto inbound page" tabindex="0" class="ssc-breadcrumb-item-link"> Inbound </span>
Copy the code

Don’t forget to change the color again to get above the minimum color contrast and have a look:

In this way, a button that is very basic and meets minimal accessibility requirements barely makes the grade. Of course, this button can be tweaked further, with more accessibility knowledge than is covered in this article.

3.6 Analyzing the accessibility of component libraries

Finally, let’s take a look at some of the accessibility related features of commonly used Ant-Design.

Taking the Select box component as an example, Ant-Design makes use of a large number of WAI-aria attributes to make the drop-down box simulated by DIV conform to a drop-down box not only in terms of representation, but also in terms of semantics and behavior.

Look at the DOM section that uses div to simulate the dropdown:

Let’s look at the interactive experience:

This is done entirely under the keyboard, and it looks unremarkable. In fact, the component library responds to the div simulated select with a number of keyboard events, using return, up and down keys, and so on. A lot of work actually.

There are too many accessibility topics to cover in this article, but here’s a simple guide:

Learn about accessibility through the Web Content Accessibility Guide (WCAG 2.0);
Learn how to modify pages through WAI-ARIA;
Keep abreast of the latest specifications and continuously enhance accessibility with the latest browser features.

4. To summarize

This article from the page display, interaction details, accessibility three major aspects, listed some in the actual development process accumulated beneficial experience. Although it is not comprehensive, it is mainly some useful but easy to overlook points, and it is a good little guide to fill in the gaps.

Improving the user experience is not easy, but neither is it:

Page rendering + details-oriented interaction design + perfect accessibility + performance (performance not covered in this article) = good user experience;
The user experience can be improved, and it’s not difficult;
Good user experience design is the result of joint efforts in every link of product development.
Improving user experience is not something that can be accomplished overnight. It can be done in different details.

The above views and ideas may have some problems in understanding, and some concepts are not fully interpreted. We also hope that you can participate in the exchange and correct.

The resources

WAI-ARIA basics
WAI – ARIA 1.1
Focus management in the Web
Accessibility function
Functional animation design: Excellent transitions
Overview of front-end basics
Best practices for CSS styling after image loading failure
CSS animation tips and details you don’t know
Web animation principles and skills analysis
How to design a blank page of a product?
15 UI design Tool recommendations to make it easy and accessible
Improve Your UI With Winning & Losing A/B Tests

In this paper, the author

Coco, front-end development engineer, from Shopee Supply Chain Warehouse Management System (WMS) team.

Join us

As one of the core systems of the supply chain, Shopee WMS supports all self-operated businesses of Shopee and the warehousing business of more and more Shopee platform merchants. Currently, its service scope covers the entire Southeast Asian market and supports the delivery and fulfillment of millions of packages per day. We are committed to creating a set of storage system that can operate differently in different markets and cultures, support multi-vertical fields such as medicine and fresh food, and support the delivery and performance of tens of millions of parcels per day in the future. We continue to optimize processes, algorithms, upgrade systems architecture, and introduce automation equipment to reduce costs and increase efficiency, while making certain new business models possible.

At present, the team continues to recruit a large number of positions, a large number of HC covers back-end, front-end, testing, products and so on. Interested students can send their resumes to [email protected] (you can also consult, marked from Shopee technology blog).

Practice of improving Web user experience design