7 mẹo tạo header cho website để UI-UX thật ấn tượng

7 mẹo tạo header cho website để UI-UX thật ấn tượng

Header của website thường là nơi đầu tiên mà người dùng nhìn thấy. Nó mang đến ấn tượng đầu tiên về thương hiệu của bạn cho người dùng! Để giữ chân người dùng trong website của bạn, bạn cần có một header thật ấn tượng không chỉ trên trang chủ mà còn trên từng trang phụ của website, bởi vì đa số người dùng không truy cập vào trang chủ đầu tiên. Bài viết này gợi ý cho bạn cách tạo một header phù hợp.

1. Sử dụng một hình ảnh tạo cảm giác wow cho người dùng

Một hình ảnh tuyệt vời luôn tạo ấn tượng đầu tiên xuất sắc. Bạn có thể chọn một bức ảnh, video hoặc animation để tạo header cho web. Hình ảnh nên chọn lựa dựa trên mong muốn của người dùng. Ảnh làm header không chỉ là một bức ảnh đẹp, nó còn là đường dẫn vào tất cả nội dung trên trang và thậm chí là vào nội dung sâu hơn trong website. Vì vậy bạn phải liên kết nó với những yếu tố khác để tạo nội dung tối đa. Những yếu tố khác có thể xuất hiện trong header bao gồm:

  • Văn bản hoặc tiêu đề
  • Logo hoặc thương hiệu định danh
  • Nút liên hệ hoặc gọi điện thoại
  • Yếu tố điều hướng
  • Tìm kiếm

Hình ảnh được lựa chọn phải sắc nét, độ phân giải cao và có độ tương phản với các yếu tố khác như chữ hay các nút. Mọi người thích nhìn khuôn mặt, vì vậy bạn có thể đưa hình ảnh con người sử dụng hay thích thú với sản phẩm hoặc dịch vụ của bạn để thu hút. Nếu bạn muốn thể hiện portfolio dự án mới nhất của mình, hãy sử dụng một mẫu mock-up để làm nó thú vị và hấp dẫn hơn.

2. Kết hợp các yếu tố điều hướng

Bạn đừng nghĩ header và các yếu tố điều hướng là những yếu tố riêng biệt, chúng thường là một phần của cùng một concept thiết kế. Cho dù bạn thích điều hướng sang một menu đầy đủ hay sử dụng một menu ẩn, khi thiết kế header hãy luôn xem xét phần yếu tố điều hướng.

Khi thiết kế header và điều hướng, tốt nhất là bạn sử dụng mô hình menu điều hướng cố định. Như vậy dù header chính của bạn có nhỏ như thanh điều hướng hay lớn như cả màn hình, khi người dùng thoát khỏi header chính, họ vẫn có thể nhanh chóng tương tác với các chức năng của website. Yếu tố điều hướng trên header sẽ thực hiện vài điều bạn không ngờ đến. Bởi vì chúng thường là các bit văn bản hoặc biểu tượng cỡ nhỏ, chúng có thể giúp thiết lập hệ thống phân cấp trong header, giúp người dùng thấy cách tương tác với website.

3. Tạo thông điệp rõ ràng

Header chỉ là một hình ảnh tuyệt đẹp vẫn chưa đủ, header cần có một thông điệp. Thông điệp của header cần đáp ứng những điều sau:

  • Thể hiện nội dung người dùng cần hoặc mong đợi
  • Tất cả các yếu tố phải truyền đạt một thông điệp thống nhất và dễ hiểu
  • Phải hướng người dùng thực hiện một hành động hoặc click tiếp theo sau đó

Bạn cần kết hợp nhiều yếu tố để tạo một hiệu ứng tổng thể cho thông điệp trên header.

4. Sử dụng kiểu chữ lớn

Dùng chữ quá khổ là một cách ấn tượng để thêm điểm nhấn vào header. Dù nội dung nằm ở vị trí bình thường, bạn chỉ cần dùng chữ in đậm là đã có thể giúp người dùng chú ý vào vị trí đó trước khi bắt đầu đọc những thông tin khác. Có rất nhiều cách sắp đặt kiểu chữ rất đa dạng, bạn hãy dùng thử hai kiểu sắp đặt kiểu chữ cơ bản trong header.

  • Tùy chọn trang chủ với nhiều kiểu chữ hoặc nhiều kiểu ký tự ấn tượng hay khác biệt so với các trang khác.
  • Tùy chọn của tất cả các trang khác bên trong website nên dùng một kiểu framework đơn giản và đồng nhất với nhau.

