Carousels hình ảnh trong thiết kế web - Lợi ích và thực tiễn tốt nhất

Không thiếu tính năng trình chiếu băng chuyền trên web Trên thực tế, xu hướng này không làm được gì ngoài phát triển trong 5-10 năm qua với nhiều hỗ trợ trình duyệt hơn bao giờ hết. Nhưng băng chuyền hình ảnh có thực sự đáng nỗ lực? Những loại lợi ích nào họ tạo ra và làm thế nào để sử dụng chúng một cách hiệu quả trong bố cục?

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 thanh trượt động này được tranh luận rất nhiều, nhưng tôi nghĩ chúng tăng giá trị khi được chế tạo trong bối cảnh phù hợp.

Băng chuyền sản phẩm cho thương mại điện tử

Thế giới thương mại điện tử có đầy đủ các băng chuyền xoay trên các trang chủ và trang sản phẩm. Mục tiêu là để duy trì mật độ thông tin rõ ràng với hình ảnh và văn bản đó kể một 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 thanh trượt sản phẩm thương mại điện tử:

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

Cả hai đều hoạt động khác nhau nhưng phục vụ cùng một mục tiêu - 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, rằng sử dụng băng chuyền tự động toàn màn hình để trưng bày các sản phẩm khác nhau, chẳng hạn như chăn, gối và ga trải giường.

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

Thanh trượt này có thể là một chút đáng sợ khi lần đầu tiên hạ cánh trên trang, nhưng với nút liên kết và lớp phủ văn bản nó cũng có thể rất đáng khích lệ đối với những du khách chỉ muốn lặn và mua sắm.

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

Bạn có thể xem một ví dụ cụ thể hơn trên trang sản phẩm vỏ điện thoại Eden. Nó sử dụng một thanh trượt tự động để khoe hình ảnh của sản phẩm.

Tôi thấy những điều này là một chút “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 trở thành kiểm soát chuyển đổi giữa các hình ảnh.

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

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

Danh mục đầu tư trang web trực tuyến là một chút khác nhau bởi vì các slide đừng luôn nhấp qua trang khác. Đúng là một số người sẽ dẫn đến một nghiên cứu trường hợp hoặc viết về một dự án, nhưng nhiều băng chuyền trên các trang web danh mục đầu tư chỉ nhằm mục đích thể hiện công việc trực quan.

Ví dụ 1: Biboun - trang chủ

Nghệ sĩ người Pháp làm việc dưới cái tên Biboun có một trượt băng chuyền trên trang chủ gồm các đoạn của 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ư bao gồm toàn bộ dự án với nhiều ảnh.

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

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

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

Tôi thực sự thích ví dụ được tìm thấy trên trang web của Aaron Blaise bởi vì anh ấy giới thiệu công việc của mình như là 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 đó.

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ó vô cùng khó chịu hoặc không đúng chỗ. Mỗi slide có 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ư tuyệt vời tập trung vào hình ảnh, và dẫn du khách đi xa hơn vào trang web. Nếu bạn có thể có được hai điều này thì tôi sẽ không chống lạ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 nhìn vào một số ví dụ trên của tôi, bạn sẽ nhận 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.

Những lựa chọn phong cách thường liên quan đến bố cục và bao nhiêu nội dung nó có thể giữ. Nếu một bố cục kéo dài toàn bộ chiều rộng của trang thì cũng có nghĩa là mở rộng thanh trượt. Nhưng điều này cũng buộc bạn phải tìm hình ảnh chất lượng cao mà vẫn nhìn tốt ở toàn màn hình 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. đó là dễ kiểm soát hơn nhiều, và họ thường xuyên không cao bằng - giúp khách truy cập dễ dàng hơn đơn giản là bỏ qua chúng nếu họ muốn.

Cũng xem xét giá trị của các slide tự động tiến, và nó khó như thế nào để người dùng nắm bắt nội dung này. Có một nghiên cứu tình huống tuyệt vời của Nhóm Nielsen Norman cho thấy rằng nó tốt hơn không có thanh trượt tự động tiến.

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

Tuy nhiên tôi không thể nói rằng nó không bao giờ đáng để thêm một thanh trượt tự động tiến, đặc biệt là với các thanh trượt tĩnh bạn không có nhiều lượt xem, và bạn cũng cần phải 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 tiến hành slide tiếp theo. Quyết định có nên tự động trượt một thanh trượt hay không là một khu vực thử và sai.

Những gì cần tránh bằng mọi giá

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

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 thật tuyệt, tuy nhiên các slide cũng vậy không phục vụ mục đích nào khác ngoài trang trí.

Những hình ảnh không liên kết bất cứ nơi nào, và họ khoe một số ít sản phẩm. Tất cả họ chỉ có thể là thêm vào nền trang chủ không có thanh trượt để tiết kiệm sự nhầm lẫn và thêm kilobyte của JavaScript.

Tôi cho rằng tính năng trượt nền này không mang lại nhiều giá trị cho một trang web vốn đã chật chội. Nếu hình ảnh có liên kết hoặc văn bản kèm theo thì ít nhất chúng sẽ phù hợp hơn.

Vui lòng sử dụng hình ảnh trong phần tiêu đề của bạn chiếm toàn bộ trang, tuy nhiên nếu chúng không liên kết bất cứ nơi nào hoặc cung cấp bất kỳ thông tin chính hãng sau đó đừng 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 hưởng đến chính thiết kế. Có một nhiều phong cách điều hướng, 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 mũi tên
Điều hướng hình thu nhỏ
Liệt kê các liên kết hoặc các mục tiêu đề

Phổ biến nhất là điều hướng điểm mà bạn sẽ tìm thấy trên hàng trăm trang web hiện đại.

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

Chic tại nhà là một ví dụ tuyệt vời bằng cách 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 xoay qua 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.

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

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

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

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.

Những 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 câu chuyện - tuy nhiên 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.

Các trang web khác nhau sử dụng các kiểu điều hướng khác nhau vì những lý do khác nhau. Xem xét (các) 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.

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 (trang chủ là một ví dụ). 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 nên làm tốt.

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