facebook pixel

Khi nào nên sử dụng Module Tab/ Accordions và Single page?

7 phút đọc
Khi nào nên sử dụng Module Tab/ Accordions và Single page?

Thông tin được hiển thị trên website với nhiều cách khác nhau. Chúng ta có thể lựa chọn hiển thị tất cả nội dung trong một trang hoặc chia ra nhiều phần để hiển thị. Việc sử dụng những phương pháp trình bày nào phụ thuộc vào hoàn cảnh và yêu cầu của người dùng. JAMstack Vietnam sẽ cung cấp khái niệm Module Tab, Accordions, Single Page và các trường hợp tương ứng với từng loại.

1. Module Tab

Tương tự như chiếc ngăn kéo, mỗi tab của Module Tab sẽ chứa đựng những thông tin khác nhau. Khi một tab được mở ra thì nội dung của nó sẽ hiển thị và nội dung trong các tab còn lại sẽ ẩn đi.

1.1 Trường hợp nên sử dụng Module Tab

  • Khi người dùng không cần so sánh, đối chiếu nội dung.

  • Thông tin cần được sắp xếp, phân loại vào từng hạng mục, giúp người dùng dễ tìm kiếm và tiếp nhận thông điệp.

  • Khi người dùng đọc lướt thông tin, phân chia nội dung vào tab giúp họ dễ đọc hơn.

1.2 Một số lưu ý khi dùng Module Tab

  • Tránh mất cân bằng nội dung: Sự mất cân bằng thể hiện ở việc có tab kéo xuống quá nhiều nội dung nhưng cũng có tab rất ít nội dung. 

    Khi nào nên sử dụng Module Tab/ Accordions và Single page?
    Hãy phân chia điều nội dung trên từng Tab.
  • Xác định tab mặc định: Khi mở trang, tab nào sẽ được hiển thị ở chế độ mặc định? Điều này rất quan trọng, cần được UX Writer quan tâm.

  • Tránh sử dụng tab trên nhiều hàng: Tab được hiển thị trên nhiều hàng cùng lúc sẽ tạo sự phức tạp và rất khó để các section liên hệ với nhau. Trước đây, Amazon cũng dùng tab trên nhiều hàng, nhưng sau này họ đã bỏ và chuyển về Single Page.

Sử dụng quá nhiều tab có thể làm cho người dùng bị rối mắt
Sử dụng quá nhiều tab có thể làm cho người dùng bị rối mắt
  • Tên tab và đánh dấu tab: Tên các tab nên có độ dài phù hợp và nhất quán với nhau. Bên cạnh đó, chúng nên được đổi màu để phân biệt tab nào đang được mở ra. Bạn có thể xem ví dụ website Tân Thanh dưới đây.

Sử dụng màu sắc để đánh dấu tab đang mở giúp người dùng dễ theo dõi nội dung hơn
Sử dụng màu sắc để đánh dấu tab đang mở giúp người dùng dễ theo dõi nội dung hơn

2. Accordions

Accordions là hiệu ứng chỉ hiển thị một phần nội dung, sau khi nhất chuột vào icon sẽ hiển thị phần nội dung còn lại. Phương pháp này thường được dùng để hiển thị chi tiết một quy trình hay những câu hỏi thường gặp.

2.1 Trường hợp nên sử dụng Accordions

  • Accordions rất tiện lợi cho Responsive Design khi “đóng gói” được các tab trình bày theo hàng ngang trên bản desktop.

  • Trình bày trích đoạn lời ngỏ của chủ doanh nghiệp. Trong trường hợp thông điệp quá dài nếu hiển thị tất cả sẽ khó để đẹp layout. Hơn nữa, khi người dùng trông thấy quá nhiều chữ, có khả năng họ mất hứng thú.

  • Những nội dung ít quan trọng hơn, khi dùng Accordions, người dùng có quyền chọn đọc hay không đọc. Họ có thể tập trung vào những thông tin quan trọng hơn.

  • Những website sáng tạo, nghệ thuật. Accordions giúp UX Writer nhường không gian cho các yếu tố hình ảnh, hiệu ứng để gây ấn tượng với người dùng.

    Accordions là hiệu ứng chỉ hiển thị một phần nội dung, sau khi nhất chuột vào icon sẽ hiển thị phần nội dung còn lại

    Accordions là hiệu ứng chỉ hiển thị một phần nội dung, sau khi nhất chuột vào icon sẽ hiển thị phần nội dung còn lại

2.2 Một số lưu ý khi dùng Accordions

  • Sử dụng icon phù hợp: Thông thường những icon mũi tên xổ xuống, dấu +/-, >/< sẽ được dùng để biểu đạt phần nội dung có chứa Accordions. Các icon nên thay đổi phù hợp tương ứng với trạng thái rút gọn/mở rộng nhằm mang lại trải nghiệm tốt hơn cho người dùng.

  • Xác định hướng chuyển động: Khi người dùng click vào, hiệu ứng động đi kèm cần chính xác, mượt mà kết hợp với sự thay đổi icon. Ví dụ, trạng thái rút gọn của Accordion có chứa icon +. Khi người dùng thực hiện nhấp chuột, icon sẽ chuyển về -; đồng thời, thông tin được mở ra và ngược lại.

  • Hiển thị các nội dung còn lại: Khi một phần trong Accordion mở ra và người dùng chọn mở các phần khác thì phần đầu tiên sẽ vẫn giữ nguyên hay tự động đóng lại? Điều này phụ thuộc vào ý đồ của Designer và Doanh nghiệp. Đối với Haseca, các phần nội dung mang tính chất bổ trợ cho nhau nên phần Accordions có thể mở ra cùng lúc, giúp người dùng lấy được nhiều thông tin. Ngược lại, thông tin của LANTH có tính song song và có sự tách biệt về mặt ý nghĩa nên JAMstack Vietnam chọn phương án mở từng phần.

