Khi thiết kế một trang web, tôi hiểu phải đảm bảo những thứ cơ bản như:
- Tốc độ load trang web đó như nào, chậm quá sẽ giảm khả năng người dùng ở lại trang web
- Bố cục, thiết kế trang web, sao cho dễ nhìn, dễ thao tác, không mỏi mắt khi dùng
- Điều hướng, thông tin liên quan, để người dùng dễ tìm thấy những thứ họ cần
Thực ra tôi biết để thiết kế ra một trang web đẹp không hề đơn giản. Nhưng may là thế giới đã xây sẵn một bộ quy tắc, nên tôi tìm đọc, và biết rằng mình cần nắm được ít nhất mấy thứ sau:
Nhưng lý thuyết là không đủ. Nên tôi tìm một vài trang web mà tôi thấy đẹp và dễ đọc, rồi ngồi phân tích cách họ bố trí: dùng font gì, chữ to bao nhiêu, một dòng dài bao nhiêu chữ, khoảng trắng chừa thế nào.
Một ví dụ khá bất ngờ là chính giao diện chat với AI mà tôi dùng hằng ngày. Đọc rất dễ chịu, mà font cũng không có gì đặc biệt. Nhìn kỹ thì bí mật nằm ở chỗ: cột chữ hẹp, mỗi dòng chỉ khoảng 60–70 chữ cái, và màu chữ đủ đậm.
Từ những gì học được, tôi chốt lại cho trang của mình:
- Tiêu đề dùng Montserrat, font tôi thích nhất, tròn và cân đối.
- Nội dung dùng Be Vietnam Pro, font được thiết kế riêng cho tiếng Việt nên dấu không bị dính hay chồng lên nhau.
- Chữ to hơn một chút (18px), các dòng cách nhau thoáng hơn.
- Cột chữ hẹp lại, không còn dòng dài kéo hết màn hình.
- Nền gần trắng, chữ gần đen, thêm đúng một màu xanh lục làm điểm nhấn.
Có quy tắc rồi, giờ quay lại xem trang của mình đang sai ở đâu.
Bài đầu tiên khó đọc
Đăng xong bài 1, tôi mở trên điện thoại. Chữ xám nhạt, dòng dài, phải cuộn qua một cái banner logo to đùng mới thấy tiêu đề.
Phản xạ đầu tiên của tôi là: font xấu, đổi font.
Nhưng soi lại theo mấy quy tắc ở trên thì font không có lỗi gì. Vấn đề là chữ quá nhạt so với nền, một dòng dài gần 100 chữ cái, và banner chiếm gần hết màn hình đầu tiên.
Cách sửa thì đơn giản: chữ đậm lên, cột hẹp lại, banner thay bằng một thanh logo nhỏ. Bài đọc dễ hơn hẳn, mà không cần đổi font.
Nếu cứ sửa theo cảm giác, chắc tôi đã đi đổi font, rồi vẫn thấy khó đọc mà không hiểu vì sao.
Trang rối, nhiều thứ không cần thiết
Theme có sẵn một cột bên cạnh bài viết (sidebar): bài mới, bài nổi bật, ô tìm kiếm… Nhìn thì đầy đủ, nhưng khi đọc thì nó cứ kéo mắt sang một bên. Trên điện thoại còn tệ hơn, nó bị dồn xuống tận cuối trang, chẳng ai thấy.
Tôi bỏ hẳn cột này, nhưng không bỏ chức năng, mà chuyển nó đến đúng lúc người đọc cần: ô tìm kiếm lên trên cùng, bài liên quan xuống cuối bài, bài đọc nhiều ra trang chủ.
Ảnh bị cắt mất
Ban đầu tôi định ép mọi ảnh về cùng một khung chữ nhật dài cho trang nhìn đều. Thử trên ảnh thật mới thấy: ảnh dọc chụp ở Toledo bị cắt mất hơn một nửa, mất luôn đỉnh tháp.
Ảnh tôi chụp, tôi đã chọn khung rồi, web không nên tự cắt lại. Giờ ảnh giữ nguyên khung lúc tôi cắt, ngang ra ngang, dọc ra dọc.
Khó tìm bài
Menu cũ có những mục chưa có bài nào, và vài cái tên đọc lên không rõ là chứa gì.
Tôi gom lại còn năm mục, đặt tên đơn giản, và không để mục nào rỗng. Mục chưa có nội dung thì chưa đưa lên, vì người đọc bấm vào mà thấy trống thì cũng như một lời hứa không giữ.
Còn tốc độ thì sao?
Đây là điều đầu tiên trong danh sách ở đầu bài, và nói thật là lần này chưa cải thiện được.
Thiết kế làm trang dễ đọc hơn, chứ không làm trang nhanh hơn. Trên điện thoại, trang vẫn mất vài giây mới hiện xong. Đó là việc của bước tiếp theo: nén ảnh, lưu sẵn trang, giảm bớt những thứ theme tải về mà tôi không dùng.
Nhìn lại
Tôi mất vài ngày để đọc, đi xem trang người khác, rồi mới sửa trang mình. Chậm hơn chỉnh theo cảm giác, nhưng giờ mỗi thay đổi đều có lý do, sau này muốn đổi cũng biết đổi cái gì.
Gu cá nhân vẫn có chỗ của nó. Montserrat, logo chữ ký là gu của tôi. Nhưng gu nên đi sau quy tắc, chứ không thay cho quy tắc.
Chi phí cho phần này: 0 đồng, chỉ tốn thời gian.