Chia sẻ kinh nghiệm UI/UX Phần 2: Giới thiệu Optimistic UI
Hôm nay chém gió về UI/UX tiếp, mình xin giới thiệu về Optimistic UI. Mặc dù nằm trong phần trải nghiệm sản phẩm, mình vẫn khuyên các bạn code nên tìm hiểu, vì thường trong các bản thiết kế sẽ không có hoặc không thể hiện được vấn đề này.
Optimistic UIs là gì?
Đối với một số thao tác trên app cần kết nối với API, hoặc xử lý cần nhiều thời gian, thay vì bắt người dùng chờ tác vụ chạy ngầm hoàn thành rồi mới cập nhật trạng thái, phương pháp này giả định thao tác đã thành công và cập nhật màn hình ngay tức thì, sau đó mới thực hiện kết nối với API.
Optimistic UIs xuất hiện ở rất nhiều nơi, từ nút Like của FB, nút Save của Instagram, Gửi tin nhắn trong iMessage, Messenger, move Card trong Trello, auto save trong Google docs… tuy nhiên hầu hết đều được thể hiện rất tinh tế vì vậy bạn sẽ không để ý hoặc không nhận ra.
Tại sao chúng ta nên sử dụng?
Phương pháp này tuy rất đơn giản và nhỏ nhưng có thể đem lại một lợi thế rất tốt tới trải nghiệm người dùng của bạn.
- Tạo cảm giác cho App của bạn chạy nhanh hơn rất rất nhiều.
- Người dùng tiết kiệm được thời gian, không cần chờ đợi các tác vụ chạy ngầm mà vẫn tiếp tục thực hiện các thao tác khác một cách liên tục.
- App trở nên đơn giản và thân thiện hơn, bỏ bớt được một số màn hình gây nhiễu cho người dùng.
Mình cũng nhận ra một App mà có quá nhiều icon loading (ở khắp mọi nơi) cũng gây ra cảm giác rất khó chịu, vì vậy hãy luôn tìm một cách tinh tế hơn mà vẫn thể hiện được đúng trạng thái của app.
Trường hợp cụ thể:
Dưới đây là ví dụ 2 chức năng cụ thể trước đây khi mình tập tành làm app đã bắt đầu tìm hiểu về vấn đề này:
Ví dụ 1: Tính năng Like nội dung yêu thích.
Phương án 1:
Người dùng nhấn nút => Gửi request đến server => Chờ phản hồi từ server => Nhận và kiểm tra phản hồi từ server => Báo lỗi nếu có => Hiển thị đã thích.
Phương án 2:
Người dùng nhấn nút => Hiển thị icon Loading => Gửi request đến server => Chờ phản hồi từ server => Nhận và kiểm tra phản hồi từ server => Báo lỗi nếu có => Hiển thị đã thích.
Phương án 3:
Người dùng nhấn nút => Hiển thị đã thích => Gửi request đến server => Chờ phản hồi từ server => Nhận và kiểm tra phản hồi từ server =>Báo lỗi nếu có.
Ví dụ 2: Tính năng Gửi tin nhắn/Chat:
Bên trái là theo thứ tự logic thông thường, bên phải là sử dụng phương pháp Optimistic:
Các bạn có thể dễ dàng nhận thấy khi sử dụng optimistic sẽ dễ chịu và cảm giác nhanh hơn nhiều, đấy là chưa kể những lúc mạng chậm mà cứ hiện loading block màn hình thì khó chịu vô cùng.
Chú ý:
Luôn luôn chú ý xử lý lỗi:
Mặc dù đã giả định thành công nhưng đừng quên lỗi vẫn có thể xảy ra, không kết nối được api, xử lý không thành công,… Bạn có thể sử dụng cơ chế tự động thử lại 2, 3 lần không được thì hiển thị thông báo lỗi và thao tác xử lý tới người dùng.
Khi nào không nên sử dụng Optimistic UIs?:
Không phải tất cả trường hợp đều có thể áp dụng cách này, đặc biệt là khi cần chờ phản hồi từ phía server rồi mới tiếp tục tác vụ khác, như Đăng nhập, Thanh toán, Đổi mật khẩu, …
Kết
Mình viết đến đây thôi, còn lại các bạn tự suy luận, nghiên cứu tìm hiểu và cân nhắc chọn lựa cho mình phương pháp phù hợp nhé. Chúc các bạn có được những ứng dụng tuyệt vời.
P/s: Bài tiếp theo mình sẽ chia sẻ về Banner và Carousel, mời mọi người đón đọc.