10 thiết kế ‘Loading…’ đầy sáng tạo để chờ đợi trở nên dễ chịu hơn

Thiết kế tương tác tốt là cung cấp sự phản hồi.

Mặc dù phản hồi tức thì từ ứng dụng hoặc trang web là điều tốt nhất, nhưng đôi khi sản phẩm của bạn sẽ không thể tuân thủ các nguyên tắc về tốc độ. Phản hồi chậm có thể do kết nối internet kém hoặc quá trình hoạt động có thể mất nhiều thời gian. Đối với những trường hợp như vậy, các nhà thiết kế phải trấn an người dùng rằng: Ứng dụng đang làm việc theo yêu cầu của họ và tiến trình thực tế vẫn đang hoạt động.

Nếu bạn không thể rút ngắn tiến trình, ít nhất bạn nên cố gắng làm cho sự chờ đợi dễ chịu đối với người dùng của mình.

Chỉ báo tiến trình chờ bằng hoạt ảnh là hình thức phổ biến nhất để cung cấp tình trạng hệ thống cho người dùng, khi có điều gì đó đang xảy ra hoặc đang tải. Nhưng hầu hết các chỉ số chờ trông có vẻ nhàm chán, vì người sáng tạo sản phẩm chỉ sử dụng các chỉ báo tải mặc định (bất kể hệ thống thiết kế nào).

Trình tải vô hạn thông báo cho người dùng biết nội dung đang tải. 
Ứng dụng thứ hai hiện nay trên thị trường sử dụng nó để thông báo cho người dùng về thời gian tải.

Chỉ báo tiến trình sáng tạo có thể làm giảm nhận thức của người dùng về thời gian. Nếu một ứng dụng cung cấp cho người dùng một điều gì đó thú vị để xem xét trong khi chờ đợi, nó sẽ làm cho người dùng ít chú ý hơn đến thời gian. Do đó, để đảm bảo mọi người không cảm thấy buồn chán trong khi chờ đợi, các nhà thiết kế cần tạo một điều thú vị cho người dùng.

Trong bài viết này, iDesing sẽ chia sẻ đến bạn mười ý tưởng thú vị về các chỉ báo tải.


1. Cuộc gặp gỡ 

ueno. sử dụng thời gian chờ để giới thiệu khách truy cập vào nhóm của họ.

2. Tải quà Giáng sinh

Có vẻ như một ứng dụng đang tải quà tặng. Hình ảnh:  Chuan²

3. Chú mèo đáng yêu

Thay vì sử dụng một vòng tải hệ thống, nhà thiết kế có thể sử dụng một điều gì đó tạo ra cảm xúc tích cực. Hình ảnh: Thomas Bogner

4. Xoắn ốc kép

Hoạt ảnh tải này tạo ra hiệu ứng chuyển đổi 3D. Hình ảnh: Drew Endly

5. Tìm kiếm các chuyến bay tốt nhất

Ngay sau khi người dùng chọn hành trình chuyến bay và nhấp vào nút ‘Tìm kiếm’, hoạt ảnh sẽ hiển thị một hoạt ảnh chuyến bay từ điểm đi đến điểm đến. Hình ảnh: Mark

6. Lưu dữ liệu vào đám mây

Chỉ báo tải này dựa trên phép ẩn dụ tải tệp lên đám mây. Hình ảnh: Ben Mettler

7. Làm cho quá trình tải trở nên sinh động

Hoạt ảnh này làm cho quá trình tải trở nên thú vị. 
Hình ảnh: xjw

8. Hoạt hình sinh động cho màn hình splash

Màn hình splash được thiết kế đẹp mắt khi kết hợp với một hoạt ảnh sinh động, nó giúp các lập trình viên ứng dụng thêm một vài giây thời gian để tải xuống tất cả các dữ liệu cần thiết. Hình ảnh:  Behance

9. Hoạt ảnh làm mới dữ liệu

Ảnh động kéo xuống để làm mới dữ liệu này có mục đích chức năng rõ ràng. Nó kết nối hai trạng thái – trước và sau khi cập nhật. Hình ảnh:  Ramotion

10. Hoạt hình tải tệp lên

Hoạt ảnh này là một ví dụ tuyệt vời về chuyển tiếp trạng thái một cách mượt mà. Dấu hiệu cuối cùng thông báo cho người dùng rằng hoạt động đã thành công. Hình ảnh: Eddy Gann

Kết

Mặc dù tất cả các hiệu ứng nêu trên có thể cải thiện trải nghiệm người dùng, nhưng tốt hơn không nên quá lạm dụng chúng. Những gì trông vui vẻ và đáng yêu lần đầu tiên, có thể sẽ tẻ nhạt và có thể đoán trước sau 100 lần. Ngoài ra, hiệu ứng tải sáng tạo không thể giải quyết được vấn đề thời gian tải chậm. Khi người dùng nhìn thấy cùng một hiệu ứng tải nhiều lần, họ sẽ cho rằng thời gian tải của ứng dụng đang rất chậm.

Biên tập: Thao Lee

Tác giả: Nick Babich

Cùng tác giả

#Tag

chỉ báo hiệu ứng tải hoạt ảnh thời gian chờ UI ứng dụng ux

iDesign Must-try

Cheryl Vo: ‘Trước khi thiết kế, mình luôn hỏi tại sao?’
Cheryl Vo: ‘Trước khi thiết kế, mình luôn hỏi tại sao?’
Tính khái niệm trong Design Decisions (tạm dịch: Quyết định thiết kế) của một thiết kế hay là hành trình những cảm xúc Cheryl Vo sẽ được mở khóa từ…
Thiết kế tương tác (Interaction Design) là gì?
Thiết kế tương tác (Interaction Design) là gì?
Thiết kế tương tác là một thành phần quan trọng trong chiếc ô khổng lồ của thiết kế trải nghiệm người dùng (UX). Trong bài viết này, hãy cùng iDesign tìm…
Tư duy thiết kế và những tính chất trong hệ thống
Tư duy thiết kế và những tính chất trong hệ thống
Một cách cơ bản hơn để đối phó với tính chất tạm thời của công việc là xem xét lại bản thân chúng ta với tư cách là nhà thiết…
7 hiện tượng tâm lý người dùng trong thiết kế UX
7 hiện tượng tâm lý người dùng trong thiết kế UX
Đừng trở nên xấu xa và lạm dụng tâm lý học để thao túng người dùng cuối của bạn. Khi nhìn vào meme thú vị này, bạn có tự hỏi…
Các hiệu ứng thị giác trong UI (User Interface)
Các hiệu ứng thị giác trong UI (User Interface)
Biết cách ứng dụng các hiệu ứng thị giác có thể dùng để cân bằng các icon, căn chỉnh lề các thành phần thiết kế một cách chính xác và…
Tìm hiểu về UX Writing - khi ngôn từ súc tích mang ‘linh hồn’ đến cho thiết kế
Tìm hiểu về UX Writing - khi ngôn từ súc tích mang ‘linh hồn’ đến cho thiết kế
UX Writing (Viết nội dung UX) là bất kỳ văn bản nào mà người dùng gặp phải trong quá trình tương tác với sản phẩm phần mềm. Có thể là tên…