Mỗi khung hình đều hoàn hảo: Tại sao chuyển động quyết định chất lượng phần mềm

Mỗi khung hình đều hoàn hảo: Tại sao chuyển động quyết định chất lượng phần mềm

Bài viết khám phá triết lý thiết kế giao diện yêu cầu mọi khung hình, kể cả trong quá trình chuyển động, phải hợp lý và nhất quán. Việc chú trọng đến từng chi tiết nhỏ này không chỉ nâng cao trải nghiệm người dùng mà còn là thước đo uy tín và chất lượng của đội ngũ phát triển.

Mục tiêu "Mỗi khung hình là hoàn hảo"

Mới đây, khi đọc về Wayland - một giao thức máy chủ hiển thị, tôi đã bị ấn tượng mạnh mẽ bởi một câu nói: Một mục tiêu được tuyên bố của Wayland là "mỗi khung hình là hoàn hảo" (every frame is perfect).

Tôi nghĩ rằng đây là mục tiêu mà tất cả chúng ta nên hướng tới. Wayland đang nói về khía cạnh kỹ thuật (các stack GPU hiện đại rất phức tạp và Wayland đang cố gắng giành lại quyền kiểm soát), nhưng nguyên tắc này hoàn toàn có thể áp dụng cho thiết kế giao diện người dùng (UI).

Quy tắc chung ở đây là:

Nếu tôi chụp màn hình ứng dụng của bạn tại bất kỳ thời điểm nào, nó phải có nghĩa.

Tại sao phải quan tâm đến từng khung hình?

Việc này giúp xây dựng lòng tin. Người dùng không thể nhìn thấy mã nguồn, vì vậy UI là cách duy nhất để họ đánh giá chất lượng của ứng dụng. Nếu giao diện trông đẹp mắt, điều đó có nghĩa là các nhà phát triển đã có thời gian để hoàn thiện nó, và suy ra rằng họ có thể đã dành một lượng thời gian tương đương để xử lý các lỗi trong mã nguồn. Đây là một phỏng đoán, nhưng là một phỏng đoán hợp lý.

Áp dụng vào thực tế

Vậy điều này có nghĩa là gì trong thực tế? Tôi có thể nghĩ đến một vài điều:

• Không có màn hình trắng (white flashes) giữa các màn hình chuyển đổi.
• Không có nội dung được tải một phần nửa vời.
• Không có sự thay đổi bố cục (relayout) trong khi nội dung đang tải.
• Tính nhất quán nội bộ. Nếu một phần của UI hiển thị "Có 1 bản cập nhật", một phần khác không nên hiển thị "Đang kiểm tra bản cập nhật...".
• Các hiệu ứng chuyển động (animations) phải chính xác.

Hiệu ứng chuyển động thường bị lãng quên. Một giao diện có thể trông tuyệt vời ở cả trạng thái bắt đầu và kết thúc, nhưng lại rất "giật cục" ở giữa.

Ví dụ về hiệu ứng chuyển động không đồng bộ

Hãy xem xét ví dụ trên. Nếu bạn cảm thấy có điều gì đó kỳ lạ đang xảy ra, thì bạn đúng đắn đấy! Hãy nhìn vào phiên bản được chiếu chậm:

Chi tiết trạng thái trung tâm của hiệu ứng

Bây giờ hãy áp dụng quy tắc của chúng ta và chụp màn hình ở giữa hiệu ứng chuyển động. Nó trông không đúng chút nào. Cả hai khung hình này đều không hoàn hảo.

Sự thiếu đồng bộ làm mất niềm tin

Hãy xem một ví dụ khác từ Safari. Văn bản giữ chỗ (placeholder text) ở đây di chuyển từ vị trí trung tâm, nhưng con trỏ lại hoạt ảnh từ vị trí bên trái.

Điều này không phải là tận thế, nhưng nó tạo ra cảm giác rằng hai thành phần này không đồng bộ với nhau. Suy nghĩ tiếp theo là: có lẽ chúng không được thiết kế cùng nhau? Nếu vậy, chúng có thể không hoạt động tốt cùng nhau. Đó là cách lòng tin bị mất đi.

Sự thiếu đồng bộ này có thể dẫn đến rất nhiều sự nhầm lẫn. Ví dụ, trong ứng dụng Photos, khi chuyển đổi giữa chế độ Crop và Adjust, hình ảnh sẽ snap vào vị trí ngay lập tức nhưng đường viền crop lại được hoạt ảnh.

Điều này tạo ra một cảm giác sai lệch rằng có một sự thay đổi tinh tế nào đó khi bạn chuyển đổi chế độ. Và bạn biết đấy, tôi không muốn giao diện của mình mang lại cho tôi những cảm giác sai lệch. Tôi muốn nó là một công cụ chính xác, không phải một món đồ chơi có hoạt ảnh.

Đôi khi các hiệu ứng được cho là giúp bạn hiểu được sự chuyển đổi, nên thật đáng buồn khi chúng lại làm cho việc hiểu trở nên khó khăn hơn.

Ví dụ từ YouTube

Tương tự như vậy với YouTube. Họ có nhiệm vụ đơn giản nhất thế giới: di chuyển một hình chữ nhật từ vị trí này sang vị trí khác! Tuy nhiên, họ lại quyết định làm một điều gì đó rất kỳ lạ:

Ví dụ hiệu ứng chuyển động kỳ lạ trên YouTube

Bạn có thể giải thích điều này không? Nó có hợp lý không?

Có thể là do giới hạn kỹ thuật của kiến trúc DOM mà họ đã quyết định trước đó. Tôi gọi những tình huống này là "Công nghệ đã qua mặt lập trình viên". Nhưng bất kể lý do là gì, kết quả là một khung hình không hoàn hảo.

Đôi khi các hiệu ứng bị bỏ lại như một suy nghĩ sau cùng. Bất cứ điều gì xảy ra thì cứ để nó xảy ra. Và sau đó chúng ta nhận được những trải nghiệm lộn xộn như vậy.

Kết luận

Vì vậy, hãy xin bạn hãy chú ý không chỉ đến trạng thái bắt đầu và kết thúc, mà còn đến mọi thứ ở giữa. Mỗi khung hình đều quan trọng.

Hãy chăm chút cho từng chi tiết nhỏ nhất để tạo ra sự khác biệt.