6 ĐIỂM CƠ BẢN CẦN CHÚ Ý KHI TẠO MỘT WEBSITE THÂN THIỆN DỄ NHÌN

Link post: http://uxmilk.jp/59843 Trong một website, dù nội dung có hay đến mấy nhưng trang web đó không dễ nhìn dễ nhận diện thì người dùng sẽ ngay lập tức từ bỏ việc tìm hiểu website đó. “Dễ nhìn” tức là tuy có nhiều nội dung, nhiều phần phụ thuộc vào user nhưng trong những điều đó cũng ít nhất có vài quy tắc cần tuân thủ. Trong bài báo này, tác giả nêu ra một vài điểm cần chú ý khi tiến hành tạo một trang web dễ nhìn thân thiện với người dùng.

FONTSIZE

Font size,khoảng cách các dòng sẽ tác động khá lớn dến tầm nhìn của toàn bộ đoạn văn. Tại WCAG 2.0, trong trường hợp tiếng anh thì chữ béo sẽ là 18 pt hoặc 14 pt, còn tiếng Nhật thì sẽ khoảng là 19px đến 24px ( 1 px tương đương 0,75pt). Ngoài ra độ cao của dòng ( line-height) khoảng 150% ~200%, khoảng cách giữa các đoạn sẽ khoảng 1,5 lần leading Ngoài ra, Google cũng đưa ra tiêu chuẩn về fontsize dễ đọc dễ nhìn. Theo tiêu chuẩn này, thì font size cơ bản là 16px, chiều cao của dòng là 1,2 em ( 18pt tương đương 1,5 em, 14pt tương đương 1,2 em). Font size của WCAG khá là to trong trường hợp trang web chủ yếu là text, cho nên trong trường hợp site như vậy thì nên lấy tiêu chuẩn Google là 16px. Khoảng cách giữa các dòng tối thiểu là 150% của tiêu chuẩn WCAG 2.0. POINT

• Font size an toàn là 16px – 24px
• Khoảng cách giữa các dòng là 150 -200%

ĐỘ RỘNG CỦA CONTENT

Có những trang web chỉ chú trong đầu tư design dành cho màn hình nhỏ smartphone mà ít chú trọng đến thiết kế dành cho màn hình lớn. Ngoài những màn hình lớn ra, gần đây có những site hiển thị trên cả màn hình tivi Tại WCAG 2.0, độ rộng của đoạn văn là khoảng 80 chữ, khuyến khích design không vượt quá 40 chữ. Vì nếu font size là 16px thì 40 chữ sẽ là 640px. Tóm lại, độ rộng của phần nội dung chính sẽ trong khoảng trên dưới 640px là ổn nhất. Nếu vượt quá mức này, thì user nếu muốn nhìn nội dung thì phải phóng tầm mắt to hơn để nhìn. Liên quan đến độ rộng của nội dung bài viết ( bao gồm cả sidebar), tùy theo layout mà độ rộng sẽ khác nhau, nhưng độ rộng tối đa khi dùng trên Bootstrap của CSS framework là 1170px, đó là độ rộng an toàn phù hợp nhất. Point:

• Phải đáp ứng được cả màn hình to và màn hình nhỏ
• Độ rộng an toàn của phần nội dung chính là 640px

MÀU SẮC, ĐỘ TƯƠNG PHẢN

Màu sắc và độ tương phản cũng tác động đến tầm nhin của đoạn văn. Tại WCAG 2.0, tiêu chuẩn màu background và màu của text được đặt ra phụ thuộc vào tỉ lệ độ tương phản. Tỉ lệ tương phản tối thiểu là 4,5:1, tỉ lệ được recommend là 7:1/ Fontsize chữ khác nhau thì tỉ lệ độ tương phản được recommend cũng sẽ khác nhau, trong trường hợp text to thì tối thiểu là 3:1, recommend là 4,5 : 1. Ngoài ra màu của link cũng có tiêu chuẩn riêng. Tỉ lệ độ tương phản của text xung quanh với màu link được recommend là 3 : 1. Thế nhưng với người mù màu thì không phân biệt được độ tương phản này, nếu vậy thì kết hợp sử dụng cả under line là phù hợp. Point:

• Tỉ lệ tương phản của màu bgr và màu text tối thiểu là 3:1, recommend là 7:1
• Tỉ lệ tương phản của màu text và màu link recommend là trên 3:1

LAYOUT

Layout có rất nhiều loại, quan trọng là chọn layout nào cho phù hợp với trang web. Ví dụ, trang web chú trọng đến ảnh hoặc trang web chú trọng đến bài viết hay column thì chắc chắn layout sẽ khác nhau. Khi quyết định layout của bài viết, cần chú ý đến các điểm sau:

• Lượng content
• Type của content ( ảnh, hay đoạn văn)
• Tần suất update content
• Phần content chính Ngoài ra cần chú ý đến cả yếu tố là muốn thu hút ánh nhìn của người dùng như thế nào. Về đề tài nghiên cứu các cách thu hút tầm nhìn của người dùng, ngoài phương pháp mà nhà nghiên cứu nối tiếng Jacob Nielsen đã chỉ ra thì còn nhiều cách khác như Gutenberg Diagram, hình chữ Z v.v… Point
• Chọn layout phù hợp với website
• Phân bổ nội dung phù hợp để thu hút ánh nhìn của người dùng

ANIMATION

Animation nên sử dụng ở mức tối thiểu. Vì người dùng vào trang web để xem nội dung là chính chứ không phải là vì muốn xem animation. Ngoài ra, phải nên tránh bắt người dùng chờ đợi hiệu ứng animation xảy ra. Tốc độ càng nhanh sẽ càng nâng cao tỉ lệ muốn thoát khỏi trang web đó, và việc bắt người dùng đợi hiệu ứng xảy ra vô tình khiến cho tỉ lệ đó càng tăng cao. Point:

• Hạn chế tối đa việc sử dụng animation
• Tránh những animation mà rườm rà bắt user phải đợi (dưới 200ms)

SCROLL

Không được cản trở việc cuộn trang của user. Ví dụ http://sagadwebdesign.com/ trang web trên là điển hình cho việc cuộn rất khó khan gây bực mình cho user. ( ví dụ scroll jack) Trong trường hợp điều chỉnh thanh cuộn trên Javascript chẳng hạn, thì nên suy nghĩ việc bỏ cách làm đó đi cho phù hợp. Rất nhiều trang web hiện không chú ý đến phần thanh cuộn, vì thế user hiện chưa có thói quen về điều chỉnh thanh cuộn, và đơn giản là họ chỉ cuộn theo đúng như setting của browser hoặc máy tính. Ngoài ra ngày nay thiết kế Parallax design được sử dụng rộng rãi, vô hình chung lại trở thành trang web khó thân thiện với user Point

• Không cản trở việc user cuộn trang bằng cách không sử dụng scroll jack

HẾT