DESIGN

Nhóm F – 47K22.2
 NỘI DUNG
01 02
Website
Structure
Navigation

03 04

Website Readability Image/ Video

 I
STRUCTURE
 01 Các yếu tố chính của trang Web
Header Content Sidebar

Footer Form/Pop-up SSL

 02 Các loại cấu trúc của trang Web

Cấu trúc tuyến tính (Linear Structure):

• Đặc điểm: Trang web được tổ chức theo một luồng duy
nhất từ đầu đến cuối, người dùng tiến qua từng phần một
cách tuần tự.
Ví dụ: Trang web "Tin tức VnExpress" (https://vnexpress.net/)
 02 Các loại cấu trúc của trang Web

Cấu trúc cây (Hierarchical Structure):

• Đặc điểm: Trang web được tổ chức theo một cấu trúc cây
có hệ thống, với các trang chính ở mức cao và các trang
con ở mức thấp hơn.

Ví dụ: Trang web "Chợ Tốt" (https://www.chotot.com/)

 02 Các loại cấu trúc của trang Web

Cấu trúc mạng lưới (Grid Structure):

• Đặc điểm: Trang web được chia thành các ô hoặc ô
lưới đồng nhất, mỗi ô chứa một phần của nội dung.

Ví dụ: Trang web "Tiki" (https://tiki.vn/)

 02 Các loại cấu trúc của trang Web

Cấu trúc nhóm (Hub and Spoke Structure):

• Đặc điểm: Trang web có một trang chính (hub) chứa các
liên kết đến các trang con (spoke) với nội dung chi tiết.
Ví dụ: Trang web "Zing News" (https://news.zing.vn/)
03 Các bước và quy trình thiết kế cấu trúc trang
web
 Xác định mục tiêu và đối tượng của trang web
 Nghiên cứu và thu thập thông tin
 Tạo bản đồ trang (Site map)
 Tạo wireframe (bản phác thảo)
 Thiết kế giao diện người dùng (UI)
 Tối ưu hóa trải nghiệm người dùng (UX)
 Thử nghiệm và điều chỉnh
 Triển khai và duy trì
 Theo dõi và phân tích
04 Các nguyên tắc thiết kế cấu trúc quan trọng

Sắp xếp hợp lý Đơn giản hóa

Tập trung vào người dùng Tối ưu hóa cho di động

04 Các nguyên tắc thiết kế cấu trúc quan trọng

Giao diện website The Coffe House trên cả 2 phiên bản máy tính và điện thoại
 II
WEBSITE
NAVIGATION
01 Navigation Bar

Là một phần quan trọng,

thường nằm ở đầu trang, sẽ
chứa các liên kết và menu để
người dùng dễ dàng tìm kiếm
thông tin, điều hướng giữa các
trang quan trọng
 02 Các đường dẫn liên
kết
• Các liên kết này thường được đặt ở các vị trí dễ tiếp cận để giúp người dùng truy cập nhanh đến các
trang quan trọng và cung cấp thông tin mở rộng.
• Các đường liên kết có thể được đặt ở các nơi như:

Trong đoạn văn bản Chân trang (Footer)

 03 Chức năng tìm kiếm
Hỗ trợ người dùng tìm kiếm thông tin cụ thể trên trang web. Giúp người dùng truy cập trực tiếp
vào nội dung mong muốn mà không cần phải duyệt qua nhiều trang hoặc menu làm tăng tốc độ
truy cập làm cải thiện trải nghiệm người dùng.
 04 Breadcrumbs

Hiển thị vị trí hiện tại của người dùng trong trang web và cung cấp liên
kết trực tiếp đến các các trang trước đó
 05 Call-to-Action

Được sử dụng để khuyến khích người truy cập hoặc độc giả thực hiện một hành
động cụ thể
 III
WEBSITE
READABILIT
Y
 Website Readability
• Thước đo mức độ dễ dàng của khách
truy cập khi đọc và hiểu văn bản trên
trang web.
• Khả năng đọc phụ thuộc vào cách trình
bày của văn bản: lựa chọn phông chữ,
khoảng cách, màu sắc,... và ngữ cảnh
 Website Readability
Các yếu tố cần thiết:
• Hệ thống phân cấp thích hợp giúp xác định cách đọc nội dung. Nó cho người dùng biết nơi bắt
đầu đọc và nơi đọc qua, phân biệt tiêu đề với văn bản nội dung.
• Ví dụ: phân cấp tiêu đề, nội dung phù hợp làm cho người dùng dễ chú ý, thu hút hơn.

Không phân cấp Có phân cấp

 Website Readability
Chữ:
• Kích thước thích hợp: 18px là tối ưu cho người dùng
• Kiểu chữ, chiều cao dòng, khoảng cách chữ cần phù hợp
với nội dung website. Chiều cao dòng thông thường bằng
1.5 lần cỡ chữ.
 Website Readability
Ví dụ về website SICKO

Chữ khá nhỏ và khá mảnh. Nó khiến người dùng khó đọc, đồng
thời không thu hút được tập trung vào nội dung.
 Website Readability
Độ tương phản:
• Độ tương phản màu rất quan trọng.
• Theo nguyên tắc truy cập nội dung web (WCAG) yêu cầu tỷ lệ tương phản ít
nhất là 4,5:1 đối với văn bản thông thường và 3:1 đối với văn bản lớn để đạt
được mức tuân thủ Cấp AA.
 IV
IMAGE/ VIDEO
 01 Image
Hình ảnh trên website có thể được sử dụng cho nhiều mục đích:
• Mô tả
• Quảng bá
• Giới thiệu
• Cung cấp thông tin một cách trực quan
Ví dụ về 2 trường hợp sử dụng hình ảnh

Sử dụng hình ảnh hợp lí, bắt mắt Không sử dụng hình ảnh
 02 Video

Đối với các trang web hiện nay, đặc biệt là các website bán hàng, video
đang được sử dụng một cách rộng rãi và phổ biến để thu hút thêm lượng
khách truy cập

Thu hút sự chú ý: Nâng cao trải nghiệm người dùng:

• Video có khả năng thu hút sự chú ý của người dùng • Video cung cấp cho người dùng trải nghiệm trực
hiệu quả hơn so với văn bản hay hình ảnh. quan và sinh động hơn.
• Video giúp tạo điểm nhấn cho trang web, khiến • Video giúp tăng thời gian lưu trú của người dùng
người dùng muốn khám phá nội dung. trên trang web.
 Ví dụ

Sicko sử dụng video tự động phát khi truy cập vào website, hiển
thị ngay trên dưới logo để thể hiện được sản phẩm
 Tài liệu tham khảo
- What Is Website readability and Why Is It Important? (n.d.). Hotjar.
https://www.hotjar.com/conversion-rate-optimization/glossary/website-readability/#:~:text=
Website%20readability%20is%20a%20measure
‌
- Cronin, M. (2009, March 18). 10 Principles Of Readability And Web Typography. Smashing
Magazine.
https://www.smashingmagazine.com/2009/03/10-principles-for-readable-web-typography/
 Thanks!
CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon,
and infographics & images by Freepik