Banner là gì và nó nằm ở đâu trên website
Nếu phải gọi tên bằng một câu ngắn: banner là gì thì đó là dải hình ảnh được đặt ở một vùng cố định trong bố cục trang web, mang một thông điệp hoặc lời kêu gọi hành động cụ thể. Thông điệp đó có thể là giới thiệu dịch vụ, thông báo khuyến mãi, quảng bá thương hiệu, hoặc đơn giản là dẫn người xem tới trang khác.
“Cố định” ở đây không có nghĩa là nội dung không thể thay đổi. Nhiều trang web thay banner theo mùa, theo sự kiện, hay tự động theo hành vi người dùng. Điều cố định là vị trí của nó trong bố cục: luôn ở đầu trang chủ, luôn nằm bên phải cột nội dung, hay luôn hiện ra khi người xem cuộn qua một ngưỡng nhất định.
Một banner website thường có ba thành phần đi cùng nhau: hình ảnh (hoặc màu nền), văn bản ngắn, và nút hành động (thường gọi là CTA, viết tắt của call-to-action, tức lời kêu gọi hành động). Ba thứ này phối hợp để làm một việc: nắm lấy ánh mắt người xem và dẫn họ làm gì đó tiếp theo, chứ không chỉ để cho đẹp trang.
Banner giao diện và banner quảng cáo khác nhau ra sao
Đây là chỗ gây nhầm lẫn nhiều nhất, đặc biệt với người lần đầu tiên làm web hoặc mới bắt đầu tìm hiểu về thiết kế website.
Banner giao diện (còn gọi là UI banner hay promotional banner, tức banner khuyến mãi) là phần thuộc thiết kế trang web của bạn. Nội dung do bạn quyết định, vị trí do lập trình viên dựng sẵn trong bố cục, và bạn thay đổi khi nào thấy cần. Hero banner đầu trang chủ, dải thông báo khuyến mãi bên dưới menu, hay banner hiển thị ảnh danh mục sản phẩm đều thuộc nhóm này.
Banner quảng cáo (display ad, tức quảng cáo hiển thị) là ô dành riêng để mạng quảng cáo điền nội dung vào, thường qua Google Display Network hay các mạng tương tự. Chủ web mở không gian, mạng quảng cáo đấu giá và điền quảng cáo phù hợp vào đó. Ai xem quảng cáo gì phụ thuộc vào thuật toán và hành vi duyệt web của người xem, không phải do chủ web kiểm soát.
| Tiêu chí | Banner giao diện | Banner quảng cáo |
|---|---|---|
| Ai tạo nội dung | Chủ web | Mạng quảng cáo (Google, Meta…) |
| Mục đích | Truyền thông điệp thương hiệu | Kiếm doanh thu từ lưu lượng truy cập |
| Thay đổi khi nào | Chủ web quyết định | Tự động theo đấu giá |
| Kiểm soát nội dung | Toàn phần | Hạn chế (chặn danh mục, không chặn từng mẩu) |
| Web nào thường dùng | Mọi loại web | Web có đủ lượng truy cập để bật kiếm tiền |
Phần lớn web doanh nghiệp nhỏ và vừa chỉ cần quan tâm tới banner giao diện. Banner quảng cáo dành cho trang web có lượng truy cập đủ lớn để kiếm doanh thu từ không gian hiển thị (thường gọi là publisher, tức nhà xuất bản). Nếu bạn vừa mới mở web, chưa có nhiều người vào, thì cài banner quảng cáo lên cũng không có nhiều ý nghĩa về mặt doanh thu.
Năm vị trí banner phổ biến trên website
Vị trí quyết định rất nhiều tới việc banner có được nhìn thấy không, và người xem phản ứng ra sao. Dưới đây là năm vị trí hay gặp nhất, mỗi vị trí phục vụ một mục đích khác nhau.
Hero banner
Hero banner là dải lớn nhất, xuất hiện đầu tiên khi người dùng vào trang. Nó nằm trong vùng above-the-fold (phần trang nhìn thấy ngay trước khi cuộn), nên đây là vùng có giá trị nhất về mặt thu hút chú ý. Phần lớn thời gian người xem dành cho một trang web tập trung ở phần trên, nên hero banner phải nói đúng điều quan trọng nhất ngay lập tức.
Ví dụ thực tế: một tiệm hoa muốn người xem biết ngay họ nhận đặt hoa theo yêu cầu, giao trong ngày. Hero banner đặt ảnh hoa đẹp kèm dòng “Đặt hoa theo yêu cầu, giao trong ngày tại TP.HCM” và nút “Đặt ngay” là đủ. Không cần người xem phải cuộn xuống hay tìm kiếm thêm thông tin. Bài riêng về hero section là gì và cách thiết kế giải thích chi tiết hơn về vùng này.
Banner giữa nội dung
Đặt xen kẽ trong bài viết hoặc giữa các phần nội dung của trang. Ưu điểm: người đọc đang tập trung, nên banner liên quan thường được chú ý tự nhiên hơn. Nhược điểm: nếu đặt sai chỗ, ví dụ chen vào giữa hai câu của một đoạn văn liền mạch, sẽ làm đứt mạch đọc và khiến người xem khó chịu.
Sidebar banner
Nằm ở cột phụ bên cạnh nội dung chính, thường theo chiều đứng. Phổ biến trong trang tin tức, blog, hay bảng giá. Người đọc cuộn xuống đọc bài nhưng sidebar vẫn hiển thị, nên banner có thể được nhìn thấy trong suốt quá trình đọc. Tuy nhiên, trên thiết bị di động thì sidebar thường bị đẩy xuống dưới nội dung chính, nên ít được xem hơn so với trên máy tính.
Footer banner
Đặt ở dải cuối trang, dùng cho thông điệp phụ: nhà tài trợ, đối tác, thông báo nhỏ, hay nhắc lại CTA cuối cùng trước khi người xem rời trang. Vì người dùng phải cuộn hết trang mới thấy, nên footer banner chỉ phù hợp cho những thông tin không cần thiết phải nổi bật ngay từ đầu.
Popup và slide-in banner
Popup xuất hiện giữa màn hình và che nội dung tạm thời. Slide-in trượt từ góc hay cạnh màn hình vào. Cả hai kích hoạt theo hành vi người dùng: sau vài giây vào trang, sau khi cuộn qua 50% nội dung, hay khi chuột di chuyển lên trên cùng.
Dùng đúng chỗ, popup thực sự hiệu quả cho việc thu thập email hay thông báo ưu đãi giới hạn thời gian. Dùng sai chỗ, xuất hiện ngay khi người dùng vừa vào trang và che hết nội dung, sẽ khiến người ta đóng tab ngay lập tức. Google cũng ghi nhận điều này và có thể xử lý các trang dùng popup gây khó chịu trên thiết bị di động.
Một số website kết hợp banner dạng carousel slider trong hero section để hiển thị nhiều thông điệp luân phiên. Đây cũng là một biến thể của banner giao diện, với ưu và nhược điểm riêng cần cân nhắc.
Chủ doanh nghiệp cần biết gì về banner
Không cần biết pixel hay định dạng file. Đó là việc của người thiết kế và lập trình viên. Nhưng có ba thứ chủ kinh doanh nên nắm rõ để banner không trở thành chỗ đẹp nhất trên trang mà bị lãng phí.
Thứ nhất: banner cần có thông điệp cụ thể. “Ảnh đẹp” không phải banner hiệu quả. Banner hiệu quả là ảnh đẹp kết hợp với câu chữ nói đúng điều người xem cần nghe, cộng thêm một nút hành động rõ ràng. Nhiều web có hero banner ảnh rất đẹp nhưng không có câu chữ hay nút nào, người xem ngắm xong rồi không biết làm gì tiếp.
Thứ hai: mỗi vị trí có mục đích riêng. Hero banner dành cho thông điệp quan trọng nhất của trang. In-content banner dành cho khuyến mãi liên quan tới nội dung đang đọc. Popup dành cho thu hút email hay thông báo có thời hạn. Nhét hết vào một loại hoặc dùng sai vị trí thì kết quả thường không như mong muốn.
Thứ ba: ai cập nhật banner sau khi web xong. Nhiều web làm xong thì banner đầu trang cứ giữ nguyên cả năm dù nội dung đã lỗi thời. Hỏi rõ ngay lúc làm web: bạn có thể tự thay ảnh banner không, hay mỗi lần phải gọi người làm web? Câu trả lời ảnh hưởng trực tiếp tới cách người làm web thiết kế hệ thống quản lý nội dung cho bạn.
Hiểu đúng các loại banner và vị trí của chúng là bước đầu. Bước tiếp theo là biết cách làm banner đúng từ thông điệp đến bố cục, và chọn đúng kích thước cho từng vị trí. Web22 có hai bài đi sâu hơn vào từng phần: cách làm banner website từng bước và bảng kích thước banner chuẩn theo từng vị trí.
Nếu bạn đang chuẩn bị làm web và cần tư vấn bố cục banner phù hợp với mục tiêu kinh doanh, xem qua dịch vụ thiết kế website của Web22 để biết Web22 tiếp cận phần này như thế nào.
Câu hỏi thường gặp
Banner là gì theo nghĩa đơn giản nhất?
Banner trên website là phần đồ họa đặt cố định trong bố cục trang, dùng để truyền tải thông điệp hoặc dẫn người xem tới hành động tiếp theo như tìm hiểu thêm, liên hệ, hay mua hàng.
Popup có phải banner không?
Có. Popup là dạng banner xuất hiện theo hành vi người dùng thay vì nằm cố định trong bố cục. Nó che nội dung tạm thời để người xem chú ý vào thông điệp hoặc hành động cụ thể, sau đó có thể đóng lại.
Chủ web cần phân biệt hai loại banner này như thế nào?
Một loại do chính chủ web tạo và kiểm soát toàn phần (thay đổi khi nào muốn). Loại kia là ô trống dành cho mạng quảng cáo điền vào tự động, chủ web chỉ đặt vị trí và thu tiền từ người xem quảng cáo trên trang của mình.
Website nhỏ có cần làm banner không?
Có, ít nhất là hero banner. Đây là phần người xem tiếp xúc đầu tiên và quyết định xem họ có ở lại hay không. Ngay cả trang web nhỏ cũng cần banner đầu trang để nói rõ mình làm gì và tại sao người xem nên quan tâm.