Chia sẻ kinh nghiệm UI/UX Phần 3: Carousel trong thiết kế

18 tháng 1, 2019Tiếng Việt

ui/uxsharing

Carousel là một từ tiếng Anh rất phổ biến trong thiết kế. Nếu dịch theo từ điển thì nó có nghĩa là trò cưỡi ngựa chạy vòng tròn trong công viên mà trẻ con rất thích thú. Tuy nhiên, người dùng có thực sự thấy thích chúng như lũ trẻ không nhỉ?

Carousel là gì?

Có nhiều kiểu Carousel khác nhau, và cũng có nhiều tên gọi mà chúng na ná nhau như slider, gallery, swiper hay thậm chí là banners, và sẽ có nhiều bạn hiểu theo nhiều cách khác nhau, tóm lại là trong bài này mình sẽ nói đến cái carousel như thế này:

Ảnh từ Dribbble

Ảnh quay từ ứng dụng

Lợi ích của Carousel

Lợi ích lớn nhất của việc sử dụng Carousel là cho phép ta đặt rất nhiều nội dung, có thể là vô tận, ấy vậy mà chỉ chiếm một không gian duy nhất trên màn hình, với hy vọng sẽ có nhiều cơ hội hơn cho người dùng nhìn thấy nhiều thứ hay ho hơn. Vì vậy carousel thường sử dụng hình ảnh lớn, bắt mắt, có những nội dung quan trọng, những thứ xịn nhất để giới thiệu. Và với tính chất quan trọng như vậy, chúng thường được đặt ở vị trí trên cùng, đầu tiên, rất lớn trong trang/màn hình chủ.
Lợi ích thứ hai là tiết kiệm rất nhiều thời gian sáng tạo (🤔), thực sự rất nhanh chóng và đơn giản để cập nhật carousel, thậm chí chẳng cần viết code, chẳng cần update, thay đổi từ xa, ai cũng thay đổi được carousel, designer tha hồ vẽ vời trên đó, marketing, sale, manager cũng tha hồ đẩy nội dung mỗi khi có gì đó mới tức thì.

Vâng nó rất phổ biến, từ lúc tập tọe code mình cũng phải làm cả trăm cái carousel rồi ấy chứ, ở mọi nơi, từ desktop web, mobile web, landing page, mobile app,… đã từng mò mẫm và mê mẩn những hiệu ứng 3D, lật gương, đổ bóng, … của các thư viện open source ngàn sao trên Github.

Tuy nhiên từ khi bắt đầu làm mobile app mình bắt đầu cực lực phản đối phương pháp rất “phổ biến” này, vì sau ư? vì sau khi khi nhìn lại mình trong quá khứ, trừ lúc phải tạo ra nó, còn lại mình chẳng hề đếm xỉa đến cái carousel của bất kỳ app/website nào bao giờ cả. Đặc biệt trong app, mình chỉ thấy Carousel thường tốn diện tích mà không mang lại chức năng/lợi ích gì thực sự cả.

Trang shouldiuseacarousel.com

Thực tế là

Một thực tế phũ phàng khi mình quan sát người dùng sử dụng app, khi mở app họ thường có xu hướng là trượt rất nhanh xuống phần dưới, hoặc quyệt phải quyệt trái lung tung beng, và có xu hướng bỏ qua ngay những bức ảnh lớn (phần này có một bài của ứng dụng Google Translator đã từng chia sẻ khá hay, họ nghiên cứu và nhận thấy rằng, người dùng ngày nay có hành động bỏ qua những hình ảnh lớn vì cảm giác chúng thường chứa những nội dung quảng cáo, dù rõ ràng họ ra mắt tính năng cực hay).
Một phần cũng vì Carousel được lạm dụng sử dụng quá nhiều với những quảng cáo nhảm không liên quan, nội dung không gây hứng thú dẫn tới thói quen lơ cái carousel đi, mình nhận ra chính bản thân mình bị vấn đề này, người dùng sử dụng internet nhiều sẽ tự động biết nên bỏ qua phần nào, đâu là quảng cáo, đâu là thứ nên đọc.
Dễ bị nhầm tưởng là chỉ có một bức ảnh duy nhất, nếu bạn làm không đủ tốt hoặc thời gian chạy carousel không đủ nhanh, người dùng sẽ tưởng đó chỉ là một bức ảnh bình thường nên sẽ không tương tác, chẳng có ai lại ngồi chờ carousel chạy cả, hoặc đơn giản là họ quá lười để trượt xem các trang tiếp theo, vì vậy về lợi ích thể hiện được nhiều nội dung đã thất bại vì các nội dung ở các trang sau hầu như chẳng bao giờ có cơ hội nhìn thấy ánh mặt trời. Mà nếu làm chạy quá nhanh thì cũng không ổn, ai mà kịp đọc. Haiz!!!
Nếu đã một lần thấy không thích, vì chẳng may có nội dung gì đó người dùng không hài lòng, khuyến mại không hời chẳng hạn, những lần sau dù bạn có đăng nội dung rất hay chăng nữa, mình cũng sẽ bỏ qua thôi, một lần mở mà mất tín, vạn lần mất tin.

