Thiết kế web phản ứng: Bí quyết để xây dựng các ứng dụng web cảm thấy tuyệt vời

Trong năm ngoái, tôi đã quan sát thấy hai kỹ thuật tinh tế đang được một số nhà phát triển sử dụng để đưa một ứng dụng web từ cảm giác chậm chạp và vui nhộn sang phản ứng cao và bóng bẩy.

Tôi tin rằng những kỹ thuật này đủ quan trọng để họ cần một cái tên: Thiết kế web phản ứng.

Tóm lại, thiết kế web phản ứng là một tập hợp các kỹ thuật có thể được sử dụng để xây dựng các trang web luôn cảm thấy nhanh và đáp ứng đầu vào của người dùng bất kể tốc độ mạng hay độ trễ.

Là nhà phát triển web và tác giả khung, tôi tin rằng việc tìm cách làm cho các mẫu này mặc định trong mọi thứ chúng tôi xây dựng là ưu tiên hàng đầu để cải thiện UX và nhận thấy hiệu suất trên web.

Kỹ thuật 1: Tải tức thì với màn hình bộ xương

Khi được sử dụng tốt, kỹ thuật này hầu như không bao giờ được chú ý, nhưng có tác động rất lớn đến hiệu suất nhận thức của một trang web.

Thật thú vị, kỹ thuật này được sử dụng bởi hầu hết các ứng dụng gốc và khiến chúng cảm thấy rất phản ứng ngay cả trên các mạng khủng khiếp, nhưng nó hầu như không bao giờ được sử dụng trên web!

Cơ hội theo cách này nằm!

Tóm lại, màn hình khung đảm bảo rằng bất cứ khi nào người dùng chạm vào bất kỳ nút hoặc liên kết nào, trang sẽ phản ứng ngay lập tức bằng cách chuyển người dùng sang trang mới đó và sau đó tải nội dung vào trang đó khi nội dung có sẵn.

Facebook sử dụng màn hình khung xương để cải thiện hiệu suất nhận thức khi bạn mở lần đầu tiên

Màn hình bộ xương là một kỹ thuật hiệu suất nhận thức quan trọng vì chúng làm cho các ứng dụng cảm thấy nhanh hơn nhiều, giảm đáng kể số lượng khoảnh khắc mà người dùng đang tự hỏi:

Chuyện gì đang xảy ra vậy? Nó thậm chí đang tải? Tôi đã nhấn nó phải không?

Flipkart.com là một ví dụ hiếm hoi của một trang web sử dụng phương pháp này. Duyệt qua các danh mục hoặc chạm vào các sản phẩm do đó cảm thấy nhanh như chớp, ngay cả khi kết quả thực tế mất vài giây để tải:

Một screencapture của flipkart.com được khởi chạy từ màn hình chính ở chế độ độc lập trên Android

Khi kỹ thuật này được sử dụng tốt nhất, nội dung đã có sẵn như hình thu nhỏ hoặc tiêu đề bài viết có thể được sử dụng lại để cải thiện hiệu suất nhận thức hơn nữa, giúp tải cảm giác thực sự tức thì.

app.jalantikus.com sử dụng mẫu Skeleton Screens và sử dụng lại các tiêu đề và hình thu nhỏ trên các hiệu ứng chuyển tiếp

Trang web thử nghiệm với màn hình bộ xương

Kiểm tra xem các trang web sử dụng kỹ thuật này dễ dàng như thế nào: chỉ cần sử dụng mô phỏng mạng Chrome để làm cho mạng chậm nhất có thể và sau đó nhấp xung quanh một trang web. Nếu nó đang làm tốt điều này, trang web vẫn sẽ cảm thấy linh hoạt và đáp ứng với đầu vào của bạn.

Tốc độ chậm nhất được hỗ trợ trong mô phỏng mạng Chrome

Kỹ thuật 2: Tải Ổn định Ổn định thông qua các kích thước được xác định trước trên các phần tử

