Cấu trúc chung của một website: hiểu để bạn thiết kế tốt hơn

Ngày 10 / Tiết 1 / Thời lượng 30 phút. Mục lục khóa 100 ngày làm web.

Không có website nào giống nhau hoàn toàn, tuy nhiên các website đều có một cấu trúc chung rất ổn định, và trong ngày hôm nay 100 ngày làm web sẽ cùng bạn tìm hiểu cấu trúc chung đó.

Chúng ta sẽ cùng đi qua các ví dụ để dễ hiểu.

Giờ bạn hãy vào trang vnexpress.net, đây là một trong các trang báo điện tử có lưu lượng truy cập lớn nhất tại Việt Nam.

Trang nội dung đầu tiên mà bạn nhìn thấy khi truy cập trang vnexpress.net người ta gọi là trang chủ (tên tiếng Anh tương ứng là home page):

Hình ảnh vnExpress ở bên góc trái là tên website, và nếu nó là định dạng hình ảnh thì hay được gọi là Logo:

Khi bạn click vào Logo, nó sẽ chuyển bạn ra trang chủ của website.

Ngay bên dưới Logo là các mục chính trên website, người ta gọi nó là chuyên mục, hoặc danh mục (tên tiếng Anh của nó là category):

Ví dụ chuyên mục Thời sự, Thế giới, Kinh doanh, Thể Thao, Pháp luật, vân vân.

Cả cụm chuyên mục này được gộp chung lại được gọi là menu (khi ra quán nước, quán ăn, bạn hay hỏi nhân viên là cho xem menu, cái từ ‘menu’ này có nghĩa tương tự).

Khi ở máy bàn, với màn hình rộng, menu sẽ hiển thị ra hết như trên, còn trên các thiết bị màn hình nhỏ như di động, menu sẽ thu nhỏ lại, và thường có biểu tượng (icon) là 3 dấu gạch ngang như bên dưới:

Và khi click vào nó mới hiển thị ra các chuyên mục:

Những website có số lượng bài viết nhất định (khoảng vài trăm bài đổ lên), thường gắn thêm ô tìm kiếm để người dùng tiện tìm khi cần, nó thường ở phần đầu trang:

Toàn bộ phần trên cùng của trang, người ta gọi chung là đầu trang, hay header:

Header thường bao gồm Logo, menu, ô tìm kiếm, và một số thông tin khác nếu có (ví dụ đường link đăng nhập tài khoản, các thông báo quan trọng, v.v…)

–

Khi bạn kéo xuống cuối trang, thì toàn bộ nội dung cuối trang gọi là footer (hay chân trang):

Chân trang (footer) thường chứa các thông tin như:

• Địa chỉ.
• Số điện thoại.
• Thông báo bản quyền của web.
• Ngoài ra, đôi khi còn có thêm menu phụ, giấy phép đăng ký hoạt động (thường có ở các công ty hoặc tổ chức lớn), vân vân.

–

Giờ bạn hãy click vào một bài viết bất kỳ. Chẳng hạn tôi vào bài viết này: vnexpress.net/tinh-truong-cua-picasso-4589317.html

Bạn có thể thấy phần header vẫn giữ nguyên. Kéo xuống cuối, bạn sẽ thấy phần footer cũng giữ nguyên nội dung.

Thường các website phần header và footer sẽ có nội dung thống nhất trên toàn bộ website (tức là vào bất cứ bài viết nào thì nội dung header và footer cũng giống nhau).

Phần giữa header và footer, có nội dung thay đổi tùy từng bài viết, chuyên mục, người ta gọi nó là content.

Phần content thường được chia làm 2 phần. Phần nội dung chính (main content) sẽ có kích thước to, và là phần nội dung chủ yếu người đọc quan tâm, phần sidebar (cột bên phải, hoặc trái) thường là nơi chứa nội dung ít quan trọng hơn, hoặc/và chứa quảng cáo:

