Web User Experience Design Improvement Practices (Part 2): Interaction Design and Accessibility

This article is a practical guide for improving Web user experience design, based on the Shopee WMS (Warehouse Management System) project reconstruction. It covers two main areas: interaction design optimization and accessibility (A11Y).

2. Interaction Design Optimization

Interaction design defines the structure and content of communication between two or more interacting entities to help them cooperate to achieve a certain purpose.

2.1 Web Interaction Methods

Web interaction centers around computers, primarily involving keyboard and mouse interactions. General guidelines include: Don't Make Me Think, conform to user habits and expectations, convenient operation, provide appropriate reminders, and don't force users.

2.2 Don't Make Me Think

The core principle is to make products highly usable so users can clearly use various functions without thinking. Key approaches include using conventional patterns and reducing visual noise (e.g., shadows and blur behind modals).

2.3 Conforming to User Habits and Expectations

Different content should use different cursor styles to enhance interaction experience:

Buttons clickable: cursor: pointer

Buttons disabled: cursor: not-allowed

Loading state: cursor: wait

Input fields: cursor: text

Image zoom: cursor: zoom-in/zoom-out

Help tooltips: cursor: help

2.3.2 Click Area Optimization

Pseudo-elements can expand click areas without changing button size:

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

2.4 Operation Convenience

Using user-select: all allows users to select entire information blocks with a single click. Using user-select: none prevents unwanted text selection on frequently clicked buttons.

2.5 Navigation Optimization

For route navigation buttons, using a tags with href attributes enables right-click "Open in new tab" functionality.

2.9 Font Optimization

Recommended font stack: font-family: system-ui automatically selects the default system font for better performance and text display.

3. Accessibility (A11Y)

Accessibility (A11Y) is crucial but often overlooked. Based on WCAG 2.0, there are four fundamental principles: Perceivable, Operable, Understandable, and Robust.

3.2 Color Contrast

WCAG AA standard requires color contrast ratio of 4.5:1 or above for normal text (3:1 for text larger than 18px). Chrome DevTools can inspect color contrast ratios.

3.3 Focus Response

The :focus-visible pseudo-class shows different focus styles based on input method (mouse vs keyboard), providing better experience for both mouse and keyboard users.

3.3.2 WAI-ARIA

WAI-ARIA provides attributes to enhance semantic meaning: tabindex controls focus, role identifies element semantics, and aria-* attributes describe element states.