Đừng Chọn Icon Dashboard Theo Từ Khóa Nữa
Hầu hết các vấn đề của dashboard không đến từ những icon tồi.
Chúng đến từ những icon tốt nhưng được sử dụng sai ý nghĩa.
Nếu bạn tìm kiếm "users" và chọn một file SVG đẹp mắt, bạn có thể gặp rắc rối sau này. Bạn sẽ cần các icon khác nhau cho khách hàng, thành viên nhóm, chủ tài khoản và quản trị viên. Chẳng mấy chốc, một icon "user" phải gánh vác quá nhiều ý nghĩa. Điều này khiến dashboard SaaS của bạn cảm thấy bị rối.
Đừng chọn icon theo từ khóa nữa. Hãy bắt đầu chọn chúng theo vai trò.
Từ khóa cho bạn biết icon đó liên quan đến cái gì. Vai trò cho bạn biết icon đó thực hiện nhiệm vụ gì.
Hãy phân loại các icon của bạn thành năm nhóm sau:
- Navigation icons (Icon điều hướng): Những icon này đại diện cho các điểm đến như Dashboard, Billing (Thanh toán), hoặc Settings (Cài đặt). Chúng nên đơn giản và ổn định.
- Status icons (Icon trạng thái): Những icon này trả lời các câu hỏi như "Cái này có đang hoạt động không?" hoặc "Cái này có bị lỗi không?". Hãy sử dụng các biểu tượng trực tiếp như dấu tích, cảnh báo hoặc ổ khóa.
- Action icons (Icon hành động): Những icon này đại diện cho các thao tác như edit (chỉnh sửa), delete (xóa), hoặc export (xuất). Tránh sử dụng chúng mà không có nhãn nếu hành động đó phức tạp.
- Object icons (Icon đối tượng): Những icon này xác định các thực thể như một dự án, một hóa đơn, hoặc một thư mục.
- Empty state icons (Icon trạng thái trống): Những icon này xuất hiện khi dữ liệu bị thiếu. Chúng có thể mang nhiều cá tính hơn.
Đừng chỉ tìm kiếm file SVG đẹp nhất. Hãy tìm kiếm một ngôn ngữ hình ảnh (visual vocabulary).
Hãy thực hiện ba bài kiểm tra này trước khi quyết định sử dụng một icon:
- The Size Test (Kiểm tra kích thước): Icon đó có còn hoạt động tốt ở kích thước 16px bên trong một bảng dày đặc không? Nhiều icon trông rất tuyệt ở mức 32px nhưng lại thất bại khi thu nhỏ lại.
- The Context Test (Kiểm tra ngữ cảnh): Đặt icon cạnh nhãn và các icon lân cận của nó. Liệu nó có bị nhầm lẫn với icon bên cạnh không?
- The Meaning Test (Kiểm tra ý nghĩa): Icon đó có hỗ trợ cho nhãn không, hay nhãn phải giải thích cho icon?
Nếu bạn không thể tìm thấy một icon riêng biệt cho một tính năng, có thể tên tính năng đó quá mơ hồ. Icon giúp củng cố ý nghĩa. Chúng không thể sửa chữa ngôn ngữ thiếu rõ ràng.
Thay vì tìm kiếm "user icon", hãy tìm kiếm "internal collaborator icon" hoặc "customer account icon". Sự chính xác trong tìm kiếm sẽ dẫn đến sự chính xác trong UI của bạn.
Source: https://dev.to/svgicons/stop-picking-dashboard-icons-by-keyword-ij2