7 Lưu Ý Khi Bạn Thiết Kế Một Website Thương Mại

27-07-2024 15:24

Mục lục

• Khả năng truy cập web là gì?
• Text và Typography
• Màu sắc và độ tương phản (Color – Contrast)
• Hình ảnh và các phương tiện media
• Điều hướng và cấu trúc
• Biểu mẫu và tính tương tác
• Mobile và Responsive

Thiết kế website ảnh hưởng đến mọi khía cạnh trong cách chúng ta tương tác trên internet, từ mua sắm trực tuyến, đọc báo và blog cho đến xem danh mục đầu tư trực tuyến. Thiết kế website liên quan đến việc tạo ra các không gian trực tuyến mà người dùng với các khả năng khác nhau có thể dễ dàng điều hướng. Tuy nhiên, thiết kế web cũng đóng vai trò quan trọng trong việc xây dựng thương hiệu và hoạt động kinh doanh của bạn. Bài viết sẽ tổng hợp một số lưu ý làm điểm khởi đầu khi thiết kế trang web của bạn. Mỗi trang web sẽ có những yêu cầu truy cập cụ thể riêng cần được xem xét, do đó bạn có thể sử dụng các gợi ý dưới đây như những đề xuất hữu ích thay vì các hướng dẫn cứng nhắc.

1. Khả năng truy cập web là gì?

Khả năng truy cập web là việc áp dụng các lựa chọn, công cụ và công nghệ thiết kế cụ thể để người khuyết tật có thể truy cập bình đẳng vào nội dung trực tuyến như người không khuyết tật.

Khi công nghệ hỗ trợ ngày càng tiến bộ và khi phần lớn thế giới tiếp tục chuyển đổi dịch vụ và hàng hóa sang trực tuyến, nhu cầu về thiết kế web có thể truy cập ngày càng tăng. Việc tạo một trang web có thể truy cập không chỉ hỗ trợ người dùng truy cập trang web của bạn mà còn mang lại lợi ích cho doanh nghiệp và thương hiệu của bạn.

Dưới đây, chúng tôi sẽ chia sẻ một số mẹo để làm cho các khía cạnh phổ biến nhất trong thiết kế trang web của bạn trở nên trực quan, dễ tiếp cận và có tác động hơn đối với khách truy cập.

2. Text và Typography

Nội dung text là cách bạn kể câu chuyện và quảng bá thương hiệu của mình. Dù là biểu mẫu liên hệ, trang giới thiệu hay cấu trúc giá cả, trang web của bạn có thể chứa nhiều dạng thông tin văn bản. Do đó, điều quan trọng là đảm bảo mọi định dạng text đều dễ hiểu và rõ ràng cho tất cả khách truy cập.

• Phông chữ và Size: Tránh sử dụng phông chữ quá nhỏ hoặc quá trang trí để dễ đọc hơn. Tốt nhất, bạn nên sử dụng phông chữ sans serif hoặc serif đơn giản cho nội dung trên trang web và hạn chế sử dụng quá nhiều loại phông chữ khác nhau. Phông chữ quá trang trí hoặc rất nhỏ có thể gây khó đọc, làm mệt mỏi khách hàng tiềm năng và gây khó khăn cho người khuyết tật khi điều hướng trang web của bạn.
• Khoảng cách và định dạng văn bản của bạn cũng ảnh hưởng lớn đến trải nghiệm người dùng trên trang web. Tránh các đoạn văn quá dài với văn bản nhỏ và đông đúc. Đảm bảo bạn sử dụng định dạng văn bản phù hợp, như tiêu đề và tiêu đề phụ, để tạo ra một bố cục dễ theo dõi và hấp dẫn hơn cho người đọc.

3. Màu sắc và độ tương phản (Color – Contrast)

Màu sắc và độ tương phản không chỉ là yếu tố quan trọng trong việc xây dựng thương hiệu của bạn mà còn là yếu tố chính để đảm bảo khả năng truy cập của trang web. Dù bảng màu trên trang web của bạn có thể trông rất hấp dẫn, nhưng nó cũng phải hỗ trợ tốt cho nội dung - màu sắc có thể được dùng để kể chuyện, truyền tải thông tin và tạo sự hấp dẫn về mặt hình ảnh. Tuy nhiên, việc lạm dụng màu sắc có thể dẫn đến mỏi mắt và gây khó chịu cho người dùng.

