Halaman mobile Anda akan segera menjadi versi default yang digunakan dalam peringkat pencarian Google. Bagaimana Anda memastikan konten bagus yang mudah dibaca di layar yang lebih kecil?
Anda bukan seorang penulis sastra, dan orang tidak bergantung pada setiap kata yang Anda tulis. Jangan salah sangka, bagus untuk memiliki informasi komprehensif di halaman web, namun pengguna juga tidak ingin menggulir selamanya - terutama di ponsel.
Konten di seluler perlu memudahkan pengguna mencapai poin utama tanpa mengurangi konten, karena pengguna mungkin ingin segera menggali detailnya. Lebih dari sebelumnya, struktur konten Anda penting, dan konten Anda perlu dinavigasi, dapat disesuaikan dan mudah dicerna.
1. Daftar Isi
Daftar isi adalah cara bagus untuk menunjukkan bagaimana Anda mengatur konten Anda, dan dikombinasikan dengan bookmark HTML, ini memungkinkan pengguna untuk cepat melompat ke bagian halaman yang mungkin menarik minat mereka.
Salah satu implementasi favorit saya adalah dokumentasi Pengembang Google, di mana Anda memiliki hak navigasi di bawah judul dan dengan cepat bisa mendapatkan bagian apa pun yang Anda butuhkan. Mereka bahkan membuatnya bisa diperluas sehingga tidak membanjiri pengguna dengan segera.
2. Judul HTML
Judul HTML, atau tag pos, membantu mengatur konten Anda menjadi beberapa bagian, menyusun halaman Anda secara logis dengan h1 - h6. Subpos utama artikel ini dibungkus dalam tag h2, sedangkan judul artikel itu sendiri terbungkus dalam tag h1. Tag judul membuat konten mudah skimmable dan merupakan target yang baik untuk tautan anchor dalam daftar isi.
3. Konten yang dapat diperluas
Area konten yang dapat diperluas (juga dikenal sebagai "akordeon") biasanya digunakan untuk detail lebih lanjut atau bagian FAQ. Mereka adalah cara yang bagus untuk menjaga halaman lebih pendek dan mudah dinavigasi, sambil tetap memungkinkan akses ke informasi penting. Google Webmaster Trends Analyst Gary Illyes telah menyatakan bahwa konten yang tersembunyi karena alasan UX akan diberikan bobot penuh di indeks mobile-first, sedangkan indeks desktop sedikit diskon konten tersembunyi ini.
4. Konten Tab yang Dapat Diperluas
Konten tab kurang digunakan di ponsel karena keterbatasan ruang, namun ini adalah alternatif konten yang dapat diperluas. Ini melayani tujuan yang sama, yaitu menyembunyikan konten yang mungkin tidak dibutuhkan segera. Lihat bagaimana Staples memungkinkan Anda melihat deskripsi, spesifikasi, dan ulasan sekaligus menjaga konten semuanya pada satu halaman.
5. Konten Tab Filter
Filter adalah cara mudah untuk memotong sebagian besar konten yang mungkin tidak diminati oleh pengguna. Dengan memberi mereka pilihan untuk hanya melihat apa yang ingin mereka lihat, Anda mempermudah pencarian informasi yang mereka cari tanpa Pergi melalui semua cruft untuk sampai ke sana. Salah satu implementasi favorit saya secara visual ini adalah Faktor Peringkat Google Northcutt.
6. Filter untuk konten Ringkasan, sorotan, TL; DR
Tidak punya waktu untuk membaca cerita? Bagaimana kalau hanya mengambil poin utama artikel ini dengan cepat? Ini membantu pembaca mobile yang sedang berjalan dengan cepat mencerna konten Anda dan menentukan apakah mereka ingin membaca lebih dalam secara mendalam. Saya biasanya melihat ini dilakukan di situs berita, keuangan dan olahraga, di mana informasi terpenting dapat diringkas dalam beberapa poin. Berikut ini satu dari CNBC:
7. Poin atau Menu Dropdown
Poin dan daftar peluru adalah cara yang bagus untuk menyampaikan sejumlah besar informasi dengan cepat.
8. Teks tebal atau miring
Teks tebal menangkap mata - dan begitu juga teks miring. Teks tebal juga bisa menjadi tambahan yang bagus untuk membuat item atau poin utama lebih menonjol.
90 persen orang yang membuatnya sejauh ini kemungkinan akan membaca pullquote ini.
Bagaimana dengan desktop?
Saya berfokus pada perancangan untuk mobile, namun banyak praktik yang sama juga bagus untuk desktop. Salah satu contoh terbaiknya adalah, sekali lagi, Google Developers, tempat daftar isi benar-benar menjadi bilah sisi lengket yang mengikuti Anda dan memungkinkan Anda menavigasi di antara bagian dengan cepat.
Konten desktop
Saya akan menambahkan satu peringatan, terutama untuk konten yang mungkin disembunyikan secara default dengan CSS atau JS. Pastikan semua konten dimuat ke DOM. Jika Anda harus mengambil tindakan sebelum konten dimuat ke DOM, Google tidak akan melihatnya. Loaded secara default dan kemudian disembunyikan tidak apa-apa.
Tidak ada komentar:
Posting Komentar