Carousel dioptimalkan untuk memungkinkan pengguna memilih salah satu dari banyak item jika item tersebut paling mudah dibedakan dengan gambar. Pengguna dapat memilih item dengan mengucapkan judulnya atau mengetuknya.

Contoh

Berikut adalah contoh tampilan carousel saat semua kolom wajib diisi dan opsional telah dilengkapi.

Persyaratan

Komponen visual ini saat ini mendukung penyesuaian.

Nama kolom Wajib diisi? Batasan/Penyesuaian
Gambar item Tidak
  • Pilih dari tiga rasio lebar tinggi gambar yang berbeda: persegi, lanskap, dan potret.
  • Ukuran default bergantung pada ukuran layar dan rasio lebar tinggi; setiap ruang tambahan akan diisi dengan batang.
  • Sumber gambar adalah URL. Jika link gambar rusak, maka gambar placeholder yang akan digunakan.
  • Teks alternatif diperlukan untuk aksesibilitas.
  • Bentuk gambar yang dapat disesuaikan (sudut miring atau bulat).
Latar belakang kartu Tidak
  • Gambar atau warna yang dapat disesuaikan.
Teks utama Ya
  • Teks utama setiap item harus unik (untuk mendukung pemilihan suara).
  • Teks biasa secara default. Font dan ukuran telah diperbaiki.
  • Maks 2 baris disarankan. Bergantung pada platform, karakter tambahan akan terpotong.
Teks sekunder

Juga disebut teks isi atau berformat.

 Tidak
  • Teks biasa. Font dan ukuran telah diperbaiki.
  • Maks 2 baris disarankan. Bergantung pada platform, karakter tambahan akan terpotong.

Jumlah item

  • Maksimum: 10
  • Minimum: 2

Konsistensi

Semua item di carousel harus menyertakan kolom yang sama, misalnya jika satu item menyertakan gambar, semua item di carousel harus menyertakan gambar.

Interaktivitas

  • Geser: Geser carousel untuk menampilkan kartu yang berbeda.
  • Ketuk: Saat pengguna mengetuk item, judul item diterima sebagai input pengguna, sehingga memulai belokan berikutnya dalam dialog.
  • Suara/Keyboard: Membalas dengan judul kartu sama dengan memilih item tersebut.

Panduan

Carousel sebagian besar digunakan untuk menjelajahi dan memilih di antara gambar.

Gunakan carousel untuk membantu pengguna memilih dari konten yang:

  • dapat dijelajahi paling bermakna melalui pemindaian gambar (misalnya, poster film, sampul album, resep, pakaian)
  • dapat diblokir dalam potongan-potongan persegi panjang (misalnya, tweet, artikel berita)

Pengguna akan dapat mengucapkan judul item untuk memilihnya, jadi pastikan kata tersebut mudah diucapkan, dan identifikasi setiap item secara unik.

Lakukan.

Setiap judul item harus sesingkat mungkin dengan tetap berbeda dari item lainnya.

Hindari.

Jangan pernah menggunakan judul yang sama untuk beberapa item. Hindari juga judul yang sangat mirip.

Pertimbangkan untuk menyertakan informasi berikut:
  • Jumlah item di carousel (mis., "Ada 7 item di daftar keinginan Anda.")
  • Alasan item ini dipilih (mis., “Berikut ini buket kami yang paling populer.”)
  • Kriteria pemilihan apa pun untuk item (mis., “konser akhir pekan ini”)
  • Urutan item (misalnya, “dimulai dengan urutan terbaru” jika kronologis terbalik)

Lakukan.

Beri tahu pengguna alasan Anda menyarankan item tersebut.

Hindari.

Jangan biarkan pengguna bertanya-tanya mengapa Action Anda menampilkan item spesifik ini.

Ajukan pertanyaan untuk memberi tahu pengguna agar mereka berbalik. Sertakan chip seperti “tidak satu pun dari ini” untuk menunjukkan bahwa mereka tidak menginginkan opsi apa pun.

Lakukan.

Jelaskan kepada pengguna bahwa mereka perlu memilih sesuatu dari carousel. Di sini, chip memungkinkan mereka memilih “tidak satu pun” atau untuk menyaring hasil (misalnya, hanya dengan menampilkan “sepatu kets patch”).

Hindari.

Jangan cukup menampilkan carousel kepada pengguna. Ajukan pertanyaan dengan cara yang memperjelas apa yang terjadi jika mereka memilih item.

Sebelumnya
Carousel penjelajahan
Berikutnya
Daftar