Studi Kasus: Evolusi UX di IR Web—Dari Navigasi Artikel Hingga Halaman Utama

Dalam pengembangan web, sering kali detail-detail kecil yang memberikan dampak terbesar pada pengalaman pengguna (UX). Di IR Web, kami baru saja menyelesaikan serangkaian pembaruan yang berfokus pada dua area kunci: penemuan konten di halaman utama dan navigasi di dalam artikel.

Ini adalah studi kasus singkat tentang bagaimana dan mengapa kami merombak elemen-elemen ini untuk menciptakan pengalaman yang lebih kaya, lebih intuitif, dan lebih fungsional.

Babak 1: Mendesain Ulang Halaman Utama

Sebelumnya, halaman utama kami hanyalah daftar kronologis dari artikel-artikel terbaru. Fungsional, tetapi kurang memiliki daya tarik dan tidak membantu pengguna menemukan konten terbaik kami.

Solusinya adalah tata letak tiga bagian yang baru:

1. Panggung Utama (Carousel): Kami memperkenalkan carousel autoplay di bagian atas untuk menyorot artikel-artikel featured. Ini memberikan dampak visual yang kuat dan langsung menyajikan konten paling relevan kepada pengunjung baru.
2. Artikel Terbaru: Bagian ini tetap ada, namun dengan desain yang lebih bersih untuk menampilkan 6 artikel terbaru yang tidak di-feature.
3. Sorotan Topik (Desain Baru): Bagian ini mengalami perombakan terbesar. Alih-alih hanya menampilkan kartu-kartu kecil, kami mengadopsi pola desain "Hero Post + Daftar Judul". Setiap blok topik kini menampilkan satu artikel andalan dengan gambar besar, diikuti oleh daftar empat judul artikel relevan lainnya. Ini memberikan fokus visual sambil tetap menyajikan kepadatan informasi.

Hasilnya adalah halaman utama yang tidak hanya menyajikan konten, tetapi juga memandu pengguna melalui perjalanan penemuan.

Babak 2: Menyempurnakan Pengalaman Membaca Artikel

Masalah berikutnya yang kami tangani adalah aksesibilitas fitur di dalam halaman artikel.

Masalah Awal: Akses yang Tersembunyi

Sebelumnya, fitur Daftar Isi dan tombol untuk berbagi artikel hanya tersedia di bagian atas konten. Ini menimbulkan beberapa masalah:

1. Navigasi yang Tidak Efisien: Jika seorang pembaca berada di tengah artikel yang panjang dan ingin melompat ke bagian lain, mereka harus menggulir jauh ke atas untuk menemukan ToC.
2. Hambatan untuk Berbagi: Momen untuk berbagi sering kali datang saat pembaca menemukan paragraf yang menarik. Memaksa mereka untuk mencari tombol 'Bagikan' di puncak halaman adalah hambatan yang tidak perlu.

Solusi: Membuat Fitur Selalu Tersedia (Tapi Tidak Mengganggu)

Terinspirasi oleh situs-situs konten modern, kami memutuskan untuk membuat kedua fitur ini "melayang" atau sticky di sisi layar pada tampilan desktop, menciptakan tata letak tiga kolom yang seimbang.

1. Implementasi Daftar Isi (PostOutline): Pada layar lebar, ToC ditampilkan di sisi kanan, selalu terlihat. Di layar yang lebih kecil, ia berubah menjadi komponen akordeon yang rapi di atas artikel, tidak memakan ruang yang berharga.

2. Implementasi Panel Berbagi (FloatingSharePanel): Panel berbagi ditempatkan di sisi kiri, diisi dengan ikon minimalis untuk menjaga tampilan tetap bersih. Sama seperti ToC, panel ini sepenuhnya tersembunyi di perangkat seluler untuk memaksimalkan area baca.

Penyempurnaan Akhir: Pengalaman yang Mulus

Implementasi awal saja tidak cukup. Berdasarkan evaluasi, kami menambahkan beberapa sentuhan akhir yang krusial:

1. Gulir Halus (Smooth Scroll): Mengklik tautan di ToC kini menganimasikan guliran halaman, bukan lagi melompat secara kasar.
2. Penyesuaian Offset Header: Kami memastikan judul bagian yang dituju tidak lagi tersembunyi di bawah header situs yang sticky.

Hasil akhirnya adalah sebuah platform yang secara holistik dirancang untuk pengalaman pengguna yang lebih baik, dari halaman pertama yang mereka kunjungi hingga baris terakhir artikel yang mereka baca.

---

Bacaan Terkait

• Studi Kasus: Perburuan Bug 'Lompatan Halaman'—Kisah di Balik Perombakan Fitur Pencarian IR Web
• Studi Kasus: Dari Situs Web Menjadi Aplikasi—Perjalanan Implementasi PWA di IR Web
• Merapikan 'Rumah Digital': Filosofi di Balik Struktur Folder Baru IR Web