Có một đợt, khi tôi đang còn làm sản phẩm về hệ thống đánh giá hiệu suất KPI (Key Performance Indicator) nhân viên. Sau khi phát hành một tính năng mới thì tôi nhận được một số phàn nàn của khách hàng về việc khi nhập kết quả đánh giá nhưng hệ thống xong nhưng hệ thông không ghi nhận. Khi tôi cùng anh em Tech điều ra thì không thấy có bug gì bất thường nhưng sau đó cùng ngồi với khách hàng phân tích use case bên họ mới phát hiện ra nguyên nhân khiến chúng tôi té ngửa những cũng là một bài học.
Công ty khách hàng chúng tôi khi đó là công ty lớn, có đến hơn 10 cấp bậc tính từ nhân viên cấp thấp nhất đến quản lý cao nhất. Mỗi khi nhân viên cập nhật kết quả, hiệu suất sẽ được tính toán và cập nhật có nhân viên cấp I, lấy kết quả nhân viên cấp 1 tính cho quản lý cấp 2 và cứ thế lên quản lý cấp cao nhất là 10. Vì vậy nên mỗi lần nhập kết quả, hệ thống xử lý và ghi nhận kết quả mất hơn 10s mà khách hàng thường không kiên nhẫn, khi nhập vào kết quả thấy 2-3s không có cập nhật gì theo thói quen họ F5 để xem kết quả được cập nhật hay không. Chuyện không có gì để nói nếu như chúng tôi làm tốt 1 trong 2 chuyện:
- Một là ở khía cạnh kỹ thuật, chúng tôi xử lý tính toán ở phía Server thay vì ở Client-side, như vậy không có chuyện người dùng F5 thì việc tính toán bị ngắt quãng. Và tốt hơn hết là tìm thuật toán xử lý tối ưu hơn để giảm thời gian xử lý.
- Hai là ở khía cạnh sản phẩm, nếu chúng tôi thêm một trạng thái chờ để người dùng biết hệ thống vẫn đang xử lý thì sẽ hạn chế bớt việc người dùng hiểu nhầm và nhấn F5.
Và trong việc làm sản phẩm thì những chuyện như trên xảy ra thường xuyên. Đôi khi ta quá chú tâm vào thiết kế các flow chính của sản phẩm mà quên đi các trường hợp phát sinh, hay gọi là edge cases ảnh hưởng tiêu cực đến trải nghiệm người dùng, hoặc tệ hơn là khiến user churn.
Riêng tôi, thường sử dụng một framework khá đơn giản là với bất kì màn hình hình, cũng sẽ đi qua một checklist gồm 5 trạng thái của UI bao gồm:
- Blank State
- Loading State
- Partial State
- Error State
- Ideal State
Theo tôi, cho dù là ai với vị trí nào trong team phát triển từ UX Designer, Product Owner hay là UI/UX và kể cả Developer khi nắm và luôn đi qua 5 trạng thái này mỗi khi phát triển một màn hình, tính năng không bao giờ là thừa.
Blank State
Blank State hay đôi khi gọi là Empty State là trạng thái thường gặp khi ứng dụng không có nội dung để hiển thị cho người dùng.
Một vài use case phổ biến như người dùng vừa khởi tạo tài khoản, tìm kiếm không có kết quả, etc.
Phần lớn các designer sẽ tận dụng việc có UI nhiều khoảng trống ở state này để làm tốt Onboarding sản phẩm. Giúp người dùng hiểu các tính năng và giúp họ biết họ cần làm gì tiếp theo. Ngoài ra, các hình ảnh minh họa và câu chữ được thể hiện tốt là lợi thế để tạo được tone & voice của sản phẩm.
Loading State
Đây là trạng thái khi ứng dụng đang tải hoặc xử ý dữ liệu để hiện thị lên giao diện cho người dùng.
Trạng thái này rất phổ biến đối với các sản phẩm có kho dữ liệu nội dung lớn hoặc triển khai ở các vùng địa lý có tốc độ băng thông kém hoặc cả hai.
Partial State
Partial State là trạng thái khi người dùng đã thao tác với ứng dụng và có một ít dữ liệu nhất định nhưng chưa hoàn toàn đầy đủ.
Partial State là trạng thái lửng lơ giữa Blank State và Ideal State (trạng thái dữ liệu đầy đủ như mong đợi). Trạng thái này sẽ xuất hiện nhiều ở các màn hình Onboarding hay Set up cho nên cũng không thường xuyên cần đến. Tuy nhiên, đối với giai đoạn Activation khi cần chuyển đổi từ New Users (người dùng mới) sang Engaged Users (người dùng lâu dài) thì Partial State rất quan trọng, là nơi có thể tận dụng để áp dụng các kĩ thuật thiết kế trải nghiệm nhằm tăng Activation Rate/Conversion Rate.
Error State
Error State xuất hiện khi xảy ra các lỗi có thể từ phía người dùng cũng có thể từ phía ứng dụng.
Thường thì mục đích chính của Error State là báo cho người dùng biết đã có lỗi gì xảy ra và đề xuất hướng xử lý.
Ideal State
Ideal State có lẽ không cần phải giải thích thêm, đây là trạng thái phổ biến nhất mà đa phần trong mọi trường hợp ta sẽ bắt tay vào thiết kế đầu tiên.
Trong thực tế thì khi thiết kế UI cho Ideal State, designer thường chia nhỏ thêm các trường hợp cho text, image, content. Ví dụ: Text quá dài, text quá ngắn, text bao gồm một từ đơn rất dài,…
hoangtung 