Web UI/UX Design Improvement Guide – Page Presentation (Part 1)

This article is a practical guide derived from the complete reconstruction of Shopee’s Warehouse Management System (WMS) front‑end. It explains how to improve user experience (UX) through thoughtful page presentation, interaction details, and accessibility.

Key UX goals include fast load speed, striking UI design, smooth animations, personalized settings, easy operations, thoughtful details, and accessibility for users with disabilities.

1. Page Presentation

The way a page is displayed dramatically affects user perception. The guide covers several essential points:

Responsive layout

Important content arrangement

Compatibility and fallback handling

Image presentation and error handling

Appropriate transitions and animations

1.1 Responsive Layout

Before coding, decide whether the PC version uses a full‑screen or fixed‑width layout, the minimum width to support, and the mobile breakpoints. For a fixed‑width example:

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

Using margin: 0 auto centers the container horizontally. When the viewport exceeds 1200 px, side margins appear; when it is smaller, a horizontal scrollbar appears.

For a flexible layout, a typical structure is:

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

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

Flexbox’s flex‑grow: 1 lets the main area fill the remaining space while min‑width guarantees a minimum container width.

1.2 Important Content Arrangement

Place core information and high‑frequency actions (e.g., navigation, search) at the top so users can access them without extra clicks. For long text, use single‑line ellipsis:

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

For multi‑line truncation, modern browsers support:

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

Control button size with min‑width and appropriate padding to avoid overflow when the label is long.

1.3 Empty‑State and Error Handling

When a list returns no data, design a clear empty‑state page that explains why there is no content and offers next steps (e.g., create an order, refresh the page). For network or server errors, provide concise messages and possible actions.

1.4 Image Presentation and Fallbacks

Always set both width and height on <img> to reserve space and prevent layout shift.

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

Use object-fit: cover to keep the aspect ratio while filling the container, and adjust object-position to control the visible area:

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

For high‑DPR screens, provide multiple resolutions via srcset and sizes :

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

If an image fails to load, use the onerror handler to add a class and display a placeholder with pseudo‑elements:

<img src="test.png" alt="图片描述" onerror="this.classList.add('error');">

img.error {
  position: relative;
  display: inline-block;
}
img.error::before {
  content: "";
  background: url(error-default.png);
}
img.error::after {
  content: attr(alt);
}

1.5 Transitions and Animations

Proper use of transitions improves perception of changes. Examples include:

Loading spinners to indicate processing.

Skeleton screens that mimic the final layout while data loads.

Smooth scrolling with scroll-behavior: smooth .

Scroll snapping via scroll-snap-type for controlled paging.

Layer management (z‑index) to avoid unnecessary GraphicsLayers and improve performance.

Page‑to‑page transition animations that guide the eye.

Interaction animations for actions such as download progress or “like” feedback.

Example of smooth scrolling:

{ scroll-behavior: smooth; }

Example of scroll‑snap:

.container { scroll-snap-type: y mandatory; }
section { scroll-snap-align: start; }

1.6 Animation Pitfalls

Animations should be purposeful, short (≈300 ms), and clearly related to the triggered action. Overly long or unrelated animations increase cognitive load and hinder interaction.

In summary, the guide emphasizes a user‑centered approach: consider normal and exceptional states, use responsive and accessible techniques, and apply animations judiciously to create a smooth, pleasant experience.

The next part will focus on interaction design and accessibility details.