Những mẹo thiết kế UI nhỏ tạo ra tác động lớn

• Thiết kế UI có thể được cải thiện nhanh hơn và dễ dự đoán hơn khi áp dụng các quy tắc logic nhất quán để quyết định bố cục/khoảng cách/kiểu chữ/màu sắc, thay vì dựa vào cảm quan nghệ thuật
• Nền tảng là nhóm các yếu tố liên quan bằng khoảng trắng, dùng cùng một hình thức cho cùng một chức năng, và tạo phân cấp thị giác rõ ràng bằng kích thước/màu sắc/độ tương phản/vị trí
• Nên giảm màu sắc trang trí và các đường viền không cần thiết; màu sắc chỉ nên được dùng có chọn lọc để truyền đạt khả năng tương tác, như liên kết và nút bấm
• Theo tiêu chuẩn WCAG 2.1 AA, các phần tử UI cần đạt tỷ lệ tương phản ít nhất 3:1, văn bản nhỏ cần đạt ít nhất 4.5:1, đồng thời cần cung cấp cả tín hiệu ngoài màu sắc như gạch chân hoặc hình dạng
• Sử dụng chủ yếu một kiểu chữ sans-serif với độ đậm regular/bold, áp dụng x-height lớn/chữ hoa chữ thường dạng câu/căn trái/line-height từ 1.5 trở lên sẽ tăng khả năng đọc và tính nhất quán

---

Cách cải thiện UI bằng các quy tắc logic

• Thiết kế UI không chỉ cần cân nhắc layout/khoảng cách/typography/màu sắc, mà còn cả tính dễ dùng/khả năng truy cập/tâm lý, nên các lựa chọn rất dễ trở nên phức tạp
• Thay vì di chuyển các yếu tố theo trực giác để tìm trạng thái trông đẹp, việc áp dụng một hệ thống quy tắc có thể tái sử dụng giúp đưa ra quyết định có cơ sở nhanh hơn
• Lấy màn hình chi tiết chỗ ở cho thuê ngắn hạn làm ví dụ để chỉnh sửa từng bước một màn hình ban đầu phức tạp và khó dùng
• Mục tiêu không phải là thêm trang trí thương hiệu, mà là ưu tiên đảm bảo tính trực quan/khả năng truy cập/mức hoàn thiện thị giác cơ bản

1. Nhóm các yếu tố liên quan bằng khoảng trắng

• Chia thông tin thành các nhóm nhỏ có liên quan giúp người dùng hiểu và ghi nhớ cấu trúc màn hình nhanh hơn
• Có bốn cách để nhóm các yếu tố
  • Đặt chúng trong cùng một container
  • Thu hẹp khoảng cách giữa các yếu tố liên quan
  • Thể hiện bằng hình dạng tương tự
  • Căn chỉnh theo một đường liên tục
• Container là tín hiệu nhóm mạnh nhất, nhưng có thể làm tăng trang trí không cần thiết trên màn hình
• Khoảng trắng và căn chỉnh là cách tinh tế hơn mà vẫn giữ màn hình đơn giản
• Trong ví dụ, khoảng cách giữa các nội dung được tăng lên để phân tách rõ các nhóm thông tin khác nhau

2. Duy trì hình thức và hành vi nhất quán

• Các yếu tố tương tự nên trông và hoạt động tương tự, không chỉ trong cùng sản phẩm mà cả khi so với các sản phẩm quen thuộc khác
• Hành vi dễ dự đoán giúp người dùng không phải học lại cách dùng mỗi lần và giảm khả năng lỗi
• Các biểu tượng trong ví dụ bị trộn giữa dạng tô kín và dạng viền, khiến biểu tượng tô kín có thể bị hiểu nhầm là trạng thái được chọn
  • Thống nhất tất cả biểu tượng với góc bo tròn và viền 2pt để cân bằng trọng lượng thị giác
  • Thêm nhãn văn bản cho người dùng khó hiểu ý nghĩa chỉ qua biểu tượng và cho người dùng trình đọc màn hình
• Vì các yếu tố có cùng hình dạng sẽ được kỳ vọng hoạt động theo cùng cách, nếu chức năng khác nhau thì xử lý thị giác cũng phải khác nhau
• Trong ví dụ, container biểu tượng không tương tác trông giống nút Book now, nên màu xanh và kiểu nút đã được loại bỏ

3. Tạo phân cấp thị giác rõ ràng

• Không phải mọi thông tin đều có cùng mức độ quan trọng, nên yếu tố càng quan trọng càng cần được thể hiện nổi bật hơn
• Điều chỉnh kích thước/màu sắc/độ tương phản/khoảng cách/vị trí/chiều sâu giúp người dùng lướt nhanh màn hình và tìm vùng họ quan tâm
• Squint Test là phương pháp kiểm tra xem các yếu tố quan trọng và mục đích của màn hình có còn hiện rõ khi nheo mắt hoặc nhìn màn hình ở trạng thái mờ hay không
• Ở màn hình ban đầu, nhiều yếu tố cạnh tranh với cường độ tương tự nhau, trong khi nút hành động chính ở góc dưới bên trái gần như không nổi bật
• Áp dụng màu nền tương phản cao và font đậm cho nút chính để biến nó thành yếu tố nổi bật nhất trên màn hình
• Phần mô tả nội dung đang được nhấn mạnh quá mức so với mức quan trọng, nên sau đó màu sắc và typography được điều chỉnh để hạ thấp phân cấp

