Heading di desain UI

Apa itu heading?

Heading itu penanda bagian penting dalam sebuah dokumen. Kalau di buku, misalnya skripsi, penandanya bisa kita lihat di daftar isi. Ada heading utama seperti Bab 2 - Tinjauan Permasalahan, lalu di dalamnya ada sub-bab 2.1 Tinjauan Pustaka, 2.2 Tinjauan Empiris, dan seterusnya, yang menggunakan heading satu tingkat di bawahnya.

Fungsi heading bukan cuma untuk daftar isi, tapi juga jadi penanda visual di dalam dokumen agar pembaca bisa cepat menemukan bagian-bagian penting.

Selain jadi penanda, heading berfungsi untuk membagi konten menjadi bagian-bagian terstruktur. Heading memecah skripsi menjadi bab, lalu membagi bab jadi sub-bab, dan kalau perlu, jadi sub-sub bab. Pembagian ini penting supaya informasi yang banyak bisa diatur rapi, mudah dipahami, dan lebih nyaman dibaca.

Heading sebagai visual hierarchy

Desain tanpa visual hierarchy itu kayak kita masuk ke mal luas tanpa sekat fisik, tanpa signage toko, dan semua dekorasi tokonya sama. Bayangin kalau pertama kali ke situ, dan kita juga belum pernah ke UNIQLO, misalnya, kita harus baca semua label harga dan barang di setiap toko buat cari di mana UNIQLO.

Visual hierarchy itu bisa dibangun lewat banyak cara, salah satunya menggunakan heading.

Misalnya, kita mau bikin poster webinar:

Kalau tampilannya kayak gini, plain text tanpa styling, ya mau gak mau harus baca semua isinya satu-satu.

Bandingkan kalau udah dikasih styling di yang menurut adalah headingnya:

Setelah diberikan styling dan heading, hierarkinya langsung terasa. Kita langsung tahu:

• Judulnya apa
• Siapa narasumbernya
• Kapan acaranya
• Di mana lokasinya
• Gimana cara daftarnya

Sebenarnya, dengan heading saja struktur informasinya sudah lebih jelas. Tapi, sebagai desainer, malu dong kalau bikinnya cuma kayak gitu. Kita bisa mengembangkannya lagi sesuai dengan gaya visual dan brand guideline.

Setelah “didandanin” oleh tim Suarise, posternya jadi terasa lebih layak untuk disebarkan ke khalayak.

Heading dan perannya dalam information architecture

Nah, ini yang jadi tantangan. Kebanyakan desainer melihat heading hanya sebagai pemanis visual.

Padahal heading itu berfungsi untuk:

• Menyusun struktur informasi dalam halaman
• Menjadi kerangka navigasi untuk screen reader
• Membantu pembaca (termasuk non-visual reader) menelusuri konten dengan cepat

Struktur informasi

Untuk mempermudah pembahasan, saya sarankan gunakan satu heading h1 saja dalam setiap halaman. Sebagai catatan: sebenarnya h1 bisa dipakai lebih dari satu kali di halaman, misal untuk penanda area atau landmark khusus, tapi kita simpan bahasan itu untuk lain waktu.

Nah, supaya lebih kebayang, anggap saja kita sedang membuat silsilah keluarga di dunia Doraemon. Tokoh utama dalam silsilah yang sedang kita susun ini adalah kakeknya Nobita, yaitu Nobiru.

Nobiru (h1) mempunyai beberapa anak bernama Nobirou (h2), Nobisaburo (h2), dan Nobisuke (h2). Dari beberapa anak tersebut, ada satu yang memiliki keturunan bernama Nobita (h3), tapi yang lainnya tidak punya (atau tidak dibahas). Nobita (h3) memiliki anak bernama Nobisuke (h4). Begitu seterusnya.

Nah, lalu gimana kalau kita mau nambahin Doraemon dan Dorami? Apa karena mereka hidup di masa Nobita (meskipun dari masa depan) kita pasang tag h3 biar sejajar dengan Nobita?

Yang perlu kita tanyakan adalah kenapa kita harus menaruh Doraemon dan Dorami di sini? Apa hubungan mereka dengan Nobiru?

Karena fokus utamanya adalah silsilah keturunan Nobiru, dan Doraemon-Dorami bukan keturunannya, maka mereka tidak perlu dimasukkan ke dalam struktur heading ini.

Kalau kita tetap memaksa memberikan tag ini ke Doraemon-Dorami:

• h3 → berarti mereka jadi anak Nobisuke alias saudaranya Nobita.
• h4 → berarti mereka jadi anaknya Nobita.
• h1 → malah makin membingungkan, karena fokus halaman kita adalah Nobiru.

Di sinilah heading berperan penting dalam information architecture. Bukan cuma soal besar-kecil teks, tapi soal hierarki informasi dan hubungan antar konten.

Tanpa struktur heading yang tepat, halaman kita bisa bikin bingung:

• Pengguna visual: karena alur informasi ga jelas
• Pengguna screen reader: karena navigasi heading-nya ga jelas
• Mesin pencari: karena nggak bisa baca prioritas informasi dengan benar

Jadi, sebelum masang heading, tanya dulu:
"Konten ini bagian dari apa? Perannya apa dalam kerangka informasi di halaman ini?"

Kerangka navigasi dan penelusuran konten yang lebih cepat

Heading berperan sebagai kerangka navigasi yang membantu berbagai jenis pengguna menelusuri konten dengan lebih cepat dan terstruktur.

Saat kita menggunakan heading dengan urutan dan level yang benar, browser dan screen reader bisa menyusun struktur informasi di halaman. Struktur ini nantinya jadi kerangka navigasi di dalam screen reader, yang memungkinkan pengguna untuk:

• Melompat antar topik
• Melewati bagian yang nggak mereka butuhkan
• Langsung loncat ke informasi yang dicari

Bagi pengguna awas, styling di heading membantu pengguna untuk memilah infomasi secara visual, sesuai perannya sebagai visual hierarchy.

Penutup

Heading itu bukan sekadar teks yang diperbesar ukurannya. Di balik tampilannya, heading punya peran penting buat menyusun informasi, mempermudah navigasi, dan membantu berbagai tipe pengguna membaca konten dengan nyaman.

Dari workshop kemarin, saya makin sadar bahwa banyak desainer belum menjadikan heading sebagai bagian dari kerangka pikir desain mereka. Padahal, kalau dari awal sudah paham cara kerja heading dan fungsinya di information architecture, proses desain, apalagi desain berbasis aksesibilitas, bakal jauh lebih tertata.

Jadi, setelah baca ini, mungkin kamu bisa membiasakan:

• Saat bikin desain UI, tanyakan dulu apa peran konten ini dalam halaman?
• Urutkan kontennya dalam hierarki informasi yang jelas
• Gunakan heading bukan hanya sebagai pemanis visual, tapi juga untuk menyusun struktur halaman yang logis

Pada akhirnya, desain itu bukan cuma soal tampilan yang estetis, tapi soal bisa diakses dan dipahami siapa pun. Heading adalah salah satu alat sederhana yang bisa bantu kita mewujudkan itu.

Kalau kamu mau lanjut ngobrol soal ini atau bahas studi kasus lain seputar aksesibilitas, kamu bisa DM saya di @rifatnajmi.