Beyond Speed: How Front‑End Design Shapes User Experience

Performance optimization is a perennial topic, but the ultimate goal is improving user experience, which determines a product's success.

What Is User Experience

User experience refers to a person's behaviors, emotions, and attitudes when using a specific product, system, or service, encompassing interaction, operational, emotional, meaningful, and value aspects, as well as perceptions of functionality, usability, and efficiency.

In simple terms, UX is the purely subjective psychological feeling a user builds during the process of using a product or service.

Factors Influencing User Experience

Consider the following scenario: on a rainy autumn evening, Xiaoli rides a crowded bus during rush hour and wants to call her husband Xiaoming for comfort. Various factors affect her UX while using the phone:

Her emotional state (depressed after being criticized by her boss).

Environmental factors such as rain, moving vehicles, lighting, noise.

Social factors like other passengers and the likelihood of reaching her husband.

Time constraints (bus travel duration).

Basic cost factors (signal availability, call/SMS fees).

Task purpose (making a two‑way call while managing other activities like watching the stop).

Product‑specific factors also matter:

One‑hand operation while holding the bus handrail.

Face‑recognition unavailable due to a mask; other unlock methods must be convenient.

Quickly locating Xiaoming’s contact in the UI.

Availability of voice assistants for direct dialing.

Overall, influencing factors fall into three categories:

User State: motivation, expectations, emotions, cognition, personality.

Environmental Conditions: sensory, social, temporal factors.

Product Functionality: features, interaction experience, visual design.

User Experience Design

The following diagram (illustrated below) shows that website construction involves five layers, corresponding to the five levels of UX described in "The Elements of User Experience":

Strategy Layer: product goals and the user needs to solve.

Scope Layer: functional composition of the product.

Structure Layer: information architecture and navigation flow.

Frame Layer: interaction design, layout, and placement of actionable elements.

Presentation Layer: visual design.

Product development iterates through these layers, requiring collaboration among product managers, operations, interaction designers, visual designers, and developers.

From a Front‑End Perspective

Front‑end work primarily addresses the Presentation and Frame layers, acting as the first gatekeeper of UX. Every line of code, style, and interaction directly shapes the user's immediate perception.

Key front‑end focus areas include:

1. Page Content Presentation

First‑screen load time and white‑screen duration.

Loading animations or skeleton screens; avoiding layout shifts when they disappear.

Placeholder handling for empty data and preventing content jumps.

Graceful error states with clear feedback.

Responsive design ensuring primary content is visible on all device sizes.

Text overflow handling (truncation vs. ellipsis).

Image placeholders, failure handling, and scaling.

Smooth transitions and animations for UI changes.

2. Interaction Details

Responsive response times to user actions.

Reasonable clickable area for buttons.

Text selection behavior on long press.

Visibility of scrollbars when needed.

Preventing click‑through or scroll‑through on overlay layers.

Allowing image long‑press to save.

3. Accessibility (A11Y)

While often associated with users with disabilities, accessibility improvements benefit all users. Low‑cost practices include ensuring sufficient color contrast, using semantic HTML tags, and providing proper focus handling.

In summary, front‑end engineers should look beyond pure performance optimization and address a broad range of UX details across content presentation, interaction, and accessibility to create truly delightful digital experiences.