Bạn có biết cảm giác nơi một trang web đang nhảy xung quanh trong khi bạn đang cố gắng sử dụng nó không? Bạn chỉ đang cố đọc một bài báo và văn bản tiếp tục di chuyển? Đó là những gì chúng ta gọi là một tải không ổn định, và chúng ta cần phải đốt nó bằng lửa.

nội dung slate.com nhảy xung quanh rất tích cực khi tải trang. Mạng bạn càng chậm, nó càng nhảy lâu.

Tải không ổn định làm cho các trang web khó tương tác và khiến chúng cảm thấy rất tốt Không ổn định!

Duyệt một trang web không ổn định luôn nhắc nhở tôi về cảm giác của mình khi đi bộ xung quanh trong trận động đất

Tải không ổn định được gây ra bởi hình ảnh và quảng cáo được nhúng vào một trang nhưng không bao gồm bất kỳ thông tin kích thước nào. Theo mặc định, trình duyệt chỉ biết kích thước của những cái này khi chúng đã được tải, vì vậy ngay khi hình ảnh được tải vào, THUNK!, Toàn bộ trang sẽ trượt xuống.

Để ngăn chặn điều này, tất cả các thẻ trên một trang phải chủ động bao gồm kích thước của hình ảnh mà chúng sẽ chứa.

Trong nhiều trường hợp, hình ảnh được sử dụng trên một số trang nhất định luôn có cùng kích thước và do đó kích thước của chúng có thể được đưa vào mẫu HTML một cách đơn giản, nhưng trong một số trường hợp, kích thước của hình ảnh là động và do đó kích thước của chúng phải được tính khi hình ảnh được tải lên sau đó được tạo hình vào HTML khi nó được tạo.


Điều này cũng đúng với quảng cáo, thường là thủ phạm khi tải không ổn định. Bất cứ nơi nào có thể, hãy tạo một div sẽ chứa một quảng cáo và trong khuôn mẫu của bạn, đặt nó có kích thước với dự đoán tốt nhất của bạn về mức độ lớn của quảng cáo này.

Lưu ý rằng tải không ổn định là tồi tệ nhất trên các mạng chậm vì bạn vừa mới đọc được nội dung thì đột nhiên nó nhảy, và bạn không bao giờ có thể chắc chắn rằng bạn đã an toàn.

Để tất cả chúng cùng nhau

Tôi đã xây dựng một trang web demo nhỏ tại Reactive.surge.sh để chứng minh sự khác biệt giữa thiết kế web thông thường và phản ứng.

Tải bài viết thông thường

Lưu ý rằng cảm giác chậm chạp và nhảy nội dung gây khó chịu như thế nào. Điều thú vị là tôi thấy thứ tự cường độ này gây khó chịu hơn trên các thiết bị di động khi chạm vào màn hình và không thấy nó phản ứng.

Đang tải một bài viết với thiết kế web phản ứng

Với thiết kế phản ứng, tải cảm thấy tức thì và trang web vẫn phản ứng khi nhấn vào biểu tượng trở lại và tiêu đề bài viết nhiều lần

Gói lại

Mạng càng chậm, trải nghiệm người dùng càng trở nên tồi tệ hơn khi khối chuyển đổi trang trên mạng và các trang nhảy xung quanh trong thời gian dài.

Với Reactive Web Design, chúng tôi có thể khiến trải nghiệm của chúng tôi cảm thấy linh hoạt và phản hồi nhanh chóng (Thiết kế Responsive Thiết kế như một cái tên đã được sử dụng, dithoh!) Ngay cả trên các mạng chậm và đau đớn.

Tôi rất thích nghe về dữ liệu từ cộng đồng về ảnh hưởng của hiệu suất nhận thức đối với KPI như sự tham gia và doanh thu!

Ngoài ra, I hèd khuyến khích các tác giả khung và thư viện xem xét cách tạo màn hình bộ xương và tải ổn định mặc định, còn được gọi là hố thành công.

Nếu bạn có suy nghĩ về điều này, xin hãy tweet cho tôi @owencm, và nếu bạn thích điều này, xin hãy cho nó một ♥!

P.S. hãy chắc chắn kiểm tra trang web demo Reactive.surge.sh trên một thiết bị di động cho nó đầy vinh quang!