Carousels và những lợi ích của Carousels trong ngành thiết kế web

Những tính năng trình chiếu băng chuyền trên web đã không còn xa lạ với chúng ta. Trong thực tế, xu hướng này đã phát triển trong suốt 5-10 năm qua với sự hỗ trợ ngày càng tốt từ các trình duyệt. Nhưng liệu băng chuyền hình ảnh có thực sự đáng để đầu tư công sức? Những lợi ích mà chúng mang lại là gì và làm thế nào để sử dụng chúng một cách hiệu quả trong giao diện web?

Tôi muốn chia sẻ xu hướng chung, ví dụ sống và ý tưởng cho các nhà thiết kế web quan tâm đến băng chuyền hình ảnh. Các trình chiếu động này đã gây tranh luận rất nhiều, nhưng tôi tin rằng chúng có giá trị khi được áp dụng đúng cách.

Băng chuyền hình ảnh trong thương mại điện tử

Ngành thương mại điện tử sử dụng rất nhiều băng chuyền xoay trên trang chủ và trang sản phẩm. Mục tiêu là để duy trì thông tin rõ ràng với hình ảnh và văn bản, tạo ra câu chuyện độc đáo nhưng có giá trị để giúp bán sản phẩm.

Có hai vị trí chính cho một băng chuyền sản phẩm thương mại điện tử:

  1. Trên trang chủ của một cửa hàng
  2. Trên trang sản phẩm

Cả hai vị trí này có mục tiêu chung là bán sản phẩm một cách trực quan.

Ví dụ 1: Au Lit Fine Linens – trang chủ

Hãy xem trang chủ của Au Lit Fine Linens, nơi sử dụng băng chuyền tự động toàn màn hình để hiển thị các sản phẩm khác nhau như chăn, gối và ga trải giường.
Au Lit Fine Linens

Những hình ảnh chiếm toàn bộ chiều rộng của trang chủ và xuất hiện tốt trên nếp gấp. Thật ra, thanh trượt này là điều đầu tiên thu hút sự chú ý của người dùng khi họ truy cập trang web. Mỗi slide dẫn đến trang khác trên trang web để hướng dẫn khách hàng trải nghiệm mua sắm.

Ví dụ 2: Vỏ điện thoại Eden – trang sản phẩm

Một ví dụ khác là trang sản phẩm vỏ điện thoại Eden. Trang này sử dụng một thanh trượt tự động để trưng bày hình ảnh của sản phẩm.
Vỏ điện thoại Eden

Tôi thấy rằng đây là một cách sử dụng hình ảnh có phần “quá nhiều” trong thế giới thương mại điện tử. Khi nhìn vào một sản phẩm, tôi muốn có sự kiểm soát trong việc chuyển đổi giữa các hình ảnh.

Một lựa chọn tốt hơn là tạo một bộ sưu tập hình ảnh có sự kiểm soát được trao cho người dùng. Ví dụ, trang Design by Humans sử dụng hình thu nhỏ cho mỗi bức ảnh, điều này gây ấn tượng hơn nhiều và trao quyền kiểm soát nhiều hơn cho người dùng.

Băng chuyền danh mục đầu tư

Trang web danh mục đầu tư trực tuyến có một tính đặc biệt hơn bởi các slide không nhất thiết phải chuyển đến trang khác. Một số slide chỉ nhằm mục đích thể hiện thông tin trực quan về công việc.

Ví dụ 1: Biboun – trang chủ

Nghệ sĩ người Pháp Biboun sử dụng một băng chuyền trên trang chủ để trưng bày các đoạn tác phẩm nghệ thuật. Các slide riêng lẻ dẫn đến các trang nội bộ trong danh mục đầu tư với đầy đủ dự án và nhiều hình ảnh.
Biboun

Đây là cách tốt nhất để tạo một thanh trượt trên trang web danh mục đầu tư. Việc hiển thị một danh sách công việc ngẫu nhiên là vô nghĩa trừ khi các tác phẩm cụ thể đó có lý do để được giới thiệu.

Tất cả các slide trong thanh trượt của Biboun đều tinh tế và không chiếm nhiều không gian. Mặc dù tôi biết rằng có người không thích trình chiếu tự động vì lý do hợp lý, nhưng với bố cục tối giản như vậy, tôi thấy khó có lý do để phản đối tính năng thiết kế này.

Ví dụ 2: Trang web của Aaron Blaise – trang chủ