Lưu ý sử dụng icon phù hợp khi dùng Accordions
Lưu ý sử dụng icon phù hợp khi dùng Accordions
Khi người dùng click vào, hiệu ứng động đi kèm cần chính xác, mượt mà kết hợp với sự thay đổi icon
Khi người dùng click vào, hiệu ứng động đi kèm cần chính xác, mượt mà kết hợp với sự thay đổi icon

3. Single Page

Single Page là cách trình bày nội dung cơ bản, đưa tất cả thông tin hiển thị trên cùng một trang. Một số chuyên gia cho rằng Single Page dễ điều hướng và thu về nhiều thông tin hơn do thói quen sử dụng website của người dùng.

Trường hợp nên sử dụng Single Page

  • Những thông tin cần được nhìn thấy đồng thời hoặc mở cùng lúc để đối chiếu. 

  • Khi website của bạn không chứa quá nhiều nội dung (hình ảnh và văn bản). Trong trường hợp có quá nhiều nội dung, Single Page có thể không tối ưu SEO và khiến trang tải chậm lại.

  • Các trang thương mại điện tử, mạng xã hội hoặc Landing page cần người dùng xem và thực hiện hành động ngay tại trang đó. Việc chia tab có thể làm ngắt quãng trải nghiệm của họ. 

  • Nội dung liên hoàn cần người dùng đọc xuyên suốt, không thể phân chia thành tab hoặc chia nhỏ.

Kết

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp, uy tín và chất lượng, hãy liên hệ ngay với JAMstack Vietnam. Chúng tôi có đội ngũ nhân viên giàu kinh nghiệm, sáng tạo và nhiệt tình, sẵn sàng mang đến cho bạn những giải pháp thiết kế website hiện đại, tối ưu và phù hợp với nhu cầu của bạn.

JAMstack Vietnam cũng cung cấp các dịch vụ khác như UX Design, UX Writing, SEO, Marketing Online và nhiều hơn nữa. Hãy truy cập website của chúng tôi để biết thêm chi tiết và yêu cầu báo giá miễn phí. JAMstack Vietnam - Đối tác thiết kế website tin cậy của bạn.

BẤM VÀO ĐÂY để nhận tư vấn 1-1 từ đội ngũ chuyên nghiệp của chúng tôi.

share on facebook share on twitter share on pinterest
BÀI VIẾT LIÊN QUAN
Chi phí thiết kế website chuyên nghiệp trị giá bao nhiêu? 5 yếu tố quyết định chi phí của một website
Chi phí thiết kế website bao nhiêu? Thiết kế website có đắt không? Căn cứ nào để đánh giá website đắt hay rẻ? Bài viết này sẽ giải đáp về 5 yếu tố ảnh hưởng tới chi phí thiết kế website, các loại website thường gặp và sự khác nhau giữa website vài triệu và website vài chục triệu là như thế nào?
17 phút đọc
Chi phí thiết kế website trọn gói theo yêu cầu có đắt không?
Liệu việc đầu tư vào một dự án thiết kế website có đắt đỏ và có xứng đáng với các lợi ích mà nó mang lại? Để trả lời cho câu hỏi này, chúng ta cần xem xét các yếu tố ảnh hưởng đến chi phí thiết kế website, từ quy mô dự án, tính năng yêu cầu, đến mức độ tùy chỉnh và chất lượng dịch vụ. Theo dõi chi tiết bài viết dưới đây.
8 phút đọc
Giá thiết kế website là bao nhiêu? Cách tính chi phí web
Việc có một trang web chất lượng đã trở thành một phần quan trọng đối với các doanh nghiệp kinh doanh. Khi phát triển một website, việc xác định giá thiết kế website là bao nhiêu không phải lúc nào cũng dễ dàng, bởi nó phụ thuộc vào nhiều yếu tố phức tạp và đa dạng. Cùng tìm hiểu chi tiết về giá website trong bài viết dưới đây.
7 phút đọc
Conversion Rate - 10 Sai Lầm Khiến Tỷ Lệ Chuyển Đổi Trên Website Ecommerce Kém
Conversion rate (tỷ lệ chuyển đổi) là một yếu tố đánh giá quan trọng trong kế hoạch marketing. Nếu bạn không thể khiến khách hàng thực hiện hành động thì mọi nỗ lực xây dựng website, quảng cáo sẽ trở nên vô nghĩa. Vậy làm cách nào để nâng cao tỷ lệ chuyển đổi trên website. Theo dõi bài viết dưới đây để tìm hiểu về Conversion rate và các cách tối ưu chúng một cách hiệu quả.
13 phút đọc

ĐỂ LẠI THÔNG TIN CẦN TƯ VẤN, CHÚNG TÔI SẼ PHẢN HỒI TRONG VÒNG 24H

Số điện thoại
0977 62 60 65
Văn phòng đại diện chính thức
Tp. Hồ Chí Minh
© 2020 Công ty Cổ Phần Flame Media.
Nhãn hiệu JAMstack Vietnam đã chính thức được cấp bằng bản quyền hợp pháp bởi Cục Sở hữu trí tuệ, Bộ Khoa học - Công nghệ vào ngày 25/08/2023. GPDKKD số 0316311107 do sở KH & ĐT TP.HCM cấp ngày 04/06/2020.
Email: hello@jamstackvietnam.com
Site map
scroll to top
message phone zalo