Ý nghĩa của mật độ UI (Density) và cách thiết kế
(matthewstrom.com)Mật độ giao diện đang giảm xuống
- Khi so sánh website và ứng dụng hiện nay với thập niên 2000, rất khó để bỏ qua xu hướng phần mềm ngày càng trở nên thưa hơn.
- Mật độ UI là gì?
- Mật độ UI không phải là diện mạo của giao diện tại một thời điểm cụ thể
- Nó liên quan đến lượng thông tin mà giao diện cung cấp qua nhiều thời điểm khác nhau
- Nó nói về cách các quyết định thiết kế kết nối những thời điểm đó với nhau, và kết nối chúng với giá trị mà phần mềm mang lại
Mật độ thị giác (Visual density)
- Khi nghĩ về mật độ, ta thường nghĩ bằng mắt trước tiên
- Mật độ thị giác nghĩa là bạn có thể nhìn thấy bao nhiêu thứ trong một không gian nhất định
- Giao diện phần mềm có mật độ thị giác cao sẽ hiển thị nhiều thành phần trên màn hình
- Giao diện có mật độ thị giác thấp sẽ hiển thị ít thành phần hơn trên màn hình
- Ví dụ: Bloomberg Terminal
- Bloomberg Terminal là một ví dụ điển hình của mật độ thị giác
- Trên một màn hình duy nhất, nó hiển thị sparkline của các chỉ số thị trường chính, phân bố khối lượng giao dịch chi tiết, các bảng với hàng chục hàng và cột, tiêu đề tin tức mới nhất, phím tắt bàn phím và các biển chỉ dẫn UI cho thao tác nhanh
- Ví dụ: Craigslist và McMaster-Carr
- Craigslist có mật độ thị giác cao với hàng trăm liên kết đơn giản cùng giao diện tìm kiếm và lọc
- Website McMaster-Carr cũng chia sẻ các yếu tố thiết kế tương tự, liệt kê chi tiết nhiều biến thể sản phẩm trong một không gian nhỏ
- Đánh giá trực giác về mật độ
- Ý kiến về mật độ của những website này hình thành chỉ trong vài giây
- Những đánh giá này diễn ra nhanh chóng và trực giác trong tiềm thức
- Tuy nhiên, các phán đoán nhanh như vậy có thể thiên lệch và không đáng tin cậy
- Hình ảnh ví dụ về mật độ thị giác
- Ví dụ hai hình chữ nhật:
- Bên trái: nhiều chấm được sắp xếp ngẫu nhiên
- Bên phải: cùng số lượng chấm đó được sắp xếp gọn gàng theo hàng và cột
- Hầu hết mọi người sẽ cảm thấy hình bên phải có mật độ cao hơn
- Một hình ảnh ví dụ khác:
- Bên trái: nhiều chấm được sắp xếp gọn gàng theo hàng và cột
- Bên phải: cùng số lượng chấm đó được sắp xếp gọn gàng nhưng chia thành hai nhóm
- Dù số chấm giống nhau, việc chia thành nhóm vẫn làm thay đổi nhận thức của chúng ta về mật độ
- Ví dụ hai hình chữ nhật:
- Tính bất định của mật độ thị giác
- Trong thiết kế, không thể hoàn toàn khách quan
- Tuy vậy, để có thể thảo luận về mật độ, chúng ta nên hướng tới một định nghĩa nhất quán, có ý nghĩa và hữu ích
Mật độ thông tin (Information density)
- Edward Tufte, trong cuốn The Visual Display of Quantitative Information, bàn về thiết kế biểu đồ và đồ thị
Mọi nét mực trong một đồ họa đều phải có lý do tồn tại, và lý do đó phải là cung cấp thông tin mới.
- Data-ink
- Data-ink là phần hữu ích trong một trực quan hóa nhất định.
- Các yếu tố thị giác không phải dữ liệu nên được loại bỏ.
- Data-ink không giống với không gian mà biểu đồ chiếm dụng. Nó liên quan đến mật độ thông tin.
- Tính toán mật độ thông tin
- Mật độ thông tin có thể được tính bằng cách lấy lượng data-ink trong biểu đồ chia cho tổng lượng mực cần để in biểu đồ đó.
- Định nghĩa về data-ink có thể mang tính chủ quan, nhưng điều quan trọng là làm cho tỷ lệ này càng gần 1 càng tốt.
- Cách tăng tỷ lệ:
- Thêm data-ink: cung cấp thêm dữ liệu hữu ích.
- Loại bỏ non-data ink: xóa các phần đồ họa không truyền tải dữ liệu.
- Ví dụ
- Ví dụ về một đồ họa có quá nhiều mực thừa và một phiên bản cải tiến truyền tải nhiều thông tin với ít mực hơn.
- Mật độ thông tin có giới hạn trên; bạn có thể loại bỏ quá nhiều mực hoặc thêm quá nhiều thông tin.
- Đối tượng người xem cũng quan trọng: người dùng nâng cao có thể thích mật độ cao, còn học sinh tiểu học có thể thích mật độ thấp.
- Quan hệ giữa mật độ thông tin và mật độ thị giác
- Mật độ thông tin càng cao thì thường càng có vẻ dày đặc về mặt thị giác.
- Ví dụ: trực quan hóa thời gian biểu tàu hỏa của E.J. Marey năm 1885. Thời gian đến và đi được hiển thị trong một không gian nhỏ và dày đặc.
- Tufte ủng hộ mật độ dữ liệu và việc tối đa hóa dữ liệu một cách hợp lý.
- Shrink Principle
- Đồ họa có thể được thu nhỏ đáng kể.
- Mật độ thông tin hữu ích cho biểu đồ và đồ thị.
- Liệu có thể áp dụng nó cho giao diện không?
- Áp dụng mật độ thông tin trong giao diện
- Thông tin có thể áp dụng lên màn hình.
- Mỗi phần của giao diện nên hiển thị nhiều thông tin nhất có thể.
- Rất dễ bị cám dỗ nghĩ về mực như pixel, nhưng giao diện cần các đường phân cách, thành phần cấu trúc và biển chỉ dẫn để giúp hiểu mối quan hệ giữa các thành phần.
- Cũng có cám dỗ làm theo Shrink Principle và loại bỏ mọi khoảng trắng.
- Nhưng một số khoảng trắng mang ý nghĩa quan trọng không kém các yếu tố thị giác. Cần cân nhắc cả vai trò của bóng đổ, gradient và điểm nhấn màu sắc.
- Mật độ thông tin là một khái niệm hữu ích, nhưng chỉ là một phần của bức tranh tổng thể.
- Chúng ta cần tìm cách hiểu mọi quyết định thiết kế trong giao diện theo hướng khách quan và định lượng hơn.
Mật độ thiết kế (Design Density)
- Thách thức đầu tiên khi định nghĩa mật độ từ góc nhìn quyết định thiết kế là xác định điều gì được xem là một quyết định.
- Hiểu các quyết định thiết kế
- Trong UI, UX và thiết kế sản phẩm, chúng ta đưa ra rất nhiều quyết định, có ý thức hoặc vô thức, để truyền tải thông tin.
- Cần đặt câu hỏi vì sao một lựa chọn nhất định truyền tải ý nghĩa, lựa chọn nào chỉ mang tính thẩm mỹ, và lựa chọn nào thực sự quan trọng.
- Nguyên lý Gestalt
- Đây là cách con người hiểu hình dạng và mẫu hình, được các nhà tâm lý học Đức thế kỷ 20 nghiên cứu.
- Thuật ngữ Gestalt có nghĩa là "hình thức".
- Từ nghiên cứu này, một số quy luật thiết kế cơ bản đã được phát hiện:
- Proximity: các vật ở gần nhau được nhận thức như một nhóm.
- Similarity: các đối tượng giống nhau về hình dạng, kích thước, màu sắc... sẽ có vẻ liên quan đến nhau.
- Closure: ta tự lấp đầy khoảng trống trong thiết kế để nhận ra hình dạng hoàn chỉnh.
- Symmetry: các hình đối xứng được nhóm lại quanh một điểm trung tâm.
- Common Fate: các đối tượng chuyển động theo cùng một cách được nhóm lại với nhau.
- Continuity: các đối tượng chồng lấp được nhận thức là tách biệt.
- Past Experience: ta nhận ra các hình dạng và mẫu quen thuộc ngay cả trong ngữ cảnh xa lạ.
- Figure-Ground Relationship: phân biệt yếu tố tiền cảnh và hậu cảnh trong hình ảnh 2D.
- Ảnh hưởng của nguyên lý Gestalt đến thiết kế UI
- Nhờ nguyên lý Similarity, văn bản có cùng kích thước, phông chữ và màu sắc sẽ biểu thị cùng một mục đích.
- Nguyên lý Proximity cho thấy khi một biểu đồ nằm gần tiêu đề, tiêu đề đó đang giải thích biểu đồ.
- Nhờ Past Experience và Figure-Ground, người dùng có thể hiểu ngay một công tắc toggle hoạt động như thế nào.
- Khái niệm mật độ thiết kế
- Thay vì tập trung vào pixel, ta nghĩ về các quyết định thiết kế có chủ đích truyền tải ý nghĩa, sử dụng các nguyên lý Gestalt.
- Tương tự như tỷ lệ data-ink của Tufte so sánh lượng mực cần thiết với tổng lượng mực trong biểu đồ, mật độ thiết kế so sánh tỷ lệ giữa các quyết định thiết kế cần thiết và toàn bộ quyết định.
- Dù mang tính chủ quan, trong giao diện người dùng việc đếm các quyết định thiết kế hữu ích hơn so với đếm lượng dữ liệu hay lượng mực.
- Giới hạn của mật độ thiết kế
- Giao diện người dùng tồn tại để phục vụ công việc, niềm vui, việc giết thời gian, tạo ra sự thấu hiểu, thúc đẩy kết nối cá nhân, v.v.
- Nó phải bao gồm mọi hành động mà người dùng thực hiện trong suốt hành trình của họ.
- Mật độ phải vượt ra ngoài component, layout và màn hình để tính đến mọi hành động của người dùng trong không gian và thời gian.
Mật độ theo thời gian
- Lượng công việc mà người dùng có thể làm trong một khoảng thời gian nhất định quyết định mật độ theo thời gian.
- Thời gian tải là yếu tố lớn nhất của mật độ theo thời gian. Giao diện phản hồi càng nhanh và tải trang hoặc màn hình mới càng nhanh thì UI càng có mật độ cao.
- Bloomberg Terminal có mật độ theo thời gian rất cao vì tải dữ liệu gần như tức thì.
- Cách tăng mật độ theo thời gian
- Có thể tăng mật độ theo thời gian bằng cách giảm thời gian tải xuống mức tối đa có thể.
- Nhưng không phải mọi thời gian tải đều có thể giảm. Ví dụ, bạn không thể thay đổi tốc độ kết nối Internet hay tốc độ CPU của người dùng.
- Một số tác vụ như tải tệp lên, chờ phản hồi hỗ trợ khách hàng, xử lý thanh toán... liên quan đến hệ thống phức tạp và các biến số không thể đoán trước.
- Cách thay đổi nhận thức về thời gian
- Dưới 100 mili giây: nếu khoảng thời gian giữa hai hành động dưới 100 mili giây, người dùng sẽ cảm thấy chúng xảy ra đồng thời. Trong trường hợp này, animation thậm chí có thể khiến ứng dụng có cảm giác chậm hơn.
- Từ 100 mili giây đến 1 giây: sự kết nối giữa hai hành động bắt đầu đứt quãng. Animation và hiệu ứng chuyển tiếp có thể lấp đầy khoảng trống nhận thức này.
- Từ 1 giây đến 10 giây: chỉ animation là không đủ. Khả năng người dùng rời khỏi trang tăng mạnh trước 10 giây. Trong trường hợp này, nên dùng chỉ báo tải không xác định để cho biết hệ thống vẫn đang hoạt động bình thường.
- Từ 10 giây đến 1 phút: chỉ báo tải không xác định nếu kéo dài quá 10 giây sẽ bắt đầu tạo cảm giác tĩnh. Trong trường hợp này, nên dùng chỉ báo tải rõ ràng hơn, chẳng hạn thanh tiến trình, để thể hiện thời gian còn lại.
- Trên 1 phút: cần cho phép người dùng rời trang hoặc làm việc khác. Việc không thể làm gì trong hơn 1 phút dễ gây thất vọng. Các quy trình dài cũng có khả năng phát sinh lỗi cao hơn.
- Mật độ của thời gian và không gian
- Mật độ của UI chỉ là phương tiện. Giá trị của UI không nằm ở hình thức mà ở kết quả nó giúp đạt được.
- Mật độ là việc mang lại nhiều giá trị nhất có thể với ít thời gian, không gian, pixel và mực nhất.
Mật độ giá trị (Density in Value)
- Mật độ giá trị liên quan đến giá trị của kết quả mà người dùng nhận được.
- Ví dụ: chia một biểu mẫu dài thành các phần nhỏ và tổ chức thành giao diện kiểu wizard là điều tốt. Vì một biểu mẫu điền dở dang thì không có giá trị.
- Đưa mọi câu hỏi lên một trang có thể trông dày đặc hơn về mặt thị giác, nhưng nếu mất quá nhiều thời gian để điền thì nhiều người dùng sẽ không gửi biểu mẫu.
- Ví dụ về biểu mẫu
- Một biểu mẫu được chia thành nhiều phần, hiển thị lỗi và cách khắc phục một cách rõ ràng.
- Việc giảm lỗi và giúp người dùng hoàn thành biểu mẫu có thể đòi hỏi nhiều không gian và thời gian hơn trong thiết kế.
- Nhưng nếu sự đánh đổi về mật độ thị giác và mật độ thời gian làm cho kết quả trở nên có giá trị hơn thì tổng mật độ giá trị lại tăng lên.
- Tăng mật độ giá trị
- Có thể tăng mật độ thị giác và mật độ thời gian bằng cách làm biểu mẫu nhỏ hơn, tải nhanh hơn và giảm lỗi.
- Nếu điều đó không làm giảm giá trị đối với người dùng hoặc doanh nghiệp, thì mật độ tổng thể sẽ tăng.
- Theo cách tiếp cận của Tufte, chúng ta nên cố gắng tối đa hóa mật độ giá trị nhiều nhất có thể.
- Bài toán tối ưu hóa
- Việc giải bài toán tối ưu hóa có thể dẫn đến những kết quả mang tính nghịch lý.
- Trong Internet thời kỳ đầu, các công ty như Craigslist tăng mật độ giá trị bằng cách tổng hợp thông tin và hiển thị dưới dạng liên kết trang.
- Yahoo và Altavista cho phép tìm kiếm thông tin nhưng vẫn nhấn mạnh vào việc tổng hợp.
- Google chọn một cách tiếp cận khác, tận dụng thông tin thu được từ chuỗi liên kết của Internet trong một ô tìm kiếm.
- Thông tin tự được tổng hợp, và điều người dùng cần chỉ là quyền truy cập vào toàn bộ web thông qua một ô nhập văn bản duy nhất.
- Cách tiếp cận của Google và Yahoo
- So sánh màn hình đầu tiên của Google (năm 2001) với màn hình năm 2024, mật độ thị giác thấp nhưng mật độ giá trị lại rất cao.
- Kết quả: giá trị của Google tăng từ $23B năm 2004 lên hơn $2T hiện nay. Yahoo giảm từ $125B năm 2000 xuống còn $4.8B hiện nay.
- Trong nhiều trường hợp, mật độ giá trị quan trọng hơn mật độ thị giác.
- Tối ưu hóa thiết kế và chức năng để tối đa hóa giá trị người dùng nhận được là điều quan trọng.
Kết luận
- Thiết kế có cân nhắc mật độ UI phải vượt ra ngoài các khía cạnh thị giác của giao diện.
- Nó bao gồm mọi quyết định thiết kế tường minh và hàm ẩn mà chúng ta đưa ra, cùng mọi thông tin hiển thị trên màn hình.
- Nó cũng phải bao gồm mọi hành động và thời gian mà người dùng bỏ ra để nhận được giá trị từ phần mềm.
- Định nghĩa cụ thể về mật độ UI
- Mật độ UI = giá trị mà người dùng nhận được từ giao diện / thời gian và không gian mà giao diện chiếm dụng
- Các yếu tố quan trọng
- tốc độ
- khả năng sử dụng
- tính nhất quán
- khả năng dự đoán
- độ phong phú của thông tin
- tính chức năng
- Lý do một số giao diện thành công: khi xem xét tất cả những yếu tố này, ta có thể hiểu vì sao có giao diện thành công còn giao diện khác thất bại.
- Mục tiêu thiết kế
- Thông qua thiết kế có cân nhắc mật độ, chúng ta cần giúp mọi người nhận được nhiều giá trị hơn từ phần mềm mà mình tạo ra.
1 bình luận
Ý kiến trên Hacker News
Tóm tắt các bình luận trên Hacker News
Vì sao thực đơn nhà hàng dạng vật lý lại tốt hơn menu trên website di động
Tầm quan trọng của dữ liệu, nơi chức năng được ưu tiên hơn hình thức
Khái niệm mật độ theo thời gian
Lý do giao diện di động thưa thớt
Chỉ trích việc UI ngày càng thưa
Vấn đề của UI phức tạp và xu hướng
Ưu điểm của UI truyền thống
Sự mất cân đối của mật độ thông tin
Các vấn đề của UI di động
Ví dụ về UI thiếu mật độ