Tôi thích trang chủ của trang web của Aaron Blaise vì anh ấy giới thiệu công việc của mình như một danh mục đầu tư, nhưng chủ yếu sử dụng trang web này để bán video nghệ thuật của anh ấy. Aaron Blaise đã làm việc tại Disney trong một vài thập kỷ và anh ta có kỹ năng để chứng minh điều đó.
Trang web của Aaron Blaise

Mặc dù thanh trượt trang chủ trên trang web của anh ấy tự động xoay, tôi không thấy nó gây khó chịu hoặc không phù hợp. Mỗi slide đi kèm với một chút nội dung liên quan đến hình ảnh và nó giúp Aaron thu hút sự chú ý vào bài học video mới nhất của anh ấy dạy cho các nghệ sĩ trẻ cách làm chủ các kỹ năng cụ thể.

Một băng chuyền danh mục đầu tư tốt tập trung vào hình ảnh và giúp du khách tìm hiểu sâu hơn về trang web. Nếu bạn có thể kết hợp được cả hai yếu tố này, tôi chắc chắn rằng bạn sẽ không phản đối một tính năng như thế này trong trang web danh mục đầu tư cá nhân.

Xu hướng thiết kế chung

Nếu bạn xem qua một số ví dụ mà tôi đã đề cập, bạn sẽ thấy có hai loại thanh trượt khác nhau: toàn màn hình và chiều rộng cố định.

Lựa chọn phong cách thường liên quan đến bố cục và số lượng nội dung. Nếu một bố cục chiếm toàn bộ chiều rộng của trang, thì cũng đồng nghĩa với việc mở rộng thanh trượt. Tuy nhiên, điều này cũng yêu cầu bạn tìm kiếm hình ảnh chất lượng cao mà vẫn trông tốt trên màn hình độ phân giải lớn.

Cá nhân tôi thích phong cách chiều rộng cố định như bạn sẽ thấy trong hai ví dụ danh mục đầu tư nghệ thuật. Nó dễ kiểm soát hơn rất nhiều và các slide thường không cao bằng, giúp người dùng dễ dàng bỏ qua chúng nếu họ muốn.

Ngoài ra, hãy xem xét giá trị của việc tự động chuyển đổi slide và khó khăn mà người dùng có thể gặp phải khi hiểu nội dung này. Một nghiên cứu tình huống tuyệt vời từ Nhóm Nielsen Norman cho thấy rằng không có tính năng tự động chuyển đổi slide là tốt hơn.

Tôi ủng hộ việc tiếp cận này vì nó chiếm ít tài nguyên bộ nhớ với ít hình ảnh động và chuyển động trong trình duyệt. Hầu hết mọi người đều không thích băng chuyền tự động xoay và bạn luôn nên phục vụ khán giả của mình.

Tuy nhiên, tôi không thể nói rằng không bao giờ nên sử dụng tính năng tự động chuyển đổi slide, đặc biệt là với các thanh trượt tĩnh mà không có nhiều lượt xem. Bạn cũng cần làm cho slide đầu tiên của bạn là quan trọng nhất vì nhiều người dùng sẽ không xem slide tiếp theo. Quyết định có nên tự động chuyển đổi slide hay không là một lĩnh vực thử và sai.

Những điều cần tránh bằng mọi giá

Có một điều quan trọng mà tôi nghĩ rơi vào danh mục “tránh bằng mọi giá”. Hãy nhìn hoặc nhấp vào ảnh chụp màn hình dưới đây và thử đoán xem nó có thể là gì.
Trang web cafe Yozenn

Trang web cafe Yozenn sử dụng thanh trượt tiêu đề toàn màn hình. Nó không tự động xoay, điều này tốt, tuy nhiên các slide không phục vụ mục đích nào khác ngoài trang trí.

Hình ảnh không liên kết bất kỳ nơi nào và chúng chỉ vẫn là phần của nền trang chủ.

Xin lưu ý rằng hình ảnh trong tiêu đề của bạn nên chiếm toàn bộ trang, tuy nhiên nếu chúng không liên kết bất kỳ nơi nào hoặc không cung cấp thông tin chính hãng, hãy tránh biến chúng thành băng chuyền.

Tính năng tương tác

Cách người dùng điều hướng một băng chuyền ảnh ảnh hưởng đến thiết kế đó. Có nhiều phong cách điều hướng phổ biến, nhưng đây là những phổ biến nhất:

  • Điều hướng dựa trên dấu chấm
  • Điều hướng dựa trên mũi tên
  • Điều hướng dựa trên hình thu nhỏ
  • Liệt kê các liên kết hoặc các mục tiêu đề

