Các lỗi thiết kế web thường gặp phải và cách khắc phục (Phần 1)

Trong thời đại số ngày nay, số lượng trang web ngày càng gia tăng, vì vậy việc sai sót trong quá trình thiết kế sẽ khó tránh khỏi. Bài viết này dựa trên nghiên cứu gần đây của các nhà phát triển trang web Tilda. Họ đã phân tích những lỗi phổ biến mà mọi người mắc phải khi thiết kế trang web. Hãy cùng iDesign tìm hiểu những lỗi thường gặp và cách khắc phục để giúp cho công việc thiết kế web trở nên tốt hơn!


A. 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.

Phần padding giữa các khối thông tin có khoảng cách không hợp lý, thông tin này khó tiếp nhận và không rõ văn bản nào thuộc nhóm nội dung nào. Do đó, thiết kế này cần các khối màu để phân chia nội dung
Padding hợp lý và các khối được phân tách bằng màu sắc, điều này làm nội dung rõ ràng hơn – mỗi khối chứa các loại nội dung khác nhau

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.

Nhiều chữ trong một cột gây khó đọc cho người dùng
Sẽ dễ đọc hơn nếu hạn chế số lượng chữ trong từng cột

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.

Các văn bản dài, khó tập trung để đọc
Một văn bản ngắn dưới một tiêu đề (phần trung tâm) trông trang web tốt hơ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. 
Hình ảnh và văn bản dễ đọc, mang đến bố cục tốt cho trang web

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
Hình ảnh sẽ liền mạch với văn bản và tiêu đề giúp cho bố cục hợp lý.

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
Thiết kế tốt giúp tất cả các yếu tố cân bằng với nhau và văn bản dễ đọ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.

Có quá nhiều màu sắc tươi sáng trên trang
Một màu vẫn tạo ra sự thu hút và không làm sao lãng nội dung của trang

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.

Menu này mang quá nhiều thông tin, khiến việc điều hướng trang web trở nên khó khăn hơn
Một menu đơn giản giúp tìm kiếm những gì bạn cần dễ dàng

Biên tập: Thao Lee
Nguồn: tilda

Hình trong bài (31)