4. Loại bỏ trang trí không cần thiết

• Các đường kẻ/màu sắc/nền/hoạt ảnh không truyền đạt ý nghĩa hoặc không nhóm yếu tố có thể làm phân tán chú ý và tăng tải nhận thức
• Khoảng trắng và đường viền quanh ảnh trong ví dụ không cần thiết cho việc truyền đạt thông tin nên đã được loại bỏ
• Giảm các yếu tố trang trí giúp màn hình đơn giản hơn và dễ tập trung vào thông tin, hành động cốt lõi

5. Gán vai trò rõ ràng cho màu sắc

• Sử dụng màu sắc một cách hạn chế để truyền đạt ý nghĩa sẽ an toàn hơn so với dùng để trang trí
• Cách tiếp cận hiệu quả là bắt đầu ở trạng thái đen trắng rồi chỉ thêm màu vào những nơi cần thiết
• Áp dụng màu thương hiệu cho các yếu tố tương tác như liên kết văn bản và nút giúp người dùng dễ học được thứ gì có thể nhấp
• Với các yếu tố như thẻ, nơi bản thân hình thức đã thể hiện khả năng tương tác, không nhất thiết phải thêm màu
• Tiêu đề và đánh giá sao màu xanh trong ví dụ là yếu tố không tương tác nhưng lại trông như có thể nhấp, nên màu đã được loại bỏ
• Kết quả là ranh giới giữa yếu tố tương tác và thông tin thông thường trở nên rõ ràng hơn

6. Áp dụng tỷ lệ tương phản từ 3:1 trở lên cho phần tử UI

• Tỷ lệ tương phản biểu thị chênh lệch độ sáng cảm nhận được giữa hai màu, theo tỷ lệ từ 1:1 đến 21:1
• Theo tiêu chuẩn WCAG 2.1 AA, các phần tử UI như trường biểu mẫu/biểu tượng/nút cần tỷ lệ tương phản tối thiểu 3:1
• Mũi tên trên ảnh trong ví dụ có thể khó nhìn tùy theo ảnh nền
  • Áp dụng biểu tượng màu xám và nền trắng mờ đục để đảm bảo tương phản bất kể ảnh
  • Việc thêm container nền cũng làm vùng có thể nhấn lớn hơn và rõ hơn
• Nút chính ban đầu cũng thiếu tương phản với nền, khiến người dùng thị lực kém khó phân biệt hình dạng nút
• Tăng tỷ lệ tương phản của nút lên trên 3:1 để cải thiện đồng thời khả năng truy cập và phân cấp thị giác
• Có thể đo tỷ lệ tương phản bằng WebAIM Contrast Checker hoặc Contrast Figma plugin

7. Áp dụng đủ tỷ lệ tương phản cho văn bản

• Tiêu chuẩn WCAG 2.1 AA yêu cầu tỷ lệ tương phản khác nhau tùy kích thước và độ đậm của văn bản
  • Văn bản nhỏ từ 18px trở xuống cần tối thiểu 4.5:1
  • Văn bản đậm trên 18px hoặc văn bản regular trên 24px cần tối thiểu 3:1
• Chỉ báo số lượng ảnh thiếu tương phản với nền, nên đã tăng độ mờ đục của container màu xám và thêm đổ bóng chữ
• Văn bản vị trí có màu quá sáng và font quá mảnh, nên đã đổi sang màu xám đậm hơn
• Ngay cả khi đáp ứng tiêu chuẩn tương phản, font quá mảnh vẫn có thể khó đọc, vì vậy độ đậm cũng cần được điều chỉnh riêng

8. Không phân biệt trạng thái chỉ bằng màu sắc

• Người dùng có bất thường về thị giác màu có thể khó phân biệt một số tổ hợp màu nhất định hoặc không nhận biết được màu sắc
• Không được truyền đạt ý nghĩa/trạng thái/khả năng tương tác chỉ bằng màu sắc
• Liên kết Reviews trong ví dụ khi bỏ màu xanh sẽ không còn phân biệt được với văn bản thường
• Thêm gạch chân để người dùng vẫn nhận ra đó là liên kết ngay cả khi không thấy màu

9. Sử dụng một kiểu chữ sans-serif

• Typeface là tập hợp các font có phong cách chung, như Helvetica; còn các biến thể kích thước và độ đậm như bold/regular là từng font riêng
• Trong giao diện, thông thường dùng một kiểu chữ sans-serif dễ đọc, trung tính và đơn giản là lựa chọn an toàn
• Kiểu chữ serif trang trí ở tiêu đề trong ví dụ khó đọc và có thể không phù hợp với ảnh chỗ ở hoặc không khí dịch vụ
• Thống nhất với cùng kiểu chữ sans-serif như phần nội dung để tăng tính dễ dùng và nhất quán thị giác