Phong cách điều hướng phổ biến nhất là điều hướng dựa trên dấu chấm, được sử dụng trên hàng trăm trang web hiện đại.

Ví dụ 1: Chic ở nhà – trang chủ

Chic ở nhà là một ví dụ tuyệt vời về việc sử dụng ba chấm nhỏ bên dưới thanh trượt để biểu thị điều hướng. Mỗi hình ảnh tự động chuyển đổi và dấu chấm liên quan trong chuỗi bị lấp đầy bởi màu đen. Hai dấu chấm trống khác biểu thị các slide tiềm năng cho người dùng duyệt.
Chic ở nhà

Đây là một mẫu thiết kế phổ biến mà nhiều người dùng đã quen thuộc. Nó thuộc cùng loại với menu hamburger mà nhiều nhà thiết kế không thích. Tuy nhiên, người dùng đã quen thuộc với nó và theo bản năng biết cách sử dụng.

Ví dụ 2: Chu kỳ thuần túy – trang chủ

Trang chủ của Chu kỳ thuần túy sử dụng một kết hợp điều hướng dấu chấm và mũi tên. Người dùng có thể điều hướng tiến và lùi, nhưng cũng thấy “tổng thể” dẫn đường thông qua các dấu chấm liên kết ở phía dưới.
Chu kỳ thuần túy

Tôi thực sự tìm thấy các liên kết dấu chấm trong ví dụ này khó thấy. Khó khăn với các slide trực quan là nhiều yếu tố không dễ phân biệt, vì vậy mũi tên và dấu chấm có thể dễ dàng trộn vào nền.

Ví dụ 3: IGN – trang chủ

Trên trang chủ của IGN, bạn sẽ tìm thấy một băng chuyền tự động sử dụng liên kết tiêu đề cho điều hướng. Điều này rất phổ biến đối với các nhà xuất bản muốn bán tiêu đề hơn là sản phẩm. Mỗi liên kết đến slide riêng lẻ mà cuối cùng dẫn đến trang bài viết.
IGN

Các liên kết này có thể được thay thế bằng hình thu nhỏ, hoặc thậm chí bao gồm các hình thu nhỏ từ mỗi bài viết. Tuy nhiên, đừng quên rằng khía cạnh hình ảnh được hiển thị trong băng chuyền, vì vậy bỏ qua hình thu nhỏ thực sự tiết kiệm không gian.

Mỗi trang web có thể sử dụng các loại điều hướng khác nhau vì những lý do khác nhau. Hãy xem xét mục tiêu của khách truy cập của bạn và thiết kế cho trải nghiệm người dùng tốt nhất.

Chìa khóa chính

Bạn nên nhắm đến sản xuất giá trị chính hãng hoặc thông tin thêm với một băng chuyền. Đây có thể là thông tin mà khách truy cập không có trước đây hoặc có thể dẫn đến các trang mà khách truy cập có thể không tìm thấy.

Hãy cố gắng tránh băng chuyền tự động và chỉ sử dụng chúng trên các trang đích chính (ví dụ: trang chủ). Miễn là băng chuyền có một mục đích và không giống quảng cáo, thiết kế của bạn sẽ hiệu quả.

Nếu bạn đang tìm kiếm thêm thông tin về băng chuyền web, hãy xem một số bài viết sau:

  • Băng chuyền của Brad Frost
  • 8 Yêu cầu UX để thiết kế băng chuyền trang chủ thân thiện với người dùng
  • Khả năng sử dụng băng chuyền: Thiết kế giao diện người dùng hiệu quả cho các trang web có quá tải nội dung

Đây là bài viết mang tính chất tham khảo và không nhất thiết thực hiện giống y hệt với nội dung gốc.

Related Posts

Cách tạo mẫu đăng ký đăng nhập đẹp cho website

Tất cả trên web hiện đại, chúng tôi đang thấy số lượng ngày càng tăng cho đầu vào của người dùng. Chúng bao gồm giỏ mua hàng,…

Infographics cho các nhà thiết kế web Thông tin bạn cần biết

Nhắc đến Infographic, chúng ta không thể không nhắc đến một cách tuyệt vời để biến dữ liệu nhàm chán thành đồ họa thú vị, dễ tiêu…

Leave a Reply

Your email address will not be published. Required fields are marked *