Thậm chí có một anh zai @jared_w_smith còn strict hơn mình đến mức mở hẳn một website http://shouldiuseacarousel.com/, chỉ để hiện thị một cái carousel duy nhất, trang trọng, chậm rãi, khuyên mọi người đừng nên sử dụng carousel với rất nhiều dẫn chứng (thật là funny 😗).

Ví dụ:

Số liệu chia sẻ thì vô vàn trên mạng, các bạn có thể tìm kiếm để xem về heat map sử dụng carousel, và tất nhiên còn tuỳ thuộc vào nội dung của bạn nữa, trong bài này mình chỉ xin dẫn chứng một bài rất cũ cách đây gần 6 năm, họ đo đạc số liệu 3,7 triệu lượt truy cập của họ, thì chỉ có 1% người dùng tương tác với carousel trên trang chủ, và có tới 98% người dùng trong 1% đó mở cái carousel đầu tiên, vậy thì mấy cái sau là … à mà thôi, một con số thực sự ngán ngẩm so với mục đích của họ khi gọi đó là mục Featured, tức “Đặc sắc" (nguồn: https://erikrunyon.com/2013/07/carousel-interaction-stats/)

Và anh chàng Lee Duddell cay đắng kết luận rằng thì là, hoá ra Carousel lại là công cụ hữu ích cho người làm marketing chứ chẳng phải người sử dụng các bạn ạ:

Carousels là một công cụ hiệu quả để Người làm marketing/ Quản lý đặt những ý tưởng mới nhất của họ trên Trang chủ. Hãy sử dụng chúng để đặt nội dung mà người dùng sẽ bỏ qua trên Trang chủ của bạn. Hoặc, tốt hơn là, đừng sử dụng chúng. Đừng bao giờ.

Tỷ lệ mở trang trong Carousel

Cũng có một vài số liệu khác cho thấy người dùng mobile lại có xu hướng tương tác với carousel nhiều hơn so với trên website pc đấy. À mình xin nhắc lại là những đo đạc này cũng tuỳ thuộc vào chất lượng thiết kế Carousel, mức độ hấp dẫn, ngành nghề/dịch vụ kinh doanh nhé. Tuy nhiên nhìn chung thì tỷ lệ so với lượt truy cập thì thường là cực thấp.

Phương án là gì?:

I. Thiết kế Carousel thật tốt (tất nhiên)

Chỉ nên có 1 carousel, tối đa có từ 2–3 trang, đừng tham lam quá nhiều, bản thân mình chẳng đủ kiên nhẫn để trượt đến 5,6 cái carousel bao giờ, và luôn để tâm rằng, phần lớn người dùng sẽ không thấy hết tất cả các carousel đâu, nên cân nhắc những thứ bạn muốn người dùng “phải đọc"
Thời gian chạy là rất quan trọng, nó tuỳ thuộc vào nội dung, độ quan trọng của các trang trong carousel, thường thì nội dung quan trọng nhất (để bán hàng) luôn ở trang đầu tiên, đủ lâu để người dùng nắm bắt được và đủ nhanh để biết còn nhiều điều hay ho đằng sau.
Có đủ các indicator (chưa tìm được từ tiếng Việt 😓), như số trang trong slide, nút sang phải sang trái, thời gian chạy mỗi trang, và đặc biệt phải hỗ trợ thao tác vuốt trên mobile.
Đừng đặt những nội dung không quan trọng, hoặc thiết kế carousel quá giống quảng cáo. Giữ độ tương phản cao, nút bấm CTA rõ ràng để còn biết là nó có thể bấm được.
Sử dụng đúng lúc đúng chỗ, đo đạc đầy đủ xem hiệu quả, tối ưu và tối ưu, thử nghiệm A/B/C các kiểu (lý thuyết vãi 😅). Nói chung là hạn chế Carousel