Quảng cáo (Ads) do chủ sở hữu website đặt trên trang để kiếm tiền, cái này là tùy nhu cầu mới đặt, và thường chỉ trang thông tin mới đặt quảng cáo. Còn các trang chuyên về bán hàng thì không. Các trang thông tin không có nhu cầu đặt hoặc số người dùng không đáng kể (để tạo ra lợi nhuận) cũng có thể không muốn đặt quảng cáo.

Khi xem dần bài viết, đến gần cuối, bạn sẽ thấy các bài viết cùng chủ đề, liên quan để người đọc nào có nhu cầu xem tiếp thì truy cập, người ta gọi chung nó là bài viết liên quan:

Kéo xuống thấp chút nữa, bạn sẽ thấy các bình luận (tên tiếng Anh là comment), bình luận là cách rất đơn giản và hiệu quả để website tăng khả năng tương tác với người dùng:

–

Bạn có thể truy cập thêm các website khác và quan sát xem chúng thế nào, ví dụ dưới đây là trang web của Châu Bùi, nó cũng có thiết kế tương tự:

Bạn sẽ thấy các mô hình lặp đi lặp lại, dù các trang web khác nhau rất nhiều về giao diện, nội dung và quy mô.

Nhìn chung thì hình bên dưới đây mô tả tổng thể cấu trúc chung của một website:

–

Giờ bạn click vào chuyên mục bất kỳ trên menu, chẳng hạn Thể thao. Bạn sẽ thấy các bài viết cụ thể trong chuyên mục đó, và các bài viết mới nhất ở đầu, cũ hơn ở bên dưới:

Bạn sẽ thấy mỗi bài viết cụ thể thường có:

• Ảnh đại diện.
• Tiêu đề.
• Một đoạn văn bản vài chục chữ tóm tắt nội dung.

Như vậy là bạn đã nắm được cơ bản cấu trúc của một website thông thường, thiên về cung cấp thông tin. Các trang bán hàng cũng có cấu trúc tương tự, khác biệt chủ yếu là ở trang sản phẩm, và các trang bổ sung liên quan đến thanh toán, chúng ta sẽ bàn đến sau này khi thích hợp.

Đôi khi các website không sử dụng sidebar

Ngày xưa, bạn rất hiếm thấy website nào không dùng sidebar (cột phải hoặc trái), nhưng ngày nay, số website không dùng sidebar có khá nhiều, ví dụ:

Hoặc:

Thiết kế không sử dụng sidebar có điểm thú vị là người đọc sẽ tập trung tốt hơn vào phần nội dung chính, không bị làm phiền bởi các nội dung bên sidebar. Cấu trúc lúc này của nó sẽ là:

Website không dùng sidebar đang ngày càng phổ biến hơn, tuy nhiên thiết kế có sidebar vẫn là thiết kế chiếm đa số, vì dù sao thiết kế này vẫn không thể không dùng trên các website đặt quảng cáo, hoặc các website muốn đưa ra nhiều thông tin hơn cho người dùng.

Không phải website nào cũng có khu vực bình luận

Hầu hết các website đều có khu vực bình luận nhằm tăng gắn bó, tương tác, thảo luận trên website của mình. Tuy nhiên không phải website nào cũng có mục comment, một số lý do bao gồm:

• Thời gian để trả lời, duyệt bình luận có thể chiếm quá nhiều.
• Nội dung dễ tạo ra các tranh luận không văn minh.
• Dễ xuất hiện các bình luận bất lợi, và việc tranh luận đúng sai thường dẫn đến các tình huống còn bất lợi hơn (bạn sẽ thấy hiếm website công ty nào có khu vực bình luận trên trang, họ sẽ có trang riêng để khách hàng liên hệ).
• Không có nhu cầu thảo luận.
• Bình luận phá vỡ trải nghiệm nội dung (nhiều website học tập trực tuyến tắt khu vực bình luận dưới bài, và người học có câu hỏi sẽ vào khu vực riêng để hỏi).

Bài tiếp >>> Nội dung của website bao gồm những gì?