Korsel Gambar dalam Desain Web - Manfaat & Praktik Terbaik

Tidak ada kekurangan slideshow fitur carousel di web. Sebenarnya, tren ini tidak melakukan apa pun kecuali tumbuh dalam 5-10 tahun terakhir dengan lebih banyak dukungan browser sekarang daripada sebelumnya. Tetapi apakah komidi putar gambar benar-benar sepadan dengan usaha? Macam apa manfaat yang mereka hasilkan, dan bagaimana mereka harus digunakan secara produktif dalam tata letak?

Saya ingin berbagi tren umum, contoh langsung, dan ide untuk desainer web yang tertarik dengan komidi putar gambar. Slider dinamis ini sangat diperdebatkan, tetapi saya pikir mereka menambahkan nilai ketika dibuat dalam konteks yang benar.

Komidi putar produk untuk e-commerce

Dunia e-commerce penuh dengan komidi putar berputar di halaman rumah dan halaman produk. Tujuannya adalah untuk menjaga kepadatan informasi yang jelas dengan foto dan teks itu menceritakan kisah yang unik namun berharga untuk membantu menjual produk.

Ada dua penempatan utama untuk slider produk e-commerce:

1. Di halaman muka toko
2. Di halaman produk

Mereka berdua bekerja secara berbeda tetapi melayani tujuan yang sama - untuk menjual produk secara visual.

Contoh 1: Au Lit Fine Linens - halaman rumah

Lihatlah halaman beranda untuk Au Lit Fine Linens, itu menggunakan carousel berputar otomatis layar penuh untuk memamerkan berbagai produk, seperti selimut, bantal, dan bed cover.

Gambar ambil lebar penuh dari halaman beranda, dan mereka muncul jauh di atas flip. Bahkan, slider ini harus menjadi hal pertama yang menarik perhatian Anda saat pertama kali mendarat di halaman. Setiap slide mengarah ke halaman berbeda di situs memandu pelanggan melalui pengalaman berbelanja.

Slider ini bisa sedikit mengintimidasi ketika pertama kali mendarat di halaman, tetapi dengan tautan tombol dan teks overlay itu juga bisa sangat menggembirakan bagi pengunjung yang hanya ingin menyelam dan berbelanja.

Contoh 2: Eden phone case - halaman produk

Anda dapat melihat contoh yang lebih spesifik di halaman produk case Eden. Ini menggunakan slider putar otomatis untuk memamerkan gambar produk.

Saya menemukan ini menjadi sedikit “terlalu banyak” di dunia e-commerce. Saat melihat produk yang saya inginkan mengendalikan pergantian gambar.

Pilihan yang lebih baik adalah melakukan galeri gambar dengan kontrol yang diberikan kepada pengunjung. Misalnya, halaman Desain oleh Manusia menggunakan thumbnail untuk setiap foto yang jauh lebih menggembirakan, dan memberikan lebih banyak kontrol kepada pengguna.

Komidi putar portofolio web

Portofolio situs web online sedikit berbeda karena ini slide jangan selalu mengklik ke halaman lain. Memang benar bahwa beberapa akan mengarah pada studi kasus atau menulis tentang suatu proyek, tetapi banyak komidi putar di situs web portofolio hanya dimaksudkan untuk memamerkan karya visual.

Contoh 1: Biboun - beranda

Artis Prancis yang bekerja dengan nama Biboun memiliki slider korsel di halaman rumah menampilkan cuplikan karya seni. Slide individu mengarah ke halaman internal dalam portofolio yang mana mencakup seluruh proyek dengan banyak foto.

Ini mungkin cara terbaik untuk melakukan slider di situs web portofolio. Memperlihatkan daftar pekerjaan acak tidak ada gunanya kecuali karya-karya spesifik tersebut memiliki alasan untuk dipamerkan.

Semua bagiannya sangat indah di slider Biboun, dan itu tidak memakan banyak ruang antara. Walaupun saya tahu beberapa orang membenci tayangan slide yang diputar secara otomatis untuk alasan yang baik, pada tata letak yang minimalis saya mengalami kesulitan mengeluh tentang fitur desain ini..

Contoh 2: Situs web Aaron Blaise - beranda

Saya sangat suka contoh yang ditemukan di situs web Aaron Blaise karena dia memamerkan karyanya sebagai portofolio, tetapi sebagian besar menggunakan situs web ini untuk menjual video seninya. Aaron Blaise bekerja di Disney selama beberapa dekade, dan dia memiliki keahlian untuk membuktikannya.

Sementara penggeser beranda di situsnya melakukan rotasi otomatis, saya tidak menganggapnya sangat mengganggu atau tidak pada tempatnya. Setiap slide memiliki sedikit konten yang relevan dengan gambar, dan itu membantu Aaron menarik perhatian pada pelajaran video terbarunya yang mengajarkan seniman muda cara menguasai keterampilan khusus.

Korsel portofolio yang bagus berfokus pada visual, dan mengarahkan pengunjung lebih jauh ke dalam situs web. Jika Anda bisa mendapatkan dua hal ini maka saya tidak akan menentang fitur seperti ini di situs web portofolio pribadi.

Tren desain umum

Jika Anda melihat beberapa contoh saya di atas, Anda akan melihat ada dua jenis slider: layar penuh dan lebar tetap.

Pilihan gaya ini sering berhubungan dengan tata letak dan seberapa banyak konten yang dapat ditampungnya. Jika tata letak mencakup lebar penuh halaman, maka masuk akal untuk memperluas slider juga. Tetapi ini juga memaksa Anda untuk melakukannya temukan gambar berkualitas tinggi yang masih terlihat bagus di layar penuh pada monitor resolusi besar.

