Semantik di antarmuka pengguna • Rifat Najmi

Penting sekali untuk dipahami bahwa visual/UI tidak berdiri sendiri untuk memberikan makna, tapi kode penyusunnya juga turut berperan penting. Penggunaan Semantika ini membantu banyak hal mulai dari SEO hingga aksesibilitas.

Ini adalah salinan jawaban saya di Quora untuk pertanyaan Apa saja hal-hal yang perlu dipelajari tentang UI oleh developer pemula?.

Dalam pemrograman, Semantik mengacu pada arti sepotong kode – misalnya “apa efek menjalankan baris JavaScript itu?”, Atau “apa tujuan atau peran yang dimiliki elemen HTML itu” (bukan “seperti apa tampilannya ? ”.)

Dokumen web MDN

Menurut MDN (the Mozilla Developer Network) web docs, Semantika merujuk kepada arti/makna dari sebuah baris kode, dan dalam HTML merujuk kepada tujuan atau peran dari elemen HTML yang digunakan ketimbang hanya bagaimana tampilannya. Sebagai contoh, tag H1 berperan untuk menyatakan judul yang memiliki hierarki paling tinggi dalam sebuah laman web.

Nah sayang sekali hal seperti ini sering luput bahkan di kalangan unicorn sekalipun.

Ini adalah kode yang umum ditemui di situs perdagangan elektronik lokal.

<div class="card"> 
<div class="image"><img src="https://rifatnajmi.com/design/semantika-dalam-ui/{{Product Image}}"></div> 
<div class=“title”>{{Product Name}}</div> 
<div class=“description”>{{Product Description}}</div> 
<div class="button">Buy</div> 
</div> 

Kode ini tidak memiliki makna. Tidak percaya? Buka situs Tokopedia dan lihat kode penyusunnya.

Secara tampilan, laman pencarian “Asus ROG” di Tokopedia adalah seperti ini, tidak berbeda dengan berbagai situs perdagangan elektronik lainnya.

Tampilan pencarian di Tokopedia

Namun, kalau dianalisa lebih lanjut, justru struktur konten di laman Tokopedia tersebut adalah seperti ini.

headingsMap di Tokopedia tanpa semantika

Coba bandingkan dengan Amazon.

headingsMap di Amazon dengan semantik yang sesuai

Atau eBay.

headingsMap di eBay dengan semantika yang sesuai

Amazon mengesampingkan filter dan mengutamakan hasil pencarian produk.

eBay menampilkan hasil pencarian produk tapi penempatannya agak salah, harusnya hasil pencarian bisa ditampilkan lebih awal dan filternya ditempatkan kemudian.

Tokopedia? Hanya filternya saja yang ditampilkan. Hasil pencarian produk tidak ada sama sekali.

Kode amatir di atas bisa diperbaiki lebih lanjut.

<div class="card"> 
<img src="https://rifatnajmi.com/design/semantika-dalam-ui/{{Product Image}}" alt="{{Product Image Alt}}"> 
<h2>{{Product Name}}</h2> <!-- Bisa H2 atau H3 atau H4, tergantung kebutuhan --> 
<p>{{Product Description}}</p> 
<a class="button" href="{{Product URL}}">Buy</a> 
</div> 

Nah, mengapa Semantika penting? Menurut MDN web docs, beberapa fungsinya adalah sebagai berikut.

  1. Mesin pencari akan menganggap isinya sebagai kata kunci penting untuk mempengaruhi peringkat pencarian halaman.
  2. Pembaca layar dapat menggunakannya sebagai penunjuk arah untuk membantu pengguna dengan gangguan penglihatan menavigasi halaman.
  3. Menemukan blok kode yang bermakna jauh lebih mudah daripada mencari meskipun tidak ada habisnya divs dengan atau tanpa kelas semantik atau spasi nama.
  4. Menyarankan kepada pengembang jenis data yang akan diisi.
  5. Penamaan semantik mencerminkan penamaan elemen / komponen kustom yang tepat.

Poin nomor dua adalah hal yang paling menarik: aksesibilitas.

Kita semua pada akhirnya akan cacat, kecuali kita mati dulu.

Gregg Vanderheiden

Aksesibilitas, seperti dikutip dari Microsoft, adalah dua hal:

  1. Sebuah kualitas yang menjamin pengalaman yang terbuka/setara bagi siapa saja (inklusif).
  2. Sebuah bidang/disiplin profesional yang bertujuan untuk mencapai pengalaman yang setara.

Semantika adalah salah satu hal untuk mencapai aksesibilitas alias kualitas pengalaman pengguna yang setara.

9 orang menikmati posting ini

[ad_2]
Baca Juga : Harga Pintu Aluminium