Cùng xem ví dụ bên dưới, mình thấy Carousel quá nhỏ so với phần còn lại và khó nhận biết trên tổng thể, độ tương phản thấp, indicator trà trộn như ninja, bị trùng thao tác vuốt rất nhiều, thậm chí còn có 2 cái khác nhau ở 2 màn hình khác nhau lận, không có nút CTA, mình sẽ chẳng thể đưa tay lên mà chuyển trang cho những carousel như thế này.

Khi chạy quá nhiều chương trình cùng một lúc

II. Hero Banner:

Tại một thời điểm chỉ một thứ là quan trọng nhất, đừng tham lam ôm đồm nhiều thứ. Hãy trằn trọc cả đêm và tự hỏi xem, điều gì là quan trọng nhất, hấp dẫn người dùng nhất? Và đưa nó lên làm anh hùng, chỉ duy nhất một anh hùng toả sáng mà thôi.

Các nội dung khác kém Hero hơn thì cho làm phụ thôi, chuyển xuống hàng bên dưới hoặc chuyển đi đâu đó chờ thời cơ thì phế anh Hero xuống rồi hẵng leo lên.

Amazon sử dụng Hero Image

III. Tìm những cách thú vị hơn.

Đây là cách mình thích nhất, kích thích sự sáng tạo nhiều nhất, và cũng khó nhất, khó từ giải thích đến ra ý tưởng đến triển khai. Mình thường gặp khó khăn hoặc không biết cách nào để truyền tải điều này cho nhân viên, vì nó đòi hỏi bạn phải hiểu người dùng, tìm ngữ cảnh phù hợp, luôn phải suy nghĩ đổi mới và ăn ngủ với sản phẩm.

Lấy ví dụ như cách Facebook gợi ý bạn cập nhật thông tin hồ sơ chẳng hạn, thay vì cứ suốt ngày hiện lù lù “Bạn ơi bạn cập nhật hồ sơ đi”. Thì Facebook có rất nhiều cách, từ việc “Có thể bạn biết những người này? Hãy nhập nơi bạn đang sống, trường bạn học để tìm nhiều bạn bè hơn". Hay khi ghé thăm trang Hồ sơ của ai đó để xem thông tin, Nếu bạn còn thiếu gì đó Facebook sẽ hỏi: “Hãy xem trang của bạn đi để biết người khác nhìn thấy bạn như thế nào nhé".

Hoặc như khi tìm mua hàng trên Amazon, thay vì có một cái carousel báo rằng “Alexa của tao hay lắm, có thể mua hàng được cho mày luôn", thì khi bạn đang lướt tìm gì đó, Amazon sẽ hỏi ”Cu thử nói với Alexa là: ‘Này cậu, mua cho tớ cái ổ ssd với’ xem nó trả lời sao". Thay vì làm một cái banner hoành tráng là “Samsung hôm nay giảm sock tận óc", thì chỉ khi mình đang xem đồ công nghệ hay gì đó nó mới hiện ra thông báo nhỏ trong mục tương ứng “Chú mày có biết hôm nay mua tivi Samsung được giảm tới 50% lận chưa?”.

Với cách này sẽ giảm tải rất nhiều cho Carousel trên trang chủ của bạn, mà thông tin lại vô cùng liên quan khiến cho mình cảm thấy thích thú hơn rất nhiều thay vì những thứ chẳng liên quan tẹo nào mà cứ cho ra ngoài cùng, có thể bạn thấy deal hấp dẫn nhưng không phải ai cũng vậy đúng không!?.

Tổng kết

Vẫn có những nơi sử dụng carousel tốt như duyệt ảnh sản phẩm, danh sách comment hoặc những nội dung không quan trọng mà không cần thiết phải đọc hết, có một số bạn sáng tạo hơn rất nhiều để kích thích người dùng tương tác với carousel. Cũng có một bộ phận nhỏ khách hàng quen với việc lướt carousel để xem các khuyến mại. Tóm lại thì với cá nhân mình vẫn không thích sử dụng Carousel trừ một số trường hợp phải tiết kiệm diện tích hiện thị, thỉnh thoảng mình cũng bị vướng vào những drama về vấn đề này vì có rất nhiều người đã quá quen với kiểu thiết kế từ thời còn làm web, còn bạn thì sao? Hãy cho mình biết ý kiến nên hay không nên sử dụng Carousel, nếu có thì trong các trường hợp nào hoặc có cách nào thay thế tốt hơn không nhé.

P/S: Chưa biết viết chủ đề gì tiếp theo.