5. Xem xét các kiểu đọc của mắt

Theo nghiên cứu của Nielsen Norman Group, thường có ba kiểu đọc trên website theo ba kiểu chuyển động mắt khác nhau. Cả ba kiểu đọc sau đó đều được điều chỉnh để chú ý vào phần mà người dùng tập trung khi đọc, theo thuật ngữ đơn giản là một nhóm các phần liên quan trong luồng hình ảnh.

Nghiên cứu về cách người dùng nhìn và tiếp nhận nội dung quan trọng bởi chúng có thể giúp bạn hiểu đặt một yếu tố như thế nào và ở đâu trong website và đặc biệt là trong header. Ba kiểu đọc như sau:

  • Kiểu chữ F: Người dùng đọc trên đầu trang, tiếp theo đến giữa trang và cuối cùng đọc theo chiều dọc phía bên trái theo hình chữ F
  • Sơ đồ Gutenberg: Người dùng bắt đầu đọc từ trên đầu trang từ trái sang phải, sau đó từ đầu trang bên phải đến cuối trang bên trái và đến hết trang (giống hình chữ Z).
  • Kiểu chữ Z: Mắt chuyển động qua lại liên tục từ trái sang phải và từ trên xuống dưới trang web tạo thành nhiều chữ Z.

Bạn đặt các yếu tố, đặc biệt là các yếu tố chính tại vùng mắt nhìn nhiều nhất trong các kiểu đọc phổ biến để tạo khả năng tương tác mạnh nhất với người dùng. Sau đó đặt hành động tiếp theo sau khi đọc vào nơi người dùng thích nhìn nhất.

6. Bao gồm một yếu tố có thể click

Hình ảnh header trên website của bạn nên có yếu tố click được (hay bấm được) để khuyến khích người dùng tương tác. Bạn có thể đặt nút gọi ở header hoặc đơn giản là đặt form thu thập địa chỉ email. Đừng đặt quá nhiều yếu tố click bởi có thể làm loãng thông điệp tổng thể, nhưng thêm một hành động đơn giản có thể giúp bạn tăng tương tác rất nhiều.

Bạn nên xem xét đưa vào header một hành động phù hợp với những nút luôn có sẵn trong thiết kế như nút thêm vào giỏ hàng, truy cập thông tin tài khoản hoặc nút liên hệ với chúng tôi.

7. Sử dụng các lớp đơn giản

Làm thế nào để bạn kéo tất cả các yếu tố được đề cập phía trên (hay các nhóm nhỏ của chúng) lại với nhau trong header? Hãy dùng các lớp đơn giản. Một header tốt nhất là một header khiến người dùng ấn tượng, thường trông đơn giản. Chỉ cần tuân theo các quy tắc thiết kế và dùng một yếu tố chủ đạo để lôi kéo người dùng, đồng thời dùng các kỹ thuật hỗ trợ thiết kế để giúp header có các hành động bạn muốn.

Phân lớp các đối tượng là một cách để đạt điều này. Các lớp đơn giản không chỉ giúp bạn tạo các không gian riêng biệt cho từng yếu tố mà còn giúp người dùng có sự tập trung thị giác. Người dùng sẽ biết phải bắt đầu từ đâu và nên tập trung vào những yếu tố nào. Không phải thiết kế header nào cũng sẽ thành công ngay lần đầu tiên. Cần nhiều sửa đổi và thử nghiệm để biết một nhóm các yếu tố phối hợp hiệu quả và làm hài lòng người dùng ở đầu trang.

Tổng kết

Mặc dù việc tạo header cho trang chủ thường được ưu tiên trong quá trình thiết kế website, nhưng bạn cũng cần chú trọng làm header cho các trang bên trong. Nội dung trên các trang bên trong có thể cũng quan trọng như trang chủ vì nhiều người dùng sẽ truy cập vào trang web của bạn dựa trên tìm kiếm, không phải dựa trên nhập URL và theo các liên kết điều hướng như hình dung khi thiết kế. Bạn cần có cả hai loại header hài hòa trong thiết kế, thống nhất và có hình ảnh thu hút người dùng khi họ truy cập website của bạn.