Saya pribadi lebih suka gaya lebar tetap seperti yang akan Anda lihat dalam dua contoh portofolio seni. Ini adalah lebih mudah dikendalikan, dan mereka sering tidak setinggi itu - membuatnya lebih mudah bagi pengunjung untuk abaikan saja jika mereka mau.

Juga pertimbangkan nilai slide yang memajukan otomatis, dan betapa sulitnya itu bagi pengguna untuk menangkap konten ini. Ada studi kasus hebat oleh Nielsen Norman Group yang menunjukkan bahwa itu lebih baik tidak memiliki bilah geser yang memajukan otomatis.

Saya setuju dengan pendekatan ini dalam arti itu memori kurang intensif dengan lebih sedikit animasi dan gerakan di peramban, dan kebanyakan orang juga tidak suka komidi putar otomatis - dan Anda harus selalu begitu melayani audiens Anda.

Namun saya tidak bisa mengatakan bahwa tidak ada gunanya menambahkan slider yang memajukan otomatis, terutama karena dengan slider statis Anda jangan mendapatkan sebanyak mungkin tampilan, dan Anda juga perlu buat slide pertama Anda yang paling penting karena banyak pengguna tidak akan melanjutkan ke slide berikutnya. Sayangnya, memutuskan apakah akan membuat slider berputar otomatis atau tidak bidang coba-coba.

Apa yang harus dihindari?

Inilah hal penting yang saya pikirkan secara pribadi jatuh dibawah “menghindari di semua biaya”. Lihat atau klik pada tangkapan layar di bawah, dan coba tebak apa yang mungkin terjadi.

Situs web Yozenn cafe menggunakan slider header layar penuh. Ini tidak otomatis memutar yang bagus, tetapi slide juga tidak ada gunanya selain dekorasi.

Gambar jangan tautkan ke mana pun, dan mereka memamerkan segelintir produk. Mereka semua bisa saja ditambahkan ke latar belakang beranda tanpa slider untuk menyimpan kebingungan dan kilobyte JavaScript tambahan.

Saya berpendapat fitur geser latar belakang ini tidak menambah banyak nilai ke situs web yang sudah sempit. Jika gambar memiliki tautan atau teks yang menyertainya, mereka setidaknya akan lebih relevan.

Jangan ragu untuk menggunakan gambar di bagian header Anda yang mengambil halaman penuh, namun jika mereka jangan menautkan di mana saja atau menawarkan informasi asli maka jangan mengubahnya menjadi korsel.

Fitur interaktif

Cara pengguna menavigasi korsel memengaruhi desain itu sendiri. Ada sebuah berbagai gaya navigasi, tetapi ini yang paling populer:

• Navigasi berbasis dot
• Navigasi panah
• Navigasi thumbnail
• Daftarkan tautan atau item judul

Yang paling umum adalah navigasi titik yang akan Anda temukan di ratusan situs web modern.

Contoh 1: Chic at Home - home page

Chic at Home adalah contoh penggunaan yang bagus tiga titik kecil di bawah slider untuk menunjukkan navigasi. Setiap gambar berputar secara otomatis, dan titik terkait dalam seri terisi dengan hitam. Dua titik kosong lainnya menunjukkan potensi slide bagi pengguna untuk menelusuri.

Ini adalah sebuah pola desain populer yang sudah dikenal banyak pengguna. Itu jatuh ke dalam kategori yang sama dengan menu hamburger yang banyak desainer tidak suka, tetapi pengguna sudah mengenalinya, dan secara naluriah tahu cara menggunakannya.

Contoh 2: Siklus Murni - halaman muka

Halaman muka Pure Cycles menggunakan a kombinasi navigasi titik dan panah. Dengan cara ini pengguna memiliki navigasi maju & mundur, tetapi lihat juga “secara keseluruhan” navigasi melalui tautan dot di bagian bawah.

Saya benar-benar menemukan tautan dot dalam contoh ini sulit dilihat. Kesulitan dengan slide visual adalah bahwa banyak elemen tidak mudah untuk dibedakan, sehingga panah dan titik bisa mudah berbaur dengan latar belakang.

Contoh 3: IGN - beranda

Di beranda IGN Anda akan menemukan yang lain carousel berputar otomatis yang menggunakan tautan judul untuk navigasi. Ini sangat umum untuk penerbit yang ingin jual berita utama daripada produk. Setiap tautan menuju ke slide individual yang pada akhirnya mengarah ke halaman artikel.

Tautan ini bisa diganti dengan thumbnail, atau bahkan menyertakan thumbnail dari setiap cerita - namun Aspek visual ditampilkan di carousel, jadi menghilangkan thumbnail sebenarnya menghemat ruang.

Situs web yang berbeda menggunakan gaya navigasi yang berbeda untuk alasan yang berbeda. Pertimbangkan tujuan pengunjung Anda, dan desain untuk pengalaman pengguna terbaik.

Takeaways kunci

Anda harus membidik menghasilkan nilai asli, atau informasi tambahan dengan korsel. Ini mungkin informasi yang tidak dimiliki pengunjung sebelumnya, atau mungkin mengarah ke halaman yang mungkin tidak ditemukan oleh pengunjung.

Cobalah untuk menghindari komidi putar otomatis, dan hanya menggunakannya di halaman arahan utama (halaman rumah menjadi salah satu contoh). Selama komidi putar memiliki tujuan, dan tidak terlihat seperti iklan, desain Anda harus dilakukan dengan baik.

Jika Anda mencari info lebih lanjut tentang komidi putar web, lihat beberapa pos berikut:

• Carousels oleh Brad Frost
• 8 Persyaratan UX untuk Merancang Carousel Beranda yang Ramah Pengguna
• Kegunaan Korsel: Merancang UI yang Efektif untuk Situs Web dengan Konten Berlebihan