Cải thiện UI – cải thiện trải nghiệm người dùng (Phần 1)

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.

nhóm các đối tượng - cải thiện trải nghiệm người dùng

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.

nhóm các đối tượng trong form - cải thiện trải nghiệm người dùng
Tương tự áp dụng giữa các label với input trong form

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.

Hạn chế dải đều text trong vùng chật hẹp
Chúng ta có thể để mặc định cho đoạn text đi từ trái qua phải sao cho người dùng dễ đọ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.

Chỉ sử dụng một button là 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.

Để ý độ tương phản của đoạn văn
Sử dụng độ tương phản thấp là một sai lầm khá phổ biến. Một số các trang website không phù hợp ngay cả với cấp AA

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.

Để ý độ tương phản của đoạn văn
click vào show more ở contrast ratio để có thể chọn màu sắc phù hợp

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.

Nhóm các thành phần liên quan trong bố cục

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.

Cách xa các thứ nguy hiểm
cái nút tắt này để gần nút xóa rất nguy hiểm cho người sử dụng

Đừ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)

You may also like...

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *