UI (user interface) là thứ rất quan trọng trên một trang web, nó quyết định đến sự trải nghiệm của người dùng về mặt giao diện. Website có một UI tốt đương nhiên trải nghiệm của người dùng trên chính cái trang đó là tốt, điều này sẽ giúp lượng người dùng trên website đó tăng lên đáng kể.
Trong series này, mình sẽ chia sẻ các thủ thuật giúp cải thiện kĩ năng UI của bạn, cũng như cải thiện trải nghiệm người dùng trên chính các website của các bạn tạo ra.
Bắt đầu thôi !!!
1. Nhóm các đối tượng
Các đối tượng ở gần nhau thường có xu hướng nhóm lại cùng nhau. Với nguyên tắc này giúp cho người dùng dễ dàng theo dõi, nắm bắt thông tin nhanh hơn.
Trường hợp thứ nhất phần tiêu đề đang đặt ở giữa của 2 vùng nội dung, điều này rất tệ sẽ khiến cho người dùng trở nên phân tâm.
Trường hợp 2 thì nhìn nó thân thiện hơn vì nó ngăn cách vùng nội dung ở trên một cách rõ rệt.
2. Hạn chế dải đều text trong vùng chật hẹp
Sử dụng dải đều text hay text-align: justify;
trong vùng hiển thị hẹp là rất tệ. Vì nó sẽ tạo ra hiệu ứng dòng chảy (the “rivers” effect).
Hiệu ứng dòng chảy là các khoảng trắng dài ngắn khác nhau giữa các từ trên một dòng. Điều này khiến cho các từ trở nên không cân bằng về khoảng cách, dẫn đến khó đọc.
3. Chỉ sử dụng một button là primary
Đối với tôi, primary button thường liên quan tới một chức năng chính của cả form. Và đã nhắc đến chức năng chính thì nó là duy nhất.
Một lỗi sai phổ biến là có quá nhiều primary button trong một form. Bạn có thể thay thế nó bằng secondary hoặc loại khác mà nó kém nổi bật hơn primary.
4. Để ý độ tương phản của đoạn văn
Độ tương phản là gì? Hiểu đơn giản là màu sắc tương phản giữa màu chữ và màu nền, độ tương phản tốt sẽ giúp cho người dùng dễ dàng đọc hơn.
Về độ tương phản, chúng có 3 cấp độ: A, AA và AAA. Ở đây, tôi khuyến cáo nên chỉnh độ tương phản ở mức AA hoặc AAA là tốt nhất.
Hiện nay bạn có thể dễ dàng xem độ tương phản ở chính trình duyệt chrome với developer tools.
5. Nhóm các thành phần liên quan trong bố cục
Bạn nên đặt các phần tử liên quan một cách hợp lý thành các nhóm và cung cấp đủ khoảng trắng giữa chúng. Như vậy nhìn sẽ rất gọn, rất dễ tương tác và người dùng sẽ không bị rối mắt.
6. Cách xa các thứ nguy hiểm
Đôi lúc những hành động của người dùng dẫn đến những tác động không đáng có. Như click nhầm đăng xuất, hay bấm nhầm nút tắt thay vì chỉ muốn xóa 1 ký tự như trong ảnh dưới đây.
Đừng đặt những thứ nguy hiểm như vậy ở những nơi người dùng thường xuyên tương tác. Nếu phạm phải, có thể sẽ mất đi một lượng người dùng kha khá đấy.
Tiếp tục Cải thiện UI – cải thiện trải nghiệm người dùng (Phần 2)