Các lỗi thiết kế web thường gặp phải và cách khắc phục – Những lỗi thiết kế trang Landing Page
Những lỗi thiết kế trang landing page phổ biến cần tránh
—
1. Nội dung không được chia thành các khối hợp lý
Người dùng sẽ dễ dàng tiếp nhận thông tin hơn nếu bố cục nội dung được nhóm thành các khối hợp lý. Thiết lập padding từ 120 px -180 px và tách các khối văn bản bằng cách sử dụng nền màu.
2. Khoảng cách không đồng đều giữa các item trên trang web
Các khối nên có khoảng cách đồng đều. Nếu không, trang của bạn sẽ trông lộn xộn khiến người dùng khó tiếp cận nội dung.
Khoảng cách có độ rộng không đồng đều khiến nội dung thông tin rời rạc với tiêu đề.
Không gian được sắp xếp hợp lý, nội dung thông tin liên kết với tiêu đề mang đến sự logic.
3. Padding quá nhỏ khiến người dùng không thể chia nội dung thành các khối
Để tránh các phần trộn lẫn vào nhau, hãy phân tách và thêm một khoảng trống (ít nhất là 120 px) giữa chúng.
Padding quá hẹp và các khối quá gần nhau. Điều này khiến trang quá tải nội dung và khó hiểu cho người dùng. Người truy cập trang web có thể bị nhầm lẫn các thông tin.
Padding đủ rộng để người dùng có thể nhận thấy sự khác biệt giữa hai khối
4. Tránh độ tương phản thấp cho văn bản trên ảnh nền
Trang web cần có đủ độ tương phản giữa văn bản và nền. Để làm cho văn bản nổi bật, hãy thêm một bộ lọc tương phản trên hình ảnh. Màu đen là màu phổ biến nhưng bạn cũng có thể sử dụng màu sáng và kết hợp chúng một cách hài hoà.
Một cách khác là sử dụng hình ảnh tương phản từ đầu và đặt văn bản lên trên phần tối của bức ảnh.
Hình ảnh quá sáng, khiến việc đọc văn bản khó khăn
Một bộ lọc được áp dụng giúp văn bản dễ đọc
5. Quá nhiều kiểu chữ trên một trang
Quá nhiều kiểu chữ và thiết kế khiến trang web trông không chuyên nghiệp và khó đọc. Để tránh điều này, hãy giới hạn một font chữ duy nhất và hai tùy chọn kiểu chữ như Regular (kiểu thường), Bold (kiểu in đậm).
Do sử dụng quá nhiều kiểu chữ khiến người dùng khó phân cấp nội dung quan trọng.
Một font chữ, một màu và hai kiểu chữ. Tối ưu hoá kiểu chữ giúp trang web gọn gàng và rõ ràng
6. Màu nền phân tách không hợp lý
Tránh dùng màu sắc để nhấn mạnh các yếu tố trên trang, nó làm giảm tính thẩm mỹ của trang web. Ví dụ, các tiêu đề được phân cấp tốt bằng kích thước, kiểu chữ và padding. Nếu bạn muốn làm nổi bật một nội dung cụ thể, hãy sử dụng màu nền cho toàn bộ khối, bao gồm tiêu đề và phần văn bản có nội dung liên quan.
Các tiêu đề được đặt trên nền màu sẽ phá vỡ tính liên tục của trang và trông giống như các yếu tố độc lập, riêng biệt
Cả tiêu đề và văn bản liên quan đều có chung một màu nền.
7. Quá nhiều chữ trong một cột
Nhiều chữ trong một cột sẽ gây ra cảm giác khó đọc, vì người dùng truy cập trang web phải đọc từ dòng này sang dòng tiếp theo. Thêm vào đó, nó cũng làm giảm tính thẩm mỹ của trang. Tốt nhất là giảm bớt số lượng cột và rút ngắn văn bản.
8. Quá nhiều chữ ở phần trung tâm
Phần trung tâm trang web không nên có nhiều chữ, nếu không người dùng khó có thể điều hướng hiệu quả. Đồng thời, nên tăng kích thước font chữ từ 24 pixel trở lên.
9. Văn bản chồng lên trên một phần thiết yếu của hình ảnh
Tránh để văn bản che các phần có ý nghĩa hoặc các chi tiết quan trọng của hình ảnh. Điều đó vừa khiến hình ảnh của bạn bị che khuất, vừa làm văn bản của bạn trở nên khó đọc hơn. Hãy thử các vị trí khác nhau như căn giữa hoặc căn chỉnh văn bản sang trái hoặc đặt chúng theo chiều dọc.
Tiêu đề che khuất khuôn mặt của người phụ nữ, đồng thời gây khó đọc cho văn bản.
10. Sử dụng hệ thống phân cấp thị giác phù hợp
Phân cấp thông tin rõ ràng trên trang, ví dụ, tiêu đề trên trang bìa phải lớn hơn các tiêu đề còn lại hoặc ít nhất là cùng kích thước.
Tiêu đề chính nhỏ hơn tiêu đề phụ khiến người dùng khó phân cấp thông tin, gây nhầm lẫn.
Tiêu đề chính lớn hơn tiêu đề phụ giúp toàn bộ trang trông nhất quán.
Nguyên tắc này áp dụng cho cả hệ thống phân cấp thị giác trong một khối nội dung. Tiêu đề chính phải là yếu tố thiết kế lớn nhất, tiêu đề phụ sẽ nhỏ và ít nổi bật hơn. Tiếp theo, các tiêu đề tính năng phải nhỏ đáng kể so với tiêu đề trước và có cùng độ đậm. Các font chữ nhỏ nhất nên được sử dụng cho phần mô tả.
Điều này sẽ giúp người dùng phân biệt thông tin theo thứ tự quan trọng.
Trong trường hợp này, phần tiêu đề tính năng phía dưới ít quan trọng hơn nhưng lại lớn hơn tiêu đề chính
Tiêu đề là yếu tố nổi bật nhất trên trang và mặc dù các tiêu đề tính năng được viết bằng cỡ nhỏ hơn, chúng vẫn hiển thị rõ ràng .
11. Nhóm các hình ảnh và văn bản liên quan thành khối
Hình ảnh hoặc bộ ảnh và văn bản liên quan cần được nhóm thành một khối độc lập, riêng biệt. Nếu bạn thêm phần padding xung quanh, văn bản và hình ảnh sẽ mang đến một tổng thể hợp lý.
Hình ảnh tách biệt khỏi tiêu đề khiến nội dung rời rạc
12. Tiêu đề quá lớn và dài
Một font chữ rất lớn chỉ hoàn hảo cho một câu ngắn. Nếu tiêu đề dài, nên sử dụng font chữ kích thước nhỏ hơn. Nó sẽ dễ đọc và để lại nhiều không gian cho các yếu tố thiết kế khác trên trang.
Một tiêu đề quá lớn chiếm toàn bộ bìa, trong khi các yếu tố thiết kế khác thiếu không gian khiến tiêu đề khó đọc
13. Sử dụng sai kiểu border
Border chỉ cần thiết cho một button trong suốt. Thêm một đường viền cho button khiến các màu sắc tranh chấp với nhau và gây khó khăn cho việc đọc.
14. Sử dụng quá nhiều màu sắc
Sử dụng quá nhiều màu sắc trên một trang gây khó hiểu và không rõ phần nào quan trọng hơn. Một hoặc hai màu là đủ để làm nổi bật cho những gì thực sự quan trọng.
15. Menu quá tải thông tin
Mọi người truy cập các trang web để tìm giải pháp cho vấn đề của họ. Hãy thiết kế menu tối ưu để giúp mọi người điều hướng trang web và tìm thấy những gì họ cần một cách nhanh chóng và dễ dàng. Đặt 5 – 7 mục trong một menu sẽ giúp tranh web tránh quá tải thông tin.
— Sưu tầm —