• Chọn Bảng màu: Tránh sử dụng các màu nền quá bão hòa hoặc xung đột với nhau. Mặc dù các màu bổ sung có thể làm cho thiết kế thêm phần hấp dẫn, nhưng một nền đỏ bão hòa kết hợp với văn bản màu xanh lá cây sẽ không thân thiện với người dùng và gây khó khăn trong việc tiếp nhận thông tin.
• Tỷ lệ Tương phản Màu sắc: Văn bản của bạn cần nổi bật trên trang, không để lại chỗ cho sự nhầm lẫn. Tránh sử dụng bảng màu có độ bão hòa cao, màu tương phản quá mức, nhưng cũng cần tránh các màu quá nhạt.

Các loại nội dung văn bản khác nhau trên trang web của bạn: menu trang, super link, note… phải được hiển thị rõ ràng và dễ nhận biết. Bạn có thể chọn một bảng màu trung tính nhẹ nhàng cho văn bản, nhưng cần đảm bảo có đủ sự biến đổi về màu sắc để chúng nổi bật so với nền và với nhau.

4. Hình ảnh và các phương tiện media

Hình ảnh và các phương tiện media là những phần không thể thiếu của bất kỳ trang web được thiết kế tốt nào. Để đảm bảo rằng tất cả mọi người truy cập trang web của bạn đều có thể thưởng thức tác phẩm của bạn, bạn có thể thực hiện thêm một số bước.

• Văn bản Thay thế: Văn bản thay thế, hay còn gọi là mô tả hình ảnh, là văn bản được sử dụng để mô tả hình ảnh trên trang web của bạn. Văn bản này không hiển thị trên trang web nhưng có thể được đọc bằng trình đọc màn hình dành cho người khiếm thị. Ngoài ra, văn bản thay thế cũng rất tốt cho SEO của bạn và có thể giúp tăng thứ hạng tìm kiếm của bạn. Trong trình tạo trang định dạng, bạn có thể cập nhật mô tả hình ảnh của mình từ một trang duy nhất, giúp việc triển khai văn bản thay thế nhanh chóng, đơn giản và thuận tiện.
• Chú thích, Bản chép lời và Phụ đề: Đối với video, việc có chú thích ngắn mô tả nội dung hoạt động tương tự như văn bản thay thế dành cho người khiếm thị. Bản chép lời có thể hữu ích cho những người khiếm thính và thích đọc văn bản cùng với nội dung trực quan. Điều quan trọng cần nhớ là khiếm thính không phải lúc nào cũng có nghĩa là điếc hoàn toàn, và việc phiên âm có thể giúp ích cho những người có mức độ nghe khác nhau và gặp khó khăn trong các hoàn cảnh khác nhau. Phụ đề trên video là lựa chọn thay thế tuyệt vời cho bản chép lời nếu bạn đang tìm kiếm thứ gì đó ít gây chú ý hơn và cũng có thể giúp những người xem không thể tăng âm lượng, chẳng hạn như ở tàu điện ngầm hoặc quán cà phê công cộng.

5. Điều hướng và cấu trúc

Có một trang web đẹp chỉ là bước khởi đầu. Đảm bảo rằng trang web của bạn không chỉ đẹp mà còn dễ điều hướng với thông điệp và cấu trúc nhất quán sẽ để lại ấn tượng lâu dài với khách truy cập và khách hàng tiềm năng. Khi tập trung vào hình ảnh trực quan của trang web, rất dễ bỏ qua điều gì đó đơn giản như điều hướng và cấu trúc. Vì vậy, hãy lưu ý các điểm sau đây khi làm việc trên thiết kế trang web trợ năng của bạn.

• Tạo Điều hướng Hợp lý và Nhất quán: Để làm cho trang web của bạn dễ đọc và dễ điều hướng, bạn nên giới hạn các lựa chọn màu sắc, loại và kiểu phông chữ cũng như các tùy chọn định dạng động khi thiết kế điều hướng trang web. Điều hướng trang web không chỉ bao gồm menu mà còn bất kỳ liên kết và hình ảnh nào được liên kết trên các trang của bạn.

Hãy cân nhắc sử dụng một hoặc hai tùy chọn phông chữ khác nhau khi thiết kế menu và nội dung trang web. Điều này sẽ giúp tạo nên giao diện nhất quán để khách truy cập có thể điều hướng dễ dàng hơn. Ngoài ra, đảm bảo rằng mọi liên kết trên các trang của bạn được định dạng khác với văn bản thông thường, bằng cách in nghiêng, gạch chân hoặc in đậm văn bản siêu liên kết. Đảm bảo màu của văn bản siêu liên kết khác với màu của văn bản thường để người dùng dễ nhận biết.