10. Chọn kiểu chữ có chiều cao chữ thường lớn

• Kiểu chữ có x-height lớn, thể hiện chiều cao chữ thường, và khoảng cách giữa các chữ đủ rộng thường dễ đọc ngay cả ở kích thước nhỏ
• League Spartan trong ví dụ có x-height tương đối thấp
• Đổi sang Inter với x-height lớn hơn để tăng khả năng đọc của văn bản nội dung nhỏ

11. Hạn chế dùng chữ hoa

• Con người có xu hướng đọc nhanh bằng cách nhận diện hình dạng toàn bộ từ hơn là từng chữ cái riêng lẻ
• Các từ viết toàn bộ bằng chữ hoa đều có dạng hình chữ nhật tương tự nhau, khiến người đọc phải kiểm tra từng chữ, nên khó đọc hơn
• Thông tin vị trí được đổi từ toàn bộ chữ hoa sang sentence case, chỉ viết hoa từ đầu tiên và danh từ riêng
• Chỉ nên dùng toàn bộ chữ hoa một cách hạn chế, trừ các cụm ngắn thật sự cần nhấn mạnh

12. Chỉ dùng độ đậm regular và bold

• Ngay cả khi một kiểu chữ cung cấp nhiều độ đậm, dùng tất cả sẽ làm tăng nhiễu thị giác trên màn hình và khó quản lý nhất quán
• Nên giữ design system đơn giản, xoay quanh regular và bold
  • Dùng bold cho tiêu đề và văn bản nhấn mạnh
  • Dùng regular cho văn bản nhỏ thông thường
  • Nếu bold quá nặng, có thể thay bằng semi-bold
  • Các độ đậm rất mảnh hoặc rất dày chỉ nên dùng hạn chế cho tiêu đề lớn, không dùng cho văn bản nhỏ
• Văn bản vị trí trong ví dụ dùng độ đậm light nên vẫn có thể khó đọc ngay cả sau khi tăng tương phản
• Đổi sang regular để tăng khả năng đọc và giảm số loại độ đậm được sử dụng

13. Tránh dùng văn bản đen thuần

• Màu đen thuần tạo độ tương phản rất cao với nền trắng, có thể làm tăng mỏi mắt khi đọc trong thời gian dài
• Trên nền trắng, dùng xám đậm thay cho đen thuần là lựa chọn an toàn
• Nhiều yếu tố màu đen trong ví dụ được đổi sang xám đậm để điều chỉnh khả năng đọc
• Mô tả chỗ ở vốn nổi bật quá mức so với mức quan trọng được áp dụng màu xám sáng hơn để hạ thấp phân cấp thị giác

14. Căn trái văn bản dài

• Tiếng Anh được đọc từ trái sang phải và người dùng có xu hướng quét màn hình theo dạng chữ F, nên căn trái là ổn định nhất
• Tiêu đề hoặc câu ngắn vẫn có thể đọc nhanh khi căn giữa
• Khi căn giữa đoạn văn dài, vị trí bắt đầu mỗi dòng khác nhau khiến việc tìm dòng tiếp theo trở nên khó hơn
• Căn đều hai bên và căn giữa có thể khiến văn bản dài đặc biệt khó đọc với người dùng có khuyết tật nhận thức
• Mô tả chỗ ở trong ví dụ được đổi từ căn giữa sang căn trái, đồng thời đảm bảo nhất quán với phần văn bản phía trên

15. Đặt line-height cho nội dung từ 1.5 trở lên

• Line-height là khoảng cách dọc giữa hai dòng văn bản
• Khoảng cách dòng phù hợp giúp giảm việc đọc lại cùng một dòng và giúp đọc văn bản dài thoải mái hơn
• Line-height của văn bản nội dung cần tối thiểu 1.5(150%), và nhìn chung khoảng 1.5~2 là phù hợp
• Trong ví dụ, line-height được tăng từ 1(100%) lên 1.5(150%) để cải thiện khả năng đọc

Kết quả chỉnh sửa và nguyên tắc áp dụng

• Bằng cách áp dụng tuần tự 16 quy tắc, màn hình phức tạp đã được chuyển thành hình thức đơn giản hơn, dễ đọc hơn và dễ tiếp cận hơn
• Có thể thêm trang trí phù hợp với cá tính thương hiệu sau, nhưng trước tiên cần chỉnh đúng các nền tảng như cấu trúc thông tin/phân biệt tương tác/tỷ lệ tương phản/typography
• Sử dụng các quy tắc khách quan thay vì sở thích chủ quan giúp thiết kế UI trực quan và dễ tiếp cận nhanh hơn
• Những quy tắc được áp dụng lặp lại dần trở thành nền tảng tự nhiên của quy trình thiết kế, và trên nền tảng đó có thể thử nghiệm các cách biểu đạt và trang trí mới