Cách thiết kế một website thân thiện

Thường khi làm thiết kế và có một bản mockup ( giả lập trên giấy ) của một giao diện/trải nghiệm ( UI/UX ), chúng ta chỉ có thể nhớ một nguyên tắc duy nhất về Usability Experience

ĐỪNG BẮT TÔI SUY NGHĨ!

Hay nói cách khác, khi người dùng nhìn vào web/app, tất cả mọi thứ đều rõ ràng, hiển nhiên, không cần phải giải thích.

Người dùng đánh giá mức độ dễ sử dụng (usability) của web/app bằng công sức bỏ ra khi sử dụng web/app đó. Quá nhiều công sức = khó sử dụng.

Tổng kết các trải nghiệm của người dùng, người thiết kế cần lưu ý khi thiết kế:

1. VISUAL LOAD (THỊ GIÁC)

• Ấn tượng đầu tiên của người dùng về web/app. Càng nhiều thông tin, hình ảnh, màu sắc thì người dùng càng mất nhiều thời gian tìm cái mình cần.
• VD: quá nhiều thông tin dư thừa, kích thước font chữ quá nhỏ, tương phản kém, dùng quá nhiều màu sắc, quảng cáo quá mức.
• Một điều hay chia sẻ với các bạn khi làm đó là : Tất cả đều nổi bật = không có gì nổi bật được hết.

2. COGNITIVE LOAD(SUY NGHĨ)

• Kế đến, người dùng sẽ phải suy nghĩ chức năng mình cần nằm ở đâu trong web/app. Đừng buộc người dùng phải suy nghĩ quá nhiều (don’t make me think!), vì đây là hoạt động cần nhiều nỗ lực nhất.
• VD: cấu trúc thông tin không rõ ràng, dùng từ ngữ chuyên môn/khó hiểu, không tận dụng các tiêu chuẩn sẵn có (cố sáng tạo lại bánh xe - thay vì nó hình tròn thì sáng tạo lại hình vuông), biểu tượng không rõ ý nghĩa.
• Đây cũng là điều hay nhắc mọi người khi thiết kế về trải nghiệm người dùng. Đối với UI/UX, mình sẽ hạn chế educate cho user nếu vấn đề đó đã có các giải pháp ( ví dụ nếu thiết kế các function như chat, đừng cố nghĩ ra cái ngược lại với fb mess, hãy dựa vào nó để phát triển tốt hơn )

3. MOTOR LOAD (HÀNH ĐỘNG)

• Khi thiết kế, hãy nghĩ rằng người dùng chỉ cần nhấn/chạm vào chức năng mình cần. Cần tận dụng tối đa để giảm thiểu nỗ lực suy nghĩ bên trên.
• VD: nút nhấn quá nhỏ (đặc biệt trên mobile)

4. CÁCH NGƯỜI DÙNG LƯỚT WEB/APP

• Ngoại trừ web/app tin tức, wiki, hầu hết người dùng đều chỉ xem lướt qua (scan/skim) để tìm cái mình cần chứ không mất thời gian đọc hết từng câu từng chữ.
• Tiếp theo, người dùng sẽ nhấn vào cái gần nhất (satisficing) với cái mình tìm, chứ không so sánh tất cả các lựa chọn. Nếu không đúng thì nhấn nút BACK-Quay lại.
• Chiến lược phần lớn người dùng là thử và sai (trial & error), chứ không đọc hướng dẫn sử dụng của web/app.

5. SỬ DỤNG CÁC TIÊU CHUẨN ( CONVENTION )

• Người thiết kế thường có xu hướng ngại sử dụng các tiêu chuẩn, bởi tâm lý cho rằng chúng không “sáng tạo”. Do đó thường dẫn đến việc thường cố “phát minh lại bánh xe“.
• Ngày nay người dùng tiếp xúc với vô số sản phẩm, nếu không có các tiêu chuẩn thì không ai có thể nhớ cách sử dụng được tất cả mọi thứ.
• VD: cứ hình dung mỗi hãng xe máy họ thiết kế cách điều khiển khác nhau: ghi đông, joystick, màn hình cảm ứng, game controller,… thì sẽ ra sao
• Do đó, các tiêu chuẩn sẽ làm giảm tải cho người dùng (cognitive load), không phải học lại tất cả mọi thứ: vị trí menu, nút nhấn, màu sắc liên kết, hộp tìm kiếm,…
• Dĩ nhiên chúng ta vẫn nên sáng tạo, tuy nhiên cần nhớ cân bằng giữa sáng tạo và mức độ dễ sử dụng. Apple là một nhà sáng tạo. NHƯNG HỌ KHÔNG PHẢI ĐI ĐẦU, HỌ KHÔNG NGHĨ RA CÁI MỚI NHƯNG HỌ LÀM CHO CÁI ĐI ĐẦU TỐT HƠN. Ai nói Apple không sáng tạo đúng không.

6. CÓ BỐ CỤC RÕ RÀNG (visual hierarchy)

• Có chính/phụ rõ ràng:
• Ví dụ: Nội dung quan trọng thì tiêu đề/hình ảnh có kích thước lớn hơn
• Những thứ có liên quan thì gần nhau (proximity):
• Ví dụ: Mọi người hay thấy Menu nằm phía trên, ý kiến nằm cột bên phải
• Nhóm những thứ liên quan lại (common region):
• Ví dụ: Có đường phân cách giữa các nội dung

7. GIẢM TỐI THIỂU NHIỄU (SIGNAL-TO-NOISE RATIO)

Product/Marketing/Sales manager thường có xu hướng muốn càng nhiều thông tin nổi bật càng tốt. Như đã nhắc ở trên, nhiều thông tin nổi bật = không có gì nổi bật hết. Trong sách cũng thấy có một số lỗi thường gặp xin liệt kê phía dưới:

• Shouting. Banner nào cũng muốn mình nổi bật hơn tất cả.
• Disorganization. Lỗi này ít gặp hơn, thông tin không được ngay hàng thẳng lối, không được nhóm lại. Tuy nhiên vẫn thường thấy ở các web nghiệp dư, tự code.
• Clutter. Thường gặp nhất ở trang chủ, có quá nhiều thông tin. Nếu tổ chức không tốt, sẽ dẫn đến tình trạng RỐI

8. CHO THẤY CÁI GÌ CÓ THỂ NHẤN ĐƯỢC (CLICKABLE)

• Các thành phần có thể tương tác/nhấn được trên web/app cần rõ ràng, thống nhất. Nếu đó là button cần nhấn, hãy cho người dùng thấy nó sẵn sàng để được nhấn

9. THIẾT KẾ ĐỂ NGƯỜI DÙNG CÓ THỂ LƯỚT NHANH (DESIGN FOR SCAN)

• Nên dùng nhiều headings để người xem có thể lướt qua nội dung.
• Không nên viết một đoạn văn quá dài, trừ phi là tiểu thuyết/tin tức/wiki (long-form readings).
• Làm nổi bật từ khoá. Nhưng đừng lạm dụng. Nên highlight <10% nội dung.
• Ví dụ dễ nhận thấy nhất là bài viết. Người đọc cần đọc cái highligh là đủ, đi thông tin chi tiết sẽ đọc phần nhỏ ở dưới.

Beedesign 093.7979.390 - 0948.213.608 - 0388.818.680 (Mr. Khung)

0918.273.899 - 0899.460.688 (Ms. Hà)