• Sử dụng Tiêu đề và Cấu trúc Tài liệu Phù hợp: Đối với nội dung văn bản trên trang web của bạn, điều quan trọng là phải xem xét cấu trúc nội dung chứ không chỉ bản thân nội dung. Việc sử dụng các tiêu đề và tiêu đề phụ cùng với cấu trúc tài liệu phù hợp như thụt lề, ngắt dòng và định dạng văn bản có thể giúp truyền tải thông tin hiệu quả hơn đến khách truy cập.

Nếu bạn có nhiều văn bản, hãy cân nhắc việc chia nhỏ nội dung bằng cách sử dụng các phần văn bản, cột, danh sách có dấu đầu dòng nhỏ hơn hoặc điều chỉnh khoảng cách dòng. Khách truy cập sẽ dễ dàng tiếp thu nội dung của bạn hơn nếu nó được chia thành các phần nhỏ hơn và có định dạng rõ ràng.

6. Biểu mẫu và tính tương tác

Nếu bạn nhận công việc hay bán sản phẩm qua trang web của mình, hãy xem xét các bước bổ sung để đảm bảo biểu mẫu liên hệ của bạn dễ đọc và tương tác.

• Đảm bảo Biểu Mẫu Rõ Ràng và Dễ Hiểu: Không nên có bất kỳ sự nhầm lẫn nào về nơi nhập thông tin, nội dung cần nhấp vào, hoặc nội dung mà khách truy cập đang điền. Sự nhầm lẫn trong các lĩnh vực này không chỉ là vấn đề về khả năng truy cập mà còn có thể dẫn đến mất doanh thu cho bạn.
• Đảm bảo Khả năng Truy cập Bàn phím: Một số khách truy cập trang web của bạn có thể không sử dụng chuột và thay vào đó, sử dụng bàn phím cho phần lớn thao tác điều hướng. Vì vậy, hãy đảm bảo rằng các yếu tố quan trọng nhất của trang web trình đơn, nội dung và biểu mẫu có thể truy cập được thông qua lệnh bàn phím.

Mặc định, Định dạng trang web cho phép bạn sử dụng phím Tab và Enter để điều hướng giữa các liên kết menu trang, hình ảnh trên trang thư viện, trường nhập biểu mẫu liên hệ, liên kết xã hội, v.v. Điều này giúp tất cả khách truy cập dễ dàng truy cập trang web của bạn.

• Cung Cấp Nhiều Cách Liên Lạc: Ngoài biểu mẫu liên hệ, cung cấp địa chỉ email có thể liên hệ cũng rất hữu ích cho những người dùng có công nghệ hỗ trợ riêng và yêu cầu đầy đủ khả năng của email soạn thảo. Địa chỉ email trên cùng một trang với biểu mẫu liên hệ cũng hữu ích cho những ai cần liên hệ với đối tác kinh doanh hoặc khách hàng hoặc nếu họ cần chia sẻ phương tiện truyền thông không thể gửi qua biểu mẫu liên hệ.

7. Mobile và Responsive

Hơn một nửa lưu lượng truy cập web đến từ thiết bị di động, vì vậy điều quan trọng là đảm bảo trang web di động của bạn dễ dàng điều hướng, đọc và thưởng thức. Cần tính đến các yếu tố như nội dung tự động điều chỉnh, điều hướng thân thiện với cảm ứng và khả năng thích ứng trên nhiều thiết bị.

Định dạng trang web đáp ứng đầy đủ giúp bạn dễ dàng tối ưu hóa nội dung cho thiết bị di động. Nội dung của bạn sẽ tự động điều chỉnh theo bố cục tốt nhất để phù hợp với kích thước màn hình hoặc cửa sổ trình duyệt mà khách truy cập đang sử dụng. Điều này giảm bớt công việc phỏng đoán khi thiết kế cho nhiều thiết bị và tiết kiệm thời gian để bạn có thể tập trung vào việc thiết lập và vận hành trang web.

Bạn đã có tất cả các mẹo và công cụ cần thiết để bắt đầu làm cho thiết kế trang web của bạn dễ tiếp cận hơn. Dù bạn sử dụng một số hay tất cả các mẹo này, hoặc quyết định rằng nhu cầu truy cập trang web của mình khác một chút, việc dành thời gian để làm cho trang danh mục của bạn dễ truy cập hơn có thể giúp khách truy cập dễ dàng xem trang web của bạn, đặt lịch hẹn và gửi tin nhắn, đồng thời để lại ấn tượng tích cực về thương hiệu của bạn.

Tìm hiểu thêm các khóa học thiết kế chuyên nghiệp của ITPlus tại:

• Khóa học thiết kế đồ họa chuyên nghiệp

• Khóa học Photoshop

• Khóa học Illustrator

• Khóa học Quay, Dựng và Biên tập Video 

Ban Truyền Thông ITPlus