Thiết kế ứng dụng: 8 cách để tăng nội dung nhưng vẫn giữ tính thẩm mĩ

Rộng rãi - tối giản - sạch sẽ, không gian trắng đã trở thành tiêu chuẩn thẩm mỹ của thiết kế trong các ứng dụng tiêu dùng. Khi được sử dụng hiệu quả, không gian trắng sẽ tạo nét cuốn hút riêng cho ứng dụng đồng thời cải thiện đáng kể khả năng tương tác cho một giao diện đơn giản.

Nhưng đối với một giao diện phức tạp, việc sử dụng không gian trắng sẽ gặp vấn đề như thế nào? Những người thiết kế phần mềm sẽ hiểu điều tôi nói: Các công cụ mà người dùng dựa vào để hoàn thành công việc hàng ngày. Ví dụ các thiết kế bảng điều khiển công nghệ khả dụng, hệ thống logistic dữ liệu tăng cường và hệ thống kế toán nặng về số lượng…

Bài viết bởi tác giả Christie Lenneville.


Hãy để tôi kể cho bạn một câu chuyện buồn

Nhân vật chính là một nhà thiết kế UX, hiện đang làm việc cho công ty công nghệ quy mô lớn và vừa được giao một dự án mới: Tái thiết kế bảng điều khiển kém thẩm mỹ, khó tương tác với hàng tá nội dung bị “nhồi nhét” trên màn hình. Mọi người trong công ty đều đồng ý rằng cần hiện đại hóa bảng điều khiển này vì nó trông như một sản phẩm “lỗi thời” của những năm 2000!

Minh họa bởi Hurca™ 

Vì vậy, nhà thiết kế này cần phải giải quyết vấn đề với gợi ý từ các ứng dụng tiêu dùng hiện đại.

Tada!!! Thiết kế mới đã hoàn thành với sự lược giản tuyệt vời trên mọi màn hình. Nó chia các trang lớn thành từng trang nhỏ, giúp mọi thứ trông rõ ràng hơn. Đồng thời sử dụng Progressive disclosure (tiết lộ lũy tiến) để che giấu thông tin không đáng kể. Và vì người dùng ngày nay không ngại cuộn, nên nhà thiết kế đã chủ ý kết hợp khoảng trắng ở tất cả các vị trí xung quanh tiêu đề, khối nội dung và hàng cột. Một thiết kế sạch sẽ!

Thiết kế này sử dụng được… một tháng, trước khi công ty buộc phải giải thể nó!

Người dùng hoàn toàn không thích thiết kế mới, bởi hệ thống cũ tuy xấu, nhưng nó có mọi thứ họ cần, dễ dàng sử dụng đối với họ! Công việc của họ được xử lý rất nhanh, vì họ làm việc trong một trung tâm hỗ trợ công nghệ và đánh giá dựa trên số liệu năng suất, họ không có thời gian để nhấp hoặc cuộn để tìm thông tin.

Trong mắt họ, hệ thống mới này không phải là một bản nâng cấp, nó là một thứ vô nghĩa. Nó không chỉ gây một chút bực bội, nó làm họ phát điên.


Bài học ở đây là gì?

Một doanh nghiệp lớn về bản chất thường có dữ liệu quy mô lớn và có hàng ngàn người dùng tương tác trực tiếp như tìm kiếm, điều khiển, báo cáo,… Họ cần di chuyển đến dữ liệu một cách nhanh chóng chứ không quan tâm quá nhiều về giao diện.

Thử nhìn sự việc trên như sau: Bạn sẽ không đánh giá cao một từ điển chỉ có 10 từ trên mỗi trang (vì bạn sẽ phải lật rất nhiều trang), nên người dùng cũng không muốn các hệ thống khiến họ phải tìm kiếm quá nhiều.

Nhưng điều đó không có nghĩa là giao diện của bạn phải xấu

Minh họa bởi Dmitrii Kharchenko 

Mật độ dữ liệu được thiết kế tốt có thể trình bày lượng thông tin khổng lồ trên mọi màn hình, trong khi vẫn duy trì hệ thống phân cấp nội dung rõ ràng và có thể quét được. Điều này giúp người dùng có thể truy cập nhanh chóng và chính xác đến dữ liệu họ cần mà không ảnh hưởng đến khả năng đọc văn bản hoặc tương tác với toàn bộ ứng dụng.

Sau đây là một số lời khuyên về cách tăng mật độ dữ liệu mà không làm giảm tính thẩm mỹ ứng dụng của bạn.

1. Trước tiên, hãy thử giảm khối lượng dữ liệu

Trước khi bạn bắt đầu thu nhỏ kích thước font chữ để nhồi nhét thêm dữ liệu trên mọi màn hình, hãy xem liệu tất cả dữ liệu đó có cần thiết hay không. Hãy tự đặt ra câu hỏi như:

  • Tôi có thể loại bỏ dữ liệu dư thừa không? Nhiều hệ thống vô tình hiển thị cùng một dữ liệu nhiều lần với các biến thể nhẹ. (Các bảng lớn là nơi đầu tiên để bắt đầu tìm kiếm thông tin trùng lặp.)
  • Có những thứ mà người dùng của tôi thực sự không cần phải xem ngay bây giờ? Nếu bạn không biết, hãy hỏi! Họ có thực sự sử dụng những thứ đang có sẵn không?
  • Tôi có thể nhóm các thông tin liên quan không? Không phải mọi phần tử dữ liệu nào cũng cần có ô bảng riêng, ngay cả khi nó được lưu trữ trong hệ thống back-end. Bạn có thể giảm độ phức tạp thị giác bằng cách kết hợp các yếu tố - ví dụ: đặt tên và họ của khách hàng trong cùng một trường nhập liệu.
Khó quét hơn
Dễ quét hơn

2. Sử dụng các tiêu chuẩn typographic tốt

Khoảng cách là yếu tố rất cần thiết để đọc nhanh trong các chuỗi dài, chẳng hạn như số sê-ri và rất hữu ích ngay cả đối với các chuỗi ngắn hơn như số điện thoại và ngày.
- Robert Bringhurst, The Elements of Typographic Style

Typography phù hợp là điều cần thiết trong một ứng dụng doanh nghiệp. Trọng lượng font chữ, kerning và spacing đều ảnh hưởng đến việc người dùng của bạn có thể quét thông tin nhanh chóng và dễ dàng như thế nào.

  • Cân nhắc sử dụng các số đơn cách khi so sánh các chữ số giữa các hàng.
  • Xem xét sự liên kết thập phân của tiền tệ khi đô la và đồng xu ở vị trí quan trọng.
  • Giữ chiều cao của đường hẹp nhưng hãy sử dụng đủ khoảng trắng để tách các vật thể một cách sạch sẽ.

3. Sử dụng màu sắc có chủ ý

Giảm màu sắc của nội dung ít quan trọng nhất. Mỗi màu sắc đều mang ý nghĩa và sức ảnh hưởng riêng, vì vậy việc sử dụng bảng màu trong thiết kế cần cân nhắc như trong các thông báo lỗi (thường là màu đỏ) hoặc liên kết văn bản tương tác, hình ảnh.

Trong ví dụ trên, điểm nổi bật được nhấn màu đỏ duy nhất trong bảng màu xám nhờ việc tiết chế các màu sắc. Tuy việc quét ngang còn hạn chế như khả năng quét trên toàn bảng sẽ được tăng cao. Hãy cân nhắc xem điều gì quan trọng hơn cho ứng dụng của bạn.


4. Sử dụng ít “đồ nội thất”

Trong cuộc thảo luận về việc tạo ra các bảng dễ đọc hơn, Robert Bringhurst đã nói rằng:

Lượng “đồ nội thất” nên đặt ở mức tối thiểu (quy tắc, hộp, dấu chấm và các hướng dẫn khác thông qua khoảng cách typographic) và lượng thông tin nên đặt ở mức tối đa.

- Robert Bringhurst, The Elements of Typographic Style

Khi tăng mật độ ứng dụng, hãy suy nghĩ các yếu tố nào trên trang của bạn không mang tính thẩm mỹ và không có giá trị đối với logic nội bộ và cấu trúc hình ảnh của trang.

Minh họa bởi Dmitrii Kharchenko 

5. Thay vào đó, hãy để người dùng xuất dữ liệu

Khi xử lý các tập dữ liệu lớn, danh sách dài, bảng phức tạp hoặc trang sau trang kết quả, đôi khi giải pháp tốt nhất là cho phép người dùng đưa dữ liệu đó sang một công cụ khác - nơi họ có thể tương tác với nó.

Cân nhắc việc tăng thêm affordance (tính dễ dùng) cho người dùng để xuất dữ liệu họ đang xem thông qua XML, XLS, JSON hoặc CSV.


6. Đừng quên việc tương tác

Trừ khi bạn có thể loại trừ một cách an toàn các tương tác dựa trên cảm ứng, đừng quên các kích thước tối thiểu cho các mục tiêu cảm ứng. Ví dụ: Material có các hướng dẫn tối ưu để bố trí các mục tiêu cảm ứng trên trang truy cập.


7. Theo dõi cập nhật của Material

Trong các bản cập nhật gần đây của Material, Google đã bổ sung các tiêu chuẩn mới làm tăng mật độ dữ liệu, làm cho nó có thể dễ sử dụng hơn đối với các ứng dụng doanh nghiệp. Họ đã xem xét kỹ lưỡng, các khuyến nghị cụ thể đi kèm, và rất nhiều ví dụ tuyệt vời về cách mật độ có thể ảnh hưởng đến bố cục của bạn.


8. Chức năng hơn hình thức, điều luôn luôn ghi nhớ

Các nhà thiết kế doanh nghiệp có thể nhận được rất nhiều tín hiệu tuyệt vời từ thiết kế của người tiêu dùng, nhưng chức năng phải luôn là mối quan tâm hàng đầu. Đó là vì người dùng của chúng ta không có lựa chọn nào khác, họ phải sử dụng các công cụ mà chúng ta thiết kế. Vì vậy, chúng ta phải luôn đặt năng suất hàng ngày của người dùng lên hàng đầu.

Biên tập: Thao Lee
Tác giả: Christie Lenneville


Hình trong bài (7)
Thao Lee Thao LeeWriter