Apakah pemerintah Indonesia perlu memiliki sistem desain sendiri?
Sangkalan: Siapapun yang saya pilih, saya akan tetap menjadi oposisi. Siapapun yang menang, saya akan terus mengkritisi mereka kalau ada yang salah, dan memujinya kalau ada yang benar.
Saya rasa hampir semua negara persemakmuran sudah memilikinya, negara Barat lain pun juga sudah mengikuti.
Semuanya memiliki benang merah yang sama, menunjukkan prioritas utama dari sebuah produk digital yang dibuat oleh pemerintah: warganya.
Hal seperti ini belum sampai di otak para pemangku kepentingan karena prioritas mereka adalah mereka sendiri. Berganti kepala berarti berganti selera. Berganti selera berarti proyek baru. Proyek baru artinya… Silakan jawab sendiri.
Dulu saya pernah memprotes SBY karena timnya sangat kurang ajar. Kalau ada orang membuka presidenri(dot)go(dot)id, mereka akan diarahkan ke presidensby(dot)info. Bagi orang lain ini adalah hal sepele, tapi bagi saya tidak. Domain .go.id adalah milik pemerintah. Mengarahkannya ke domain abal-abal milik sendiri sama seperti menyalahgunakan fasilitas dan kekuasaan.
Kenapa domain saja bisa saya permasalahkan? Karena ini menyangkut kredensial. Domain (dot)go(dot)id menjamin kredensial situs tersebut sebagai situs web yang resmi dimiliki oleh pemerintah. Selain itu tidak etis sekali kalau saya membuka situs web seorang presiden dan diarahkan ke domain kaesang-sayang-jokowi-selalu-jangan-lupa-beli-martabaknya(dot)info. Siapapun bisa membuat domain selain .go.id, saya juga bisa membuat presiden.rifat.id.
Ini adalah contoh hubungan domain dengan kredensial yang diterapkan sistem desain milik pemerintah AS:
Ini adalah situs web presiden +62:
Contoh lainnya adalah situs web Pemprov DKI Jakarta. Zaman Jokowi-Ahok dulu saya sempat kagum karena situsnya lebih mudah digunakan. Sayang saya tidak sempat menangkap layarnya untuk membandingkannya dengan yang sekarang.
Kemajuan ini tidak dilanjutkan oleh Anies-EntahSiapaWagubnya. Situs web Pemprov DKI Jakarta sekarang terlihat lebih buruk dari saat saya belajar desain web pada tahun 1999 dulu, bahkan terkesan dibuat oleh orang yang baru belajar HTML dari YouTube.
Memiliki dan menerapkan sistem desain berarti menjamin standar kualitasnya, terlepas dari siapa pun yang kepalanya.
Selain faktor kualitas, memiliki sistem desain merupakan sebuah kemajuan besar karena memprioritaskan warganya (dan pengunjung lain pada umumnya).
Standar kegunaan
Perlu diingat bahwa masyarakat lebih peduli terhadap hak dan kewajibannya, bukan foto siapa yang dipajang di dalam situs web pemerintahan. Oleh karena itu, hak dan kewajiban ini harusnya menjadi informasi utama dari sebuah situs web pemerintahan. Akses terhadap informasi ini harus dipermudah sehingga situs webnya menjadi berguna karena sesuai dengan kebutuhan pengunjungnya.
Standar aksesibilitas
Salah satu kesalahpahaman yang berlaku adalah aksesibilitas hanya merupakan tanggung jawab desainer saja, alias hanya masalah tampilan tata letak saja. Kebanyakan hanya membahas hal-hal yang bersifat permukaan saja seperti warnanya kurang kontras, teksnya kurang besar, dan sebagainya.
Aksesibilitas tidak hanya masalah tampilan saja, tapi juga kode yang membentuknya. Hal ini karena tidak semua orang memiliki anugerah untuk bisa menyerap informasi menggunakan matanya, ada juga yang harus menggunakan alat bantu seperti screen reader. Alat bantu ini bergantung sepenuhnya terhadap kode-kode yang membentuk informasi di sebuah laman situs web atau aplikasi.
Ini adalah contoh kesalahan paling umum:
<div class="card">
<div class="card-image">
<img src="image.jpg"></div>
<div class="card-headline">
Ini adalah headline
</div>
<div class="card-subheadline">
Ini adalah sub-headline
</div>
<div class="card-excerpt">
Ini adalah excerpt alias potongan teks dari artikel.
</div>
<div class="card-time">
20 April 2019
</div>
</div>Kode di atas, setelah diberikan CSS yang sesuai, bisa membentuk tampilan seperti ini.
Lumayan kan? Tidak juga. Bagi alat bantu seperti screen reader, tampilan visual ini tidak ada gunanya. Mereka akan memperlakukan tiap elemen dengan sama karena tidak ada penekanan makna (semantika) melalui kodenya.
Agar screen reader bisa mengetahui informasi mana yang lebih penting (hierarki), maka kodenya harus sesuai dengan semantika.
Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation.
Jennifer Kyrnin
Kode di atas bisa diperbaiki menjadi seperti ini:
<article class="card">
<img src="image.jpg" alt="Alt text yang mendeskripsikan gambar">
<h1>Ini adalah headline</h1>
<h2>Ini adalah sub-headline</h2>
<p>Ini adalah excerpt alias potongan teks dari artikel.</p>
<time datetime="2019-04-20 04:20">20 April 2019</time>
</article>Dengan menggunakan semantika seperti ini, maka screen reader bisa mengetahui informasi mana yang lebih penting dan bagaimana menyuguhkannya kepada penggunanya.
Penghematan
Awalnya akan terlihat sangat boros sekali karena semua situs web pemerintah, dari tingkat pusat hingga desa, harus dirombak akibat pemberlakuan sistem desain. Setelahnya saya rasa lebih murah karena hanya perlu mengawasi dan meningkatkan kualitasnya.
Ada presiden baru? Gubernur baru? Walikota baru? Lurah baru? Camat baru? Kades baru? Tidak perlu membuat situs web baru.
Butuh membuat situs web baru? Ada sistem desain yang menjamin kualitas maupun mempercepat waktu pengerjaannya, baik dalam hal perancangan maupun pengembangannya.
Kapankah pemerintah Indonesia bisa memiliki sistem desain sendiri?
Jawaban positif: Tidak tahu.
Jawaban negatif: Lah situs webnya saja seperti sampah semua.
Kedua jawaban saya di atas tidak akan ada gunanya karena hanya ngomel saja, jadi saat memiliki waktu senggang, saya suka mengarahkan keahlian saya agar lebih berguna.
Saya mencoba membuat sistem desain untuk pemerintah yang saya namakan Radikal (masih berupa niat, belum ada isinya). Nama Radikal saya pilih karena artinya.
Saya lalu mengumpulkan banyak referensi mengenai kegunaan dan aksesibilitas, panduan sistem desain, hingga penerapan sistem desain di situs web pemerintahan lainnya. Saya juga melihat beberapa desain sistem yang sudah dirilis ke publik seperti yang ada di Design Systems Repo, Website Style Guide Resources, atau Design Systems / Directory & Good Reads.
—
Setelah menyelami berbagai referensi di atas, ternyata membuat sistem desain sangat rumit sekali. Banyak hal yang perlu dipertimbangkan dan tidak mungkin dilakukan sendirian. Saya saja masih mentok di bagian warna, dan ke depannya saya yakin sistem desain karya lone wolf ini tidak mungkin bisa diterapkan karena berbagai hal.
Coba bandingkan dengan sistem desain milik IBM, Carbon Design System. Dari repo Github-nya saja ada 13 orang yang mengerjakannya. Ini belum termasuk non-developer yang membuat file Sketch-nya ataupun grup Slack khusus yang ada 6 ribuan orang di dalamnya. Sistem desainnya pun sudah diterapkan di berbagai proyek sehingga menghasilkan feedback yang dapat digunakan untuk memperbaiki sistemnya, sehingga sistem desainnya benar-benar berguna.
Hasilnya? Sebuah kolaborasi yang cukup komprehensif:
Membandingkan dengan sistem desain IBM membuat saya ciut. Akhirnya saya mencoba dari tingkat yang lebih rendah: redesain situs web yang sudah ada, menulisnya di Quora dan blog saya, menunggu feedback dari orang-orang, lalu perlahan-lahan merumuskan sistem desainnya (untuk iseng-iseng tentunya, kalau dibayar akan membuat yang serius).
Saya memilih situs web Pemprov DKI Jakarta karena buruk sekali.
Saya mencoba menerapkan prinsip-prinsip yang ada di berbagai sistem desain dan mencoba mengubah tampilan di atas menjadi seperti ini:
Saya sedang mempersiapkan tulisan di blog saya untuk membahas secara lengkap mengenai redesain ini. Sambil menunggunya, silakan disimak perbandingan keduanya:
Doakan pak Anies Baswedan bisa melihat gambar di atas ya, siapa tahu nanti Pemprov DKI Jakarta berniat menjadi pelopor sistem desain di Indonesia.
Catatan: Ini adalah salinan jawaban saya di Quora. Saya akan menulis ulang jawaban yang saya suka di Quora ke dalam blog saya.
2 people recommended this post
